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(tile): add design tokens #10476

Merged
merged 35 commits into from
Oct 25, 2024
Merged

feat(tile): add design tokens #10476

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
45d65d9
feat(tile): add design tokens
eriklharper Oct 2, 2024
c7c4f5e
updating storybook and demo pages for theming examples
eriklharper Oct 2, 2024
6d359d9
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 2, 2024
b8e6d03
replacing "description-text-color" with "text-color" and adding a "te…
eriklharper Oct 3, 2024
57a9261
removing --calcite-tile-text-color-hover since future patterns will r…
eriklharper Oct 3, 2024
55dd86b
injecting --calcite-tile-border-color into the tile's focus selector …
eriklharper Oct 4, 2024
6fdd1db
removing --calcite-tile-shadow because user can just set box-shadow d…
eriklharper Oct 4, 2024
aa92728
adding --calcite-tile-shadow
eriklharper Oct 8, 2024
0a90132
removing --calcite-internal-tile-shadow since it isn't used anywhere.…
eriklharper Oct 9, 2024
f8bb7a7
removing --calcite-internal-tile-outline-color in favor of --calcite-…
eriklharper Oct 9, 2024
4f05f78
getting rid of --calcite-internal-tile-border-color
eriklharper Oct 9, 2024
9718d7b
removing --calcite-internal-tile-heading-text-color and adding new --…
eriklharper Oct 9, 2024
a7a8ee7
removing --calcite-internal-tile-icon-color, updating to use current …
eriklharper Oct 10, 2024
6f49f28
removing --calcite-tile-text-color in favor of restoring --calcite-ti…
eriklharper Oct 10, 2024
a30b852
removing last internal variable, adding missing --calcite-tile-descri…
eriklharper Oct 10, 2024
1700b3e
fixing href hover border
eriklharper Oct 11, 2024
7713208
replacing --calcite-tile-selection-icon-color/hover tokens with --cal…
eriklharper Oct 11, 2024
0e98c64
correcting the assignment of selection colors to use the "hover" vari…
eriklharper Oct 11, 2024
cd6d629
adding more test coverage for uses of selection color. Fixing broken…
eriklharper Oct 11, 2024
ac7399f
Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…
eriklharper Oct 11, 2024
3abb819
removing --calcite-tile-description-text-color-hover
eriklharper Oct 21, 2024
c284028
removing --calcite-tile-heading-text-color-hover
eriklharper Oct 21, 2024
49a7e9f
removing --calcite-tile-href-icon-color-hover in favor of using --cal…
eriklharper Oct 22, 2024
a4a22c5
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 23, 2024
b4b759e
adding --calcite-tile-corner-radius
eriklharper Oct 23, 2024
4122e7c
adding accent-color-press variable, text-color variable, removing des…
eriklharper Oct 23, 2024
1e9e6c7
Merge branch 'dev' of github.com:Esri/calcite-design-system into erik…
eriklharper Oct 23, 2024
172eb2c
fixing selection-mode="none" to match visual matrix
eriklharper Oct 24, 2024
3ea5d9a
Fixing href styling behavior to match visual matrix
eriklharper Oct 24, 2024
ce1735b
Merge branch 'dev' into eriklharper/7180-tile-tokens
eriklharper Oct 24, 2024
e5a3a97
adding Kitty's revised property descriptors
eriklharper Oct 25, 2024
3e93905
updating fallback to use --calcite-corner-radius
eriklharper Oct 25, 2024
0453a37
adding --calcite-tile-link-color
eriklharper Oct 25, 2024
8baf0c7
updating doc to for link color to indicate state it applies to
eriklharper Oct 25, 2024
0c9d9aa
adding Kitty's revised tile-link-color description
eriklharper Oct 25, 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
1 change: 1 addition & 0 deletions packages/calcite-components/.stylelintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const customFunctions = [
"medium-modular-scale",
"modular-scale",
"scale-duration",
"scaleDuration",
"small-modular-scale"
];
// ⚠️ END OF AUTO-GENERATED CODE
Expand Down
78 changes: 76 additions & 2 deletions packages/calcite-components/src/components/tile/tile.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
import {
accessible,
defaults,
disabled,
focusable,
hidden,
reflects,
renders,
slots,
themed,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { isElementFocused } from "../../tests/utils";
import { SLOTS } from "./resources";
import { CSS, SLOTS } from "./resources";

describe("calcite-tile", () => {
describe("accessibility", () => {
Expand Down Expand Up @@ -211,4 +221,68 @@ describe("calcite-tile", () => {
expect(description).toBeNull();
});
});

describe("theme", () => {
describe("default", () => {
themed(
html`
<calcite-tile
heading="Tile heading lorem ipsum"
description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
icon="layers"
interactive
selected
>
</calcite-tile>
`,
{
"--calcite-tile-background-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "backgroundColor",
},
"--calcite-tile-border-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "outlineColor",
},
"--calcite-tile-description-text-color": {
shadowSelector: `.${CSS.description}`,
targetProp: "color",
},
"--calcite-tile-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
"--calcite-tile-icon-color": {
shadowSelector: "calcite-icon",
targetProp: "--calcite-icon-color",
},
},
);
});
describe("single selection", () => {
themed(
html`
<calcite-tile
heading="Tile heading lorem ipsum"
description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
icon="layers"
interactive
selection-mode="single"
>
</calcite-tile>
`,
{
"--calcite-tile-selection-icon-color": {
shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
targetProp: "--calcite-icon-color",
},
"--calcite-tile-selection-icon-color-hover": {
shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
targetProp: "--calcite-icon-color",
state: "hover",
},
},
);
});
});
});
110 changes: 74 additions & 36 deletions packages/calcite-components/src/components/tile/tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,65 @@
* @prop --calcite-tile-border-color: Specifies the border color of the component.
* @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
* @prop --calcite-tile-icon-color: Specifies the icon color in the component.
* @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
* @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-tile-shadow: Specifies the box-shadow of the component.
*/

