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

feat(card): Add component tokens #8605

Merged
merged 7 commits into from
Feb 13, 2024
Merged

feat(card): Add component tokens #8605

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
065427b
feat(card): Add component tokens
macandcheese Jan 13, 2024
a4fbcbb
Clean up
macandcheese Jan 17, 2024
c3e2606
Merge branch 'epic/7180-component-tokens' into macandcheese/token-upd…
macandcheese Jan 26, 2024
74285c0
Merge branch 'epic/7180-component-tokens' into macandcheese/token-upd…
macandcheese Jan 29, 2024
a341bcb
Clean up
macandcheese Feb 9, 2024
f4e6657
Clean up
macandcheese Feb 9, 2024
0e52308
Merge branch 'epic/7180-component-tokens' into macandcheese/token-upd…
macandcheese Feb 12, 2024
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
97 changes: 54 additions & 43 deletions packages/calcite-components/src/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,93 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-card-background-color: Specifies the background color of the component.
* @prop --calcite-card-border-color: Specifies the border color of the component.
* @prop --calcite-card-box-shadow: Specifies the box shadow of the component.
* @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-card-subtitle-color: Specifies the color of the component's `"subtitle"` slot.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Places we accept both a prop and a slot, it could make sense to have this. I could also see card having props in the future for title / subtitle, keeping the slot for more advanced cases, so maybe these are fine to leave.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should not create tokens for slotted elements.

* @prop --calcite-card-title-color: Specifies the color of the component's `"title"` slot.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
*
*/

:host {
@apply block max-w-full;
& .calcite-card-container {
@apply bg-foreground-1
border-color-2
text-color-3
relative
}

.calcite-card-container {
@apply relative
flex
h-full
flex-col
justify-between
border
border-solid
shadow-none
duration-150
ease-in-out
overflow-hidden;
border-radius: var(--calcite-border-radius-base);
}
border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));
border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));
background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));
box-shadow: var(--calcite-card-box-shadow, var(--calcite-shadow-none));
}

.container {
@apply relative flex flex-auto flex-col;
}

:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container) {
@apply pointer-events-none opacity-0;
@apply pointer-events-none;
opacity: $calcite-opacity-0;
}

:host([loading]) .calcite-card-loader-container {
@apply absolute
inset-0
flex
items-center;
}

.header,
.footer {
@apply flex px-3 pt-3 pb-1;
@apply absolute inset-0 flex items-center;
}

.header {
@apply flex-col;
@apply flex flex-col;
padding-inline: var(--calcite-spacing-md);
padding-block-start: var(--calcite-spacing-md);
padding-block-end: var(--calcite-spacing-xxs);
}

.footer {
@apply mt-auto flex-row content-between
justify-between
px-3
pt-1
pb-3;
@apply flex mt-auto flex-row content-between justify-between;
padding-inline: var(--calcite-spacing-md);
padding-block-start: var(--calcite-spacing-xxs);
padding-block-end: var(--calcite-spacing-md);
}

.card-content {
@apply text-color-3
text-n2-wrap
p-3;
@apply text-n2-wrap;
color: var(--calcite-color-text-3);
padding: var(--calcite-spacing-md);
}

:host([selected]) .calcite-card-container {
@apply border-color-brand;
--calcite-card-border-color: var(--calcite-color-brand);
}

// slotted content
@include slotted("title", "*") {
@apply text-color-1
text-n1-wrap
m-0
font-medium;
@apply text-n1-wrap;
margin: 0;
font-weight: var(--calcite-font-weight-medium);
color: var(--calcite-card-title-color, var(--calcite-color-text-1));
}

:host([selectable]) {
.header {
// prevents overlap with checkbox (default header padding + no-overlap spacing)
padding-inline-end: theme("spacing.8");
padding-inline-end: var(--calcite-spacing-xxxl);
}
}

@include slotted("subtitle", "*") {
@apply text-color-2
text-n2-wrap
m-0
mt-2
font-normal;
@apply text-n2-wrap font-normal;
margin: 0;
margin-block-start: var(--calcite-spacing-sm);
color: var(--calcite-card-subtitle-color, var(--calcite-color-text-2));
}

@include slotted("thumbnail", "img") {
Expand All @@ -91,15 +97,20 @@
@include slotted("footer-start", "*") {
@apply text-n2-wrap self-center;
margin-inline-end: auto;
color: var(--calcite-color-text-3);
}

@include slotted("footer-end", "*") {
@apply text-n2-wrap self-center;
color: var(--calcite-color-text-3);
}

.checkbox-wrapper {
@apply absolute m-0 p-0;
inset-block-start: theme("spacing.2");
inset-inline-end: theme("spacing.2");
@apply absolute;
inset-block-start: var(--calcite-spacing-sm);
inset-inline-end: var(--calcite-spacing-sm);
margin: 0;
padding: 0;
}

.thumbnail-wrapper {
Expand Down
34 changes: 29 additions & 5 deletions packages/calcite-components/src/components/card/card.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
};

const titleHtml = html`
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<span slot="title">ArcGIS Online: Gallery and Organization pages</span>
<span slot="subtitle">
A great example of a study description that might wrap to a line or two, but isn't overly verbose.
</span>
Expand Down Expand Up @@ -129,7 +129,7 @@ export const thumbnail = (): string => html`
createAttributes(),
html`
${thumbnailHtml}
<h3 slot="title">Portland Businesses</h3>
<span slot="title">Portland Businesses</span>
<span slot="subtitle"
>by
<calcite-link href="">example_user</calcite-link>
Expand Down Expand Up @@ -181,12 +181,12 @@ export const thumbnailRounded = (): string => html`
<div id="card-container" style="width:260px;">
<style>
calcite-card {
--calcite-border-radius-base: 12px;
--calcite-card-corner-radius: 12px;
}
</style>
<calcite-card>
${thumbnailHtml}
<h3 slot="title">Portland Businesses</h3>
<span slot="title">Portland Businesses</span>
<span slot="subtitle"
>by
<calcite-link href="">example_user</calcite-link>
Expand All @@ -211,7 +211,7 @@ export const thumbnailRounded = (): string => html`

export const headerDoesNotOverlapWithCheckbox_TestOnly = (): string => html`
<calcite-card selectable style="width:260px">
<h3 slot="title">Pokem ipsum dolor sit amet Skitty Hoothoot</h3>
<span slot="title">Pokem ipsum dolor sit amet Skitty Hoothoot</span>
<span slot="subtitle"
>Pika-pi Soul Badge Zoroark Starly Spoink Diglett Rotom. Water Kyogre Hitmontop Rampardos</span
>
Expand All @@ -231,3 +231,27 @@ export const darkModeRTL_TestOnly = (): string => html`
`;

darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

export const selected_TestOnly = (): string =>
html` <calcite-card selected>
<span slot="title">ArcGIS Online: Gallery and Organization pages</span>
<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-card>`;

export const theming_TestOnly = (): string => html`
<calcite-card
style="--calcite-card-corner-radius: var(--calcite-corner-radius-round);
--calcite-card-background-color: var(--calcite-color-foreground-3);
--calcite-card-border-color: var(--calcite-color-status-success);
--calcite-card-box-shadow: var(--calcite-shadow-md);
--calcite-card-title-color: var(--calcite-color-status-success);
--calcite-card-subtitle-color: var(--calcite-color-status-danger)"
>
<span slot="title">ArcGIS Online: Gallery and Organization pages</span>
<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-card>
`;
42 changes: 23 additions & 19 deletions packages/calcite-components/src/demos/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,13 @@
padding: 0 18px;
}

.rounded {
--calcite-border-radius-base: 5px;
.themed {
--calcite-card-corner-radius: var(--calcite-corner-radius-round);
--calcite-card-background-color: var(--calcite-color-foreground-3);
--calcite-card-border-color: var(--calcite-color-status-success);
--calcite-card-box-shadow: var(--calcite-shadow-md);
--calcite-card-title-color: var(--calcite-color-status-success);
--calcite-card-subtitle-color: var(--calcite-color-status-danger);
}
</style>
<script src="_assets/head.js"></script>
Expand All @@ -45,21 +50,20 @@ <h1 style="margin: 0 auto; text-align: center">Card</h1>
**************************************************
-->
<div class="parent">
<!-- text only -->
<div class="child">
<p>No buttons, not selectable</p>
<calcite-card>
<p>Themed</p>
<calcite-card class="themed">
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</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-card>
</div>

<!-- text only, selectable, and border-radius -->
<div class="child rounded">
<p>No buttons, selectable, border-radius</p>
<calcite-card selectable>
<!-- text only -->
<div class="child">
<p>No buttons, not selectable</p>
<calcite-card>
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</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
Expand All @@ -79,7 +83,7 @@ <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<p>Card with several buttons</p>

<calcite-card>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/180" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -136,7 +140,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>Card with two buttons</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">My great Workforce project that might wrap two lines</h3>
<span slot="subtitle">Johnathan Smith</span>
<span slot="footer-start">Nov 25, 2018</span>
Expand Down Expand Up @@ -165,7 +169,7 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
<div class="child">
<p>Selectable and selected card</p>
<calcite-card selected selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
<span slot="subtitle"
Expand All @@ -180,7 +184,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
<div class="child">
<p>Deselect example</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">Translated select and deselect example</h3>
<span slot="subtitle"
Expand All @@ -201,7 +205,7 @@ <h3 slot="title">Translated select and deselect example</h3>
<div class="child">
<p>Loading</p>
<calcite-card loading>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">Loading example</h3>
<span slot="subtitle"
Expand All @@ -215,7 +219,7 @@ <h3 slot="title">Loading example</h3>
<div class="child">
<p>Submit button</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Untitled experience</h3>
<span slot="subtitle">Subtext</span>
<calcite-button slot="footer-start" width="full">Go</calcite-button>
Expand All @@ -232,7 +236,7 @@ <h3 slot="title">Untitled experience</h3>
<div class="child">
<p>thumbnail-position="block-start"</p>
<calcite-card thumbnail-position="block-start">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -274,7 +278,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="block-end"</p>
<calcite-card thumbnail-position="block-end">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -318,7 +322,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="inline-start"</p>
<calcite-card thumbnail-position="inline-start">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -360,7 +364,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="inline-end"</p>
<calcite-card thumbnail-position="inline-end">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down