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` + <calcite-navigation-user full-name="Walt McChipson" username="waltChip" ${boolean("active", active)}> + </calcite-navigation-user> + `; + + 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<string, string>, useTestValues = false) => ${datePicker} ${tabs} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip} </div> - ${alert} ${navigation} + ${alert} ${navigation} ${navigationUsers} </div> </div>`; @@ -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` + <calcite-navigation-user + full-name="Wendell Berry" + username="w_berry" + ${boolean("active", active)} + ></calcite-navigation-user> +`; + +export const navigationUsers = html`${navigationUser(true)} ${navigationUser()}`;