From 487b140f718385043848ecaab8d590e12de9a6c1 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 27 Sep 2023 12:08:18 -0400 Subject: [PATCH 1/3] [IndexTable.Row] Deprecated status and subdued props --- .../IndexTable/components/Row/Row.tsx | 15 ++++++++-- .../content/components/tables/index-table.md | 29 ++++++++++--------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/polaris-react/src/components/IndexTable/components/Row/Row.tsx b/polaris-react/src/components/IndexTable/components/Row/Row.tsx index 55b1cc42a05..98334497ad0 100644 --- a/polaris-react/src/components/IndexTable/components/Row/Row.tsx +++ b/polaris-react/src/components/IndexTable/components/Row/Row.tsx @@ -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. */ @@ -54,6 +62,7 @@ export const Row = memo(function Row({ position, subdued, status, + tone, disabled, selectionRange, rowType = 'data', @@ -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'], diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md index 005170fc8cf..d2d5e82a0a7 100644 --- a/polaris.shopify.com/content/components/tables/index-table.md +++ b/polaris.shopify.com/content/components/tables/index-table.md @@ -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) | "success" | "subdued" | "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 From 4dc32d3b3bb471679fa9ef516f3ee8033d860c90 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 27 Sep 2023 12:08:18 -0400 Subject: [PATCH 2/3] [IndexTable.Row] Deprecated status and subdued props --- polaris.shopify.com/content/components/tables/index-table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md index d2d5e82a0a7..8f355b36998 100644 --- a/polaris.shopify.com/content/components/tables/index-table.md +++ b/polaris.shopify.com/content/components/tables/index-table.md @@ -190,7 +190,7 @@ An `IndexTable.Row` is used to render a row representing an item within an `Inde | 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) | "success" | "subdued" | "critical" | Whether the row should have a status. 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. | From 98731f12aa8630a7f21e8dd323ee43d94b777d0a Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Wed, 27 Sep 2023 16:11:31 -0400 Subject: [PATCH 3/3] changelog --- .changeset/smart-drinks-cheat.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smart-drinks-cheat.md diff --git a/.changeset/smart-drinks-cheat.md b/.changeset/smart-drinks-cheat.md new file mode 100644 index 00000000000..9c690c0c993 --- /dev/null +++ b/.changeset/smart-drinks-cheat.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Deprecated `IndexTable` `status` and `subdued` props in favor of new `tone` prop