From ea8776cd7c634e317e83b7c19e4fae7779ababc5 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 10 Aug 2023 11:37:32 -0400 Subject: [PATCH] [IndexTable] Update hover styles for status and subdued rows (#9893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Resolves [#666](https://github.com/Shopify/polaris-internal/issues/666). Updates hover styles for critical, subdued, and success status rows on IndexTable. Updates hover styles when `subdued` prop is `true`. > Note: Hover styles on selected IndexTable rows remains unchanged, regardless of status. ### WHAT is this pull request doing? Updates hover styles for critical, subdued, and success status rows on IndexTable. Updates hover styles when `subdued` prop is `true`.
IndexTable with Row Status IndexTable with Row Status
IndexTable with Subdued Rows IndexTable with Subdued Rows
### How to 🎩 [Row Status Storybook](https://5d559397bae39100201eedc1-albpoemcxb.chromatic.com/?path=/story/all-components-indextable--with-row-status&globals=polarisSummerEditions2023:true) [Row Subdued Storybook](https://5d559397bae39100201eedc1-albpoemcxb.chromatic.com/?path=/story/all-components-indextable--with-subdued-rows&globals=polarisSummerEditions2023:true) đŸ–Ĩ [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .../src/components/IndexTable/IndexTable.scss | 34 +++++++ .../IndexTable/IndexTable.stories.tsx | 94 +++++++++++++++++++ 2 files changed, 128 insertions(+) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index cd19cda5275..98949db821e 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -262,6 +262,40 @@ $loading-panel-height: 53px; // other way around. background-color: var(--p-color-bg-hover); } + + // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles + &.statusCritical { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-critical-subdued-hover); + } + } + + &.statusSubdued { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-subdued-hover); + } + } + + &.statusSuccess { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-success-subdued-hover); + } + } + + &.TableRow-subdued { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-subdued-hover); + } + } + // stylelint-enable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles } } diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 9b3590f50f0..e170da57088 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -657,6 +657,100 @@ export function WithDisabledRows() { ); } +export function WithSubduedRows() { + const customers = [ + { + id: '3410', + url: '#', + name: 'Mae Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$2,400', + }, + { + id: '3412', + url: '#', + name: 'Sam Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$400', + }, + { + id: '2563', + url: '#', + name: 'Ellen Ochoa', + location: 'Los Angeles, USA', + orders: 30, + amountSpent: '$140', + }, + ]; + const resourceName = { + singular: 'customer', + plural: 'customers', + }; + + const {selectedResources, allResourcesSelected, handleSelectionChange} = + useIndexResourceState(customers); + + const rowMarkup = customers.map( + ({id, name, location, orders, amountSpent}, index) => ( + + + + {name} + + + {location} + + + {orders} + + + + + {amountSpent} + + + + ), + ); + + return ( + + + {rowMarkup} + + + ); +} + export function WithEmptyState() { const customers = []; const resourceName = {