From 97197f14239f88e200b5c5c10f2b324ea7ff048d Mon Sep 17 00:00:00 2001 From: Fatima Sajadi Date: Mon, 6 Nov 2023 01:46:27 +0000 Subject: [PATCH 1/3] Fix hover issue unselected indexTable --- .../src/components/IndexTable/IndexTable.scss | 71 +++++++++++- .../IndexTable/IndexTable.stories.tsx | 107 ++++++++++++++++++ 2 files changed, 175 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 5f9b7da9a2a..397a7152932 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -783,6 +783,7 @@ $loading-panel-height: 53px; } .Table-unselectable { + background-color: red; &.Table-sticky { // stylelint-disable-next-line selector-max-class, selector-max-specificity -- makes first column sticky when table is unselectable .TableCell:first-child { @@ -803,9 +804,73 @@ $loading-panel-height: 53px; } .TableRow-hovered:not(.TableRow-disabled) { - // 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); + // 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-brand-hover); + } + + /* stylelint-disable-next-line selector-max-class, 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-success-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 */ + &.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); + } } } diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index f3648791ffa..16e531a8302 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -2171,6 +2171,113 @@ export function WithoutCheckboxes() { ); } +export function WithTonesWithoutCheckboxes() { + const customers = [ + { + id: '3410', + url: '#', + name: 'Mae Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$2,400', + }, + { + id: '3411', + url: '#', + name: 'Joe Jemison', + location: 'Sydney, AU', + orders: 20, + amountSpent: '$1,400', + status: 'success', + }, + { + id: '3412', + url: '#', + name: 'Sam Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$400', + status: 'critical', + }, + { + id: '3413', + url: '#', + name: 'Mae Jemison', + location: 'Decatur, USA', + orders: 20, + amountSpent: '$4,300', + status: 'warning', + }, + { + id: '2563', + url: '#', + name: 'Ellen Ochoa', + location: 'Los Angeles, USA', + orders: 30, + amountSpent: '$140', + }, + ]; + const resourceName = { + singular: 'customer', + plural: 'customers', + }; + + const rowMarkup = customers.map( + ({id, name, location, orders, amountSpent, status}, index) => ( + + + + {name} + + + {location} + + + {orders} + + + + + {amountSpent} + + + + ), + ); + + return ( + + + {rowMarkup} + + + ); +} + export function WithAllOfItsElements() { const customers = [ { From 8de1b1189fa6d0260419c1559d4faaf275ea1698 Mon Sep 17 00:00:00 2001 From: Fatima Sajadi Date: Mon, 6 Nov 2023 15:48:50 +0000 Subject: [PATCH 2/3] Add changeset --- .changeset/silly-lies-march.md | 5 +++++ .../src/components/IndexTable/IndexTable.scss | 22 +++++-------------- 2 files changed, 11 insertions(+), 16 deletions(-) create mode 100644 .changeset/silly-lies-march.md diff --git a/.changeset/silly-lies-march.md b/.changeset/silly-lies-march.md new file mode 100644 index 00000000000..83512ff58aa --- /dev/null +++ b/.changeset/silly-lies-march.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Fixed hover state for IndexTable without checkboxes diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 397a7152932..d74e295bff8 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -783,7 +783,6 @@ $loading-panel-height: 53px; } .Table-unselectable { - background-color: red; &.Table-sticky { // stylelint-disable-next-line selector-max-class, selector-max-specificity -- makes first column sticky when table is unselectable .TableCell:first-child { @@ -804,7 +803,7 @@ $loading-panel-height: 53px; } .TableRow-hovered:not(.TableRow-disabled) { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -813,9 +812,8 @@ $loading-panel-height: 53px; 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 */ &.toneSuccess { - // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -825,9 +823,8 @@ $loading-panel-height: 53px; } } - /* 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 + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -837,9 +834,8 @@ $loading-panel-height: 53px; } } - /* 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 + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -849,9 +845,8 @@ $loading-panel-height: 53px; } } - /* 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 + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -861,9 +856,8 @@ $loading-panel-height: 53px; } } - /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- 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 */ + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -875,28 +869,24 @@ $loading-panel-height: 53px; } .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-success); } } .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); } } .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-critical); } } .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); From 1051d46968b7d8c3e32ff11dc25b3ca183ec738c Mon Sep 17 00:00:00 2001 From: Fatima Sajadi Date: Mon, 6 Nov 2023 20:10:36 +0000 Subject: [PATCH 3/3] Address review feedback --- .changeset/silly-lies-march.md | 2 +- .../src/components/IndexTable/IndexTable.scss | 23 +++++++++++++------ .../IndexTable/IndexTable.stories.tsx | 1 + 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/.changeset/silly-lies-march.md b/.changeset/silly-lies-march.md index 83512ff58aa..70cfa2f1aba 100644 --- a/.changeset/silly-lies-march.md +++ b/.changeset/silly-lies-march.md @@ -2,4 +2,4 @@ '@shopify/polaris': minor --- -Fixed hover state for IndexTable without checkboxes +Fixed hover state of `IndexTable.Row` when `selectable` is `false` diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index d74e295bff8..9b40be05b39 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -803,17 +803,18 @@ $loading-panel-height: 53px; } .TableRow-hovered:not(.TableRow-disabled) { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity, selector-max-compound-selectors -- 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-brand-hover); + background-color: var(--p-color-bg-surface-hover); } + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable &.toneSuccess { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity, selector-max-compound-selectors -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -823,8 +824,9 @@ $loading-panel-height: 53px; } } + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable &.toneWarning { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity, selector-max-compound-selectors -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -834,8 +836,9 @@ $loading-panel-height: 53px; } } + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable &.toneCritical { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity, selector-max-compound-selectors -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -845,8 +848,9 @@ $loading-panel-height: 53px; } } + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable &.toneSubdued { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity, selector-max-compound-selectors -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -856,8 +860,9 @@ $loading-panel-height: 53px; } } + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable &.TableRow-subheader { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- fixed hover state for nonselected indexTable + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- fixed hover state for nonselected indexTable &, .TableCell:first-child, .TableCell-first, @@ -869,24 +874,28 @@ $loading-panel-height: 53px; } .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-success); } } .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); } } .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-critical); } } .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); diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 16e531a8302..63c99129840 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -2215,6 +2215,7 @@ export function WithTonesWithoutCheckboxes() { location: 'Los Angeles, USA', orders: 30, amountSpent: '$140', + status: 'subdued', }, ]; const resourceName = {