Skip to content

Commit 2d77470

Browse files
eriklharpereriklharper
authored
feat(tile, tile-group): support single, multi, single-persist, none selection modes and icon and border selection appearances (#9159)
**Related Issue:** #8834, #6662 ## Summary This PR adds `selection-mode` and `selection-appearance` properties and updates hover and focus states based on the latest Tile designs. --------- Co-authored-by: Erik Harper <[email protected]>
1 parent 6f1ea22 commit 2d77470

File tree

13 files changed

+3722
-1024
lines changed

13 files changed

+3722
-1024
lines changed

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

Lines changed: 142 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
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, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
8+
import { Alignment, Appearance, Columns, FlipContext, 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";
@@ -95,7 +95,7 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/
9595
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
9696
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
9797
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
98-
export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
98+
export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
9999
export { RequestedItem } from "./components/accordion/interfaces";
100100
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
101101
export { ActionMessages } from "./components/action/assets/action/t9n";
@@ -5139,6 +5139,7 @@ export namespace Components {
51395139
interface CalciteTile {
51405140
/**
51415141
* When `true`, the component is active.
5142+
* @deprecated
51425143
*/
51435144
"active": boolean;
51445145
/**
@@ -5158,10 +5159,6 @@ export namespace Components {
51585159
* @deprecated No longer necessary.
51595160
*/
51605161
"embed": boolean;
5161-
/**
5162-
* The focused state of the component.
5163-
*/
5164-
"focused": boolean;
51655162
/**
51665163
* The component header text, which displays between the icon and description.
51675164
*/
@@ -5178,16 +5175,51 @@ export namespace Components {
51785175
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
51795176
*/
51805177
"iconFlipRtl": boolean;
5178+
/**
5179+
* When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component.
5180+
*/
5181+
"interactive": boolean;
5182+
/**
5183+
* Accessible name for the component.
5184+
*/
5185+
"label": string;
5186+
/**
5187+
* Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.
5188+
*/
5189+
"layout": Exclude<Layout, "grid">;
51815190
/**
51825191
* Specifies the size of the component.
51835192
*/
51845193
"scale": Scale;
5194+
/**
5195+
* When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
5196+
*/
5197+
"selected": boolean;
5198+
/**
5199+
* Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group.
5200+
*/
5201+
"selectionAppearance": SelectionAppearance1;
5202+
/**
5203+
* Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group.
5204+
*/
5205+
"selectionMode": Extract<
5206+
"multiple" | "none" | "single" | "single-persist",
5207+
SelectionMode
5208+
>;
5209+
/**
5210+
* Sets focus on the component.
5211+
*/
5212+
"setFocus": () => Promise<void>;
51855213
}
51865214
interface CalciteTileGroup {
51875215
/**
51885216
* When `true`, interaction is prevented and the component is displayed with lower opacity.
51895217
*/
51905218
"disabled": boolean;
5219+
/**
5220+
* Accessible name for the component.
5221+
*/
5222+
"label": string;
51915223
/**
51925224
* Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.
51935225
*/
@@ -5196,6 +5228,22 @@ export namespace Components {
51965228
* Specifies the size of the component.
51975229
*/
51985230
"scale": Scale;
5231+
/**
5232+
* Specifies the component's selected items.
5233+
* @readonly
5234+
*/
5235+
"selectedItems": HTMLCalciteTileElement[];
5236+
/**
5237+
* Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border).
5238+
*/
5239+
"selectionAppearance": SelectionAppearance1;
5240+
/**
5241+
* Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items).
5242+
*/
5243+
"selectionMode": Extract<
5244+
"multiple" | "none" | "single" | "single-persist",
5245+
SelectionMode
5246+
>;
51995247
}
52005248
interface CalciteTileSelect {
52015249
/**
@@ -5861,6 +5909,14 @@ export interface CalciteTextAreaCustomEvent<T> extends CustomEvent<T> {
58615909
detail: T;
58625910
target: HTMLCalciteTextAreaElement;
58635911
}
5912+
export interface CalciteTileCustomEvent<T> extends CustomEvent<T> {
5913+
detail: T;
5914+
target: HTMLCalciteTileElement;
5915+
}
5916+
export interface CalciteTileGroupCustomEvent<T> extends CustomEvent<T> {
5917+
detail: T;
5918+
target: HTMLCalciteTileGroupElement;
5919+
}
58645920
export interface CalciteTileSelectCustomEvent<T> extends CustomEvent<T> {
58655921
detail: T;
58665922
target: HTMLCalciteTileSelectElement;
@@ -7401,13 +7457,36 @@ declare global {
74017457
prototype: HTMLCalciteTextAreaElement;
74027458
new (): HTMLCalciteTextAreaElement;
74037459
};
7460+
interface HTMLCalciteTileElementEventMap {
7461+
"calciteInternalTileKeyEvent": KeyboardEvent;
7462+
"calciteTileSelect": void;
7463+
}
74047464
interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement {
7465+
addEventListener<K extends keyof HTMLCalciteTileElementEventMap>(type: K, listener: (this: HTMLCalciteTileElement, ev: CalciteTileCustomEvent<HTMLCalciteTileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
7466+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
7467+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
7468+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
7469+
removeEventListener<K extends keyof HTMLCalciteTileElementEventMap>(type: K, listener: (this: HTMLCalciteTileElement, ev: CalciteTileCustomEvent<HTMLCalciteTileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
7470+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
7471+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
7472+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
74057473
}
74067474
var HTMLCalciteTileElement: {
74077475
prototype: HTMLCalciteTileElement;
74087476
new (): HTMLCalciteTileElement;
74097477
};
7478+
interface HTMLCalciteTileGroupElementEventMap {
7479+
"calciteTileGroupSelect": void;
7480+
}
74107481
interface HTMLCalciteTileGroupElement extends Components.CalciteTileGroup, HTMLStencilElement {
7482+
addEventListener<K extends keyof HTMLCalciteTileGroupElementEventMap>(type: K, listener: (this: HTMLCalciteTileGroupElement, ev: CalciteTileGroupCustomEvent<HTMLCalciteTileGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
7483+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
7484+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
7485+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
7486+
removeEventListener<K extends keyof HTMLCalciteTileGroupElementEventMap>(type: K, listener: (this: HTMLCalciteTileGroupElement, ev: CalciteTileGroupCustomEvent<HTMLCalciteTileGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
7487+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
7488+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
7489+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
74117490
}
74127491
var HTMLCalciteTileGroupElement: {
74137492
prototype: HTMLCalciteTileGroupElement;
@@ -12911,6 +12990,7 @@ declare namespace LocalJSX {
1291112990
interface CalciteTile {
1291212991
/**
1291312992
* When `true`, the component is active.
12993+
* @deprecated
1291412994
*/
1291512995
"active"?: boolean;
1291612996
/**
@@ -12930,10 +13010,6 @@ declare namespace LocalJSX {
1293013010
* @deprecated No longer necessary.
1293113011
*/
1293213012
"embed"?: boolean;
12933-
/**
12934-
* The focused state of the component.
12935-
*/
12936-
"focused"?: boolean;
1293713013
/**
1293813014
* The component header text, which displays between the icon and description.
1293913015
*/
@@ -12950,24 +13026,80 @@ declare namespace LocalJSX {
1295013026
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
1295113027
*/
1295213028
"iconFlipRtl"?: boolean;
13029+
/**
13030+
* When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component.
13031+
*/
13032+
"interactive"?: boolean;
13033+
/**
13034+
* Accessible name for the component.
13035+
*/
13036+
"label"?: string;
13037+
/**
13038+
* Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.
13039+
*/
13040+
"layout"?: Exclude<Layout, "grid">;
13041+
"onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent<KeyboardEvent>) => void;
13042+
/**
13043+
* Fires when the selected state of the component changes.
13044+
*/
13045+
"onCalciteTileSelect"?: (event: CalciteTileCustomEvent<void>) => void;
1295313046
/**
1295413047
* Specifies the size of the component.
1295513048
*/
1295613049
"scale"?: Scale;
13050+
/**
13051+
* When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
13052+
*/
13053+
"selected"?: boolean;
13054+
/**
13055+
* Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group.
13056+
*/
13057+
"selectionAppearance"?: SelectionAppearance1;
13058+
/**
13059+
* Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group.
13060+
*/
13061+
"selectionMode"?: Extract<
13062+
"multiple" | "none" | "single" | "single-persist",
13063+
SelectionMode
13064+
>;
1295713065
}
1295813066
interface CalciteTileGroup {
1295913067
/**
1296013068
* When `true`, interaction is prevented and the component is displayed with lower opacity.
1296113069
*/
1296213070
"disabled"?: boolean;
13071+
/**
13072+
* Accessible name for the component.
13073+
*/
13074+
"label": string;
1296313075
/**
1296413076
* Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column.
1296513077
*/
1296613078
"layout"?: Exclude<Layout, "grid">;
13079+
/**
13080+
* Fires when the component's selection changes.
13081+
*/
13082+
"onCalciteTileGroupSelect"?: (event: CalciteTileGroupCustomEvent<void>) => void;
1296713083
/**
1296813084
* Specifies the size of the component.
1296913085
*/
1297013086
"scale"?: Scale;
13087+
/**
13088+
* Specifies the component's selected items.
13089+
* @readonly
13090+
*/
13091+
"selectedItems"?: HTMLCalciteTileElement[];
13092+
/**
13093+
* Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border).
13094+
*/
13095+
"selectionAppearance"?: SelectionAppearance1;
13096+
/**
13097+
* Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items).
13098+
*/
13099+
"selectionMode"?: Extract<
13100+
"multiple" | "none" | "single" | "single-persist",
13101+
SelectionMode
13102+
>;
1297113103
}
1297213104
interface CalciteTileSelect {
1297313105
/**

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start"
99
export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
1010
export type ModeName = "light" | "dark" | "auto";
1111
export type Position = "start" | "end";
12+
export type SelectionAppearance = "border" | "icon";
1213
export type SelectionMode =
1314
| "single"
1415
| "none"

0 commit comments

Comments
 (0)