/** Internal variables
* --calcite-internal-tile-border-color
* --calcite-internal-tile-description-text-color
* --calcite-internal-tile-heading-text-color
* --calcite-internal-tile-icon-color
* --calcite-internal-tile-outline-color
* --calcite-internal-tile-selection-icon-color
* --calcite-internal-tile-shadow
*/

:host {
--calcite-tile-background-color: var(--calcite-color-foreground-1);
--calcite-tile-border-color: var(--calcite-color-border-2);
--calcite-tile-description-text-color: var(--calcite-color-text-3);
--calcite-tile-heading-text-color: var(--calcite-color-text-2);
--calcite-icon-color: var(--calcite-color-text-3);
--calcite-internal-tile-border-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
--calcite-internal-tile-description-text-color: var(
--calcite-tile-description-text-color,
var(--calcite-color-text-3)
);
--calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
--calcite-internal-tile-icon-color: var(--calcite-color-text-3);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved

eriklharper marked this conversation as resolved.
Show resolved Hide resolved
box-sizing: border-box;
display: inline-block;
}

.container {
background-color: var(--calcite-tile-background-color);
--calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-internal-tile-border-color));
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
--calcite-internal-tile-select-icon-color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));

background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
block-size: var(--calcite-container-size-content-fluid);
box-sizing: border-box;
inline-size: var(--calcite-container-size-content-fluid);
outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);
outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-internal-tile-outline-color);
user-select: none;
box-shadow: var(--calcite-tile-shadow, var(--calcite-internal-tile-shadow, none));
eriklharper marked this conversation as resolved.
Show resolved Hide resolved

&.interactive {
cursor: pointer;

&:hover,
&:focus,
&.selected {
outline-color: var(--calcite-color-brand);
--calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-color-brand));
--calcite-internal-tile-select-icon-color: var(
--calcite-tile-selection-icon-color-hover,
var(--calcite-color-brand)
);
position: relative;
.selection-icon {
--calcite-icon-color: var(--calcite-color-brand);
}
}
&.selected {
z-index: var(--calcite-z-index);
}
&:focus {
box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
--calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
z-index: var(--calcite-z-index-sticky);
}
}
Expand Down Expand Up @@ -70,7 +93,7 @@
}

.heading {
color: var(--calcite-tile-heading-text-color);
color: var(--calcite-tile-heading-text-color, var(--calcite-internal-tile-heading-text-color));
font-weight: var(--calcite-font-weight-medium);
line-height: 1.20313rem;
overflow-wrap: break-word;
Expand All @@ -94,25 +117,31 @@
}

.description {
color: var(--calcite-tile-description-text-color);
color: var(--calcite-tile-description-text-color, var(--calcite-internal-tile-description-text-color));
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
font-weight: var(--calcite-font-weight-regular);
overflow-wrap: break-word;
}

calcite-icon {
--calcite-icon-color: var(
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
--calcite-tile-icon-color,
var(--calcite-internal-tile-icon-color, var(--calcite-color-text-3))
);

&.selection-icon {
--calcite-icon-color: var(--calcite-internal-tile-select-icon-color);
}
}

