Skip to content

Commit f71e508

Browse files
aPreciado88aPreciado88
authored
refactor: move component types into component specific interfaces files (#9527)
**Related Issue:** [#9526](#9526) ## Summary Moves unshared types in [interfaces](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/components/interfaces.ts) into component-specific `interfaces.ts` files.
1 parent e3944bb commit f71e508

File tree

16 files changed

+79
-73
lines changed

16 files changed

+79
-73
lines changed

‎packages/calcite-components/.storybook/resources.ts

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ import {
88
Kind,
99
Width,
1010
SelectionMode,
11-
ArrowType,
12-
DisplayMode,
13-
ToggleDisplay,
1411
Layout,
1512
Dir,
16-
ButtonType,
17-
InteractionMode,
1813
IconType,
19-
DeterminateType,
20-
FillType,
21-
LabelType,
22-
ClickType,
2314
CollapseDirection,
24-
TextType,
25-
Mode,
2615
SelectionAppearance,
2716
} from "../../calcite-components/src/components/interfaces.ts";
17+
import { ArrowType } from "../src/components/carousel/interfaces.ts";
18+
import { BlockSectionToggleDisplay } from "../src/components/block-section/interfaces.ts";
19+
import { TileSelectType } from "../src/components/tile-select/interfaces.ts";
20+
import { TableInteractionMode } from "../src/components/table/interfaces.ts";
21+
import { DeterminateType } from "../src/components/loader/interfaces.ts";
22+
import { MeterFillType, MeterLabelType } from "../src/components/meter/interfaces.ts";
23+
import { DropdownClickType } from "../src/components/dropdown/interfaces.ts";
24+
import { TextType } from "../src/components/input/interfaces.ts";
25+
import { TimeZoneMode } from "../src/components/input-time-zone/interfaces.ts";
26+
import { DisplayMode } from "../src/components/sheet/interfaces.ts";
27+
import { ShellDisplayMode } from "../src/components/shell/interfaces.ts";
2828

2929
interface AttributeMetadata<T> {
3030
values: T[];
@@ -43,20 +43,21 @@ interface CommonAttributes {
4343
selectionMode: AttributeMetadata<SelectionMode>;
4444
arrowType: AttributeMetadata<ArrowType>;
4545
displayMode: AttributeMetadata<DisplayMode>;
46-
toggleDisplay: AttributeMetadata<ToggleDisplay>;
46+
toggleDisplay: AttributeMetadata<BlockSectionToggleDisplay>;
4747
layout: AttributeMetadata<Layout>;
4848
dir: AttributeMetadata<Dir>;
49-
buttonType: AttributeMetadata<ButtonType>;
50-
interactionMode: AttributeMetadata<InteractionMode>;
49+
buttonType: AttributeMetadata<TileSelectType>;
50+
interactionMode: AttributeMetadata<TableInteractionMode>;
5151
iconType: AttributeMetadata<IconType>;
5252
determinateType: AttributeMetadata<DeterminateType>;
53-
fillType: AttributeMetadata<FillType>;
54-
labelType: AttributeMetadata<LabelType>;
55-
clickType: AttributeMetadata<ClickType>;
53+
fillType: AttributeMetadata<MeterFillType>;
54+
labelType: AttributeMetadata<MeterLabelType>;
55+
clickType: AttributeMetadata<DropdownClickType>;
5656
collapseDirection: AttributeMetadata<CollapseDirection>;
5757
textType: AttributeMetadata<TextType>;
58-
mode: AttributeMetadata<Mode>;
58+
mode: AttributeMetadata<TimeZoneMode>;
5959
selectionAppearance: AttributeMetadata<SelectionAppearance>;
60+
shellDisplayMode: AttributeMetadata<ShellDisplayMode>;
6061
}
6162

6263
const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"];
@@ -77,8 +78,8 @@ const selectionModeOptions: SelectionMode[] = [
7778
"multiple",
7879
];
7980
const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"];
80-
const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"];
81-
const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"];
81+
const displayModeOptions: DisplayMode[] = ["float", "overlay"];
82+
const toggleDisplayOptions: BlockSectionToggleDisplay[] = ["button", "switch"];
8283
const layoutOptions: Layout[] = [
8384
"horizontal",
8485
"vertical",
@@ -91,13 +92,13 @@ const layoutOptions: Layout[] = [
9192
"horizontal-single",
9293
];
9394
const dirOptions: Dir[] = ["ltr", "rtl"];
94-
const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"];
95-
const interactionModeOptions: InteractionMode[] = ["interactive", "static"];
95+
const buttonTypeOptions: TileSelectType[] = ["radio", "checkbox"];
96+
const interactionModeOptions: TableInteractionMode[] = ["interactive", "static"];
9697
const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"];
9798
const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"];
98-
const fillTypeOptions: FillType[] = ["single", "range"];
99-
const labelTypeOptions: LabelType[] = ["percent", "units"];
100-
const clickTypeOptions: ClickType[] = ["click", "hover"];
99+
const fillTypeOptions: MeterFillType[] = ["single", "range"];
100+
const labelTypeOptions: MeterLabelType[] = ["percent", "units"];
101+
const clickTypeOptions: DropdownClickType[] = ["click", "hover"];
101102
const collapseDirectionOptions: CollapseDirection[] = ["down", "up"];
102103
const textTypeOptions: TextType[] = [
103104
"text",
@@ -111,8 +112,9 @@ const textTypeOptions: TextType[] = [
111112
"time",
112113
"date",
113114
];
114-
const modeOptions: Mode[] = ["offset", "name"];
115+
const modeOptions: TimeZoneMode[] = ["offset", "name"];
115116
const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"];
117+
const shellDisplayModeOptions: ShellDisplayMode[] = ["dock", "float", "overlay"];
116118

117119
export const ATTRIBUTES: CommonAttributes = {
118120
alignment: {
@@ -215,4 +217,8 @@ export const ATTRIBUTES: CommonAttributes = {
215217
values: selectionAppearanceOptions,
216218
defaultValue: selectionAppearanceOptions[0],
217219
},
220+
shellDisplayMode: {
221+
values: shellDisplayModeOptions,
222+
defaultValue: shellDisplayModeOptions[0],
223+
},
218224
};

‎packages/calcite-components/src/components.d.ts

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
* It contains typing information for all components that exist in this project.
66
*/
77
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
8-
import { Alignment, Appearance, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
8+
import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
99
import { RequestedItem } from "./components/accordion/interfaces";
1010
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
1111
import { ActionMessages } from "./components/action/assets/action/t9n";
1212
import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
1313
import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
14+
import { Columns } from "./components/action-group/interfaces";
1415
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
1516
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
1617
import { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -61,7 +62,7 @@ import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
6162
import { MenuMessages } from "./components/menu/assets/menu/t9n";
6263
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
6364
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
64-
import { MeterLabelType } from "./components/meter/interfaces";
65+
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
6566
import { ModalMessages } from "./components/modal/assets/modal/t9n";
6667
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
6768
import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -95,12 +96,13 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/
9596
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
9697
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
9798
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
98-
export { Alignment, Appearance, Columns, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
99+
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
99100
export { RequestedItem } from "./components/accordion/interfaces";
100101
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
101102
export { ActionMessages } from "./components/action/assets/action/t9n";
102103
export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
103104
export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
105+
export { Columns } from "./components/action-group/interfaces";
104106
export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
105107
export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
106108
export { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -151,7 +153,7 @@ export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
151153
export { MenuMessages } from "./components/menu/assets/menu/t9n";
152154
export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
153155
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
154-
export { MeterLabelType } from "./components/meter/interfaces";
156+
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
155157
export { ModalMessages } from "./components/modal/assets/modal/t9n";
156158
export { NoticeMessages } from "./components/notice/assets/notice/t9n";
157159
export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -247,7 +249,7 @@ export namespace Components {
247249
/**
248250
* Specifies the type of the icon in the header inherited from the `calcite-accordion`.
249251
*/
250-
"iconType": "chevron" | "caret" | "plus-minus";
252+
"iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>;
251253
/**
252254
* Specifies the size of the component inherited from the `calcite-accordion`.
253255
*/
@@ -1858,7 +1860,7 @@ export namespace Components {
18581860
/**
18591861
* Specifies the direction of the collapse.
18601862
*/
1861-
"collapseDirection": "down" | "up";
1863+
"collapseDirection": CollapseDirection;
18621864
/**
18631865
* When `true`, hides the component's content area.
18641866
*/
@@ -3252,7 +3254,7 @@ export namespace Components {
32523254
/**
32533255
* 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.
32543256
*/
3255-
"fillType": "single" | "range";
3257+
"fillType": MeterFillType;
32563258
/**
32573259
* 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.
32583260
*/
@@ -3630,7 +3632,7 @@ export namespace Components {
36303632
/**
36313633
* Specifies the direction of the collapse.
36323634
*/
3633-
"collapseDirection": "down" | "up";
3635+
"collapseDirection": CollapseDirection;
36343636
/**
36353637
* When `true`, hides the component's content area.
36363638
*/
@@ -7955,7 +7957,7 @@ declare namespace LocalJSX {
79557957
/**
79567958
* Specifies the type of the icon in the header inherited from the `calcite-accordion`.
79577959
*/
7958-
"iconType"?: "chevron" | "caret" | "plus-minus";
7960+
"iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>;
79597961
"onCalciteInternalAccordionItemClose"?: (event: CalciteAccordionItemCustomEvent<void>) => void;
79607962
"onCalciteInternalAccordionItemSelect"?: (event: CalciteAccordionItemCustomEvent<RequestedItem1>) => void;
79617963
/**
@@ -9653,7 +9655,7 @@ declare namespace LocalJSX {
96539655
/**
96549656
* Specifies the direction of the collapse.
96559657
*/
9656-
"collapseDirection"?: "down" | "up";
9658+
"collapseDirection"?: CollapseDirection;
96579659
/**
96589660
* When `true`, hides the component's content area.
96599661
*/
@@ -11153,7 +11155,7 @@ declare namespace LocalJSX {
1115311155
/**
1115411156
* 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.
1115511157
*/
11156-
"fillType"?: "single" | "range";
11158+
"fillType"?: MeterFillType;
1115711159
/**
1115811160
* 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.
1115911161
*/
@@ -11526,7 +11528,7 @@ declare namespace LocalJSX {
1152611528
/**
1152711529
* Specifies the direction of the collapse.
1152811530
*/
11529-
"collapseDirection"?: "down" | "up";
11531+
"collapseDirection"?: CollapseDirection;
1153011532
/**
1153111533
* When `true`, hides the component's content area.
1153211534
*/

‎packages/calcite-components/src/components/accordion-item/accordion-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
} from "../../utils/dom";
2424
import { CSS_UTILITY } from "../../utils/resources";
2525
import { getIconScale } from "../../utils/component";
26-
import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
26+
import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces";
2727
import { componentFocusable } from "../../utils/component";
2828
import { SLOTS, CSS, IDS } from "./resources";
2929
import { RequestedItem } from "./interfaces";
@@ -74,7 +74,7 @@ export class AccordionItem implements ConditionalSlotComponent {
7474
*
7575
* @internal
7676
*/
77-
@Prop() iconType: "chevron" | "caret" | "plus-minus";
77+
@Prop() iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>;
7878

7979
/**
8080
* The containing `accordion` element.

‎packages/calcite-components/src/components/action-group/action-group.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ import {
2020
updateMessages,
2121
} from "../../utils/t9n";
2222
import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
23-
import { Columns, Layout, Scale } from "../interfaces";
23+
import { Layout, Scale } from "../interfaces";
2424
import { OverlayPositioning } from "../../utils/floating-ui";
2525
import { slotChangeHasAssignedElement } from "../../utils/dom";
26+
import { Columns } from "./interfaces";
2627
import { ActionGroupMessages } from "./assets/action-group/t9n";
2728
import { ICONS, SLOTS, CSS } from "./resources";
2829

‎packages/calcite-components/src/components/action-group/interfaces.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type Columns = 1 | 2 | 3 | 4 | 5 | 6;

‎packages/calcite-components/src/components/dropdown/interfaces.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export interface ItemKeyboardEvent {
22
keyboardEvent: KeyboardEvent;
33
}
4+
5+
export type DropdownClickType = "click" | "hover";

‎packages/calcite-components/src/components/flow-item/flow-item.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
import { HeadingLevel } from "../functional/Heading";
3737
import { SLOTS as PANEL_SLOTS } from "../panel/resources";
3838
import { OverlayPositioning } from "../../utils/floating-ui";
39+
import { CollapseDirection } from "../interfaces";
3940
import { FlowItemMessages } from "./assets/flow-item/t9n";
4041
import { CSS, ICONS, SLOTS } from "./resources";
4142

@@ -83,7 +84,7 @@ export class FlowItem
8384
*
8485
* @internal
8586
*/
86-
@Prop() collapseDirection: "down" | "up" = "down";
87+
@Prop() collapseDirection: CollapseDirection = "down";
8788

8889
/**
8990
* When `true`, the component is collapsible.

‎packages/calcite-components/src/components/input/interfaces.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
export type InputPlacement = "vertical" | "horizontal" | "none";
22
export type NumberNudgeDirection = "up" | "down";
33
export type SetValueOrigin = "initial" | "connected" | "user" | "reset" | "direct";
4+
export type TextType =
5+
| "text"
6+
| "textarea"
7+
| "email"
8+
| "password"
9+
| "tel"
10+
| "number"
11+
| "search"
12+
| "file"
13+
| "time"
14+
| "date";

‎packages/calcite-components/src/components/interfaces.ts

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* Note: using `.d.ts` file extension will exclude it from the output build */
22
export type Alignment = "start" | "center" | "end";
33
export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
4-
export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
54
export type FlipContext = "both" | "start" | "end";
65
export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
76
export type Layout =
@@ -30,27 +29,6 @@ export type SelectionMode =
3029
export type Scale = "s" | "m" | "l";
3130
export type Status = "invalid" | "valid" | "idle";
3231
export type Width = "auto" | "half" | "full";
33-
export type ArrowType = "inline" | "edge" | "none";
34-
export type DisplayMode = "dock" | "float" | "overlay";
35-
export type ToggleDisplay = "button" | "switch";
36-
export type Dir = "ltr" | "rtl";
37-
export type ButtonType = "radio" | "checkbox";
38-
export type InteractionMode = "interactive" | "static";
3932
export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
40-
export type DeterminateType = "determinate" | "indeterminate";
41-
export type FillType = "single" | "range";
42-
export type LabelType = "percent" | "units";
43-
export type ClickType = "click" | "hover";
4433
export type CollapseDirection = "down" | "up";
45-
export type TextType =
46-
| "text"
47-
| "textarea"
48-
| "email"
49-
| "password"
50-
| "tel"
51-
| "number"
52-
| "search"
53-
| "file"
54-
| "time"
55-
| "date";
56-
export type Mode = "offset" | "name";
34+
export type Dir = "ltr" | "rtl";

‎packages/calcite-components/src/components/loader/interfaces.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type DeterminateType = "determinate" | "indeterminate";

‎packages/calcite-components/src/components/meter/interfaces.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export type MeterLabelType = "percent" | "units";
2+
export type MeterFillType = "single" | "range";

‎packages/calcite-components/src/components/meter/meter.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
import { intersects } from "../../utils/dom";
2424
import { createObserver } from "../../utils/observers";
2525
import { CSS } from "./resources";
26-
import { MeterLabelType } from "./interfaces";
26+
import { MeterFillType, MeterLabelType } from "./interfaces";
2727

2828
@Component({
2929
tag: "calcite-meter",
@@ -45,7 +45,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone
4545
@Prop({ reflect: true }) disabled = false;
4646

4747
/** 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. */
48-
@Prop({ reflect: true }) fillType: "single" | "range" = "range";
48+
@Prop({ reflect: true }) fillType: MeterFillType = "range";
4949

5050
/**
5151
* The `id` of the form that will be associated with the component.

‎packages/calcite-components/src/components/panel/panel.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import {
4242
updateMessages,
4343
} from "../../utils/t9n";
4444
import { OverlayPositioning } from "../../utils/floating-ui";
45+
import { CollapseDirection } from "../interfaces";
4546
import { PanelMessages } from "./assets/panel/t9n";
4647
import { CSS, ICONS, SLOTS } from "./resources";
4748

@@ -94,7 +95,7 @@ export class Panel
9495
*
9596
* @internal
9697
*/
97-
@Prop() collapseDirection: "down" | "up" = "down";
98+
@Prop() collapseDirection: CollapseDirection = "down";
9899

99100
/**
100101
* When `true`, the component is collapsible.

‎packages/calcite-components/src/components/sheet/sheet.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ export default {
1414
args: {
1515
open: true,
1616
position: logicalFlowPosition.values[0],
17-
displayMode: displayMode.values[2],
17+
displayMode: displayMode.values[1],
1818
},
1919
argTypes: {
2020
position: {
2121
options: logicalFlowPosition.values,
2222
control: { type: "select" },
2323
},
2424
displayMode: {
25-
options: displayMode.values.filter((option) => option !== "dock"),
25+
options: displayMode.values,
2626
control: { type: "select" },
2727
},
2828
},

0 commit comments

Comments
 (0)