From 32d96a9f75d678682b89f8c3a4abc3fe79dc0187 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 21 Nov 2024 18:07:18 -0600 Subject: [PATCH] feat(navigation-user): add component tokens (#10608) **Related Issue:** #7180 ## Summary Add the following component-scoped CSS Variables to calcite-navigation-user: `--calcite-navigation-accent-color`: Specifies the components's border color when `active`. `--calcite-navigation-user-avatar-corner-radius`: Specifies the corner radius of avatar. `--calcite-navigation-user-avatar-color`: Specifies the icon color of avatar. `--calcite-navigation-background-color`: Specifies the component's background color. `--calcite-navigation-user-full-name-text-color`: Specifies the component's full name text color. `--calcite-navigation-user-name-text-color`: Specifies the component's username text color. --- .../navigation-user/navigation-user.e2e.ts | 46 ++++++++++++ .../navigation-user/navigation-user.scss | 72 +++++++++++-------- .../src/custom-theme.stories.ts | 4 +- .../src/custom-theme/navigation-user.ts | 21 ++++++ 4 files changed, 114 insertions(+), 29 deletions(-) create mode 100644 packages/calcite-components/src/custom-theme/navigation-user.ts diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts b/packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts index 0d01a791a01..5de58ae0fd4 100644 --- a/packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts +++ b/packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts @@ -1,6 +1,9 @@ import { describe } from "vitest"; +import { boolean } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests"; +import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; +import { CSS } from "./resources"; describe("calcite-navigation-user", () => { describe("renders", () => { @@ -40,4 +43,47 @@ describe("calcite-navigation-user", () => { describe("is focusable", () => { focusable("calcite-navigation-user"); }); + + describe("theme", () => { + const navigationUserHtml = (active = false): string => html` + + + `; + + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-navigation-user-avatar-corner-radius": { + shadowSelector: `calcite-avatar`, + targetProp: "borderRadius", + }, + "--calcite-navigation-user-avatar-color": { + shadowSelector: `calcite-avatar`, + targetProp: "color", + }, + "--calcite-navigation-background-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "backgroundColor", + }, + "--calcite-navigation-user-full-name-text-color": { + shadowSelector: `.${CSS.fullName}`, + targetProp: "color", + }, + "--calcite-navigation-user-name-text-color": { + shadowSelector: `.${CSS.username}`, + targetProp: "color", + }, + }; + themed(navigationUserHtml, tokens); + }); + + describe("active", () => { + const tokens: ComponentTestTokens = { + "--calcite-navigation-accent-color": { + shadowSelector: `.${CSS.button}`, + targetProp: "borderBlockEndColor", + }, + }; + themed(navigationUserHtml(true), tokens); + }); + }); }); diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss index 93be4c1f2b5..c0c44f6c33e 100644 --- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss +++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss @@ -1,39 +1,38 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-navigation-accent-color: Specifies the components's border color when `active`. + * @prop --calcite-navigation-user-avatar-corner-radius: Specifies the corner radius of avatar. + * @prop --calcite-navigation-user-avatar-color: Specifies the icon color of avatar. + * @prop --calcite-navigation-background-color: Specifies the component's background color. + * @prop --calcite-navigation-user-full-name-text-color: Specifies the component's full name text color. + * @prop --calcite-navigation-user-name-text-color: Specifies the component's username text color. + * + */ + :host { @apply inline-flex outline-none; & .button { - background-color: transparent; - border: none; - @apply font-sans - flex + @apply flex m-0 items-center justify-center cursor-pointer transition-default focus-base + font-sans text-0h; - border-block-end: 2px solid transparent; + border: none; + background-color: var( + --calcite-navigation-background-color, + var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)) + ); + border-block-end: 2px solid var(--calcite-color-transparent); } } -:host(:hover) .button, -:host(:focus) .button { - @apply bg-foreground-2; -} - -:host(:focus) .button { - @apply focus-inset; -} - -:host(:active) .button { - @apply bg-foreground-3 text-color-1; -} - -:host([active]) .button { - @apply text-color-1 border-color-brand; - --calcite-icon-color: var(--calcite-color-brand); -} - .text-container { @apply flex flex-col @@ -44,6 +43,8 @@ calcite-avatar { @apply px-4; + --calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius); + --calcite-avatar-color: var(--calcite-navigation-user-avatar-color); } calcite-avatar ~ .text-container { @@ -51,15 +52,30 @@ calcite-avatar ~ .text-container { } .full-name { - @apply text-0 - ms-0 - text-color-1 - font-medium; + @apply ms-0 text-0 font-medium; + color: var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1)); } .username { - @apply text-color-2; font-size: var(--calcite-font-size--1); + color: var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2)); +} + +:host(:hover) .button, +:host(:focus) .button { + --calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2); +} + +:host(:focus) .button { + @apply focus-inset; +} + +:host(:active) .button { + --calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3); +} + +:host([active]) .button { + border-block-end-color: var(--calcite-navigation-accent-color, var(--calcite-color-brand)); } @include base-component(); diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 8caf1aa01b7..8d7f306d7e3 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -40,6 +40,7 @@ import { tabs } from "./custom-theme/tabs"; import { textArea, textAreaTokens } from "./custom-theme/text-area"; import { tooltip, tooltipTokens } from "./custom-theme/tooltip"; import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar"; +import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation-user"; import { tileTokens, tile } from "./custom-theme/tile"; import { navigationTokens, navigation } from "./custom-theme/navigation"; @@ -126,7 +127,7 @@ const kitchenSink = (args: Record, useTestValues = false) => ${datePicker} ${tabs} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip} - ${alert} ${navigation} + ${alert} ${navigation} ${navigationUsers} `; @@ -153,6 +154,7 @@ const componentTokens = { ...inputTokens, ...switchTokens, ...textAreaTokens, + ...navigationUserTokens, ...tooltipTokens, ...tileTokens, ...navigationTokens, diff --git a/packages/calcite-components/src/custom-theme/navigation-user.ts b/packages/calcite-components/src/custom-theme/navigation-user.ts new file mode 100644 index 00000000000..5d87f55afad --- /dev/null +++ b/packages/calcite-components/src/custom-theme/navigation-user.ts @@ -0,0 +1,21 @@ +import { html } from "../../support/formatting"; +import { boolean } from "../../.storybook/utils"; + +export const navigationUserTokens = { + calciteNavigationAccentColor: "", + calciteNavigationUserBackgroundColor: "", + calciteNavigationUserAvatarCornerRadius: "", + calciteNavigationUserAvatarColor: "", + calciteNavigationUserFullNameTextColor: "", + calciteNavigationUserUserNameTextColor: "", +}; + +const navigationUser = (active = false): string => html` + +`; + +export const navigationUsers = html`${navigationUser(true)} ${navigationUser()}`;