diff --git a/.changeset/dirty-pugs-retire.md b/.changeset/dirty-pugs-retire.md new file mode 100644 index 00000000000..f8f4936cd95 --- /dev/null +++ b/.changeset/dirty-pugs-retire.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +- Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 67107c0a047..9950bf6bb82 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -106,15 +106,6 @@ $loading-panel-height: 53px; background-color: var(--p-color-bg-surface); } - // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above. - .TableRow-subdued { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- bg color overrides - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-secondary); - } - } - .TableHeading-first, .TableHeading-second { visibility: visible; @@ -167,73 +158,45 @@ $loading-panel-height: 53px; cursor: auto; } - &.statusSuccess { + &.toneSuccess { // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY &, .TableCell-first, - .TableCell-first + .TableCell { + .TableCell-first + .TableCell, + .TableCell:last-child { background-color: var(--p-color-bg-surface-success); } } - &.statusCritical { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical status for suspended products + &.toneWarning { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-critical); - } - } - - &.statusWarning { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical status for suspended products - &, - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-warning); - } - } - - /* stylelint-disable-next-line no-duplicate-selectors -- status table override */ - &.statusWarning { - /* stylelint-disable-next-line -- status table override */ - &, - .TableCell-first, - .TableCell-first + .TableCell { + .TableCell-first + .TableCell, + .TableCell:last-child { background-color: var(--p-color-bg-surface-warning); } } - // stylelint-disable-next-line -- status row color - &.statusWarning { - // stylelint-disable-next-line -- status row color + &.toneCritical { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-warning); + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-critical); } } - &.statusSubdued { + &.toneSubdued { // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY &, .TableCell-first, - .TableCell-first + .TableCell { + .TableCell-first + .TableCell, + .TableCell:last-child { background-color: var(--p-color-bg-surface-secondary); color: var(--p-color-text-secondary); } - - // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY - &.TableRow-subheader { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - &, - .TableCell:first-child, - .TableCell-first, - .TableCell-first + .TableCell, - .TableCell:last-child { - background-color: var(--p-color-bg-surface-secondary); - } - } } &.TableRow-subheader { @@ -261,10 +224,59 @@ $loading-panel-height: 53px; .TableHeading-first, .TableHeading-second, .TableCell-first, - .TableCell-first + .TableCell { + .TableCell-first + .TableCell, + .TableCell:last-child { background-color: var(--p-color-bg-surface-selected); } + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ + &.toneSuccess { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-success-active); + } + } + + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ + &.toneWarning { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-warning-active); + } + } + + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ + &.toneCritical { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-critical-active); + } + } + + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ + &.toneSubdued { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-secondary-active); + } + } + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ &.TableRow-subheader { /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ @@ -283,47 +295,52 @@ $loading-panel-height: 53px; /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ &, .TableCell-first, - .TableCell-first + .TableCell { + .TableCell-first + .TableCell, + .TableCell:last-child { background-color: var(--p-color-bg-surface-hover); } /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ - &.statusCritical { + &.toneSuccess { /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-critical-hover); + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-success-hover); } } - /* stylelint-disable-next-line -- status table override */ - &.statusWarning { - /* stylelint-disable-next-line -- status table override */ + /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + &.toneCritical { + /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-warning); + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-critical-hover); } } - /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ - &.statusSubdued { - /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + /* stylelint-disable-next-line -- tone table override */ + &.toneWarning { + /* stylelint-disable-next-line -- tone table override */ &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-secondary-hover); + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-warning-hover); } } /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ - &.statusSuccess { + &.toneSubdued { /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ &, .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-surface-success-hover); + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-secondary-hover); } } @@ -338,28 +355,64 @@ $loading-panel-height: 53px; background-color: var(--p-color-bg-surface-secondary); } } + } + + /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ + &.TableRow-hovered.TableRow-selected { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + &, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-brand-hover); + } /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ - &.TableRow-subdued { - /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + &.toneSuccess { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY &, .TableCell:first-child, .TableCell-first, .TableCell-first + .TableCell, .TableCell:last-child { - background-color: var(--p-color-bg-surface-secondary-hover); + background-color: var(--p-color-bg-surface-success-hover); } } - } - /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */ - &.TableRow-hovered.TableRow-selected { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - &, - .TableCell-first, - .TableCell-first + .TableCell, - .TableCell:last-child { - background-color: var(--p-color-bg-surface-hover); + /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + &.toneWarning { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-warning-hover); + } + } + + /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + &.toneCritical { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical tone for suspended products + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-critical-hover); + } + } + + /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ + &.toneSubdued { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + &, + .TableCell:first-child, + .TableCell-first, + .TableCell-first + .TableCell, + .TableCell:last-child { + background-color: var(--p-color-bg-surface-secondary-hover); + } } /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */ @@ -376,11 +429,6 @@ $loading-panel-height: 53px; } } -.TableRow-subdued { - color: var(--p-color-text-secondary); - background: var(--p-color-bg-surface-secondary); -} - .TableRow-disabled { cursor: default; color: var(--p-color-text-secondary); @@ -744,56 +792,41 @@ $loading-panel-height: 53px; position: sticky; } - .statusSuccess { + .TableRow-hovered { // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell:first-child { - background-color: var(--p-color-bg-surface-brand-selected); + background-color: var(--p-color-bg-surface-hover); } } - .statusCritical { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products + .toneSuccess { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell:first-child { - background-color: var(--p-color-bg-surface-critical); + background-color: var(--p-color-bg-surface-success); } } - .statusWarning { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products + .toneWarning { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell:first-child { background-color: var(--p-color-bg-surface-warning); } } - /* stylelint-disable-next-line -- status table override */ - .statusWarning { - // stylelint-disable-next-line -- added crtical status for suspended products + .toneCritical { + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical tone for suspended products .TableCell:first-child { - background-color: var(--p-color-bg-surface-warning); + background-color: var(--p-color-bg-surface-critical); } } - .statusSubdued { + .toneSubdued { // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell:first-child { background-color: var(--p-color-bg-surface-secondary); color: var(--p-color-text-secondary); } } - // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above. - .TableRow-subdued:not(.TableRow-hovered) { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- bg color override - .TableCell:first-child { - background-color: var(--p-color-bg-surface-secondary); - } - } - - .TableRow-hovered { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - .TableCell:first-child { - background-color: var(--p-color-bg-surface-hover); - } - } } .Table-sticky-scrolling { @@ -825,60 +858,6 @@ $loading-panel-height: 53px; z-index: auto; } } - - // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY - .statusSuccess { - .TableCell:last-child { - background-color: var(--p-color-bg-surface-success); - } - } - - .statusCritical { - .TableCell:last-child { - background-color: var(--p-color-bg-surface-critical); - } - } - - .statusWarning { - .TableCell:last-child { - background-color: var(--p-color-bg-surface-warning); - } - } - - .statusSubdued { - .TableCell:last-child { - background-color: var(--p-color-bg-surface-secondary); - color: var(--p-color-text-secondary); - } - } - - .TableRow-selected { - .TableCell:last-child { - background-color: var(--p-color-bg-surface-brand-selected); - } - } - - .TableRow-selected.TableRow-subdued { - color: var(--p-color-text-secondary); - } - - .TableRow-hovered { - .TableCell:last-child { - // deliberately moved it down in the cascade because otherwise the - // selected state overrides the hover state and I think we want it the - // other way around. - background-color: var(--p-color-bg-surface-hover); - } - } - - .TableRow-hovered.TableRow-selected { - .TableCell:last-child { - // deliberately moved it down in the cascade because otherwise the - // selected state overrides the hover state and I think we want it the - // other way around. - background-color: var(--p-color-bg-surface-brand-hover); - } - } } .Table-sortable { diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 3273ac0f2cd..a87692c2bac 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -706,7 +706,7 @@ export function WithSubduedRows() { key={id} selected={selectedResources.includes(id)} position={index} - subdued={index === 1 || index === 2} + tone={index === 1 || index === 2 ? 'subdued' : undefined} > @@ -1631,7 +1631,7 @@ export function WithRowStatus() { key={id} selected={selectedResources.includes(id)} position={index} - status={status as IndexTableRowProps['status']} + tone={status as IndexTableRowProps['tone']} > @@ -1667,7 +1667,7 @@ export function WithRowStatus() { onSelectionChange={handleSelectionChange} headings={[ {title: 'Name'}, - {title: 'Status'}, + {title: 'Tone'}, {title: 'Location'}, { alignment: 'end', @@ -1696,7 +1696,6 @@ export function WithStickyLastColumn() { location: 'Decatur, USA', orders: 20, amountSpent: '$2,400', - status: 'Created', channel: 'Point of Sale', paymentStatus: 'Refunded', fulfillmentStatus: 'Fulfilled', @@ -1708,11 +1707,51 @@ export function WithStickyLastColumn() { location: 'Los Angeles, USA', orders: 30, amountSpent: '$140', - status: 'Created', channel: 'Online Store', paymentStatus: 'Paid', fulfillmentStatus: 'Unfulfilled', }, + { + id: '2562', + url: '#', + name: 'Helen Troy', + location: 'Los Angeles, USA', + orders: 30, + amountSpent: '$975', + lastOrderDate: 'May 31, 2023', + status: 'success', + }, + { + id: '4102', + url: '#', + name: 'Colm Dillane', + location: 'New York, USA', + orders: 27, + amountSpent: '$2885', + lastOrderDate: 'May 31, 2023', + status: 'critical', + }, + { + id: '2564', + url: '#', + name: 'Al Chemist', + location: 'New York, USA', + orders: 19, + amountSpent: '$1,209', + lastOrderDate: 'April 4, 2023', + disabled: true, + status: 'warning', + }, + { + id: '2563', + url: '#', + name: 'Larry June', + location: 'San Francisco, USA', + orders: 22, + amountSpent: '$1,400', + lastOrderDate: 'March 19, 2023', + status: 'subdued', + }, ]; const resourceName = { singular: 'customer', @@ -1742,6 +1781,7 @@ export function WithStickyLastColumn() { key={id} selected={selectedResources.includes(id)} position={index} + tone={status as IndexTableRowProps['tone']} > @@ -1789,7 +1829,7 @@ export function WithStickyLastColumn() { id: 'amount-spent', title: 'Amount spent', }, - {title: 'Status'}, + {title: 'Tone'}, {title: 'Channel'}, {title: 'Payment status'}, {title: 'Fulfillment status'}, @@ -3236,7 +3276,7 @@ export function WithZebraStripingAndRowStatus() { key={id} selected={selectedResources.includes(id)} position={index} - status={status as IndexTableRowProps['status']} + tone={status as IndexTableRowProps['tone']} > @@ -3297,7 +3337,6 @@ export function WithZebraStripingAndStickyLastColumn() { location: 'Decatur, USA', orders: 20, amountSpent: '$2,400', - status: 'Created', channel: 'Point of Sale', paymentStatus: 'Refunded', fulfillmentStatus: 'Fulfilled', @@ -3309,12 +3348,49 @@ export function WithZebraStripingAndStickyLastColumn() { location: 'Los Angeles, USA', orders: 30, amountSpent: '$140', - status: 'Created', channel: 'Online Store', paymentStatus: 'Paid', fulfillmentStatus: 'Unfulfilled', }, + { + id: '2562', + url: '#', + name: 'Helen Troy', + location: 'Los Angeles, USA', + orders: 30, + amountSpent: '$975', + lastOrderDate: 'May 31, 2023', + }, + { + id: '4102', + url: '#', + name: 'Colm Dillane', + location: 'New York, USA', + orders: 27, + amountSpent: '$2885', + lastOrderDate: 'May 31, 2023', + }, + { + id: '2564', + url: '#', + name: 'Al Chemist', + location: 'New York, USA', + orders: 19, + amountSpent: '$1,209', + lastOrderDate: 'April 4, 2023', + disabled: true, + }, + { + id: '2563', + url: '#', + name: 'Larry June', + location: 'San Francisco, USA', + orders: 22, + amountSpent: '$1,400', + lastOrderDate: 'March 19, 2023', + }, ]; + const resourceName = { singular: 'customer', plural: 'customers', @@ -3331,7 +3407,6 @@ export function WithZebraStripingAndStickyLastColumn() { location, orders, amountSpent, - status, channel, paymentStatus, fulfillmentStatus, @@ -3360,7 +3435,6 @@ export function WithZebraStripingAndStickyLastColumn() { {amountSpent} - {status} {channel} {paymentStatus} {fulfillmentStatus} @@ -3390,7 +3464,6 @@ export function WithZebraStripingAndStickyLastColumn() { id: 'amount-spent', title: 'Amount spent', }, - {title: 'Status'}, {title: 'Channel'}, {title: 'Payment status'}, {title: 'Fulfillment status'}, @@ -3845,7 +3918,7 @@ export function WithSubHeaders() { } const selectableRows = rows.filter(({disabled}) => !disabled); - const rowRange: IndexTableRowProps['subHeaderRange'] = [ + const rowRange: IndexTableRowProps['selectionRange'] = [ selectableRows.findIndex((row) => row.id === customers[0].id), selectableRows.findIndex( (row) => row.id === customers[customers.length - 1].id, diff --git a/polaris-react/src/components/IndexTable/components/Row/Row.tsx b/polaris-react/src/components/IndexTable/components/Row/Row.tsx index 98334497ad0..b263a244a61 100644 --- a/polaris-react/src/components/IndexTable/components/Row/Row.tsx +++ b/polaris-react/src/components/IndexTable/components/Row/Row.tsx @@ -13,7 +13,7 @@ import type {Range} from '../../../../utilities/index-provider/types'; import styles from '../../IndexTable.scss'; type RowType = 'data' | 'subheader'; -type RowStatus = 'success' | 'subdued' | 'critical' | 'warning'; +type RowStatus = 'subdued' | 'success' | 'warning' | 'critical'; type TableRowElementType = HTMLTableRowElement & HTMLLIElement; export interface RowProps { @@ -25,17 +25,7 @@ export interface RowProps { selected?: boolean | 'indeterminate'; /** The zero-indexed position of the row. Used for Shift key multi-selection */ position: number; - /** - * @deprecated The subdued prop has been deprecated. Use the `tone` prop instead. - * Whether the row should be subdued */ - subdued?: boolean; - /** - * @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 */ + /** Whether the row should visually indicate its status with a background color */ tone?: RowStatus; /** Whether the row should be disabled */ disabled?: boolean; @@ -60,8 +50,6 @@ export const Row = memo(function Row({ selected, id, position, - subdued, - status, tone, disabled, selectionRange, @@ -127,12 +115,9 @@ export const Row = memo(function Row({ rowType === 'subheader' && styles['TableRow-subheader'], selectable && condensed && styles.condensedRow, selected && styles['TableRow-selected'], - subdued && styles['TableRow-subdued'], hovered && !condensed && styles['TableRow-hovered'], disabled && styles['TableRow-disabled'], - status && styles[variationName('status', status)], - tone && styles[variationName('status', tone)], - + tone && styles[variationName('tone', tone)], !selectable && !primaryLinkElement.current && styles['TableRow-unclickable'], diff --git a/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx b/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx index ae35ccf14df..9a3cb4df959 100644 --- a/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx +++ b/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx @@ -430,37 +430,61 @@ describe('', () => { ); }); - it('has an undefined status by default', () => { + it('has an undefined tone by default', () => { const row = mountWithTable( , ); - expect(row).toHaveReactProps({status: undefined}); + expect(row).toHaveReactProps({tone: undefined}); }); - it('applies success status styles when status prop is set to "success"', () => { + it('applies subdued tone styles when tone prop is set to "subdued"', () => { const row = mountWithTable( - + , ); expect(row).toContainReactComponent('tr', { - className: 'TableRow statusSuccess', + className: 'TableRow toneSubdued', }); }); - it('applies subdued status styles when status prop is set to "subdued"', () => { + it('applies success tone styles when tone prop is set to "success"', () => { const row = mountWithTable( - + , ); expect(row).toContainReactComponent('tr', { - className: 'TableRow statusSubdued', + className: 'TableRow toneSuccess', + }); + }); + + it('applies warning tone styles when tone prop is set to "warning"', () => { + const row = mountWithTable( + + + , + ); + + expect(row).toContainReactComponent('tr', { + className: 'TableRow toneWarning', + }); + }); + + it('applies critical tone styles when tone prop is set to "critical"', () => { + const row = mountWithTable( + + + , + ); + + expect(row).toContainReactComponent('tr', { + className: 'TableRow toneCritical', }); }); diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md index 64498ba1e4f..65842e99673 100644 --- a/polaris.shopify.com/content/components/tables/index-table.md +++ b/polaris.shopify.com/content/components/tables/index-table.md @@ -195,21 +195,19 @@ 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? (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 | +| 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. | +| tone? | "subdued" | "success" | "warning" | "critical" | Whether the row should visually indicate its status with a background 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 @@ -246,14 +244,14 @@ The `IndexTable` is an actionable, filterable, and sortable table widget that su Merchants can select a group of rows at once by clicking or Space keypressing a subheader row's checkbox. To indicate that an `IndexTable.Row` serves as a subheader for 1 or more rows below it, set the: -- Zero-indexed table `position` of the first and last `IndexTable.Row` described by the subheader `IndexTable.Row` as a tuple array on its `subHeaderRange` prop +- Zero-indexed table `position` of the first and last `IndexTable.Row` described by the subheader `IndexTable.Row` as a tuple array on its `selectionRange` prop - Unique `id` on the `IndexTable.Cell` that contains the subheader content - Element tag to `"th"` on the `as` prop of the subheader `IndexTable.Cell` - Subheader `IndexTable.Cell` `scope` prop to `"colgroup"` To associate the subheader `IndexTable.Row` with each `IndexTable.Cell` that it describes, set the: -- Unique `id` provided to the subheader `IndexTable.Cell` on the `headers` prop of each related `IndexTable.Cell` (contained by an `IndexTable.Row` that's position is within the `subHeaderRange`) as well as the unique `id` of its corresponding column heading that you provided to the `IndexTable` `headings` prop +- Unique `id` provided to the subheader `IndexTable.Cell` on the `headers` prop of each related `IndexTable.Cell` (contained by an `IndexTable.Row` that's position is within the `selectionRange`) as well as the unique `id` of its corresponding column heading that you provided to the `IndexTable` `headings` prop ### Keyboard support diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md index 92b5b6077f4..98f66c54f06 100644 --- a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md +++ b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md @@ -31,10 +31,24 @@ order: 1 ### Badge +- Replace `status` with `tone` + `npx @shopify/polaris-migrator react-rename-component-prop --componentName="Badge" --from="status" --to="tone"` +- Replace `statusAndProgressLabelOverride` with `toneAndProgressLabelOverride` + `npx @shopify/polaris-migrator react-rename-component-prop --componentName="Badge" --from="statusAndProgressLabelOverride" --to="toneAndProgressLabelOverride"` +### IndexTable.Row + +- Replace `status` with `tone` + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="IndexTable.Row" --from="status" --to="tone"` + +- Replace `subdued` with `tone` + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="IndexTable.Row" --from="subdued" --to="tone" --toValue="subdued"` + ### Layout.Section - One third: diff --git a/polaris.shopify.com/content/whats-new/version-12.md b/polaris.shopify.com/content/whats-new/version-12.md index c82e046c90a..2226a11e6be 100644 --- a/polaris.shopify.com/content/whats-new/version-12.md +++ b/polaris.shopify.com/content/whats-new/version-12.md @@ -116,6 +116,9 @@ Renaming color control props to `tone` creates a consistent API across component +