fix(tile): end slot position when there is no start slot

ovh · Feb 2, 2024 · 3a25c67 · 3a25c67
1 parent 22e47ab
commit 3a25c67
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/packages/components/src/tile/src/components/osds-tile/osds-tile.scss b/packages/components/src/tile/src/components/osds-tile/osds-tile.scss
@@ -93,12 +93,16 @@
     width: var(--width);
   }
 
-  :host(&:not(&--inline)){
+  :host(&:not(&--inline):has([slot])){
     @include osds-tile-on-selected-host {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
+      display: inline-grid;
+      grid-template: "start center end" / auto 1fr auto;
       width: 100%;
     }
+
+    slot {
+      display: inline;
+    }
   }
 
   :host(&--rounded){

diff --git a/packages/components/src/tile/src/index.html b/packages/components/src/tile/src/index.html
@@ -41,6 +41,20 @@
   <span slot="end">-End</span>
 </osds-tile>
 
+<p>Slot inline</p>
+<osds-tile inline size='md'>
+  <span slot="start">Start-</span>
+  <span>tileContent</span>
+  <span slot="end">-End</span>
+</osds-tile>
+
+<p>No Start Slot</p>
+<osds-tile size='md'>
+  <span>tileContent</span>
+  <span slot="end">-End</span>
+</osds-tile>
+
+
 <p>Color</p>
 <osds-tile size='md' color='primary'>Primary</osds-tile>
 <osds-tile size='md' color='text'>Text</osds-tile>