Skip to content

Commit

Permalink
feat(table): Update multiple selection iconography (#10125)
Browse files Browse the repository at this point in the history 
**Related Issue:** #10123

## Summary
Updates the iconography used for the multiple selection affordance in
Table.

Visual changes:
Before:
![Screenshot 2024-08-21 at 9 09
43 AM](https://github.com/user-attachments/assets/91ca7cdd-ebea-4468-9f87-00333c0f18d8)
![Screenshot 2024-08-21 at 9 09
54 AM](https://github.com/user-attachments/assets/5fe89158-d450-429a-8fa5-7dd62cec030d)
![Screenshot 2024-08-21 at 9 09
38 AM](https://github.com/user-attachments/assets/685a34b1-df53-4fda-b391-00dba2cf94ba)


After:
![Screenshot 2024-08-21 at 9 09
17 AM](https://github.com/user-attachments/assets/60cac50a-1ee1-46d3-af99-f4906efd007d)
![Screenshot 2024-08-21 at 9 09
21 AM](https://github.com/user-attachments/assets/8892338b-75db-4515-8357-1646cd6d0b5f)
![Screenshot 2024-08-21 at 9 09
24 AM](https://github.com/user-attachments/assets/811e083e-6dba-4d97-b65b-4bb58c53b602)
  • Loading branch information
@macandcheese
macandcheese authored Aug 21, 2024
1 parent 2683418 commit f2b2016
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 4 deletions.
6 changes: 6 additions & 0 deletions packages/calcite-components/src/components/table-header/resources.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,9 @@ export const CSS = {
lastCell: "last-cell",
staticCell: "static-cell",
};

export const ICONS = {
checked: "check-square-f",
indeterminate: "minus-square-f",
unchecked: "square",
};
14 changes: 10 additions & 4 deletions packages/calcite-components/src/components/table-header/table-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Alignment, Scale, SelectionMode } from "../interfaces";
import { RowType, TableInteractionMode } from "../table/interfaces";
import { getIconScale } from "../../utils/component";
import { TableHeaderMessages } from "./assets/table-header/t9n";
import { CSS } from "./resources";
import { CSS, ICONS } from "./resources";

@Component({
tag: "calcite-table-header",
Expand Down Expand Up @@ -216,8 +216,14 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
? "row"
: "col";

const allSelected = this.selectedRowCount === this.bodyRowCount;
const selectionIcon = allSelected ? "check-square-f" : "check-square";
const checked = this.selectedRowCount === this.bodyRowCount;
const indeterminate = this.selectedRowCount > 0;
const selectionIcon = checked
? ICONS.checked
: indeterminate
? ICONS.indeterminate
: ICONS.unchecked;

const staticCell = this.interactionMode === "static" && !this.selectionCell;
return (
<Host>
Expand Down Expand Up @@ -249,7 +255,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
{this.description && <div class={CSS.description}>{this.description}</div>}
{this.selectionCell && this.selectionMode === "multiple" && (
<calcite-icon
class={{ [CSS.active]: allSelected }}
class={{ [CSS.active]: indeterminate || checked }}
icon={selectionIcon}
scale={getIconScale(this.scale)}
/>
Expand Down
131 changes: 131 additions & 0 deletions packages/calcite-components/src/components/table/table.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -769,6 +769,38 @@ export const singleSelection_TestOnly = (): string =>
</calcite-table-row>
</calcite-table>`;

export const singleSelectionSelected_TestOnly = (): string =>
html` <calcite-table selection-mode="single" caption="selection-mode single table">
<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 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>`;

export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string =>
html` <calcite-table
page-size="4"
Expand Down Expand Up @@ -836,6 +868,105 @@ export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string =>
</calcite-table-row>
</calcite-table>`;

export const selectionModeMultipleAndAllSelectedSinglePageOnLoad_TestOnly = (): string =>
html` <calcite-table selection-mode="multiple" 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 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 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 selectionModeMultipleAndAllSelectedMultiplePagesOnLoad_TestOnly = (): string =>
html` <calcite-table
page-size="4"
selection-mode="multiple"
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 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 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 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 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 selectionModeMultipleAndSelectedSelectionDisplayNoneOnLoad = (): string =>
html` <calcite-table
page-size="4"
Expand Down

0 comments on commit f2b2016

Please sign in to comment.