From 80e81125df59a61ba6d932e7fd66ec9faff7e8a4 Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Mon, 23 Sep 2024 15:28:39 -0700 Subject: [PATCH] feat(popover, action): add component tokens (#10253) **Related Issue:** #7180 ## Summary Add `popover` component tokens. `--calcite-popover-background-color`: Specifies the background color of the component. `--calcite-popover-border-color`: Specifies the border color of the component. `--calcite-popover-corner-radius`: Specifies the corner radius of the component. `--calcite-popover-text-color`: Specifies the text color of the component. Add `action` component tokens. `--calcite-action-corner-radius`: Specifies the component's corner radius. `--calcite-action-corner-radius-end-end`: Specifies the component's corner radius end end. `--calcite-action-corner-radius-end-start`: Specifies the component's corner radius end start. `--calcite-action-corner-radius-start-end`: Specifies the component's corner radius start end. `--calcite-action-corner-radius-start-start`: Specifies the component's corner radius start start. --- packages/calcite-components/.stylelintrc.cjs | 5 +- .../calcite-components/src/components.d.ts | 100 +++++++++++ .../src/components/action/action.e2e.ts | 155 ++++++++++++++++++ .../src/components/action/action.scss | 25 +++ .../src/components/popover/popover.e2e.ts | 64 ++++++++ .../src/components/popover/popover.scss | 42 ++--- .../src/components/popover/popover.tsx | 3 +- .../src/components/popover/resources.ts | 1 + .../src/custom-theme.stories.ts | 9 +- .../src/custom-theme/popover.ts | 28 ++++ 10 files changed, 406 insertions(+), 26 deletions(-) create mode 100644 packages/calcite-components/src/custom-theme/popover.ts diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index c2364bb51f9..2e02214db54 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -3,7 +3,10 @@ // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT const customFunctions = [ "get-trailing-text-input-padding", - "scale-duration" + "medium-modular-scale", + "modular-scale", + "scale-duration", + "small-modular-scale" ]; // ⚠️ END OF AUTO-GENERATED CODE diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index bffc8ef3637..68d4f03e98e 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, 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 { diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 2520e24855a..24b1fecf61a 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -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`, { @@ -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", + }, + ], + }); + }); }); }); diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 37936f0d69b..c3da22ceaa8 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -7,6 +7,11 @@ * @prop --calcite-action-background-color: Specifies the component's background color. * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused. * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active. + * @prop --calcite-action-corner-radius: Specifies the component's corner radius. + * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end. + * @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start. + * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end. + * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start. * @prop --calcite-action-text-color: Specifies the text color of the component. * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered. */ @@ -16,6 +21,26 @@ @apply flex bg-transparent; } +:host, +button { + border-end-end-radius: var( + --calcite-action-corner-radius-end-end, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-end-start-radius: var( + --calcite-action-corner-radius-end-start, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-start-end-radius: var( + --calcite-action-corner-radius-start-end, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); + border-start-start-radius: var( + --calcite-action-corner-radius-start-start, + var(--calcite-action-corner-radius, var(--calcite-corner-radius)) + ); +} + @mixin action-indicator() { position: relative; &::after { diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index 33047e32b11..9a078854371 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -9,6 +9,7 @@ import { openClose, renders, t9n, + themed, } from "../../tests/commonTests"; import { CSS } from "./resources"; @@ -699,4 +700,67 @@ describe("calcite-popover", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed( + html` + + Lorem Ipsum + + `, + { + "--calcite-popover-background-color": { + shadowSelector: `.${CSS.container}`, + targetProp: "backgroundColor", + }, + "--calcite-popover-border-color": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "borderColor", + }, + { + shadowSelector: `.${CSS.header}`, + targetProp: "borderBlockEndColor", + }, + ], + "--calcite-popover-corner-radius": { + shadowSelector: `.${CSS.container}`, + targetProp: "borderRadius", + }, + "--calcite-popover-text-color": [ + { + shadowSelector: `.${CSS.heading}`, + targetProp: "color", + }, + { + shadowSelector: `.${CSS.headerContainer}`, + targetProp: "color", + }, + ], + }, + ); + }); + describe("closable", () => { + themed( + html` + + Lorem Ipsum + + `, + { + "--calcite-popover-corner-radius": [ + { + shadowSelector: `.${CSS.closeButtonContainer}`, + targetProp: "borderStartEndRadius", + }, + { + shadowSelector: `.${CSS.closeButtonContainer}`, + targetProp: "borderEndEndRadius", + }, + ], + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index 0f440644919..1314105f7dd 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -3,6 +3,10 @@ * * These properties can be overridden using the component's tag as selector. * + * @prop --calcite-popover-background-color: Specifies the background color of the component. + * @prop --calcite-popover-border-color: Specifies the border color of the component. + * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component. + * @prop --calcite-popover-text-color: Specifies the text color of the component. * @prop --calcite-popover-z-index: Sets the z-index value for the component. */ @@ -46,42 +50,40 @@ } .calcite-floating-ui-anim { - @apply bg-foreground-1 - border-color-3 - rounded - border + @apply border border-solid; -} -.arrow::before { - outline: 1px solid var(--calcite-color-border-3); + background-color: var(--calcite-popover-background-color, var(--calcite-color-foreground-1)); + border-color: var(--calcite-popover-border-color, var(--calcite-color-border-3)); + border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); } .header { - @apply border-b-color-3 - flex + @apply flex flex-auto items-stretch justify-start border-0 border-b border-solid; + + border-block-end-color: var(--calcite-popover-border-color, var(--calcite-color-border-3)); } .heading { - @apply text-color-1 - word-break + @apply word-break m-0 block flex-auto self-center whitespace-normal font-medium; + + color: var(--calcite-popover-text-color, var(--calcite-color-text-1)); } -.container { - @apply text-color-1 - relative +.headerContainer { + @apply relative flex h-full flex-row @@ -90,6 +92,8 @@ &.has-header { @apply flex-col; } + + color: var(--calcite-popover-text-color, var(--calcite-color-text-1)); } .content { @@ -105,12 +109,10 @@ .close-button-container { @apply flex overflow-hidden; flex: 0 0 auto; - border-start-end-radius: theme("borderRadius.DEFAULT"); - border-end-end-radius: theme("borderRadius.DEFAULT"); -} - -.has-header .close-button-container { - border-end-end-radius: none; + border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); + border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); + --calcite-action-corner-radius-start-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp)); + --calcite-action-corner-radius-end-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp)); } ::slotted(calcite-panel), diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 016f02d8227..70c614380a8 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -582,6 +582,7 @@ export class Popover >
{this.renderHeader()} diff --git a/packages/calcite-components/src/components/popover/resources.ts b/packages/calcite-components/src/components/popover/resources.ts index c8ac0b31dba..1ca6900a22b 100644 --- a/packages/calcite-components/src/components/popover/resources.ts +++ b/packages/calcite-components/src/components/popover/resources.ts @@ -6,6 +6,7 @@ export const CSS = { content: "content", hasHeader: "has-header", header: "header", + headerContainer: "headerContainer", headerContent: "header-content", heading: "heading", }; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 7aedb7c6c57..77ea6a53df8 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -27,6 +27,7 @@ import { inputText } from "./custom-theme/input-text"; import { loader } from "./custom-theme/loader"; import { notices } from "./custom-theme/notice"; import { pagination } from "./custom-theme/pagination"; +import { popover, popoverTokens } from "./custom-theme/popover"; import { progress, progressTokens } from "./custom-theme/progress"; import { segmentedControl } from "./custom-theme/segmented-control"; import { slider } from "./custom-theme/slider"; @@ -113,9 +114,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${checkbox}
${chips} ${pagination} ${slider}
- -
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea}
- +
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}
`; @@ -136,6 +135,7 @@ export default { ...chipTokens, ...checkboxTokens, ...handleTokens, + ...popoverTokens, ...progressTokens, ...inputTokens, ...textAreaTokens, @@ -146,7 +146,7 @@ export const themingInteractive = (args: Record): string => { return kitchenSink(args); }; -export const theming_TestOnly = (): string => { +export const theming = (): string => { return kitchenSink( { ...accordionTokens, @@ -161,6 +161,7 @@ export const theming_TestOnly = (): string => { ...chipTokens, ...checkboxTokens, ...handleTokens, + ...popoverTokens, ...progressTokens, ...inputTokens, ...textAreaTokens, diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts new file mode 100644 index 00000000000..0c2083efd7b --- /dev/null +++ b/packages/calcite-components/src/custom-theme/popover.ts @@ -0,0 +1,28 @@ +import { html } from "../../support/formatting"; + +export const popoverTokens = { + calcitePopoverBackgroundColor: "", + calcitePopoverBorderColor: "", + calcitePopoverCornerRadius: "", + calcitePopoverTextColor: "", + calcitePopoverZIndex: "", +}; + +export const popover = html` + + nostrud exercitation + +
+ I am a title!
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

+
+ + +`;