Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(card)!: rename footer-leading and footer-trailing slots to footer-start and footer-end #6249

Merged
merged 1 commit into from
Jan 9, 2023
Merged

refactor(card)!: rename footer-leading and footer-trailing slots to footer-start and footer-end #6249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/05-custom-theme.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
22 changes: 11 additions & 11 deletions src/components/card/card.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -118,7 +118,7 @@ export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html`
${create(
"calcite-card",
createAttributes(),
html`${titleHtml}${footerLeadingTextHtml}${footerTrailingButtonsHtml}`
html`${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}`
)}
</div>
${tooltipHtml}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand All @@ -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>
`;

Expand Down
14 changes: 7 additions & 7 deletions src/components/card/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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;
}
Expand Down
16 changes: 8 additions & 8 deletions src/components/card/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions src/components/card/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
};
38 changes: 19 additions & 19 deletions src/demos/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
13 changes: 6 additions & 7 deletions src/demos/chip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/demos/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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" />
Expand All @@ -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>
Expand Down