From 2129b15d8eedb6073de16b87298b5132a10b5ac0 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 22 Oct 2024 16:16:05 -0500 Subject: [PATCH 01/14] feat(navigation-logo): add component tokens --- .../calcite-components/src/components.d.ts | 100 ++++++++++++++++++ .../navigation-logo/navigation-logo.e2e.ts | 67 ++++++++++++ .../navigation-logo/navigation-logo.scss | 57 ++++++---- 3 files changed, 202 insertions(+), 22 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index f1aa432bc3b..1368c6f59f9 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; +import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; +export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index d33aa0b6fab..439b836ec82 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -1,5 +1,7 @@ import { html } from "../../../support/formatting"; import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests"; +import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; +import { CSS } from "../../../src/components/navigation-logo/resources"; describe("calcite-navigation-logo", () => { describe("renders", () => { @@ -67,4 +69,69 @@ describe("calcite-navigation-logo", () => { }, ]); }); + + describe("theme", () => { + describe("default", () => { + const navigationLogoHtml = html` + + + `; + + const tokens: ComponentTestTokens = { + "--calcite-navigation-logo-background-color": { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + }, + "--calcite-navigation-logo-background-color-hover": { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + state: "hover", + }, + "--calcite-navigation-logo-background-color-active": { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.anchor } }, + }, + "--calcite-navigation-logo-border-color": { + shadowSelector: `.${CSS.anchor}`, + targetProp: "borderBlockEndColor", + }, + "--calcite-navigation-logo-description-text-color": { + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + "--calcite-navigation-logo-heading-text-color": { + shadowSelector: `.${CSS.heading}`, + targetProp: "color", + }, + "--calcite-navigation-logo-icon-color-active": { + shadowSelector: `calcite-icon`, + targetProp: "--calcite-icon-color", + state: { press: { attribute: "class", value: CSS.anchor } }, + }, + }; + themed(navigationLogoHtml, tokens); + }); + + describe("active", () => { + const navigationLogoActiveHtml = html` + + + `; + + const tokens: ComponentTestTokens = { + "--calcite-navigation-logo-border-color": { + shadowSelector: `.${CSS.anchor}`, + targetProp: "borderBlockEndColor", + }, + }; + themed(navigationLogoActiveHtml, tokens); + }); + }); }); diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index 528a66c1989..fcb3ff327c2 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -1,3 +1,16 @@ +/* +* These properties can be overridden using the component's tag as selector. +* +* @prop --calcite-navigation-logo-background-color: Specifies the background color of the component. +* @prop --calcite-navigation-logo-background-color-hover: Specifies the background color of the component when hovered. +* @prop --calcite-navigation-logo-background-color-active: Specifies the background color of the component when active. +* @prop --calcite-navigation-logo-border-color: Specifies the border color of the component. +* @prop --calcite-navigation-logo-description-text-color: Specifies text color of description of component. +* @prop --calcite-navigation-logo-heading-text-color: Specifies the text color of heading of component. +* @prop --calcite-navigation-logo-icon-color-active: Specifies the icon color of the component when active. +* +*/ + :host { @apply inline-flex outline-none; } @@ -10,27 +23,32 @@ cursor-pointer transition-default focus-base - no-underline - text-0h; + no-underline; color: inherit; - border-block-end: 2px solid transparent; + font-size: var(--calcite-font-size-0); + line-height: var(--calcite-font-line-height-fixed-lg); + border-block-end: var(--calcite-spacing-base) solid + var(--calcite-navigation-logo-border-color, var(--calcite-internal-navigation-logo-border-color, transparent)); + background-color: var(--calcite-navigation-logo-background-color, var(--calcite-color-foreground-1)); } .anchor:hover, .anchor:focus { - @apply bg-foreground-2; + background-color: var(--calcite-navigation-logo-background-color-hover, var(--calcite-color-foreground-2)); } .anchor:focus { @apply focus-inset; } .anchor:active { - @apply bg-foreground-3; + background-color: var(--calcite-navigation-logo-background-color-active, var(--calcite-color-foreground-3)); + --calcite-icon-color: var(--calcite-navigation-logo-icon-color-active, var(--calcite-color-text-1)); } .image, .icon { - @apply flex h-7 m-0 px-4; + @apply flex h-7 m-0; + padding-inline: var(--calcite-spacing-xl); } .image ~ .icon { @@ -42,39 +60,34 @@ @apply ps-0; } -:host(:active) .anchor { - @apply text-color-1; -} - :host([active]) .anchor { - @apply text-color-1; - border-color: var(--calcite-color-brand); --calcite-icon-color: var(--calcite-color-brand); + --calcite-internal-navigation-logo-border-color: var(--calcite-color-brand); } .container { @apply flex flex-col truncate - text-start - px-4 - mt-0.5; + text-start; + padding-inline: var(--calcite-spacing-xl); + margin-block-start: var(--calcite-spacing-base); } .heading { - @apply text-0 - ms-0 - truncate - text-color-1 - font-medium; + @apply ms-0 truncate; + font-weight: var(--calcite-font-weight-medium); + color: var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1)); + font-size: var(--calcite-font-size-0); } .standalone { - @apply text-1; + font-size: var(--calcite-font-size-1); } .description { - @apply text-color-2 truncate; + @apply truncate; + color: var(--calcite-navigation-logo-description-text-color, var(--calcite-color-text-2)); font-size: var(--calcite-font-size--1); } From 64befdbf9d8f8f0f876a8cba5dc361c0997e6251 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 22 Oct 2024 16:36:46 -0500 Subject: [PATCH 02/14] replace active with press in tokens --- .../src/components/navigation-logo/navigation-logo.e2e.ts | 4 ++-- .../src/components/navigation-logo/navigation-logo.scss | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index 439b836ec82..376dbd7347d 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -87,7 +87,7 @@ describe("calcite-navigation-logo", () => { targetProp: "backgroundColor", state: "hover", }, - "--calcite-navigation-logo-background-color-active": { + "--calcite-navigation-logo-background-color-press": { shadowSelector: `.${CSS.anchor}`, targetProp: "backgroundColor", state: { press: { attribute: "class", value: CSS.anchor } }, @@ -104,7 +104,7 @@ describe("calcite-navigation-logo", () => { shadowSelector: `.${CSS.heading}`, targetProp: "color", }, - "--calcite-navigation-logo-icon-color-active": { + "--calcite-navigation-logo-icon-color-press": { shadowSelector: `calcite-icon`, targetProp: "--calcite-icon-color", state: { press: { attribute: "class", value: CSS.anchor } }, diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index fcb3ff327c2..a7bfa5f5805 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -3,11 +3,11 @@ * * @prop --calcite-navigation-logo-background-color: Specifies the background color of the component. * @prop --calcite-navigation-logo-background-color-hover: Specifies the background color of the component when hovered. -* @prop --calcite-navigation-logo-background-color-active: Specifies the background color of the component when active. +* @prop --calcite-navigation-logo-background-color-press: Specifies the background color of the component when active. * @prop --calcite-navigation-logo-border-color: Specifies the border color of the component. * @prop --calcite-navigation-logo-description-text-color: Specifies text color of description of component. * @prop --calcite-navigation-logo-heading-text-color: Specifies the text color of heading of component. -* @prop --calcite-navigation-logo-icon-color-active: Specifies the icon color of the component when active. +* @prop --calcite-navigation-logo-icon-color-press: Specifies the icon color of the component when active. * */ @@ -41,8 +41,8 @@ } .anchor:active { - background-color: var(--calcite-navigation-logo-background-color-active, var(--calcite-color-foreground-3)); - --calcite-icon-color: var(--calcite-navigation-logo-icon-color-active, var(--calcite-color-text-1)); + background-color: var(--calcite-navigation-logo-background-color-press, var(--calcite-color-foreground-3)); + --calcite-icon-color: var(--calcite-navigation-logo-icon-color-press, var(--calcite-color-text-1)); } .image, From ea2f797cb32797bc7858c51885e1c452a8eee0ad Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 22 Oct 2024 22:36:32 -0500 Subject: [PATCH 03/14] stories --- .../src/custom-theme.stories.ts | 3 +++ .../src/custom-theme/navigation-logo.ts | 24 +++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 packages/calcite-components/src/custom-theme/navigation-logo.ts diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 7a1aa0767eb..45180af7b63 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -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 { navigationLogoTokens, navigationLogos } from "./custom-theme/navigation-logo"; const globalTokens = { calciteColorBrand: "#007ac2", @@ -116,6 +117,7 @@ const kitchenSink = (args: Record, useTestValues = false) => ${chips} ${pagination} ${slider}
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}
+
${navigationLogos}
${alert} @@ -140,6 +142,7 @@ const componentTokens = { ...progressTokens, ...inputTokens, ...textAreaTokens, + ...navigationLogoTokens, }; export default { diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts new file mode 100644 index 00000000000..9eedefb4e58 --- /dev/null +++ b/packages/calcite-components/src/custom-theme/navigation-logo.ts @@ -0,0 +1,24 @@ +import { html } from "../../support/formatting"; + +export const navigationLogoTokens = { + calciteNavigationLogoBackgroundColor: "", + calciteNavigationLogoBorderColor: "", + calciteNavigationLogoBackgroundColorPress: "", + calciteNavigationLogoBackgroundColorHover: "", + calciteNavigationLogoDescriptionTextColor: "", + calciteNavigationLogoHeadingTextColor: "", + calciteNavigationLogoIconColorPress: "", +}; + +const navigationLogo = (active = false): string => html` + + +`; + +export const navigationLogos = html` ${navigationLogo(true)} ${navigationLogo()} `; From ce040f8687044113172efe2be1b4367ca4a1bdde Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 24 Oct 2024 14:02:21 -0500 Subject: [PATCH 04/14] fix icon-color for active attribute --- .../src/components/navigation-logo/navigation-logo.e2e.ts | 4 ++++ .../src/components/navigation-logo/navigation-logo.scss | 7 +++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index 376dbd7347d..b9277809c2e 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -130,6 +130,10 @@ describe("calcite-navigation-logo", () => { shadowSelector: `.${CSS.anchor}`, targetProp: "borderBlockEndColor", }, + "--calcite-navigation-logo-icon-color-press": { + shadowSelector: `calcite-icon`, + targetProp: "--calcite-icon-color", + }, }; themed(navigationLogoActiveHtml, tokens); }); diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index a7bfa5f5805..6f87c09627d 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -27,8 +27,7 @@ color: inherit; font-size: var(--calcite-font-size-0); line-height: var(--calcite-font-line-height-fixed-lg); - border-block-end: var(--calcite-spacing-base) solid - var(--calcite-navigation-logo-border-color, var(--calcite-internal-navigation-logo-border-color, transparent)); + border-block-end: var(--calcite-spacing-base) solid var(--calcite-navigation-logo-border-color, transparent); background-color: var(--calcite-navigation-logo-background-color, var(--calcite-color-foreground-1)); } @@ -61,8 +60,8 @@ } :host([active]) .anchor { - --calcite-icon-color: var(--calcite-color-brand); - --calcite-internal-navigation-logo-border-color: var(--calcite-color-brand); + --calcite-icon-color: var(--calcite-navigation-logo-icon-color-press, var(--calcite-color-brand)); + border-block-end-color: var(--calcite-navigation-logo-border-color, var(--calcite-color-brand)); } .container { From 22f2ffa666d311b93e7a2efc5436caece0778808 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 25 Oct 2024 09:50:12 -0500 Subject: [PATCH 05/14] fix boolean attribute in stories --- .../calcite-components/src/components.d.ts | 100 ++++++++++++++++++ .../src/custom-theme.stories.ts | 2 +- .../src/custom-theme/navigation-logo.ts | 3 +- 3 files changed, 103 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 9dee40c58d4..70288fce667 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { HoverRange } from "./utils/date"; import { DateLocaleData } from "./components/date-picker/utils"; +import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { HoverRange } from "./utils/date"; export { DateLocaleData } from "./components/date-picker/utils"; +export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 45180af7b63..2096366584b 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -117,7 +117,7 @@ const kitchenSink = (args: Record, useTestValues = false) => ${chips} ${pagination} ${slider}
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}
-
${navigationLogos}
+ ${navigationLogos} ${alert} diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts index 9eedefb4e58..39c0af7f042 100644 --- a/packages/calcite-components/src/custom-theme/navigation-logo.ts +++ b/packages/calcite-components/src/custom-theme/navigation-logo.ts @@ -1,4 +1,5 @@ import { html } from "../../support/formatting"; +import { boolean } from "../../.storybook/utils"; export const navigationLogoTokens = { calciteNavigationLogoBackgroundColor: "", @@ -16,7 +17,7 @@ const navigationLogo = (active = false): string => html` description="Eastern Potato Chip Company" icon="layers" label="Walt's Chips" - ${active ? active : ""} + ${boolean("active", active)} > `; From e9cb59f10396ee44020a11086ff18ebe84ea8b5a Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 25 Oct 2024 15:28:00 -0500 Subject: [PATCH 06/14] remove state tokens --- .../navigation-logo/navigation-logo.e2e.ts | 68 ++++++++------- .../navigation-logo/navigation-logo.scss | 83 ++++++++++--------- 2 files changed, 85 insertions(+), 66 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index b9277809c2e..c2a641e440d 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -78,37 +78,47 @@ describe("calcite-navigation-logo", () => { `; const tokens: ComponentTestTokens = { - "--calcite-navigation-logo-background-color": { - shadowSelector: `.${CSS.anchor}`, - targetProp: "backgroundColor", - }, - "--calcite-navigation-logo-background-color-hover": { - shadowSelector: `.${CSS.anchor}`, - targetProp: "backgroundColor", - state: "hover", - }, - "--calcite-navigation-logo-background-color-press": { - shadowSelector: `.${CSS.anchor}`, - targetProp: "backgroundColor", - state: { press: { attribute: "class", value: CSS.anchor } }, - }, - "--calcite-navigation-logo-border-color": { - shadowSelector: `.${CSS.anchor}`, - targetProp: "borderBlockEndColor", - }, - "--calcite-navigation-logo-description-text-color": { - shadowSelector: `.${CSS.description}`, - targetProp: "color", - }, + "--calcite-navigation-background-color": [ + { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + }, + { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + state: "hover", + }, + { + shadowSelector: `.${CSS.anchor}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.anchor } }, + }, + ], + "--calcite-navigation-logo-border-color": [ + { + shadowSelector: `.${CSS.anchor}`, + targetProp: "borderBlockEndColor", + }, + ], + "--calcite-navigation-logo-text-color": [ + { + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + { + shadowSelector: `calcite-icon`, + targetProp: "color", + }, + { + shadowSelector: `calcite-icon`, + targetProp: "color", + state: { press: { attribute: "class", value: CSS.anchor } }, + }, + ], "--calcite-navigation-logo-heading-text-color": { shadowSelector: `.${CSS.heading}`, targetProp: "color", }, - "--calcite-navigation-logo-icon-color-press": { - shadowSelector: `calcite-icon`, - targetProp: "--calcite-icon-color", - state: { press: { attribute: "class", value: CSS.anchor } }, - }, }; themed(navigationLogoHtml, tokens); }); @@ -130,9 +140,9 @@ describe("calcite-navigation-logo", () => { shadowSelector: `.${CSS.anchor}`, targetProp: "borderBlockEndColor", }, - "--calcite-navigation-logo-icon-color-press": { + "--calcite-navigation-logo-text-color": { shadowSelector: `calcite-icon`, - targetProp: "--calcite-icon-color", + targetProp: "color", }, }; themed(navigationLogoActiveHtml, tokens); diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index 6f87c09627d..22811ab701e 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -1,18 +1,14 @@ /* * These properties can be overridden using the component's tag as selector. * -* @prop --calcite-navigation-logo-background-color: Specifies the background color of the component. -* @prop --calcite-navigation-logo-background-color-hover: Specifies the background color of the component when hovered. -* @prop --calcite-navigation-logo-background-color-press: Specifies the background color of the component when active. * @prop --calcite-navigation-logo-border-color: Specifies the border color of the component. -* @prop --calcite-navigation-logo-description-text-color: Specifies text color of description of component. -* @prop --calcite-navigation-logo-heading-text-color: Specifies the text color of heading of component. -* @prop --calcite-navigation-logo-icon-color-press: Specifies the icon color of the component when active. +* @prop --calcite-navigation-logo-heading-text-color: Specifies text color of description of component. +* @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icons and description text. * */ :host { - @apply inline-flex outline-none; + @apply inline-flex outline-none focus-base; } .anchor { @@ -22,32 +18,27 @@ justify-center cursor-pointer transition-default - focus-base - no-underline; - color: inherit; - font-size: var(--calcite-font-size-0); - line-height: var(--calcite-font-line-height-fixed-lg); - border-block-end: var(--calcite-spacing-base) solid var(--calcite-navigation-logo-border-color, transparent); - background-color: var(--calcite-navigation-logo-background-color, var(--calcite-color-foreground-1)); + no-underline + text-0h; + border-block-end: var(--calcite-spacing-base) solid + var(--calcite-navigation-logo-border-color, var(--calcite-internal-navigation-logo-border-color, transparent)); + background-color: var( + --calcite-navigation-background-color, + var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)) + ); } -.anchor:hover, -.anchor:focus { - background-color: var(--calcite-navigation-logo-background-color-hover, var(--calcite-color-foreground-2)); -} -.anchor:focus { +:host(:focus) { @apply focus-inset; } -.anchor:active { - background-color: var(--calcite-navigation-logo-background-color-press, var(--calcite-color-foreground-3)); - --calcite-icon-color: var(--calcite-navigation-logo-icon-color-press, var(--calcite-color-text-1)); -} - .image, .icon { - @apply flex h-7 m-0; - padding-inline: var(--calcite-spacing-xl); + @apply flex h-7 m-0 px-4; + color: var( + --calcite-navigation-logo-text-color, + var(--calcite-internal-navigation-logo-text-color, var(--calcite-icon-color, inherit)) + ); } .image ~ .icon { @@ -59,34 +50,52 @@ @apply ps-0; } +:host(:hover), +:host(:focus) { + .anchor { + --calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2); + } +} + +:host(:active) .anchor { + --calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3); +} + :host([active]) .anchor { - --calcite-icon-color: var(--calcite-navigation-logo-icon-color-press, var(--calcite-color-brand)); - border-block-end-color: var(--calcite-navigation-logo-border-color, var(--calcite-color-brand)); + --calcite-internal-navigation-logo-border-color: var(--calcite-color-brand); +} + +:host([active]), +:host(:active) { + .icon { + --calcite-internal-navigation-logo-text-color: var(--calcite-icon-color, var(--calcite-color-brand)); + } } .container { @apply flex flex-col truncate - text-start; - padding-inline: var(--calcite-spacing-xl); - margin-block-start: var(--calcite-spacing-base); + text-start + px-4 + mt-0.5; } .heading { - @apply ms-0 truncate; - font-weight: var(--calcite-font-weight-medium); + @apply text-0 + ms-0 + truncate + font-medium; color: var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1)); - font-size: var(--calcite-font-size-0); } .standalone { - font-size: var(--calcite-font-size-1); + @apply text-1; } .description { - @apply truncate; - color: var(--calcite-navigation-logo-description-text-color, var(--calcite-color-text-2)); + @apply text-color-2 truncate; + color: var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2)); font-size: var(--calcite-font-size--1); } From f1600223c7a73c95cafcb8a22958b33a79825001 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 25 Oct 2024 15:30:36 -0500 Subject: [PATCH 07/14] refactor stories --- .../src/components/navigation-logo/navigation-logo.scss | 4 ++-- .../calcite-components/src/custom-theme/navigation-logo.ts | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index 22811ab701e..51b8db33c10 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -37,7 +37,7 @@ @apply flex h-7 m-0 px-4; color: var( --calcite-navigation-logo-text-color, - var(--calcite-internal-navigation-logo-text-color, var(--calcite-icon-color, inherit)) + var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)) ); } @@ -68,7 +68,7 @@ :host([active]), :host(:active) { .icon { - --calcite-internal-navigation-logo-text-color: var(--calcite-icon-color, var(--calcite-color-brand)); + --calcite-internal-navigation-logo-text-color: var(--calcite-color-brand); } } diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts index 39c0af7f042..84db27f69a7 100644 --- a/packages/calcite-components/src/custom-theme/navigation-logo.ts +++ b/packages/calcite-components/src/custom-theme/navigation-logo.ts @@ -2,13 +2,10 @@ import { html } from "../../support/formatting"; import { boolean } from "../../.storybook/utils"; export const navigationLogoTokens = { - calciteNavigationLogoBackgroundColor: "", + calciteNavigationBackgroundColor: "", calciteNavigationLogoBorderColor: "", - calciteNavigationLogoBackgroundColorPress: "", - calciteNavigationLogoBackgroundColorHover: "", - calciteNavigationLogoDescriptionTextColor: "", calciteNavigationLogoHeadingTextColor: "", - calciteNavigationLogoIconColorPress: "", + calciteNavigationLogoTextColor: "", }; const navigationLogo = (active = false): string => html` From 80f094b9cbf4f92a383c063439c1d87fbbc6a4a4 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 25 Oct 2024 15:50:33 -0500 Subject: [PATCH 08/14] editorial cleanup --- .../src/components/navigation-logo/navigation-logo.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index 51b8db33c10..f63f5bf4b6f 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -1,9 +1,10 @@ /* * These properties can be overridden using the component's tag as selector. * -* @prop --calcite-navigation-logo-border-color: Specifies the border color of the component. -* @prop --calcite-navigation-logo-heading-text-color: Specifies text color of description of component. -* @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icons and description text. +* @prop --calcite-navigation-background-color: Specifies the component's background color. +* @prop --calcite-navigation-logo-border-color: Specifies the component's border color. +* @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text. +* @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text. * */ From 5aab4924813234a643b83f019e97db5bdba212c9 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 30 Oct 2024 16:04:18 -0500 Subject: [PATCH 09/14] tidy up --- .../navigation-logo/navigation-logo.e2e.ts | 31 ++++++++----------- .../src/custom-theme.stories.ts | 25 ++++++++------- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index c2a641e440d..2eb80003906 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -2,6 +2,7 @@ import { html } from "../../../support/formatting"; import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests"; import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; import { CSS } from "../../../src/components/navigation-logo/resources"; +import { boolean } from "../../../.storybook/utils"; describe("calcite-navigation-logo", () => { describe("renders", () => { @@ -71,12 +72,17 @@ describe("calcite-navigation-logo", () => { }); describe("theme", () => { - describe("default", () => { - const navigationLogoHtml = html` - - - `; + const navigationLogoHtml = (active = false): string => html` + + + `; + describe("default", () => { const tokens: ComponentTestTokens = { "--calcite-navigation-background-color": [ { @@ -120,21 +126,10 @@ describe("calcite-navigation-logo", () => { targetProp: "color", }, }; - themed(navigationLogoHtml, tokens); + themed(navigationLogoHtml(), tokens); }); describe("active", () => { - const navigationLogoActiveHtml = html` - - - `; - const tokens: ComponentTestTokens = { "--calcite-navigation-logo-border-color": { shadowSelector: `.${CSS.anchor}`, @@ -145,7 +140,7 @@ describe("calcite-navigation-logo", () => { targetProp: "color", }, }; - themed(navigationLogoActiveHtml, tokens); + themed(navigationLogoHtml(true), tokens); }); }); }); diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 56abdda3fc4..ce6d34f86b8 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -109,17 +109,20 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${actionMenu}
${icon} -
-
${card}
- ${cardThumbnail} -
${dropdown} ${buttons}
-
${checkbox}
- ${chips} ${pagination} ${slider} -
-
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile}
- ${alert} - ${navigationLogos} - ${navigation} + ${input} ${inputNumber} ${inputText} + +
+
${card}
+ ${cardThumbnail} +
${dropdown} ${buttons}
+
${checkbox}
+ ${chips} ${pagination} ${slider} +
+
+ ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} + ${handle} ${textArea} ${popover} ${tile} +
+ ${alert} ${navigation} ${navigationLogos} `; From 8f2e81d72730ef710ea3c92c33230273bc31d075 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 14 Nov 2024 15:50:26 -0600 Subject: [PATCH 10/14] refactor --- packages/calcite-components/.stylelintrc.cjs | 8 +------- .../src/components/navigation-logo/navigation-logo.e2e.ts | 8 +------- .../src/components/navigation-logo/navigation-logo.scss | 7 +++---- .../src/custom-theme/navigation-logo.ts | 2 +- 4 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index 2eb80003906..5ab20e55190 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -100,12 +100,6 @@ describe("calcite-navigation-logo", () => { state: { press: { attribute: "class", value: CSS.anchor } }, }, ], - "--calcite-navigation-logo-border-color": [ - { - shadowSelector: `.${CSS.anchor}`, - targetProp: "borderBlockEndColor", - }, - ], "--calcite-navigation-logo-text-color": [ { shadowSelector: `.${CSS.description}`, @@ -131,7 +125,7 @@ describe("calcite-navigation-logo", () => { describe("active", () => { const tokens: ComponentTestTokens = { - "--calcite-navigation-logo-border-color": { + "--calcite-navigation-selection-border-color": { shadowSelector: `.${CSS.anchor}`, targetProp: "borderBlockEndColor", }, diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index f63f5bf4b6f..d51c361d77d 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -2,7 +2,7 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-navigation-background-color: Specifies the component's background color. -* @prop --calcite-navigation-logo-border-color: Specifies the component's border color. +* @prop --calcite-navigation-selection-border-color: Specifies the component's border color when `active`. * @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text. * @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text. * @@ -21,8 +21,7 @@ transition-default no-underline text-0h; - border-block-end: var(--calcite-spacing-base) solid - var(--calcite-navigation-logo-border-color, var(--calcite-internal-navigation-logo-border-color, transparent)); + border-block-end: 2px solid var(--calcite-color-transparent); background-color: var( --calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)) @@ -63,7 +62,7 @@ } :host([active]) .anchor { - --calcite-internal-navigation-logo-border-color: var(--calcite-color-brand); + border-block-end-color: var(--calcite-navigation-selection-border-color, var(--calcite-color-brand)); } :host([active]), diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts index 84db27f69a7..642261fb366 100644 --- a/packages/calcite-components/src/custom-theme/navigation-logo.ts +++ b/packages/calcite-components/src/custom-theme/navigation-logo.ts @@ -3,7 +3,7 @@ import { boolean } from "../../.storybook/utils"; export const navigationLogoTokens = { calciteNavigationBackgroundColor: "", - calciteNavigationLogoBorderColor: "", + calciteNavigationSelectionBorderColor: "", calciteNavigationLogoHeadingTextColor: "", calciteNavigationLogoTextColor: "", }; From 27530ebbd29826c76f6b7d845d93003dcb342e59 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 14 Nov 2024 15:51:36 -0600 Subject: [PATCH 11/14] revert unwanted changed --- packages/calcite-components/.stylelintrc.cjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 0998dad6911..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,13 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = []; +const customFunctions = [ + "get-trailing-text-input-padding", + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale", +]; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From 6ba5740f413eb65fed1d81d9cfc9aa42bc0ee3b3 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 21 Nov 2024 15:57:43 -0600 Subject: [PATCH 12/14] rename selection-border-color to accent-color --- packages/calcite-components/.stylelintrc.cjs | 2 +- .../src/components/navigation-logo/navigation-logo.e2e.ts | 2 +- .../src/components/navigation-logo/navigation-logo.scss | 4 ++-- .../calcite-components/src/custom-theme/navigation-logo.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 2e02214db54..3861302ec13 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -6,7 +6,7 @@ const customFunctions = [ "medium-modular-scale", "modular-scale", "scale-duration", - "small-modular-scale" + "small-modular-scale", ]; // ⚠️ END OF AUTO-GENERATED CODE diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts index a05f3ce44e2..eb718c5f3d1 100755 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts @@ -126,7 +126,7 @@ describe("calcite-navigation-logo", () => { describe("active", () => { const tokens: ComponentTestTokens = { - "--calcite-navigation-selection-border-color": { + "--calcite-navigation-accent-color": { shadowSelector: `.${CSS.anchor}`, targetProp: "borderBlockEndColor", }, diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss index d51c361d77d..9103ea0d047 100644 --- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss +++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss @@ -1,8 +1,8 @@ /* * These properties can be overridden using the component's tag as selector. * +* @prop --calcite-navigation-accent-color: Specifies the component's border color when `active`. * @prop --calcite-navigation-background-color: Specifies the component's background color. -* @prop --calcite-navigation-selection-border-color: Specifies the component's border color when `active`. * @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text. * @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text. * @@ -62,7 +62,7 @@ } :host([active]) .anchor { - border-block-end-color: var(--calcite-navigation-selection-border-color, var(--calcite-color-brand)); + border-block-end-color: var(--calcite-navigation-accent-color, var(--calcite-color-brand)); } :host([active]), diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts index 642261fb366..5fc1c6b8377 100644 --- a/packages/calcite-components/src/custom-theme/navigation-logo.ts +++ b/packages/calcite-components/src/custom-theme/navigation-logo.ts @@ -2,8 +2,8 @@ import { html } from "../../support/formatting"; import { boolean } from "../../.storybook/utils"; export const navigationLogoTokens = { + calciteNavigationAccentColor: "", calciteNavigationBackgroundColor: "", - calciteNavigationSelectionBorderColor: "", calciteNavigationLogoHeadingTextColor: "", calciteNavigationLogoTextColor: "", }; From 4da000ebddfce587fcd11d6673fc71280f1b1bd4 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 21 Nov 2024 17:38:34 -0600 Subject: [PATCH 13/14] resolve merge conflicts --- packages/calcite-components/.stylelintrc.cjs | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 3861302ec13..03659346764 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale", -]; + // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ From 45896989c7fefad639fa40f4452b416e0a8ea66f Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Thu, 21 Nov 2024 17:43:33 -0600 Subject: [PATCH 14/14] fix stylelintrc config --- packages/calcite-components/.stylelintrc.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 03659346764..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,7 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT - +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [