From b16c4b3b32d291b6616c2151d009b285250e6be1 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 29 May 2024 14:02:17 -0700 Subject: [PATCH 1/6] test(shell): add token theming tests --- .../calcite-components/src/components.d.ts | 98 +++++++++++++++++++ .../src/components/shell/shell.e2e.ts | 39 +++++++- 2 files changed, 136 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 14d5926eb0e..b0ea2d37b6c 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,84 +8,182 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } 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 { 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 { 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 { 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 { 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, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } 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 { 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 { 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 { 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 { 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/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index e02c1cd0be4..23b3f98fe8b 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -1,6 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders, slots } from "../../tests/commonTests"; +import { accessible, hidden, renders, slots, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; import { CSS, SLOTS } from "./resources"; describe("calcite-shell", () => { @@ -122,3 +123,39 @@ describe("calcite-shell", () => { expect(panelTop).toBeNull(); }); }); + +describe("theme", () => { + const shellHtml = html` +
+

My Shell Header

+
+ + +
Content
+ + + +
Content
+ + + + +

This tip is how a tip should really look.

+ + + +
My Shell Footer
+ `; + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-shell-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-shell-border-color": { + // shadowSelector: `calcite-shell-panel calcite-panel`, + targetProp: "borderColor", + }, + }; + themed(shellHtml, tokens); + }); +}); From b13365c0de87d651b2eb23946d5c7ef99da2f143 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Jun 2024 13:38:22 -0700 Subject: [PATCH 2/6] cleanup --- .../src/components/shell/shell.e2e.ts | 71 ++++++++++--------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index 23b3f98fe8b..e5da052e395 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -1,7 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, hidden, renders, slots, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { ComponentTestTokens } from "../../tests/commonTests/themed"; import { CSS, SLOTS } from "./resources"; describe("calcite-shell", () => { @@ -124,38 +123,40 @@ describe("calcite-shell", () => { }); }); -describe("theme", () => { - const shellHtml = html` -
-

My Shell Header

-
- - -
Content
- - - -
Content
- - - - -

This tip is how a tip should really look.

- - - -
My Shell Footer
- `; - describe("default", () => { - const tokens: ComponentTestTokens = { - "--calcite-shell-background-color": { - targetProp: "backgroundColor", - }, - "--calcite-shell-border-color": { - // shadowSelector: `calcite-shell-panel calcite-panel`, - targetProp: "borderColor", - }, - }; - themed(shellHtml, tokens); - }); +describe("slotted overrides", () => { + themed( + html` + + + + + + + + `, + { + "--calcite-shell-border-color": [ + { + selector: `calcite-panel`, + targetProp: "borderColor", + }, + { + selector: `calcite-flow`, + targetProp: "borderColor", + }, + { + selector: `calcite-shell-center-row[slot="${SLOTS.panelBottom}"]`, + targetProp: "borderColor", + }, + { + selector: `calcite-shell-center-row[slot="${SLOTS.panelTop}"]`, + targetProp: "borderColor", + }, + { + selector: `calcite-shell-center-row[slot="${SLOTS.centerRow}"]`, + targetProp: "borderColor", + }, + ], + }, + ); }); From 9692222cb7551193a0fc1927f645c189c674c946 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Jun 2024 16:11:37 -0700 Subject: [PATCH 3/6] background-color and tip-spacing --- .../src/components/shell/shell.e2e.ts | 48 +++++++++++++------ 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index e5da052e395..d24eeb662b4 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -1,6 +1,7 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, hidden, renders, slots, themed } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { ComponentTestTokens } from "../../tests/commonTests/themed"; import { CSS, SLOTS } from "./resources"; describe("calcite-shell", () => { @@ -123,18 +124,28 @@ describe("calcite-shell", () => { }); }); -describe("slotted overrides", () => { - themed( - html` - - - - - - - - `, - { +const tipMangerHTML = html` + + + An example link + + +`; + +describe("theme", () => { + const shellHTML = html` + + ${tipMangerHTML} + + + + + + + `; + + describe("default", () => { + const tokens: ComponentTestTokens = { "--calcite-shell-border-color": [ { selector: `calcite-panel`, @@ -157,6 +168,15 @@ describe("slotted overrides", () => { targetProp: "borderColor", }, ], - }, - ); + "--calcite-shell-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-shell-tip-spacing": { + selector: `calcite-tip-manager`, + targetProp: "insetInline", + }, + }; + + themed(async () => shellHTML, tokens); + }); }); From dbe658e2bb7ead9080ac9dc6634f0310bb0ca25e Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Jun 2024 16:59:31 -0700 Subject: [PATCH 4/6] slotted overrides, default, and deprecated blocks --- .../src/components/shell/shell.e2e.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index d24eeb662b4..f6e486d7923 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -144,7 +144,7 @@ describe("theme", () => { `; - describe("default", () => { + describe("slotted overrides", () => { const tokens: ComponentTestTokens = { "--calcite-shell-border-color": [ { @@ -168,15 +168,26 @@ describe("theme", () => { targetProp: "borderColor", }, ], + }; + themed(async () => shellHTML, tokens); + }); + + describe("default", () => { + const tokens: ComponentTestTokens = { "--calcite-shell-background-color": { targetProp: "backgroundColor", }, + }; + themed(async () => shellHTML, tokens); + }); + + describe("deprecated", () => { + const tokens: ComponentTestTokens = { "--calcite-shell-tip-spacing": { selector: `calcite-tip-manager`, targetProp: "insetInline", }, }; - themed(async () => shellHTML, tokens); }); }); From a54b7ef7f4db14253e38a183f2b02ad0e4cb2db1 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Jun 2024 17:00:49 -0700 Subject: [PATCH 5/6] typo --- packages/calcite-components/src/components/shell/shell.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index f6e486d7923..6538dbd0423 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -124,7 +124,7 @@ describe("calcite-shell", () => { }); }); -const tipMangerHTML = html` +const tipManagerHTML = html` An example link @@ -135,7 +135,7 @@ const tipMangerHTML = html` describe("theme", () => { const shellHTML = html` - ${tipMangerHTML} + ${tipManagerHTML} From 9b113c1786fac5f0f1f6b91ea5da466f1f8855b6 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Jun 2024 17:15:46 -0700 Subject: [PATCH 6/6] inline html --- .../src/components/shell/shell.e2e.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts index 6538dbd0423..fe410a169a6 100644 --- a/packages/calcite-components/src/components/shell/shell.e2e.ts +++ b/packages/calcite-components/src/components/shell/shell.e2e.ts @@ -124,18 +124,14 @@ describe("calcite-shell", () => { }); }); -const tipManagerHTML = html` - - - An example link - - -`; - describe("theme", () => { const shellHTML = html` - ${tipManagerHTML} + + + An example link + +