:host([alignment="center"]) {
.icon {
align-self: center;
}
.text-content-container {
justify-content: center;
}
.text-content {
text-align: center;
}
slot[name="content-start"]::slotted(*),
slot[name="content-end"]::slotted(*),
slot[name="content-top"]::slotted(*),
slot[name="content-bottom"]::slotted(*) {
slot[name="content-end"]::slotted(*) {
align-self: center;
}
}
Expand Down Expand Up @@ -189,6 +218,8 @@
:host([selection-appearance="border"][layout="horizontal"]),
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected:focus::before {
--calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved

block-size: 100%;
box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
content: "";
Expand All @@ -202,21 +233,28 @@

:host([selection-appearance="border"][layout="horizontal"]) {
.container.selected {
box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
--calcite-internal-tile-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
}
}

:host([selection-appearance="border"][layout="vertical"]) {
.container.selected {
box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
Copy link
Contributor

Choose a reason for hiding this comment

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

only the "x" and "y" axis lengths are in changing between these box-shadows. You could probably simplify this down to a single style prop. Something like....

.container {
  box-shadow: inset var(--calcite-internal-tile-shadow-x) var(--calcite-internal-tile-shadow-y) 0 0 var(--calcite-internal-tile-shadow-color, none);
}

:host([selection-appearance="border"]) .container.selected { 
  --calcite-internal-tile-shadow-color: var(--calcite-tile-color-selected, var(--calcite-color-brand));
}

:host([layout="vertical"]) .container {
  --calcite-internal-tile-shadow-x: 4px;
  --calcite-internal-tile-shadow-y: 0;
}

:host([layout="horizontal"]) .container {
  --calcite-internal-tile-shadow-x: 0;
  --calcite-internal-tile-shadow-y: -4px;
}

--calcite-internal-tile-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
}
}

:host([href]:active:not([disabled])) {
.container {
box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
}
}

:host([href]:focus:not([disabled])),
:host([href]:hover:not([disabled])) {
--calcite-tile-border-color: var(--calcite-color-text-link);
--calcite-tile-heading-text-color: var(--calcite-color-text-link);
--calcite-icon-color: var(--calcite-color-text-link);
--calcite-internal-tile-border-color: var(--calcite-color-text-link);
--calcite-internal-tile-heading-text-color: var(--calcite-color-text-link);
--calcite-internal-tile-icon-color: var(--calcite-color-text-link);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
--calcite-ui-icon-color: var(--calcite-color-text-link);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
.container {
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
position: relative;
z-index: var(--calcite-z-index);
Expand All @@ -225,35 +263,35 @@

:host([href]:active:not([disabled])) {
.container {
box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
--calcite-internal-tile-shadow: 0 0 0 3px var(--calcite-tile-border-color);
}
}

:host(:hover:not([disabled])),
:host([active]:not([disabled])) {
--calcite-internal-tile-description-text-color: var(--calcite-color-text-2);
--calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
}

:host([embed]) {
.container {
box-shadow: none;
--calcite-internal-tile-shadow: none;
padding: 0;
}
}

:host([selection-mode="none"]) {
.container {
outline-color: var(--calcite-tile-border-color);
--calcite-internal-tile-outline-color: var(--calcite-internal-tile-border-color);

&:focus {
outline-color: var(--calcite-color-brand);
--calcite-internal-tile-outline-color: var(--calcite-color-brand);
position: relative;
}
}
}

@include disabled();

:host(:hover:not([disabled])),
:host([active]:not([disabled])) {
--calcite-tile-description-text-color: var(--calcite-color-text-2);
--calcite-tile-heading-text-color: var(--calcite-color-text-1);
}

@include base-component();

::slotted(*) {
Expand Down
5 changes: 4 additions & 1 deletion packages/calcite-components/src/custom-theme.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { slider } from "./custom-theme/slider";
import { tabs } from "./custom-theme/tabs";
import { textArea, textAreaTokens } from "./custom-theme/text-area";
import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
import { tileTokens, tile } from "./custom-theme/tile";

const globalTokens = {
calciteColorBrand: "#007ac2",
Expand Down Expand Up @@ -115,7 +116,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
<div>${checkbox}</div>
${chips} ${pagination} ${slider}
</div>
<div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}</div>
<div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile}</div>
${alert}
</div>
</div>
Expand All @@ -142,6 +143,7 @@ export default {
...progressTokens,
...inputTokens,
...textAreaTokens,
...tileTokens,
},
};

Expand Down Expand Up @@ -169,6 +171,7 @@ export const theming = (): string => {
...progressTokens,
...inputTokens,
...textAreaTokens,
...tileTokens,
},
true,
);
Expand Down
21 changes: 21 additions & 0 deletions packages/calcite-components/src/custom-theme/tile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { html } from "../../support/formatting";

export const tileTokens = {
calciteTileBackgroundColor: "",
calciteTileBorderColor: "",
calciteTileDescriptionTextColor: "",
calciteTileHeadingTextColor: "",
calciteTileIconColor: "",
calciteTileSelectionIconColor: "",
calciteTileSelectionIconColorHover: "",
calciteTileShadow: "",
};

export const tile = html`
<calcite-tile
heading="Tile heading lorem ipsum"
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."
icon="layers"
selected
></calcite-tile>
`;
Loading
Loading