From 1a8393b8cc6a50b915e28e722229457b07af83fd Mon Sep 17 00:00:00 2001
From: Abraham Preciado Morales <apreciado@esri.com>
Date: Fri, 12 Jul 2024 10:18:05 -0700
Subject: [PATCH] fix(tile): center align contentTop and contentBottom slots
 when alignment prop equals "center" (#9732)

**Related Issue:**
[#9540](https://github.com/Esri/calcite-design-system/issues/9540)

## Summary
This updates the `tile` component to center align `content-top` and
`content-bottom` slots when the `alignment` prop is equal to `"center"`
---
 .../src/components/tile/tile.scss             | 12 +--
 .../src/components/tile/tile.stories.ts       | 78 +++++++++++++++++++
 .../calcite-components/src/demos/tile.html    | 78 +++++++++++++++++++
 3 files changed, 163 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index bfc959a7290..bf2b88d339a 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -42,7 +42,7 @@
       z-index: var(--calcite-z-index);
     }
     &:focus {
-      box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
       z-index: var(--calcite-z-index-sticky);
     }
   }
@@ -107,7 +107,9 @@
     text-align: center;
   }
   slot[name="content-start"]::slotted(*),
-  slot[name="content-end"]::slotted(*) {
+  slot[name="content-end"]::slotted(*),
+  slot[name="content-top"]::slotted(*),
+  slot[name="content-bottom"]::slotted(*) {
     align-self: center;
   }
 }
@@ -185,7 +187,7 @@
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected:focus::before {
     block-size: 100%;
-    box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
     content: "";
     display: block;
     inline-size: 100%;
@@ -197,13 +199,13 @@
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    box-shadow: inset 0px -4px 0px 0px var(--calcite-color-brand);
+    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
   }
 }
 
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected {
-    box-shadow: inset 4px 0px 0px 0px var(--calcite-color-brand);
+    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
   }
 }
 
diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
index f8cc31fb3e9..a883d9b0bba 100644
--- a/packages/calcite-components/src/components/tile/tile.stories.ts
+++ b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -733,6 +733,84 @@ export const allVariants = (): string => html`
     </div>
   </div>
 
+  <!-- content-top slot centered -->
+  <div class="parent">
+    <div class="child right-aligned-text">content-top slot centered</div>
+
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="s"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-top" scale="s">New</calcite-chip>
+      </calcite-tile>
+    </div>
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="m"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-top">New</calcite-chip>
+      </calcite-tile>
+    </div>
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="l"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-top" scale="l">New</calcite-chip>
+      </calcite-tile>
+    </div>
+  </div>
+
+  <!-- content-bottom slot centered-->
+  <div class="parent">
+    <div class="child right-aligned-text">content-bottom slot centered</div>
+
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="s"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-bottom" scale="s">New</calcite-chip>
+      </calcite-tile>
+    </div>
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="m"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-bottom">New</calcite-chip>
+      </calcite-tile>
+    </div>
+    <div class="child">
+      <calcite-tile
+        alignment="center"
+        description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+        heading="Tile title lorem ipsum"
+        icon="layers"
+        scale="l"
+      >
+        <calcite-chip class="new" kind="brand" slot="content-bottom" scale="l">New</calcite-chip>
+      </calcite-tile>
+    </div>
+  </div>
+
   <!-- link centered -->
   <div class="parent">
     <div class="child right-aligned-text">link centered</div>
diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html
index af2fb2c7c92..79b66da161d 100644
--- a/packages/calcite-components/src/demos/tile.html
+++ b/packages/calcite-components/src/demos/tile.html
@@ -729,6 +729,84 @@
         </div>
       </div>
 
+      <!-- content-top slot centered -->
+      <div class="parent">
+        <div class="child right-aligned-text">content-top slot centered</div>
+
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="s"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-top" scale="s">New</calcite-chip>
+          </calcite-tile>
+        </div>
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="m"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-top">New</calcite-chip>
+          </calcite-tile>
+        </div>
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="l"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-top" scale="l">New</calcite-chip>
+          </calcite-tile>
+        </div>
+      </div>
+
+      <!-- content-bottom slot centered -->
+      <div class="parent">
+        <div class="child right-aligned-text">content-bottom slot centered</div>
+
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="s"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-bottom" scale="s">New</calcite-chip>
+          </calcite-tile>
+        </div>
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="m"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-bottom">New</calcite-chip>
+          </calcite-tile>
+        </div>
+        <div class="child">
+          <calcite-tile
+            alignment="center"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+            heading="Tile title lorem ipsum"
+            icon="layers"
+            scale="l"
+          >
+            <calcite-chip class="new" kind="brand" slot="content-bottom" scale="l">New</calcite-chip>
+          </calcite-tile>
+        </div>
+      </div>
+
       <!-- link centered -->
       <div class="parent">
         <div class="child right-aligned-text">link centered</div>