fix(breadcrumb): ensure alignement with empty text (#65)

ovh · Jun 8, 2023 · d3a91e3 · d3a91e3
1 parent be51df5
commit d3a91e3
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/...tencil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.tsx b/...tencil/components/breadcrumb/src/components/osds-breadcrumb-item/osds-breadcrumb-item.tsx
@@ -72,7 +72,8 @@ export class OsdsBreadcrumbItem implements OdsBreadcrumbItem<OdsStencilMethods<O
                 </osds-icon>
               </span>
             }
-            {this.label}
+            {/* wbr enfore baseline alignement if there are no text */}
+            {this.label || <wbr />}
           </osds-link>
         </div>
 

diff --git a/packages/stencil/components/link/src/components/osds-link/osds-link.scss b/packages/stencil/components/link/src/components/osds-link/osds-link.scss
@@ -26,7 +26,8 @@
 
 ::slotted([slot="start"]),
 ::slotted([slot="end"]) {
-  vertical-align: top;
+  display: inline-flex;
+  align-self: center;
 }
 
 :host(:not([href])),
@@ -68,11 +69,6 @@
   }
 }
 
-::slotted([slot="start"]), ::slotted([slot="end"]) {
-  display: inline-flex;
-  align-self: center;
-}
-
 // apply the theme template for the component
 @include ods-theme-component() {
   @include osds-link-theme-color();