Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(popover, action): add component tokens #10253

Merged
merged 31 commits into from
Sep 23, 2024
Merged

feat(popover, action): add component tokens #10253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
10668af
feat(popover): add component tokens
Elijbet Sep 9, 2024
d0c1d93
themed e2e test
Elijbet Sep 9, 2024
81df053
import CSS variables from resources
Elijbet Sep 9, 2024
d410806
custom theme
Elijbet Sep 10, 2024
69e0cbc
import FloatingCSS and clean up resources
Elijbet Sep 11, 2024
e70e1b7
remove unused style
Elijbet Sep 11, 2024
a94882a
remove redundant story
Elijbet Sep 11, 2024
c43eab3
inline html and cleanup
Elijbet Sep 12, 2024
ea7c73d
restore transparentBG_TestOnly story
Elijbet Sep 12, 2024
ef7ba80
remove inline styling and add albel with layout inline instead
Elijbet Sep 12, 2024
7925ef0
merge dev
Elijbet Sep 12, 2024
879d71e
add inline label for stories formatting
Elijbet Sep 13, 2024
f3c7b69
merge dev
Elijbet Sep 13, 2024
38795c5
calcite-action rounded corner
Elijbet Sep 13, 2024
0a71e83
add action public tokens
Elijbet Sep 17, 2024
f047f66
fine grained --calcite-internal-action-corner-radius-start/end for fo…
Elijbet Sep 17, 2024
852b2a0
cleanup
Elijbet Sep 18, 2024
9a56f70
additional corner radius action tokens
Elijbet Sep 18, 2024
8daa1b5
add container class and cleanup
Elijbet Sep 18, 2024
25219e9
token to match css prop
Elijbet Sep 18, 2024
c9ddd1d
bring back selectors
Elijbet Sep 18, 2024
356f005
cleanup
Elijbet Sep 18, 2024
6d1a74c
e2e test for additional props
Elijbet Sep 18, 2024
087cbf7
cleanup
Elijbet Sep 18, 2024
2383c60
remove internal prop docs
Elijbet Sep 19, 2024
9897306
rename container
Elijbet Sep 19, 2024
8cc2cd4
rename container css class
Elijbet Sep 19, 2024
a02d0b4
merge dev
Elijbet Sep 23, 2024
dde6eee
merge dev
Elijbet Sep 23, 2024
435d74c
remove internal variables
Elijbet Sep 23, 2024
cb068f6
cleanup
Elijbet Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/calcite-components/.stylelintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
// ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
const customFunctions = [
"get-trailing-text-input-padding",
"scale-duration"
"medium-modular-scale",
Copy link
Member

Choose a reason for hiding this comment

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

Per our conversation, I'll look at why these were added since small/medium-modular-scale functions are not defined in dev or in this PR (maybe from node_modules? 🤔).

"modular-scale",
"scale-duration",
"small-modular-scale"
];
// ⚠️ END OF AUTO-GENERATED CODE

Expand Down
100 changes: 100 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
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, 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 {
Expand Down
155 changes: 155 additions & 0 deletions packages/calcite-components/src/components/action/action.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ describe("calcite-action", () => {
expect(liveRegion.getAttribute("role")).toBe("region");
expect(liveRegion.textContent).toBe("Indicator present");
});

describe("themed", () => {
describe("default", () => {
themed(html`calcite-action`, {
Expand Down Expand Up @@ -285,5 +286,159 @@ describe("calcite-action", () => {
},
);
});
describe("corner radius", () => {
themed(html`calcite-action`, {
"--calcite-action-corner-radius": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-end-end": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-end-start": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-start-end": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
"--calcite-action-corner-radius-start-start": [
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndEndRadius",
},
{
targetProp: "borderEndEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderEndStartRadius",
},
{
targetProp: "borderEndStartRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartEndRadius",
},
{
targetProp: "borderStartEndRadius",
},
{
shadowSelector: `.${CSS.button}`,
targetProp: "borderStartStartRadius",
},
{
targetProp: "borderStartStartRadius",
},
],
});
});
});
});
Loading
Loading