Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[IndexTable.Row] Deprecated status and subdued props #10724

Merged
merged 3 commits into from
Sep 28, 2023
Merged

[IndexTable.Row] Deprecated status and subdued props #10724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
487b140
[IndexTable.Row] Deprecated status and subdued props
chloerice Sep 27, 2023
4dc32d3
[IndexTable.Row] Deprecated status and subdued props
chloerice Sep 27, 2023
98731f1
changelog
chloerice Sep 27, 2023
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
5 changes: 5 additions & 0 deletions .changeset/smart-drinks-cheat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': minor
---

Deprecated `IndexTable` `status` and `subdued` props in favor of new `tone` prop
15 changes: 13 additions & 2 deletions polaris-react/src/components/IndexTable/components/Row/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,18 @@ export interface RowProps {
selected?: boolean | 'indeterminate';
/** The zero-indexed position of the row. Used for Shift key multi-selection */
position: number;
/** Whether the row should be subdued */
/**
* @deprecated The subdued prop has been deprecated. Use the `tone` prop instead.
* Whether the row should be subdued */
subdued?: boolean;
/** Whether the row should have a status */
/**
* @deprecated The status prop has been deprecated. Use the `tone` prop instead.
* Whether the row should have a status */
status?: RowStatus;
/**

* Whether the row should visually indicate its status with color */
tone?: RowStatus;
/** Whether the row should be disabled */
disabled?: boolean;
/** A tuple array with the first and last index of the range of other rows that this row describes. All rows in the range are selected when the selection range row is selected. */
Expand All @@ -54,6 +62,7 @@ export const Row = memo(function Row({
position,
subdued,
status,
tone,
disabled,
selectionRange,
rowType = 'data',
Expand Down Expand Up @@ -122,6 +131,8 @@ export const Row = memo(function Row({
hovered && !condensed && styles['TableRow-hovered'],
disabled && styles['TableRow-disabled'],
status && styles[variationName('status', status)],
tone && styles[variationName('status', tone)],

!selectable &&
!primaryLinkElement.current &&
styles['TableRow-unclickable'],
Expand Down
29 changes: 15 additions & 14 deletions polaris.shopify.com/content/components/tables/index-table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,20 +183,21 @@ An `IndexTable.Row` is used to render a row representing an item within an `Inde

### IndexTable.Row properties

| Prop | Type | Description |
| ------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | ReactNode | Table header or data cells |
| id | string | A unique identifier for the row |
| selected? | boolean | "indeterminate" | A boolean property indicating whether the row or it's related rows are selected |
| position | number | The zero-indexed position of the row. Used for Shift key multi-selection as well as selection of a range of rows when a `selectionRange` is set. |
| subdued? | boolean | Whether the row should be subdued |
| status? | "success" | "subdued" | "critical" | Whether the row should have a status |
| disabled? | boolean | Whether the row should be disabled |
| selectionRange? | [number, number] | A tuple array with the first and last index of the range of other rows that the row describes. All non-disabled rows in the range are selected when the row with a selection range set is selected. |
| rowType? | "data" | "subheader" | Indicates the relationship or role of the row's contents. A `rowType` of "subheader" looks and behaves the same as the table header. Defaults to "data". |
| accessibilityLabel? | string | Label set on the row's checkbox. Defaults to "Select {resourceName}" |
| onClick? | () => void | Callback fired when the row is clicked. Overrides the default click behaviour. |
| onNavigation? | (id: string) => void | Callback fired when the row is clicked and contains an anchor element with the `data-primary-link` property set |
| Prop | Type | Description |
| --------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | ReactNode | Table header or data cells |
| id | string | A unique identifier for the row |
| selected? | boolean | "indeterminate" | A boolean property indicating whether the row or it's related rows are selected |
| position | number | The zero-indexed position of the row. Used for Shift key multi-selection as well as selection of a range of rows when a `selectionRange` is set. |
| subdued? (deprecated) | boolean | Whether the row should be subdued. Deprecated in favor of `tone`. |
| status? (deprecated) | "subdued" | "success" | "warning" | "critical" | Whether the row should have a status. Deprecated in favor of `tone`. |
| tone? | "subdued" | "success" | "warning" | "critical" | Whether the row should visually indicate its status with color |
| disabled? | boolean | Whether the row should be disabled |
| selectionRange? | [number, number] | A tuple array with the first and last index of the range of other rows that the row describes. All non-disabled rows in the range are selected when the row with a selection range set is selected. |
| rowType? | "data" | "subheader" | Indicates the relationship or role of the row's contents. A `rowType` of "subheader" looks and behaves the same as the table header. Defaults to "data". |
| accessibilityLabel? | string | Label set on the row's checkbox. Defaults to "Select {resourceName}" |
| onClick? | () => void | Callback fired when the row is clicked. Overrides the default click behaviour. |
| onNavigation? | (id: string) => void | Callback fired when the row is clicked and contains an anchor element with the `data-primary-link` property set |

## IndexTable.Cell

Expand Down