refactor(card)!: rename footer-leading and footer-trailing slots to f…

…ooter-start and footer-end (#6249)

BREAKING CHANGE: rename footer-leading and footer-trailing slots to
footer-start and footer-end

- Removed `footer-leading` and `footer-trailing` slots, use
`footer-start` and `footer-end` instead

src/05-custom-theme.stories.mdx

@@ -130,8 +130,8 @@ export const Template = () =>
               src="${placeholderImage({ width: 260, height: 160 })}"
             />
             <h3 slot="title">Selectable card</h3>
-            <calcite-link slot="footer-leading">Lead füt</calcite-link>
-            <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+            <calcite-link slot="footer-start">Lead füt</calcite-link>
+            <calcite-link slot="footer-end">Trail füt</calcite-link>
           </calcite-card>
         </div>
         <div>

src/components/card/card.scss

@@ -88,11 +88,11 @@
   @apply min-w-full max-w-full;
 }
 
-@include slotted("footer-leading", "*") {
+@include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
 }
-@include slotted("footer-trailing", "*") {
+@include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
 }
 
@@ -121,7 +121,7 @@
   }
 }
 
-slot[name="footer-leading"]::slotted(*),
-slot[name="footer-trailing"]::slotted(*) {
+slot[name="footer-start"]::slotted(*),
+slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }

src/components/card/card.stories.ts

@@ -68,13 +68,13 @@ const titleHtml = html`
   </span>
 `;
 
-const footerButtonHtml = html` <calcite-button slot="footer-leading" width="full">Go</calcite-button> `;
+const footerButtonHtml = html` <calcite-button slot="footer-start" width="full">Go</calcite-button> `;
 
