Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Fix hover issue unselected indexTable #11115

Merged
merged 3 commits into from
Nov 7, 2023
Merged

Fix hover issue unselected indexTable #11115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97197f1
Fix hover issue unselected indexTable
fatimasajadi Nov 6, 2023
8de1b11
Add changeset
fatimasajadi Nov 6, 2023
1051d46
Address review feedback
fatimasajadi Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/silly-lies-march.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': minor
---

Fixed hover state of `IndexTable.Row` when `selectable` is `false`
68 changes: 66 additions & 2 deletions polaris-react/src/components/IndexTable/IndexTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -803,10 +803,74 @@ $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 {
// 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-hover);
}

// stylelint-disable-next-line selector-max-class, selector-max-specificity -- fixed hover state for nonselected indexTable
&.toneSuccess {
// 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,
.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 -- fixed hover state for nonselected indexTable
&.toneWarning {
// 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,
.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 -- fixed hover state for nonselected indexTable
&.toneCritical {
// 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,
.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 -- fixed hover state for nonselected indexTable
&.toneSubdued {
// 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,
.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 -- fixed hover state for nonselected indexTable
&.TableRow-subheader {
// 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,
.TableCell-first + .TableCell,
.TableCell:last-child {
background-color: var(--p-color-bg-surface-secondary);
}
}
}

.toneSuccess {
Expand Down
108 changes: 108 additions & 0 deletions polaris-react/src/components/IndexTable/IndexTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2171,6 +2171,114 @@ 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',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a subdued row as well so regressions can be caught in the future.

Suggested change
amountSpent: '$140',
amountSpent: '$140',
status: 'subdued',

status: 'subdued',
},
];
const resourceName = {
singular: 'customer',
plural: 'customers',
};

const rowMarkup = customers.map(
({id, name, location, orders, amountSpent, status}, index) => (
<IndexTable.Row
id={id}
key={id}
position={index}
tone={status as IndexTableRowProps['tone']}
>
<IndexTable.Cell>
<Text fontWeight="bold" as="span">
{name}
</Text>
</IndexTable.Cell>
<IndexTable.Cell>{location}</IndexTable.Cell>
<IndexTable.Cell>
<Text as="span" alignment="end" numeric>
{orders}
</Text>
</IndexTable.Cell>
<IndexTable.Cell>
<Text as="span" alignment="end" numeric>
{amountSpent}
</Text>
</IndexTable.Cell>
</IndexTable.Row>
),
);

return (
<LegacyCard>
<IndexTable
resourceName={resourceName}
itemCount={customers.length}
headings={[
{title: 'Name'},
{title: 'Location'},
{
alignment: 'end',
id: 'order-count',
title: 'Order count',
},
{
alignment: 'end',
hidden: false,
id: 'amount-spent',
title: 'Amount spent',
},
]}
selectable={false}
>
{rowMarkup}
</IndexTable>
</LegacyCard>
);
}

export function WithAllOfItsElements() {
const customers = [
{
Expand Down