Skip to content

Commit 7b52870

Browse files
macandcheesemacandcheese
authored
feat(table): Add selection-display property (#9355)
**Related Issue:** #9353 ## Summary This adds a `selectionDisplay` property to Table. It defaults to "top" (the current behavior), and adds a "none" option. This will hide all selection chips and clearance affordances. It will also hide any slotted content in `selection-actions` slot, which is noted in the doc. We've planned on adding further customization ability to this selection mode UI (make it sticky, floating on bottom, etc.), and that can still occur as planned #8914, by adding values to this new property.
1 parent 23b892e commit 7b52870

File tree

5 files changed

+161
-5
lines changed

5 files changed

+161
-5
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
8383
import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
8484
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
8585
import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
86-
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces";
86+
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
8787
import { TableMessages } from "./components/table/assets/table/t9n";
8888
import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
8989
import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
@@ -173,7 +173,7 @@ export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
173173
export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
174174
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
175175
export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
176-
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces";
176+
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
177177
export { TableMessages } from "./components/table/assets/table/t9n";
178178
export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
179179
export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
@@ -4931,6 +4931,10 @@ export namespace Components {
49314931
* @readonly
49324932
*/
49334933
"selectedItems": HTMLCalciteTableRowElement[];
4934+
/**
4935+
* Specifies the display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed.
4936+
*/
4937+
"selectionDisplay": TableSelectionDisplay;
49344938
/**
49354939
* Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections.
49364940
*/
@@ -12879,6 +12883,10 @@ declare namespace LocalJSX {
1287912883
* @readonly
1288012884
*/
1288112885
"selectedItems"?: HTMLCalciteTableRowElement[];
12886+
/**
12887+
* Specifies the display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed.
12888+
*/
12889+
"selectionDisplay"?: TableSelectionDisplay;
1288212890
/**
1288312891
* Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections.
1288412892
*/

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@ export type RowType = "head" | "body" | "foot";
1111

1212
export type TableLayout = "auto" | "fixed";
1313

14+
export type TableSelectionDisplay = "top" | "none";
15+
1416
export type TableInteractionMode = "interactive" | "static";

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const simple = (): string =>
1111
page-size="${number("page-size", 0)}"
1212
interaction-mode="${select("interaction-mode", ["interactive", "static"], "interactive")}"
1313
selection-mode="${select("selection-mode", ["none", "single", "multiple"], "none")}"
14+
selection-display="${select("selection-display", ["none", "top"], "top")}"
1415
scale="${select("scale", ["s", "m", "l"], "m")}"
1516
layout="${select("layout", ["auto", "fixed"], "auto")}"
1617
caption="${text("caption", "Simple table")}"
@@ -773,6 +774,74 @@ export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string =>
773774
</calcite-table-row>
774775
</calcite-table>`;
775776

777+
export const selectionModeMultipleAndSelectedSelectionDisplayNoneOnLoad = (): string =>
778+
html` <calcite-table
779+
page-size="4"
780+
selection-mode="multiple"
781+
selection-display="none"
782+
numbered
783+
caption="selection-mode multiple with selected at load"
784+
>
785+
<calcite-action slot="selection-actions" icon="layer"></calcite-action>
786+
<calcite-action slot="selection-actions" icon="send"></calcite-action>
787+
<calcite-action slot="selection-actions" icon="copy"></calcite-action>
788+
<calcite-action slot="selection-actions" icon="plus"></calcite-action>
789+
<calcite-table-row slot="table-header">
790+
<calcite-table-header heading="Heading"></calcite-table-header>
791+
<calcite-table-header heading="Heading"></calcite-table-header>
792+
<calcite-table-header heading="Heading"></calcite-table-header>
793+
<calcite-table-header heading="Heading"></calcite-table-header>
794+
</calcite-table-row>
795+
<calcite-table-row>
796+
<calcite-table-cell>cell</calcite-table-cell>
797+
<calcite-table-cell>cell</calcite-table-cell>
798+
<calcite-table-cell>cell</calcite-table-cell>
799+
<calcite-table-cell>cell</calcite-table-cell>
800+
</calcite-table-row>
801+
<calcite-table-row selected>
802+
<calcite-table-cell>cell</calcite-table-cell>
803+
<calcite-table-cell>cell</calcite-table-cell>
804+
<calcite-table-cell>cell</calcite-table-cell>
805+
<calcite-table-cell>cell</calcite-table-cell>
806+
</calcite-table-row>
807+
<calcite-table-row selected>
808+
<calcite-table-cell>cell</calcite-table-cell>
809+
<calcite-table-cell>cell</calcite-table-cell>
810+
<calcite-table-cell>cell</calcite-table-cell>
811+
<calcite-table-cell>cell</calcite-table-cell>
812+
</calcite-table-row>
813+
<calcite-table-row>
814+
<calcite-table-cell>cell</calcite-table-cell>
815+
<calcite-table-cell>cell</calcite-table-cell>
816+
<calcite-table-cell>cell</calcite-table-cell>
817+
<calcite-table-cell>cell</calcite-table-cell>
818+
</calcite-table-row>
819+
<calcite-table-row>
820+
<calcite-table-cell>cell</calcite-table-cell>
821+
<calcite-table-cell>cell</calcite-table-cell>
822+
<calcite-table-cell>cell</calcite-table-cell>
823+
<calcite-table-cell>cell</calcite-table-cell>
824+
</calcite-table-row>
825+
<calcite-table-row>
826+
<calcite-table-cell>cell</calcite-table-cell>
827+
<calcite-table-cell>cell</calcite-table-cell>
828+
<calcite-table-cell>cell</calcite-table-cell>
829+
<calcite-table-cell>cell</calcite-table-cell>
830+
</calcite-table-row>
831+
<calcite-table-row selected>
832+
<calcite-table-cell>cell</calcite-table-cell>
833+
<calcite-table-cell>cell</calcite-table-cell>
834+
<calcite-table-cell>cell</calcite-table-cell>
835+
<calcite-table-cell>cell</calcite-table-cell>
836+
</calcite-table-row>
837+
<calcite-table-row selected>
838+
<calcite-table-cell>cell</calcite-table-cell>
839+
<calcite-table-cell>cell</calcite-table-cell>
840+
<calcite-table-cell>cell</calcite-table-cell>
841+
<calcite-table-cell>cell</calcite-table-cell>
842+
</calcite-table-row>
843+
</calcite-table>`;
844+
776845
export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = (): string =>
777846
html`<calcite-table
778847
page-size="4"

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,20 @@ import {
3232
NumberingSystem,
3333
} from "../../utils/locale";
3434
import { getUserAgentString } from "../../utils/browser";
35-
import { TableInteractionMode, TableLayout, TableRowFocusEvent } from "./interfaces";
35+
import {
36+
TableInteractionMode,
37+
TableLayout,
38+
TableRowFocusEvent,
39+
TableSelectionDisplay,
40+
} from "./interfaces";
3641
import { CSS, SLOTS } from "./resources";
3742
import { TableMessages } from "./assets/table/t9n";
3843

3944
/**
4045
* @slot - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
4146
* @slot table-header - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
4247
* @slot table-footer - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
43-
* @slot selection-actions - A slot for adding a `calcite-action-bar` or other elements to display when `selectionMode` is not `"none"`.
48+
* @slot selection-actions - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
4449
*/
4550

4651
@Component({
@@ -95,6 +100,10 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
95100
@Prop({ reflect: true }) selectionMode: Extract<"none" | "multiple" | "single", SelectionMode> =
96101
"none";
97102

103+
/** Specifies the display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. */
104+
105+
@Prop({ reflect: true }) selectionDisplay: TableSelectionDisplay = "top";
106+
98107
/**
99108
* When `true`, displays striped styling in the component.
100109
*
@@ -517,7 +526,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
517526
return (
518527
<Host>
519528
<div class={CSS.container}>
520-
{this.selectionMode !== "none" && this.renderSelectionArea()}
529+
{this.selectionMode !== "none" &&
530+
this.selectionDisplay !== "none" &&
531+
this.renderSelectionArea()}
521532
<div
522533
class={{
523534
[CSS.bordered]: this.bordered,

‎packages/calcite-components/src/demos/table.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1922,6 +1922,16 @@ <h3>Kitchen Sink</h3>
19221922
<calcite-chip appearance="outline-fill" value="multiple">multiple</calcite-chip>
19231923
</calcite-chip-group>
19241924
</div>
1925+
1926+
<div>
1927+
<span>Selection Display</span>
1928+
<calcite-chip-group selection-mode="single-persist" id="selection-display-chips">
1929+
<calcite-chip appearance="outline-fill" selected value="top">Top</calcite-chip>
1930+
<calcite-chip appearance="outline-fill" value="top-sticky">Top-sticky</calcite-chip>
1931+
<calcite-chip appearance="outline-fill" value="none">None</calcite-chip>
1932+
</calcite-chip-group>
1933+
</div>
1934+
19251935
<div>
19261936
<span>Scale</span>
19271937
<calcite-chip-group selection-mode="single-persist" id="scale-chips">
@@ -4307,6 +4317,50 @@ <h3>selection-mode multiple with selected at load</h3>
43074317
</calcite-table-row>
43084318
</calcite-table>
43094319

4320+
<h3>selection-mode multiple with selected at load selection display none</h3>
4321+
<calcite-table
4322+
bordered
4323+
selection-mode="multiple"
4324+
selection-display="none"
4325+
numbered
4326+
caption="selection-mode multiple and numbered"
4327+
>
4328+
<calcite-action slot="selection-actions" icon="layer"></calcite-action>
4329+
<calcite-action slot="selection-actions" icon="send"></calcite-action>
4330+
<calcite-action slot="selection-actions" icon="copy"></calcite-action>
4331+
<calcite-action slot="selection-actions" icon="plus"></calcite-action>
4332+
<calcite-table-row slot="table-header">
4333+
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
4334+
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
4335+
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
4336+
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
4337+
</calcite-table-row>
4338+
<calcite-table-row>
4339+
<calcite-table-cell>cell</calcite-table-cell>
4340+
<calcite-table-cell>cell</calcite-table-cell>
4341+
<calcite-table-cell>cell</calcite-table-cell>
4342+
<calcite-table-cell>cell</calcite-table-cell>
4343+
</calcite-table-row>
4344+
<calcite-table-row>
4345+
<calcite-table-cell>cell</calcite-table-cell>
4346+
<calcite-table-cell>cell</calcite-table-cell>
4347+
<calcite-table-cell>cell</calcite-table-cell>
4348+
<calcite-table-cell>cell</calcite-table-cell>
4349+
</calcite-table-row>
4350+
<calcite-table-row>
4351+
<calcite-table-cell>cell</calcite-table-cell>
4352+
<calcite-table-cell>cell</calcite-table-cell>
4353+
<calcite-table-cell>cell</calcite-table-cell>
4354+
<calcite-table-cell>cell</calcite-table-cell>
4355+
</calcite-table-row>
4356+
<calcite-table-row slot="table-footer">
4357+
<calcite-table-cell>foot</calcite-table-cell>
4358+
<calcite-table-cell>foot</calcite-table-cell>
4359+
<calcite-table-cell>foot</calcite-table-cell>
4360+
<calcite-table-cell>foot</calcite-table-cell>
4361+
</calcite-table-row>
4362+
</calcite-table>
4363+
43104364
<h3>selection-mode multiple with multiple headers, footers, pageSize</h3>
43114365

43124366
<calcite-table
@@ -4822,6 +4876,7 @@ <h3>
48224876
const chipGroupTheme = document.getElementById("theme-chips");
48234877
const chipGroupScale = document.getElementById("scale-chips");
48244878
const chipGroupSelectionMode = document.getElementById("selection-mode-chips");
4879+
const chipGroupSelectionDisplayMode = document.getElementById("selection-display-chips");
48254880
const chipGroupLayout = document.getElementById("layout-chips");
48264881
const chipGroupInteraction = document.getElementById("interaction-chips");
48274882
const pageSizeInput = document.getElementById("page-size-input");
@@ -4830,6 +4885,7 @@ <h3>
48304885
const calciteChipsTheme = document.querySelectorAll("#theme-chips calcite-chip");
48314886
const calciteChipsScale = document.querySelectorAll("#scale-chips calcite-chip");
48324887
const calciteChipsSelectionMode = document.querySelectorAll("#selection-mode-chips calcite-chip");
4888+
const calciteChipsSelectionDisplayMode = document.querySelectorAll("#selection-display-chips calcite-chip");
48334889
const calciteChipsLayout = document.querySelectorAll("#layout-chips calcite-chip");
48344890
const calciteChipsInteraction = document.querySelectorAll("#interaction-chips calcite-chip");
48354891

@@ -4885,6 +4941,16 @@ <h3>
48854941
});
48864942
});
48874943

4944+
chipGroupSelectionDisplayMode.addEventListener("calciteChipGroupSelect", (event) => {
4945+
calciteChipsSelectionDisplayMode.forEach((chip) => {
4946+
if (event.target.selectedItems.includes(chip)) {
4947+
table.selectionDisplay = chip.value;
4948+
} else {
4949+
return;
4950+
}
4951+
});
4952+
});
4953+
48884954
chipGroupTheme.addEventListener("calciteChipGroupSelect", (event) => {
48894955
calciteChipsTheme.forEach((chip) => {
48904956
if (event.target.selectedItems.includes(chip)) {

0 commit comments

Comments
 (0)