-const footerLeadingTextHtml = html`<span slot="footer-leading">Nov 25, 2018</span>`;
+const footerStartTextHtml = html`<span slot="footer-start">Nov 25, 2018</span>`;
 
 const footerLinksHtml = html`
-  <calcite-link class="calcite-mode-dark" slot="footer-leading">Lead footer</calcite-link>
-  <calcite-link class="calcite-mode-dark" slot="footer-trailing">Trail footer</calcite-link>
+  <calcite-link class="calcite-mode-dark" slot="footer-start">Lead footer</calcite-link>
+  <calcite-link class="calcite-mode-dark" slot="footer-end">Trail footer</calcite-link>
 `;
 
 const thumbnailHtml = html`<img
@@ -87,8 +87,8 @@ const thumbnailHtml = html`<img
   style="width: 380px;"
 /> `;
 
-const footerTrailingButtonsHtml = html`
-  <div slot="footer-trailing">
+const footerEndButtonsHtml = html`
+  <div slot="footer-end">
     <calcite-button id="card-icon-test-6" scale="s" appearance="transparent" kind="neutral" icon-start="circle">
     </calcite-button>
     <calcite-button id="card-icon-test-7" scale="s" appearance="transparent" kind="neutral" icon-start="circle">
@@ -118,7 +118,7 @@ export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html`
     ${create(
       "calcite-card",
       createAttributes(),
-      html`${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}`
+      html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}`
     )}
   </div>
   ${tooltipHtml}
@@ -147,13 +147,13 @@ export const thumbnail = (): string => html`
           View Count: 0
         </div>
         <calcite-button
-          slot="footer-leading"
+          slot="footer-start"
           kind="neutral"
           scale="s"
           id="card-icon-test-1"
           icon-start="circle"
         ></calcite-button>
-        <div slot="footer-trailing">
+        <div slot="footer-end">
           <calcite-button scale="s" kind="neutral" id="card-icon-test-2" icon-start="circle"></calcite-button>
           <calcite-button scale="s" kind="neutral" id="card-icon-test-3" icon-start="circle"></calcite-button>
           <calcite-dropdown type="hover">
@@ -204,7 +204,7 @@ export const thumbnailRounded = (): string => html`
         View Count: 0
       </div>
       <calcite-button
-        slot="footer-leading"
+        slot="footer-start"
         kind="neutral"
         scale="s"
         id="card-icon-test-1"
@@ -231,7 +231,7 @@ export const headerDoesNotOverlapWithCheckbox_TestOnly = (): string => html`
 
 export const darkModeRTL_TestOnly = (): string => html`
   <div dir="rtl" style="width:260px;">
-    <calcite-card>${thumbnailHtml}${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}</calcite-card>
+    <calcite-card>${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}</calcite-card>
   </div>
 `;
 

src/components/card/card.tsx

@@ -37,8 +37,8 @@ import { CardMessages } from "./assets/card/t9n";
  * @slot thumbnail - A slot for adding a thumbnail to the component.
  * @slot title - A slot for adding a title.
  * @slot subtitle - A slot for adding a subtitle or short summary.
- * @slot footer-leading - A slot for adding a leading footer.
- * @slot footer-trailing - A slot for adding a trailing footer.
+ * @slot footer-start - A slot for adding a leading footer.
+ * @slot footer-end - A slot for adding a trailing footer.
  */
 
 @Component({
@@ -223,14 +223,14 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
 
   private renderFooter(): VNode {
     const { el } = this;
-    const leadingFooter = getSlotted(el, SLOTS.footerLeading);
-    const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
+    const startFooter = getSlotted(el, SLOTS.footerStart);
+    const endFooter = getSlotted(el, SLOTS.footerEnd);
 
-    const hasFooter = leadingFooter || trailingFooter;
+    const hasFooter = startFooter || endFooter;
     return hasFooter ? (
       <footer class={CSS.footer}>
-        <slot name={SLOTS.footerLeading} />
-        <slot name={SLOTS.footerTrailing} />
+        <slot name={SLOTS.footerStart} />
+        <slot name={SLOTS.footerEnd} />
       </footer>
     ) : null;
   }

src/components/card/readme.md

@@ -35,14 +35,14 @@
 
 ## Slots
 
-| Slot                | Description                                      |
-| ------------------- | ------------------------------------------------ |
-|                     | A slot for adding subheader/description content. |
-| `"footer-leading"`  | A slot for adding a leading footer.              |
-| `"footer-trailing"` | A slot for adding a trailing footer.             |
-| `"subtitle"`        | A slot for adding a subtitle or short summary.   |
-| `"thumbnail"`       | A slot for adding a thumbnail to the component.  |
-| `"title"`           | A slot for adding a title.                       |
+| Slot             | Description                                      |
+| ---------------- | ------------------------------------------------ |
+|                  | A slot for adding subheader/description content. |
+| `"footer-start"` | A slot for adding a leading footer.              |
+| `"footer-end"`   | A slot for adding a trailing footer.             |
+| `"subtitle"`     | A slot for adding a subtitle or short summary.   |
+| `"thumbnail"`    | A slot for adding a thumbnail to the component.  |
+| `"title"`        | A slot for adding a title.                       |
 
 ## Dependencies
 

src/components/card/resources.ts

@@ -12,6 +12,6 @@ export const SLOTS = {
   thumbnail: "thumbnail",
   title: "title",
   subtitle: "subtitle",
-  footerLeading: "footer-leading",
-  footerTrailing: "footer-trailing"
+  footerStart: "footer-start",
+  footerEnd: "footer-end"
 };

src/demos/card.html

@@ -94,13 +94,13 @@ <h3 slot="title">Portland Businesses</h3>
             </div>
             <calcite-button
               type="button"
-              slot="footer-leading"
+              slot="footer-start"
               kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
-            <div slot="footer-trailing">
+            <div slot="footer-end">
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
@@ -139,8 +139,8 @@ <h3 slot="title">Portland Businesses</h3>
             <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
             <h3 slot="title">My great Workforce project that might wrap two lines</h3>
             <span slot="subtitle">Johnathan Smith</span>
-            <span slot="footer-leading">Nov 25, 2018</span>
-            <div slot="footer-trailing">
+            <span slot="footer-start">Nov 25, 2018</span>
+            <div slot="footer-end">
               <calcite-button
                 id="card-icon-test-6"
                 scale="s"
@@ -171,8 +171,8 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
             <span slot="subtitle"
               >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
             >
-            <calcite-link slot="footer-leading">Lead füt</calcite-link>
-            <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+            <calcite-link slot="footer-start">Lead füt</calcite-link>
+            <calcite-link slot="footer-end">Trail füt</calcite-link>
           </calcite-card>
         </div>
 
@@ -186,8 +186,8 @@ <h3 slot="title">Translated select and deselect example</h3>
             <span slot="subtitle"
               >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
             >
-            <calcite-link slot="footer-leading">Lead füt</calcite-link>
-            <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+            <calcite-link slot="footer-start">Lead füt</calcite-link>
+            <calcite-link slot="footer-end">Trail füt</calcite-link>
           </calcite-card>
         </div>
       </div>
@@ -207,8 +207,8 @@ <h3 slot="title">Loading example</h3>
             <span slot="subtitle"
               >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
             >
-            <calcite-link slot="footer-leading">Lead füt</calcite-link>
-            <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+            <calcite-link slot="footer-start">Lead füt</calcite-link>
+            <calcite-link slot="footer-end">Trail füt</calcite-link>
           </calcite-card>
         </div>
 
@@ -218,7 +218,7 @@ <h3 slot="title">Loading example</h3>
             <img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
             <h3 slot="title">Untitled experience</h3>
             <span slot="subtitle">Subtext</span>
-            <calcite-button slot="footer-leading" width="full">Go</calcite-button>
+            <calcite-button slot="footer-start" width="full">Go</calcite-button>
           </calcite-card>
         </div>
       </div>
@@ -247,13 +247,13 @@ <h3 slot="title">Portland Businesses</h3>
             </div>
             <calcite-button
               type="button"
-              slot="footer-leading"
+              slot="footer-start"
               kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
-            <div slot="footer-trailing">
+            <div slot="footer-end">
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
@@ -289,13 +289,13 @@ <h3 slot="title">Portland Businesses</h3>
             </div>
             <calcite-button
               type="button"
-              slot="footer-leading"
+              slot="footer-start"
               kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
-            <div slot="footer-trailing">
+            <div slot="footer-end">
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
@@ -333,13 +333,13 @@ <h3 slot="title">Portland Businesses</h3>
             </div>
             <calcite-button
               type="button"
-              slot="footer-leading"
+              slot="footer-start"
               kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
-            <div slot="footer-trailing">
+            <div slot="footer-end">
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
@@ -375,13 +375,13 @@ <h3 slot="title">Portland Businesses</h3>
             </div>
             <calcite-button
               type="button"
-              slot="footer-leading"
+              slot="footer-start"
               kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
-            <div slot="footer-trailing">
+            <div slot="footer-end">
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
               <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">

src/demos/chip.html

@@ -990,14 +990,13 @@ <h1 style="margin: 0 auto; text-align: center">Chip</h1>
               <img slot="thumbnail" alt="Sample image alt" src="https://placeimg.com/280/200/nature" />
               <h3 slot="title">My great Workforce project that might wrap two lines</h3>
               <span slot="subtitle">Johnathan Smith</span>
-              <calcite-chip-group class="themed-children-card" scale="s" slot="footer-leading" style="flex-flow: row">
+              <calcite-chip-group class="themed-children-card" scale="s" slot="footer-start" style="flex-flow: row">
                 <calcite-chip id="badge-1" value="calcite chip" icon="check-circle" scale="s"> </calcite-chip>
                 <calcite-chip id="badge-2" value="calcite chip" icon="globe" scale="s"> </calcite-chip>
                 <calcite-chip id="badge-3" value="calcite chip" icon="security" scale="s"> </calcite-chip>
               </calcite-chip-group>
-              <div slot="footer-trailing" style="display: flex; align-items: center">
-                <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s" slot="footer-trailing">
-                </calcite-chip>
+              <div slot="footer-end" style="display: flex; align-items: center">
+                <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s" slot="footer-end"> </calcite-chip>
                 <calcite-action scale="s" icon="ellipsis" style="margin-inline-start: 4px"></calcite-action>
               </div>
             </calcite-card>
@@ -1025,15 +1024,15 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
               />
               <h3 slot="title">My great Workforce project that might wrap two lines</h3>
               <span slot="subtitle">Johnathan Smith</span>
-              <calcite-chip-group class="themed-children-card" scale="s" slot="footer-leading" style="flex-flow: row">
+              <calcite-chip-group class="themed-children-card" scale="s" slot="footer-start" style="flex-flow: row">
                 <calcite-chip id="badge-1" value="calcite chip" icon="check-circle" scale="s">
                   authoritative</calcite-chip
                 >
                 <calcite-chip id="badge-2" value="calcite chip" icon="globe" scale="s">authoritative </calcite-chip>
                 <calcite-chip id="badge-3" value="calcite chip" icon="security" scale="s"> authoritative</calcite-chip>
               </calcite-chip-group>
-              <div slot="footer-trailing" style="display: flex; align-items: center">
-                <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s" slot="footer-trailing"
+              <div slot="footer-end" style="display: flex; align-items: center">
+                <calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s" slot="footer-end"
                   >authoritative
                 </calcite-chip>
                 <calcite-action scale="s" icon="ellipsis" style="margin-inline-start: 4px"></calcite-action>

src/demos/modal.html

@@ -955,8 +955,8 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                     >A great example of a study description that might wrap to a line or two, but isn't overly
                     verbose.</span
                   >
-                  <calcite-link slot="footer-leading">Lead füt</calcite-link>
-                  <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+                  <calcite-link slot="footer-start">Lead füt</calcite-link>
+                  <calcite-link slot="footer-end">Trail füt</calcite-link>
                 </calcite-card>
                 <calcite-card selected selectable>
                   <img slot="thumbnail" src="https://placem.at/places?w=260&h=160&txt=0" />
@@ -966,8 +966,8 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                     >A great example of a study description that might wrap to a line or two, but isn't overly
                     verbose.</span
                   >
-                  <calcite-link slot="footer-leading">Lead füt</calcite-link>
-                  <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+                  <calcite-link slot="footer-start">Lead füt</calcite-link>
+                  <calcite-link slot="footer-end">Trail füt</calcite-link>
                 </calcite-card>
                 <calcite-card selected selectable>
                   <img slot="thumbnail" src="https://placem.at/places?w=260&h=160&txt=0" />
@@ -977,8 +977,8 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
                     >A great example of a study description that might wrap to a line or two, but isn't overly
                     verbose.</span
                   >
-                  <calcite-link slot="footer-leading">Lead füt</calcite-link>
-                  <calcite-link slot="footer-trailing">Trail füt</calcite-link>
+                  <calcite-link slot="footer-start">Lead füt</calcite-link>
+                  <calcite-link slot="footer-end">Trail füt</calcite-link>
                 </calcite-card>
               </div>
             </div>