Skip to content

feat(table): Add selection-display property #9355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 17, 2024
Merged

feat(table): Add selection-display property #9355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0dfaa33
feat(table): Add `selection-display` property
macandcheese May 16, 2024
900302f
Clean up
macandcheese May 16, 2024
b00ba09
Clean up
macandcheese May 17, 2024
1fa9926
Merge branch 'main' into macandcheese/9353-table-selection-display
macandcheese May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ 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 } from "./components/table/interfaces";
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";
Expand Down Expand Up @@ -173,7 +173,7 @@ 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 } from "./components/table/interfaces";
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";
Expand Down Expand Up @@ -4931,6 +4931,10 @@ export namespace Components {
* @readonly
*/
"selectedItems": HTMLCalciteTableRowElement[];
/**
* 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.
*/
"selectionDisplay": TableSelectionDisplay;
/**
* 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.
*/
Expand Down Expand Up @@ -12879,6 +12883,10 @@ declare namespace LocalJSX {
* @readonly
*/
"selectedItems"?: HTMLCalciteTableRowElement[];
/**
* 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.
*/
"selectionDisplay"?: TableSelectionDisplay;
/**
* 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.
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/table/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,6 @@ export type RowType = "head" | "body" | "foot";

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

export type TableSelectionDisplay = "top" | "none";

export type TableInteractionMode = "interactive" | "static";
69 changes: 69 additions & 0 deletions packages/calcite-components/src/components/table/table.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const simple = (): string =>
page-size="${number("page-size", 0)}"
interaction-mode="${select("interaction-mode", ["interactive", "static"], "interactive")}"
selection-mode="${select("selection-mode", ["none", "single", "multiple"], "none")}"
selection-display="${select("selection-display", ["none", "top"], "top")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
layout="${select("layout", ["auto", "fixed"], "auto")}"
caption="${text("caption", "Simple table")}"
Expand Down Expand Up @@ -773,6 +774,74 @@ export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string =>
</calcite-table-row>
</calcite-table>`;

export const selectionModeMultipleAndSelectedSelectionDisplayNoneOnLoad = (): string =>
html` <calcite-table
page-size="4"
selection-mode="multiple"
selection-display="none"
numbered
caption="selection-mode multiple with selected at load"
>
<calcite-action slot="selection-actions" icon="layer"></calcite-action>
<calcite-action slot="selection-actions" icon="send"></calcite-action>
<calcite-action slot="selection-actions" icon="copy"></calcite-action>
<calcite-action slot="selection-actions" icon="plus"></calcite-action>
<calcite-table-row slot="table-header">
<calcite-table-header heading="Heading"></calcite-table-header>
<calcite-table-header heading="Heading"></calcite-table-header>
<calcite-table-header heading="Heading"></calcite-table-header>
<calcite-table-header heading="Heading"></calcite-table-header>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row selected>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row selected>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row selected>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row selected>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
</calcite-table>`;

export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = (): string =>
html`<calcite-table
page-size="4"
Expand Down
17 changes: 14 additions & 3 deletions packages/calcite-components/src/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,20 @@ import {
NumberingSystem,
} from "../../utils/locale";
import { getUserAgentString } from "../../utils/browser";
import { TableInteractionMode, TableLayout, TableRowFocusEvent } from "./interfaces";
import {
TableInteractionMode,
TableLayout,
TableRowFocusEvent,
TableSelectionDisplay,
} from "./interfaces";
import { CSS, SLOTS } from "./resources";
import { TableMessages } from "./assets/table/t9n";

/**
* @slot - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
* @slot table-header - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
* @slot table-footer - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
* @slot selection-actions - A slot for adding a `calcite-action-bar` or other elements to display when `selectionMode` is not `"none"`.
* @slot selection-actions - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
*/

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

/** 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. */

@Prop({ reflect: true }) selectionDisplay: TableSelectionDisplay = "top";

/**
* When `true`, displays striped styling in the component.
*
Expand Down Expand Up @@ -517,7 +526,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
return (
<Host>
<div class={CSS.container}>
{this.selectionMode !== "none" && this.renderSelectionArea()}
{this.selectionMode !== "none" &&
this.selectionDisplay !== "none" &&
this.renderSelectionArea()}
<div
class={{
[CSS.bordered]: this.bordered,
Expand Down
66 changes: 66 additions & 0 deletions packages/calcite-components/src/demos/table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1922,6 +1922,16 @@ <h3>Kitchen Sink</h3>
<calcite-chip appearance="outline-fill" value="multiple">multiple</calcite-chip>
</calcite-chip-group>
</div>

<div>
<span>Selection Display</span>
<calcite-chip-group selection-mode="single-persist" id="selection-display-chips">
<calcite-chip appearance="outline-fill" selected value="top">Top</calcite-chip>
<calcite-chip appearance="outline-fill" value="top-sticky">Top-sticky</calcite-chip>
<calcite-chip appearance="outline-fill" value="none">None</calcite-chip>
</calcite-chip-group>
</div>

<div>
<span>Scale</span>
<calcite-chip-group selection-mode="single-persist" id="scale-chips">
Expand Down Expand Up @@ -4307,6 +4317,50 @@ <h3>selection-mode multiple with selected at load</h3>
</calcite-table-row>
</calcite-table>

<h3>selection-mode multiple with selected at load selection display none</h3>
<calcite-table
bordered
selection-mode="multiple"
selection-display="none"
numbered
caption="selection-mode multiple and numbered"
>
<calcite-action slot="selection-actions" icon="layer"></calcite-action>
<calcite-action slot="selection-actions" icon="send"></calcite-action>
<calcite-action slot="selection-actions" icon="copy"></calcite-action>
<calcite-action slot="selection-actions" icon="plus"></calcite-action>
<calcite-table-row slot="table-header">
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
<calcite-table-cell>cell</calcite-table-cell>
</calcite-table-row>
<calcite-table-row slot="table-footer">
<calcite-table-cell>foot</calcite-table-cell>
<calcite-table-cell>foot</calcite-table-cell>
<calcite-table-cell>foot</calcite-table-cell>
<calcite-table-cell>foot</calcite-table-cell>
</calcite-table-row>
</calcite-table>

<h3>selection-mode multiple with multiple headers, footers, pageSize</h3>

<calcite-table
Expand Down Expand Up @@ -4822,6 +4876,7 @@ <h3>
const chipGroupTheme = document.getElementById("theme-chips");
const chipGroupScale = document.getElementById("scale-chips");
const chipGroupSelectionMode = document.getElementById("selection-mode-chips");
const chipGroupSelectionDisplayMode = document.getElementById("selection-display-chips");
const chipGroupLayout = document.getElementById("layout-chips");
const chipGroupInteraction = document.getElementById("interaction-chips");
const pageSizeInput = document.getElementById("page-size-input");
Expand All @@ -4830,6 +4885,7 @@ <h3>
const calciteChipsTheme = document.querySelectorAll("#theme-chips calcite-chip");
const calciteChipsScale = document.querySelectorAll("#scale-chips calcite-chip");
const calciteChipsSelectionMode = document.querySelectorAll("#selection-mode-chips calcite-chip");
const calciteChipsSelectionDisplayMode = document.querySelectorAll("#selection-display-chips calcite-chip");
const calciteChipsLayout = document.querySelectorAll("#layout-chips calcite-chip");
const calciteChipsInteraction = document.querySelectorAll("#interaction-chips calcite-chip");

Expand Down Expand Up @@ -4885,6 +4941,16 @@ <h3>
});
});

chipGroupSelectionDisplayMode.addEventListener("calciteChipGroupSelect", (event) => {
calciteChipsSelectionDisplayMode.forEach((chip) => {
if (event.target.selectedItems.includes(chip)) {
table.selectionDisplay = chip.value;
} else {
return;
}
});
});

chipGroupTheme.addEventListener("calciteChipGroupSelect", (event) => {
calciteChipsTheme.forEach((chip) => {
if (event.target.selectedItems.includes(chip)) {
Expand Down
Loading