diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx index b39991f3967..5b12ad1abfb 100644 --- a/src/05-custom-theme.stories.mdx +++ b/src/05-custom-theme.stories.mdx @@ -130,8 +130,8 @@ export const Template = () => src="${placeholderImage({ width: 260, height: 160 })}" />

Selectable card

- Lead füt - Trail füt + Lead füt + Trail füt
diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 41944c0c78c..b608da04a31 100644 --- a/src/components/card/card.scss +++ b/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; } diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index 7e346c9553f..165345e7bcd 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -68,13 +68,13 @@ const titleHtml = html` `; -const footerButtonHtml = html` Go `; +const footerButtonHtml = html` Go `; -const footerLeadingTextHtml = html`Nov 25, 2018`; +const footerStartTextHtml = html`Nov 25, 2018`; const footerLinksHtml = html` - Lead footer - Trail footer + Lead footer + Trail footer `; const thumbnailHtml = html` `; -const footerTrailingButtonsHtml = html` -
+const footerEndButtonsHtml = html` +
@@ -118,7 +118,7 @@ export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html` ${create( "calcite-card", createAttributes(), - html`${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}` + html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}` )}
${tooltipHtml} @@ -147,13 +147,13 @@ export const thumbnail = (): string => html` View Count: 0
-
+
@@ -204,7 +204,7 @@ export const thumbnailRounded = (): string => html` View Count: 0
html` export const darkModeRTL_TestOnly = (): string => html`
- ${thumbnailHtml}${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml} + ${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}
`; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 2d872a8fc50..4b0366abd44 100644 --- a/src/components/card/card.tsx +++ b/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 ? (
- - + +
) : null; } diff --git a/src/components/card/readme.md b/src/components/card/readme.md index 25655739a18..6678e9040bc 100644 --- a/src/components/card/readme.md +++ b/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 diff --git a/src/components/card/resources.ts b/src/components/card/resources.ts index aa893585e07..c2e49c35880 100644 --- a/src/components/card/resources.ts +++ b/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" }; diff --git a/src/demos/card.html b/src/demos/card.html index ff3215472ee..69618d0ecc0 100644 --- a/src/demos/card.html +++ b/src/demos/card.html @@ -94,13 +94,13 @@

Portland Businesses

-
+
@@ -139,8 +139,8 @@

Portland Businesses

Sample image alt

My great Workforce project that might wrap two lines

Johnathan Smith - Nov 25, 2018 -
+ Nov 25, 2018 +
ArcGIS Online Sign In and Sign Up A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt
@@ -186,8 +186,8 @@

Translated select and deselect example

A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt
@@ -207,8 +207,8 @@

Loading example

A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt
@@ -218,7 +218,7 @@

Loading example

Sample image alt

Untitled experience

Subtext - Go + Go
@@ -247,13 +247,13 @@

Portland Businesses

-
+
@@ -289,13 +289,13 @@

Portland Businesses

-
+
@@ -333,13 +333,13 @@

Portland Businesses

-
+
@@ -375,13 +375,13 @@

Portland Businesses

-
+
diff --git a/src/demos/chip.html b/src/demos/chip.html index 5b60518f04d..9b44589241e 100644 --- a/src/demos/chip.html +++ b/src/demos/chip.html @@ -990,14 +990,13 @@

Chip

Sample image alt

My great Workforce project that might wrap two lines

Johnathan Smith - + -
- - +
+
@@ -1025,15 +1024,15 @@

My great Workforce project that might wrap two lines

/>

My great Workforce project that might wrap two lines

Johnathan Smith - + authoritative authoritative authoritative -
- + authoritative diff --git a/src/demos/modal.html b/src/demos/modal.html index c2ceb1fe598..69e2fc8d9a9 100644 --- a/src/demos/modal.html +++ b/src/demos/modal.html @@ -955,8 +955,8 @@

ArcGIS Online Sign In and Sign Up

>A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt @@ -966,8 +966,8 @@

ArcGIS Online Sign In and Sign Up

>A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt @@ -977,8 +977,8 @@

ArcGIS Online Sign In and Sign Up

>A great example of a study description that might wrap to a line or two, but isn't overly verbose. - Lead füt - Trail füt + Lead füt + Trail füt