fix(tile): float footer arrow when footer is empty

RedHat-UX · Dec 18, 2024 · 718559a · 718559a
1 parent 518a2dc
commit 718559a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/elements/rh-tile/demo/without-footer-content.html b/elements/rh-tile/demo/without-footer-content.html
@@ -0,0 +1,33 @@
+<section class="grid">
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+  <rh-tile>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque tenetur quae omnis beatae, distinctio natus quo hic est iste tempora vitae nesciunt, minus totam itaque modi! Laborum obcaecati soluta sapiente?
+  </rh-tile>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--rh-space-xl);
+    padding: var(--rh-space-xl);
+  }
+</style>
diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css
@@ -224,6 +224,12 @@
   justify-content: space-between;
   align-items: flex-end;
   margin-block-start: auto;
+
+  &.empty {
+    position: absolute;
+    inset-block-end: var(--_padding);
+    inset-inline-end: var(--_padding);
+  }
 }
 
 #input-outer {

diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts
@@ -231,7 +231,7 @@ export class RhTile extends LitElement {
               </div>
             </div>
             <slot id="body"></slot>
-            <div id="footer">
+            <div id="footer" class="${classMap({ empty: this.#slots.isEmpty('footer') })}">
               <slot id="footer-text" name="footer"></slot>${this.#renderLinkIcon()}
             </div>
           </div>