From 7aebc5fcae47ed0b5c7337c56e487b31d1a2e47f Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Mon, 3 Jun 2024 15:21:12 -0700 Subject: [PATCH 1/5] refactor(storybook) consolidate storybook and component types --- .../.storybook/interfaces.ts | 56 ------ .../.storybook/resources.ts | 4 +- .../calcite-components/src/components.d.ts | 174 ++++++++++++++---- .../accordion-item/accordion-item.tsx | 2 +- .../src/components/accordion/accordion.tsx | 7 +- .../src/components/action-bar/action-bar.tsx | 2 +- .../components/action-group/action-group.tsx | 2 +- .../src/components/action-pad/action-pad.tsx | 4 +- .../block-section/block-section.tsx | 3 +- .../src/components/card/card.tsx | 3 +- .../src/components/carousel/carousel.tsx | 3 +- .../src/components/carousel/interfaces.ts | 2 - .../src/components/interfaces.ts | 41 ++++- .../radio-button-group/radio-button-group.tsx | 3 +- .../segmented-control-item.tsx | 2 +- .../shell-center-row/shell-center-row.tsx | 2 +- .../components/shell-panel/shell-panel.tsx | 2 +- .../sortable-list/sortable-list.tsx | 2 +- .../split-button/split-button.stories.ts | 2 +- .../src/components/tile-group/tile-group.tsx | 5 +- .../src/components/tile/tile.tsx | 5 +- 21 files changed, 209 insertions(+), 117 deletions(-) delete mode 100644 packages/calcite-components/.storybook/interfaces.ts diff --git a/packages/calcite-components/.storybook/interfaces.ts b/packages/calcite-components/.storybook/interfaces.ts deleted file mode 100644 index 594ef97e87e..00000000000 --- a/packages/calcite-components/.storybook/interfaces.ts +++ /dev/null @@ -1,56 +0,0 @@ -/* Note: using `.d.ts` file extension will exclude it from the output build */ -export type Alignment = "start" | "center" | "end"; -export type Appearance = "solid" | "outline" | "outline-fill" | "transparent"; -export type Columns = 1 | 2 | 3 | 4 | 5 | 6; -export type FlipContext = "both" | "start" | "end"; -export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success"; -export type Layout = - | "horizontal" - | "vertical" - | "grid" - | "inline" - | "center" - | "auto" - | "fixed" - | "none" - | "horizontal-single"; -export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end"; -export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto"; -export type ModeName = "light" | "dark" | "auto"; -export type Position = "start" | "end" | "top" | "bottom"; -export type SelectionAppearance = "icon" | "border"; -export type SelectionMode = - | "single" - | "none" - | "children" - | "single-persist" - | "multichildren" - | "ancestors" - | "multiple"; -export type Scale = "s" | "m" | "l"; -export type Status = "invalid" | "valid" | "idle"; -export type Width = "auto" | "half" | "full"; -export type ArrowType = "inline" | "edge" | "none"; -export type DisplayMode = "dock" | "float" | "overlay"; -export type ToggleDisplay = "button" | "switch"; -export type Dir = "ltr" | "rtl"; -export type ButtonType = "radio" | "checkbox"; -export type InteractionMode = "interactive" | "static"; -export type IconType = "chevron" | "caret" | "ellipsis" | "overflow"; -export type DeterminateType = "determinate" | "indeterminate"; -export type FillType = "single" | "range"; -export type LabelType = "percent" | "units"; -export type ClickType = "click" | "hover"; -export type CollapseDirection = "down" | "up"; -export type TextType = - | "text" - | "textarea" - | "email" - | "password" - | "tel" - | "number" - | "search" - | "file" - | "time" - | "date"; -export type Mode = "offset" | "name"; diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts index 6d2a0e4f25b..18a1956eaaa 100644 --- a/packages/calcite-components/.storybook/resources.ts +++ b/packages/calcite-components/.storybook/resources.ts @@ -24,7 +24,7 @@ import { TextType, Mode, SelectionAppearance, -} from "./interfaces"; +} from "../../calcite-components/src/components/interfaces.ts"; interface AttributeMetadata { values: T[]; @@ -93,7 +93,7 @@ const layoutOptions: Layout[] = [ const dirOptions: Dir[] = ["ltr", "rtl"]; const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"]; const interactionModeOptions: InteractionMode[] = ["interactive", "static"]; -const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow"]; +const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"]; const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"]; const fillTypeOptions: FillType[] = ["single", "range"]; const labelTypeOptions: LabelType[] = ["percent", "units"]; diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 14d5926eb0e..d03a3fcfeec 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -5,87 +5,185 @@ * It contains typing information for all components that exist in this project. */ 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 { Alignment, Appearance, ArrowType, Columns, FlipContext, IconType, 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 { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; +import { 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 { Alignment, Appearance, ArrowType, Columns, FlipContext, IconType, 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 { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; +export { 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 { @@ -96,11 +194,11 @@ export namespace Components { /** * Specifies the placement of the icon in the header. */ - "iconPosition": Position; + "iconPosition": Extract<"start" | "end", Position>; /** * Specifies the type of the icon in the header. */ - "iconType": "chevron" | "caret" | "plus-minus"; + "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>; /** * Specifies the size of the component. */ @@ -141,7 +239,7 @@ export namespace Components { /** * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. */ - "iconPosition": Position; + "iconPosition": Extract<"start" | "end", Position>; /** * Specifies an icon to display at the start of the component. */ @@ -265,7 +363,7 @@ export namespace Components { /** * Arranges the component depending on the element's `dir` property. */ - "position": Position; + "position": Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. */ @@ -292,7 +390,7 @@ export namespace Components { * Indicates the layout of the component. * @deprecated Use the `layout` property on the component's parent instead. */ - "layout": Layout; + "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; /** * When `true`, the `calcite-action-menu` is open. */ @@ -372,7 +470,7 @@ export namespace Components { /** * Indicates the layout of the component. */ - "layout": Layout; + "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Use this property to override individual strings used by the component. */ @@ -388,7 +486,7 @@ export namespace Components { /** * Arranges the component depending on the element's `dir` property. */ - "position": Position; + "position": Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. */ @@ -3895,7 +3993,7 @@ export namespace Components { /** * Defines the layout of the component. */ - "layout": Layout; + "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Specifies the name of the component on form submission. Must be unique to other component instances. */ @@ -4087,7 +4185,7 @@ export namespace Components { /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ - "layout": Layout; + "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. */ @@ -4235,7 +4333,7 @@ export namespace Components { /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - "position": Position; + "position": Extract<"start" | "end", Position>; } interface CalciteShellPanel { /** @@ -4275,7 +4373,7 @@ export namespace Components { /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - "position": Position; + "position": Extract<"start" | "end", Position>; /** * When `true` and `displayMode` is not `float`, the component's content area is resizable. */ @@ -4432,7 +4530,7 @@ export namespace Components { /** * Indicates the horizontal or vertical orientation of the component. */ - "layout": Layout; + "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ @@ -5154,7 +5252,10 @@ export namespace Components { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout": Exclude; + "layout": Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + >; /** * Specifies the size of the component. */ @@ -5195,7 +5296,10 @@ export namespace Components { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout": Exclude; + "layout": Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + >; /** * Specifies the size of the component. */ @@ -7803,11 +7907,11 @@ declare namespace LocalJSX { /** * Specifies the placement of the icon in the header. */ - "iconPosition"?: Position; + "iconPosition"?: Extract<"start" | "end", Position>; /** * Specifies the type of the icon in the header. */ - "iconType"?: "chevron" | "caret" | "plus-minus"; + "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>; "onCalciteInternalAccordionChange"?: (event: CalciteAccordionCustomEvent) => void; /** * Specifies the size of the component. @@ -7849,7 +7953,7 @@ declare namespace LocalJSX { /** * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. */ - "iconPosition"?: Position; + "iconPosition"?: Extract<"start" | "end", Position>; /** * Specifies an icon to display at the start of the component. */ @@ -7967,7 +8071,7 @@ declare namespace LocalJSX { /** * Arranges the component depending on the element's `dir` property. */ - "position"?: Position; + "position"?: Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. */ @@ -7990,7 +8094,7 @@ declare namespace LocalJSX { * Indicates the layout of the component. * @deprecated Use the `layout` property on the component's parent instead. */ - "layout"?: Layout; + "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; /** * When `true`, the `calcite-action-menu` is open. */ @@ -8066,7 +8170,7 @@ declare namespace LocalJSX { /** * Indicates the layout of the component. */ - "layout"?: Layout; + "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Use this property to override individual strings used by the component. */ @@ -8086,7 +8190,7 @@ declare namespace LocalJSX { /** * Arranges the component depending on the element's `dir` property. */ - "position"?: Position; + "position"?: Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. */ @@ -11820,7 +11924,7 @@ declare namespace LocalJSX { /** * Defines the layout of the component. */ - "layout"?: Layout; + "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Specifies the name of the component on form submission. Must be unique to other component instances. */ @@ -12012,7 +12116,7 @@ declare namespace LocalJSX { /** * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. */ - "layout"?: Layout; + "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; /** * Fires when the item has been selected. */ @@ -12172,7 +12276,7 @@ declare namespace LocalJSX { /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - "position"?: Position; + "position"?: Extract<"start" | "end", Position>; } interface CalciteShellPanel { /** @@ -12214,7 +12318,7 @@ declare namespace LocalJSX { /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - "position"?: Position; + "position"?: Extract<"start" | "end", Position>; /** * When `true` and `displayMode` is not `float`, the component's content area is resizable. */ @@ -12375,7 +12479,7 @@ declare namespace LocalJSX { /** * Indicates the horizontal or vertical orientation of the component. */ - "layout"?: Layout; + "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ @@ -13112,7 +13216,10 @@ declare namespace LocalJSX { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout"?: Exclude; + "layout"?: Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + >; "onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent) => void; /** * Fires when the selected state of the component changes. @@ -13154,7 +13261,10 @@ declare namespace LocalJSX { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout"?: Exclude; + "layout"?: Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + >; /** * Fires when the component's selection changes. */ diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 3336c3868da..2d2e9d92239 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -68,7 +68,7 @@ export class AccordionItem implements ConditionalSlotComponent { * * @internal */ - @Prop() iconPosition: Position; + @Prop() iconPosition: Extract<"start" | "end", Position>; /** Specifies the type of the icon in the header inherited from the `calcite-accordion`. * diff --git a/packages/calcite-components/src/components/accordion/accordion.tsx b/packages/calcite-components/src/components/accordion/accordion.tsx index 8fb506ca557..847c944d861 100644 --- a/packages/calcite-components/src/components/accordion/accordion.tsx +++ b/packages/calcite-components/src/components/accordion/accordion.tsx @@ -9,7 +9,7 @@ import { VNode, Watch, } from "@stencil/core"; -import { Appearance, Position, Scale, SelectionMode } from "../interfaces"; +import { Appearance, Position, IconType, Scale, SelectionMode } from "../interfaces"; import { createObserver } from "../../utils/observers"; import { RequestedItem } from "./interfaces"; /** @@ -31,10 +31,11 @@ export class Accordion { @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid"; /** Specifies the placement of the icon in the header. */ - @Prop({ reflect: true }) iconPosition: Position = "end"; + @Prop({ reflect: true }) iconPosition: Extract<"start" | "end", Position> = "end"; /** Specifies the type of the icon in the header. */ - @Prop({ reflect: true }) iconType: "chevron" | "caret" | "plus-minus" = "chevron"; + @Prop({ reflect: true }) iconType: Extract<"chevron" | "caret" | "plus-minus", IconType> = + "chevron"; /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index f2b3866436f..0a19f4225b8 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -137,7 +137,7 @@ export class ActionBar /** * Arranges the component depending on the element's `dir` property. */ - @Prop({ reflect: true }) position: Position; + @Prop({ reflect: true }) position: Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 84d6b524fb4..9abbeb2e238 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -68,7 +68,7 @@ export class ActionGroup * * @deprecated Use the `layout` property on the component's parent instead. */ - @Prop({ reflect: true }) layout: Layout = "vertical"; + @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical"; /** * Indicates number of columns. diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index e677f2489dc..e36df2f271e 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -82,7 +82,7 @@ export class ActionPad /** * Indicates the layout of the component. */ - @Prop({ reflect: true }) layout: Layout = "vertical"; + @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical"; @Watch("layout") layoutHandler(): void { @@ -92,7 +92,7 @@ export class ActionPad /** * Arranges the component depending on the element's `dir` property. */ - @Prop({ reflect: true }) position: Position; + @Prop({ reflect: true }) position: Extract<"start" | "end", Position>; /** * Specifies the size of the expand `calcite-action`. diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 909834bf36f..e1ac6a70469 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -14,7 +14,6 @@ import { import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom"; import { isActivationKey } from "../../utils/key"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { FlipContext } from "../interfaces"; import { connectMessages, disconnectMessages, @@ -22,7 +21,7 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { Status } from "../interfaces"; +import { FlipContext, Status } from "../interfaces"; import { componentFocusable, LoadableComponent, diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index bcd45987630..265ec7b7b86 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -26,8 +26,7 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { LogicalFlowPosition } from "../interfaces"; -import { SelectionMode } from "../interfaces"; +import { LogicalFlowPosition, SelectionMode } from "../interfaces"; import { connectInteractive, disconnectInteractive, diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index 5d1da2948b7..d8839ba4e3c 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -41,9 +41,10 @@ import { updateMessages, } from "../../utils/t9n"; import { getRoundRobinIndex } from "../../utils/array"; +import { ArrowType } from "../interfaces"; import { CSS, DURATION, ICONS } from "./resources"; import { CarouselMessages } from "./assets/carousel/t9n"; -import { ArrowType, AutoplayType } from "./interfaces"; +import { AutoplayType } from "./interfaces"; /** * @slot - A slot for adding `calcite-carousel-item`s. diff --git a/packages/calcite-components/src/components/carousel/interfaces.ts b/packages/calcite-components/src/components/carousel/interfaces.ts index 37d35c3db00..7ed76c6b3e6 100644 --- a/packages/calcite-components/src/components/carousel/interfaces.ts +++ b/packages/calcite-components/src/components/carousel/interfaces.ts @@ -1,4 +1,2 @@ -export type ArrowType = "inline" | "edge" | "none"; - /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */ export type AutoplayType = boolean | "paused" | ""; diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts index 32f257ae8f6..f8bd6553466 100644 --- a/packages/calcite-components/src/components/interfaces.ts +++ b/packages/calcite-components/src/components/interfaces.ts @@ -1,15 +1,24 @@ /* Note: using `.d.ts` file extension will exclude it from the output build */ export type Alignment = "start" | "center" | "end"; -export type Appearance = "outline" | "outline-fill" | "solid" | "transparent"; +export type Appearance = "solid" | "outline" | "outline-fill" | "transparent"; export type Columns = 1 | 2 | 3 | 4 | 5 | 6; export type FlipContext = "both" | "start" | "end"; export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success"; -export type Layout = "horizontal" | "vertical" | "grid"; +export type Layout = + | "horizontal" + | "vertical" + | "grid" + | "inline" + | "center" + | "auto" + | "fixed" + | "none" + | "horizontal-single"; export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end"; export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto"; export type ModeName = "light" | "dark" | "auto"; -export type Position = "start" | "end"; -export type SelectionAppearance = "border" | "icon"; +export type Position = "start" | "end" | "top" | "bottom"; +export type SelectionAppearance = "icon" | "border"; export type SelectionMode = | "single" | "none" @@ -21,3 +30,27 @@ export type SelectionMode = export type Scale = "s" | "m" | "l"; export type Status = "invalid" | "valid" | "idle"; export type Width = "auto" | "half" | "full"; +export type ArrowType = "inline" | "edge" | "none"; +export type DisplayMode = "dock" | "float" | "overlay"; +export type ToggleDisplay = "button" | "switch"; +export type Dir = "ltr" | "rtl"; +export type ButtonType = "radio" | "checkbox"; +export type InteractionMode = "interactive" | "static"; +export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus"; +export type DeterminateType = "determinate" | "indeterminate"; +export type FillType = "single" | "range"; +export type LabelType = "percent" | "units"; +export type ClickType = "click" | "hover"; +export type CollapseDirection = "down" | "up"; +export type TextType = + | "text" + | "textarea" + | "email" + | "password" + | "tel" + | "number" + | "search" + | "file" + | "time" + | "date"; +export type Mode = "offset" | "name"; diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx index a94b5c5c3a4..1738ecaaee4 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx @@ -58,7 +58,8 @@ export class RadioButtonGroup implements LoadableComponent { } /** Defines the layout of the component. */ - @Prop({ reflect: true }) layout: Layout = "horizontal"; + @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = + "horizontal"; @Watch("layout") onLayoutChange(): void { diff --git a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx index 91281352cd8..1e8f3372b9a 100644 --- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx +++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx @@ -62,7 +62,7 @@ export class SegmentedControlItem { * * @internal */ - @Prop() layout: Layout = "horizontal"; + @Prop() layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "horizontal"; /** * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx index 7d15d2fedbd..6c526f8ea27 100644 --- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx +++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx @@ -37,7 +37,7 @@ export class ShellCenterRow implements ConditionalSlotComponent { /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - @Prop({ reflect: true }) position: Position = "end"; + @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "end"; // -------------------------------------------------------------------------- // diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index d7fdc1278f3..0ee7f5ba427 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -131,7 +131,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, /** * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - @Prop({ reflect: true }) position: Position = "start"; + @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "start"; /** * When `true` and `displayMode` is not `float`, the component's content area is resizable. diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx index 13895ef15d8..1983a0c23bb 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx @@ -65,7 +65,7 @@ export class SortableList implements InteractiveComponent, SortableComponent { /** * Indicates the horizontal or vertical orientation of the component. */ - @Prop({ reflect: true }) layout: Layout = "vertical"; + @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical"; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts index f1d8928d1a2..ab07381fe07 100644 --- a/packages/calcite-components/src/components/split-button/split-button.stories.ts +++ b/packages/calcite-components/src/components/split-button/split-button.stories.ts @@ -55,7 +55,7 @@ export default { control: { type: "select" }, }, dropdownIconType: { - options: iconType.values, + options: iconType.values.filter((option) => option !== "plus-minus"), control: { type: "select" }, }, }, diff --git a/packages/calcite-components/src/components/tile-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx index ab10203d57a..692ced41f47 100644 --- a/packages/calcite-components/src/components/tile-group/tile-group.tsx +++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx @@ -53,7 +53,10 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent * * Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - @Prop({ reflect: true }) layout: Exclude = "horizontal"; + @Prop({ reflect: true }) layout: Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + > = "horizontal"; /** * Specifies the size of the component. diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index 67b1330d867..de2bb59c01a 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -107,7 +107,10 @@ export class Tile implements InteractiveComponent, SelectableComponent { * * @internal */ - @Prop({ reflect: true }) layout: Exclude = "horizontal"; + @Prop({ reflect: true }) layout: Exclude< + Layout, + "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" + > = "horizontal"; /** * Specifies the size of the component. From 0bbf22fdeaea8029de2c6e9719da27e624015f8b Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Tue, 4 Jun 2024 10:28:23 -0700 Subject: [PATCH 2/5] refactor(storybook) consolidate storybook and component types --- .../calcite-components/src/components.d.ts | 28 ++++++------------- .../block-section/block-section.tsx | 3 +- .../src/components/card/card.tsx | 3 +- .../src/components/carousel/carousel.tsx | 3 +- .../src/components/carousel/interfaces.ts | 2 ++ .../src/components/tile-group/tile-group.tsx | 5 +--- .../src/components/tile/tile.tsx | 5 +--- 7 files changed, 17 insertions(+), 32 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index d03a3fcfeec..128e240e7ee 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { Alignment, Appearance, ArrowType, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; +import { Alignment, Appearance, Columns, FlipContext, IconType, 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"; @@ -23,7 +23,7 @@ import { BlockSectionMessages } from "./components/block-section/assets/block-se import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; import { ButtonMessages } from "./components/button/assets/button/t9n"; import { CardMessages } from "./components/card/assets/card/t9n"; -import { AutoplayType } from "./components/carousel/interfaces"; +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"; @@ -95,7 +95,7 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/ 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, ArrowType, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; +export { Alignment, Appearance, Columns, FlipContext, IconType, 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"; @@ -113,7 +113,7 @@ export { BlockSectionMessages } from "./components/block-section/assets/block-se export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; export { ButtonMessages } from "./components/button/assets/button/t9n"; export { CardMessages } from "./components/card/assets/card/t9n"; -export { AutoplayType } from "./components/carousel/interfaces"; +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"; @@ -5252,10 +5252,7 @@ export namespace Components { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout": Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - >; + "layout": Extract; /** * Specifies the size of the component. */ @@ -5296,10 +5293,7 @@ export namespace Components { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout": Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - >; + "layout": Extract; /** * Specifies the size of the component. */ @@ -13216,10 +13210,7 @@ declare namespace LocalJSX { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout"?: Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - >; + "layout"?: Extract; "onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent) => void; /** * Fires when the selected state of the component changes. @@ -13261,10 +13252,7 @@ declare namespace LocalJSX { /** * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - "layout"?: Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - >; + "layout"?: Extract; /** * Fires when the component's selection changes. */ diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index e1ac6a70469..909834bf36f 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -14,6 +14,7 @@ import { import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom"; import { isActivationKey } from "../../utils/key"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { FlipContext } from "../interfaces"; import { connectMessages, disconnectMessages, @@ -21,7 +22,7 @@ import { T9nComponent, updateMessages, } from "../../utils/t9n"; -import { FlipContext, Status } from "../interfaces"; +import { Status } from "../interfaces"; import { componentFocusable, LoadableComponent, diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index 265ec7b7b86..bcd45987630 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -26,7 +26,8 @@ import { setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable"; -import { LogicalFlowPosition, SelectionMode } from "../interfaces"; +import { LogicalFlowPosition } from "../interfaces"; +import { SelectionMode } from "../interfaces"; import { connectInteractive, disconnectInteractive, diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index d8839ba4e3c..5d1da2948b7 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -41,10 +41,9 @@ import { updateMessages, } from "../../utils/t9n"; import { getRoundRobinIndex } from "../../utils/array"; -import { ArrowType } from "../interfaces"; import { CSS, DURATION, ICONS } from "./resources"; import { CarouselMessages } from "./assets/carousel/t9n"; -import { AutoplayType } from "./interfaces"; +import { ArrowType, AutoplayType } from "./interfaces"; /** * @slot - A slot for adding `calcite-carousel-item`s. diff --git a/packages/calcite-components/src/components/carousel/interfaces.ts b/packages/calcite-components/src/components/carousel/interfaces.ts index 7ed76c6b3e6..37d35c3db00 100644 --- a/packages/calcite-components/src/components/carousel/interfaces.ts +++ b/packages/calcite-components/src/components/carousel/interfaces.ts @@ -1,2 +1,4 @@ +export type ArrowType = "inline" | "edge" | "none"; + /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */ export type AutoplayType = boolean | "paused" | ""; diff --git a/packages/calcite-components/src/components/tile-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx index 692ced41f47..05282ae4383 100644 --- a/packages/calcite-components/src/components/tile-group/tile-group.tsx +++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx @@ -53,10 +53,7 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent * * Use `"horizontal"` for rows, and `"vertical"` for a single column. */ - @Prop({ reflect: true }) layout: Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - > = "horizontal"; + @Prop({ reflect: true }) layout: Extract = "horizontal"; /** * Specifies the size of the component. diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index de2bb59c01a..15584f7c402 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -107,10 +107,7 @@ export class Tile implements InteractiveComponent, SelectableComponent { * * @internal */ - @Prop({ reflect: true }) layout: Exclude< - Layout, - "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single" - > = "horizontal"; + @Prop({ reflect: true }) layout: Extract = "horizontal"; /** * Specifies the size of the component. From 28a45f0da234be0cd4ffe1659276cac75d6eb047 Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Wed, 5 Jun 2024 15:32:49 -0700 Subject: [PATCH 3/5] refactor: move types into component-specific interfaces files --- .../.storybook/resources.ts | 64 ++++++++++--------- .../calcite-components/src/components.d.ts | 26 ++++---- .../accordion-item/accordion-item.tsx | 4 +- .../components/action-group/action-group.tsx | 3 +- .../src/components/action-group/interfaces.ts | 1 + .../src/components/dropdown/interfaces.ts | 2 + .../src/components/flow-item/flow-item.tsx | 3 +- .../src/components/input/interfaces.ts | 11 ++++ .../src/components/interfaces.ts | 23 ------- .../src/components/loader/interfaces.ts | 1 + .../src/components/meter/interfaces.ts | 1 + .../src/components/meter/meter.tsx | 4 +- .../src/components/panel/panel.tsx | 3 +- .../src/components/sheet/sheet.stories.ts | 4 +- .../src/components/shell/interfaces.ts | 1 + .../src/components/shell/shell.stories.ts | 6 +- .../tile-select-group/interfaces.ts | 1 + 17 files changed, 82 insertions(+), 76 deletions(-) create mode 100644 packages/calcite-components/src/components/action-group/interfaces.ts create mode 100644 packages/calcite-components/src/components/loader/interfaces.ts create mode 100644 packages/calcite-components/src/components/shell/interfaces.ts diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts index 18a1956eaaa..af20a31cb46 100644 --- a/packages/calcite-components/.storybook/resources.ts +++ b/packages/calcite-components/.storybook/resources.ts @@ -8,23 +8,23 @@ import { Kind, Width, SelectionMode, - ArrowType, - DisplayMode, - ToggleDisplay, Layout, - Dir, - ButtonType, - InteractionMode, IconType, - DeterminateType, - FillType, - LabelType, - ClickType, CollapseDirection, - TextType, - Mode, SelectionAppearance, } from "../../calcite-components/src/components/interfaces.ts"; +import { ArrowType } from "../src/components/carousel/interfaces.ts"; +import { BlockSectionToggleDisplay } from "../src/components/block-section/interfaces.ts"; +import { TileSelectGroupDir } from "../src/components/tile-select-group/interfaces.ts"; +import { TileSelectType } from "../src/components/tile-select/interfaces.ts"; +import { TableInteractionMode } from "../src/components/table/interfaces.ts"; +import { DeterminateType } from "../src/components/loader/interfaces.ts"; +import { MeterFillType, MeterLabelType } from "../src/components/meter/interfaces.ts"; +import { DropdownClickType } from "../src/components/dropdown/interfaces.ts"; +import { TextType } from "../src/components/input/interfaces.ts"; +import { TimeZoneMode } from "../src/components/input-time-zone/interfaces.ts"; +import { DisplayMode } from "../src/components/sheet/interfaces.ts"; +import { ShellDisplayMode } from "../src/components/shell/interfaces.ts"; interface AttributeMetadata { values: T[]; @@ -43,20 +43,21 @@ interface CommonAttributes { selectionMode: AttributeMetadata; arrowType: AttributeMetadata; displayMode: AttributeMetadata; - toggleDisplay: AttributeMetadata; + toggleDisplay: AttributeMetadata; layout: AttributeMetadata; - dir: AttributeMetadata; - buttonType: AttributeMetadata; - interactionMode: AttributeMetadata; + dir: AttributeMetadata; + buttonType: AttributeMetadata; + interactionMode: AttributeMetadata; iconType: AttributeMetadata; determinateType: AttributeMetadata; - fillType: AttributeMetadata; - labelType: AttributeMetadata; - clickType: AttributeMetadata; + fillType: AttributeMetadata; + labelType: AttributeMetadata; + clickType: AttributeMetadata; collapseDirection: AttributeMetadata; textType: AttributeMetadata; - mode: AttributeMetadata; + mode: AttributeMetadata; selectionAppearance: AttributeMetadata; + shellDisplayMode: AttributeMetadata; } const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"]; @@ -77,8 +78,8 @@ const selectionModeOptions: SelectionMode[] = [ "multiple", ]; const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"]; -const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"]; -const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"]; +const displayModeOptions: DisplayMode[] = ["float", "overlay"]; +const toggleDisplayOptions: BlockSectionToggleDisplay[] = ["button", "switch"]; const layoutOptions: Layout[] = [ "horizontal", "vertical", @@ -90,14 +91,14 @@ const layoutOptions: Layout[] = [ "none", "horizontal-single", ]; -const dirOptions: Dir[] = ["ltr", "rtl"]; -const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"]; -const interactionModeOptions: InteractionMode[] = ["interactive", "static"]; +const dirOptions: TileSelectGroupDir[] = ["ltr", "rtl"]; +const buttonTypeOptions: TileSelectType[] = ["radio", "checkbox"]; +const interactionModeOptions: TableInteractionMode[] = ["interactive", "static"]; const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"]; const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"]; -const fillTypeOptions: FillType[] = ["single", "range"]; -const labelTypeOptions: LabelType[] = ["percent", "units"]; -const clickTypeOptions: ClickType[] = ["click", "hover"]; +const fillTypeOptions: MeterFillType[] = ["single", "range"]; +const labelTypeOptions: MeterLabelType[] = ["percent", "units"]; +const clickTypeOptions: DropdownClickType[] = ["click", "hover"]; const collapseDirectionOptions: CollapseDirection[] = ["down", "up"]; const textTypeOptions: TextType[] = [ "text", @@ -111,8 +112,9 @@ const textTypeOptions: TextType[] = [ "time", "date", ]; -const modeOptions: Mode[] = ["offset", "name"]; +const modeOptions: TimeZoneMode[] = ["offset", "name"]; const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"]; +const shellDisplayModeOptions: ShellDisplayMode[] = ["dock", "float", "overlay"]; export const ATTRIBUTES: CommonAttributes = { alignment: { @@ -215,4 +217,8 @@ export const ATTRIBUTES: CommonAttributes = { values: selectionAppearanceOptions, defaultValue: selectionAppearanceOptions[0], }, + shellDisplayMode: { + values: shellDisplayModeOptions, + defaultValue: shellDisplayModeOptions[0], + }, }; diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 128e240e7ee..071ad829682 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -5,12 +5,13 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { Alignment, Appearance, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; +import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, 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 { 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, Sync } from "./components/alert/interfaces"; @@ -61,7 +62,7 @@ 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 { 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"; @@ -95,12 +96,13 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/ 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, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/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 { 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 { 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, Sync } from "./components/alert/interfaces"; @@ -151,7 +153,7 @@ 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 { 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"; @@ -247,7 +249,7 @@ export namespace Components { /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ - "iconType": "chevron" | "caret" | "plus-minus"; + "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>; /** * Specifies the size of the component inherited from the `calcite-accordion`. */ @@ -1858,7 +1860,7 @@ export namespace Components { /** * Specifies the direction of the collapse. */ - "collapseDirection": "down" | "up"; + "collapseDirection": CollapseDirection; /** * When `true`, hides the component's content area. */ @@ -3252,7 +3254,7 @@ export namespace Components { /** * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */ - "fillType": "single" | "range"; + "fillType": MeterFillType; /** * The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ @@ -3630,7 +3632,7 @@ export namespace Components { /** * Specifies the direction of the collapse. */ - "collapseDirection": "down" | "up"; + "collapseDirection": CollapseDirection; /** * When `true`, hides the component's content area. */ @@ -7955,7 +7957,7 @@ declare namespace LocalJSX { /** * Specifies the type of the icon in the header inherited from the `calcite-accordion`. */ - "iconType"?: "chevron" | "caret" | "plus-minus"; + "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>; "onCalciteInternalAccordionItemClose"?: (event: CalciteAccordionItemCustomEvent) => void; "onCalciteInternalAccordionItemSelect"?: (event: CalciteAccordionItemCustomEvent) => void; /** @@ -9653,7 +9655,7 @@ declare namespace LocalJSX { /** * Specifies the direction of the collapse. */ - "collapseDirection"?: "down" | "up"; + "collapseDirection"?: CollapseDirection; /** * When `true`, hides the component's content area. */ @@ -11153,7 +11155,7 @@ declare namespace LocalJSX { /** * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */ - "fillType"?: "single" | "range"; + "fillType"?: MeterFillType; /** * The `id` of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. */ @@ -11526,7 +11528,7 @@ declare namespace LocalJSX { /** * Specifies the direction of the collapse. */ - "collapseDirection"?: "down" | "up"; + "collapseDirection"?: CollapseDirection; /** * When `true`, hides the component's content area. */ diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 2d2e9d92239..4eeae4ce035 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -23,7 +23,7 @@ import { } from "../../utils/dom"; import { CSS_UTILITY } from "../../utils/resources"; import { getIconScale } from "../../utils/component"; -import { FlipContext, Position, Scale, SelectionMode } from "../interfaces"; +import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces"; import { componentFocusable } from "../../utils/component"; import { SLOTS, CSS, IDS } from "./resources"; import { RequestedItem } from "./interfaces"; @@ -74,7 +74,7 @@ export class AccordionItem implements ConditionalSlotComponent { * * @internal */ - @Prop() iconType: "chevron" | "caret" | "plus-minus"; + @Prop() iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>; /** * The containing `accordion` element. diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index 9abbeb2e238..4d9f309e002 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -20,9 +20,10 @@ import { updateMessages, } from "../../utils/t9n"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; -import { Columns, Layout, Scale } from "../interfaces"; +import { Layout, Scale } from "../interfaces"; import { OverlayPositioning } from "../../utils/floating-ui"; import { slotChangeHasAssignedElement } from "../../utils/dom"; +import { Columns } from "./interfaces"; import { ActionGroupMessages } from "./assets/action-group/t9n"; import { ICONS, SLOTS, CSS } from "./resources"; diff --git a/packages/calcite-components/src/components/action-group/interfaces.ts b/packages/calcite-components/src/components/action-group/interfaces.ts new file mode 100644 index 00000000000..0acab8fea32 --- /dev/null +++ b/packages/calcite-components/src/components/action-group/interfaces.ts @@ -0,0 +1 @@ +export type Columns = 1 | 2 | 3 | 4 | 5 | 6; diff --git a/packages/calcite-components/src/components/dropdown/interfaces.ts b/packages/calcite-components/src/components/dropdown/interfaces.ts index 706431488e5..13f756396b4 100644 --- a/packages/calcite-components/src/components/dropdown/interfaces.ts +++ b/packages/calcite-components/src/components/dropdown/interfaces.ts @@ -1,3 +1,5 @@ export interface ItemKeyboardEvent { keyboardEvent: KeyboardEvent; } + +export type DropdownClickType = "click" | "hover"; diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 42610188f3e..2ad5c4169a6 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -36,6 +36,7 @@ import { import { HeadingLevel } from "../functional/Heading"; import { SLOTS as PANEL_SLOTS } from "../panel/resources"; import { OverlayPositioning } from "../../utils/floating-ui"; +import { CollapseDirection } from "../interfaces"; import { FlowItemMessages } from "./assets/flow-item/t9n"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -83,7 +84,7 @@ export class FlowItem * * @internal */ - @Prop() collapseDirection: "down" | "up" = "down"; + @Prop() collapseDirection: CollapseDirection = "down"; /** * When `true`, the component is collapsible. diff --git a/packages/calcite-components/src/components/input/interfaces.ts b/packages/calcite-components/src/components/input/interfaces.ts index f7a8099cea8..3b94416a1c5 100644 --- a/packages/calcite-components/src/components/input/interfaces.ts +++ b/packages/calcite-components/src/components/input/interfaces.ts @@ -1,3 +1,14 @@ export type InputPlacement = "vertical" | "horizontal" | "none"; export type NumberNudgeDirection = "up" | "down"; export type SetValueOrigin = "initial" | "connected" | "user" | "reset" | "direct"; +export type TextType = + | "text" + | "textarea" + | "email" + | "password" + | "tel" + | "number" + | "search" + | "file" + | "time" + | "date"; diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts index f8bd6553466..d146b473ae0 100644 --- a/packages/calcite-components/src/components/interfaces.ts +++ b/packages/calcite-components/src/components/interfaces.ts @@ -1,7 +1,6 @@ /* Note: using `.d.ts` file extension will exclude it from the output build */ export type Alignment = "start" | "center" | "end"; export type Appearance = "solid" | "outline" | "outline-fill" | "transparent"; -export type Columns = 1 | 2 | 3 | 4 | 5 | 6; export type FlipContext = "both" | "start" | "end"; export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success"; export type Layout = @@ -30,27 +29,5 @@ export type SelectionMode = export type Scale = "s" | "m" | "l"; export type Status = "invalid" | "valid" | "idle"; export type Width = "auto" | "half" | "full"; -export type ArrowType = "inline" | "edge" | "none"; -export type DisplayMode = "dock" | "float" | "overlay"; -export type ToggleDisplay = "button" | "switch"; -export type Dir = "ltr" | "rtl"; -export type ButtonType = "radio" | "checkbox"; -export type InteractionMode = "interactive" | "static"; export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus"; -export type DeterminateType = "determinate" | "indeterminate"; -export type FillType = "single" | "range"; -export type LabelType = "percent" | "units"; -export type ClickType = "click" | "hover"; export type CollapseDirection = "down" | "up"; -export type TextType = - | "text" - | "textarea" - | "email" - | "password" - | "tel" - | "number" - | "search" - | "file" - | "time" - | "date"; -export type Mode = "offset" | "name"; diff --git a/packages/calcite-components/src/components/loader/interfaces.ts b/packages/calcite-components/src/components/loader/interfaces.ts new file mode 100644 index 00000000000..8683e770da6 --- /dev/null +++ b/packages/calcite-components/src/components/loader/interfaces.ts @@ -0,0 +1 @@ +export type DeterminateType = "determinate" | "indeterminate"; diff --git a/packages/calcite-components/src/components/meter/interfaces.ts b/packages/calcite-components/src/components/meter/interfaces.ts index 9a0b6e4eeb4..0ab6bb0ffbc 100644 --- a/packages/calcite-components/src/components/meter/interfaces.ts +++ b/packages/calcite-components/src/components/meter/interfaces.ts @@ -1 +1,2 @@ export type MeterLabelType = "percent" | "units"; +export type MeterFillType = "single" | "range"; diff --git a/packages/calcite-components/src/components/meter/meter.tsx b/packages/calcite-components/src/components/meter/meter.tsx index 45a227ce82d..11b044c5872 100644 --- a/packages/calcite-components/src/components/meter/meter.tsx +++ b/packages/calcite-components/src/components/meter/meter.tsx @@ -23,7 +23,7 @@ import { import { intersects } from "../../utils/dom"; import { createObserver } from "../../utils/observers"; import { CSS } from "./resources"; -import { MeterLabelType } from "./interfaces"; +import { MeterFillType, MeterLabelType } from "./interfaces"; @Component({ tag: "calcite-meter", @@ -45,7 +45,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone @Prop({ reflect: true }) disabled = false; /** Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */ - @Prop({ reflect: true }) fillType: "single" | "range" = "range"; + @Prop({ reflect: true }) fillType: MeterFillType = "range"; /** * The `id` of the form that will be associated with the component. diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index afd1b94c21a..5c3416a2332 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -42,6 +42,7 @@ import { updateMessages, } from "../../utils/t9n"; import { OverlayPositioning } from "../../utils/floating-ui"; +import { CollapseDirection } from "../interfaces"; import { PanelMessages } from "./assets/panel/t9n"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -94,7 +95,7 @@ export class Panel * * @internal */ - @Prop() collapseDirection: "down" | "up" = "down"; + @Prop() collapseDirection: CollapseDirection = "down"; /** * When `true`, the component is collapsible. diff --git a/packages/calcite-components/src/components/sheet/sheet.stories.ts b/packages/calcite-components/src/components/sheet/sheet.stories.ts index a76ec441fb5..190c145c3d5 100644 --- a/packages/calcite-components/src/components/sheet/sheet.stories.ts +++ b/packages/calcite-components/src/components/sheet/sheet.stories.ts @@ -14,7 +14,7 @@ export default { args: { open: true, position: logicalFlowPosition.values[0], - displayMode: displayMode.values[2], + displayMode: displayMode.values[1], }, argTypes: { position: { @@ -22,7 +22,7 @@ export default { control: { type: "select" }, }, displayMode: { - options: displayMode.values.filter((option) => option !== "dock"), + options: displayMode.values, control: { type: "select" }, }, }, diff --git a/packages/calcite-components/src/components/shell/interfaces.ts b/packages/calcite-components/src/components/shell/interfaces.ts new file mode 100644 index 00000000000..cad587d2255 --- /dev/null +++ b/packages/calcite-components/src/components/shell/interfaces.ts @@ -0,0 +1 @@ +export type ShellDisplayMode = "dock" | "float" | "overlay"; diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index c14f9b5a9d1..7c5994e2f44 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -2,7 +2,7 @@ import { placeholderImage } from "../../../.storybook/placeholderImage"; import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import { ATTRIBUTES } from "../../../.storybook/resources"; -const { displayMode, position, scale } = ATTRIBUTES; +const { shellDisplayMode, position, scale } = ATTRIBUTES; interface ShellArgs { collapsed: boolean; @@ -19,7 +19,7 @@ export default { title: "Components/Shell", args: { collapsed: false, - displayMode: displayMode.defaultValue, + displayMode: shellDisplayMode.defaultValue, leadingPanelPosition: position.values[0], trailingPanelPosition: position.values[1], resizable: true, @@ -29,7 +29,7 @@ export default { }, argTypes: { displayMode: { - options: displayMode.values, + options: shellDisplayMode.values, control: { type: "select" }, }, leadingPanelPosition: { diff --git a/packages/calcite-components/src/components/tile-select-group/interfaces.ts b/packages/calcite-components/src/components/tile-select-group/interfaces.ts index 51b8c894a3d..5b378101cce 100644 --- a/packages/calcite-components/src/components/tile-select-group/interfaces.ts +++ b/packages/calcite-components/src/components/tile-select-group/interfaces.ts @@ -1 +1,2 @@ export type TileSelectGroupLayout = "vertical" | "horizontal"; +export type TileSelectGroupDir = "ltr" | "rtl"; From 21e20f64a469e29254a5647e03344cea15ef03a0 Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Wed, 5 Jun 2024 15:49:04 -0700 Subject: [PATCH 4/5] refactor: move types into component-specific interfaces files --- packages/calcite-components/src/components.d.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 49d0561b47e..071ad829682 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -11,10 +11,7 @@ import { RequestedItem as RequestedItem1 } from "./components/accordion-item/int 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"; -<<<<<<< HEAD import { Columns } from "./components/action-group/interfaces"; -======= ->>>>>>> e3324d507fa9eaebc59e7a507ac6392307fee576 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"; @@ -65,11 +62,7 @@ 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"; -<<<<<<< HEAD import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -======= -import { MeterLabelType } from "./components/meter/interfaces"; ->>>>>>> e3324d507fa9eaebc59e7a507ac6392307fee576 import { ModalMessages } from "./components/modal/assets/modal/t9n"; import { NoticeMessages } from "./components/notice/assets/notice/t9n"; import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; @@ -109,10 +102,7 @@ export { RequestedItem as RequestedItem1 } from "./components/accordion-item/int 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"; -<<<<<<< HEAD export { Columns } from "./components/action-group/interfaces"; -======= ->>>>>>> e3324d507fa9eaebc59e7a507ac6392307fee576 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"; @@ -163,11 +153,7 @@ 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"; -<<<<<<< HEAD export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -======= -export { MeterLabelType } from "./components/meter/interfaces"; ->>>>>>> e3324d507fa9eaebc59e7a507ac6392307fee576 export { ModalMessages } from "./components/modal/assets/modal/t9n"; export { NoticeMessages } from "./components/notice/assets/notice/t9n"; export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; From 87442587e7caa708997a496656add3c486957f83 Mon Sep 17 00:00:00 2001 From: aPreciado88 Date: Thu, 6 Jun 2024 10:48:44 -0700 Subject: [PATCH 5/5] refactor: move types into component-specific interfaces files --- packages/calcite-components/.storybook/resources.ts | 6 +++--- packages/calcite-components/src/components/interfaces.ts | 1 + .../src/components/tile-select-group/interfaces.ts | 1 - 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts index af20a31cb46..c2f14090c76 100644 --- a/packages/calcite-components/.storybook/resources.ts +++ b/packages/calcite-components/.storybook/resources.ts @@ -9,13 +9,13 @@ import { Width, SelectionMode, Layout, + Dir, IconType, CollapseDirection, SelectionAppearance, } from "../../calcite-components/src/components/interfaces.ts"; import { ArrowType } from "../src/components/carousel/interfaces.ts"; import { BlockSectionToggleDisplay } from "../src/components/block-section/interfaces.ts"; -import { TileSelectGroupDir } from "../src/components/tile-select-group/interfaces.ts"; import { TileSelectType } from "../src/components/tile-select/interfaces.ts"; import { TableInteractionMode } from "../src/components/table/interfaces.ts"; import { DeterminateType } from "../src/components/loader/interfaces.ts"; @@ -45,7 +45,7 @@ interface CommonAttributes { displayMode: AttributeMetadata; toggleDisplay: AttributeMetadata; layout: AttributeMetadata; - dir: AttributeMetadata; + dir: AttributeMetadata; buttonType: AttributeMetadata; interactionMode: AttributeMetadata; iconType: AttributeMetadata; @@ -91,7 +91,7 @@ const layoutOptions: Layout[] = [ "none", "horizontal-single", ]; -const dirOptions: TileSelectGroupDir[] = ["ltr", "rtl"]; +const dirOptions: Dir[] = ["ltr", "rtl"]; const buttonTypeOptions: TileSelectType[] = ["radio", "checkbox"]; const interactionModeOptions: TableInteractionMode[] = ["interactive", "static"]; const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"]; diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts index d146b473ae0..bce851b606e 100644 --- a/packages/calcite-components/src/components/interfaces.ts +++ b/packages/calcite-components/src/components/interfaces.ts @@ -31,3 +31,4 @@ export type Status = "invalid" | "valid" | "idle"; export type Width = "auto" | "half" | "full"; export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus"; export type CollapseDirection = "down" | "up"; +export type Dir = "ltr" | "rtl"; diff --git a/packages/calcite-components/src/components/tile-select-group/interfaces.ts b/packages/calcite-components/src/components/tile-select-group/interfaces.ts index 5b378101cce..51b8c894a3d 100644 --- a/packages/calcite-components/src/components/tile-select-group/interfaces.ts +++ b/packages/calcite-components/src/components/tile-select-group/interfaces.ts @@ -1,2 +1 @@ export type TileSelectGroupLayout = "vertical" | "horizontal"; -export type TileSelectGroupDir = "ltr" | "rtl";