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 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..8f355b36998 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) | "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