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

[IndexTable] Don't trigger onSelectionChange() on edges of disabled checkbox #11897

Merged
merged 1 commit into from
Apr 22, 2024
Merged

[IndexTable] Don't trigger onSelectionChange() on edges of disabled checkbox #11897

merged 1 commit into from
Apr 22, 2024
+21 −2

Conversation

jesstelford
Copy link
Contributor

@jesstelford jesstelford commented Apr 17, 2024 •
edited
Loading

Fixes #11895

@jesstelford jesstelford force-pushed the clickable-disabled-checkbox branch from 03b6071 to 0970011 Compare April 17, 2024 01:45
@jesstelford jesstelford force-pushed the clickable-disabled-checkbox branch from 0970011 to a60d8aa Compare April 17, 2024 01:47
@jesstelford jesstelford changed the title [IndexTable] Use consistent padding around checkboxes [IndexTable] Don't trigger onSelectionChange() on edges of disabled checkbox Apr 17, 2024
@jesstelford jesstelford reopened this Apr 17, 2024
@jesstelford
Copy link
Contributor Author

/snapit

@github-actions GitHub Actions
Copy link
Contributor

🫰✨ Thanks @jesstelford! Your snapshothas been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240417020034"

@jesstelford jesstelford mentioned this pull request Apr 17, 2024
Closed
@alex-page alex-page requested review from mrcthms and chloerice April 17, 2024 06:20
alex-page
alex-page approved these changes Apr 17, 2024
View reviewed changes
Copy link
Member

@alex-page alex-page left a comment

Choose a reason for hiding this comment

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

This makes sense to me. Pinging @chloerice and @mrcthms for a second pair of eyes.

stefanlegg
stefanlegg approved these changes Apr 17, 2024
View reviewed changes
Copy link
Contributor

@stefanlegg stefanlegg left a comment

Choose a reason for hiding this comment

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

LGTM! Thank you!

chloerice
chloerice approved these changes Apr 17, 2024
View reviewed changes
.changeset/breezy-ghosts-pay.md Outdated
'@shopify/polaris': patch
---

[IndexTable] Don't trigger onSelectionChange() on edges of disabled checkbox.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
[IndexTable] Don't trigger onSelectionChange() on edges of disabled checkbox.
Fixed edges of disabled `IndexTable.Row` `Checkbox` triggering selection

polaris-react/src/components/IndexTable/components/Row/Row.tsx
if (('key' in event && event.key !== ' ') || !onSelectionChange) return;
if (
disabled ||
!selectable ||
Copy link
Member

Choose a reason for hiding this comment

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

This seems to be safe, as handleInteraction is really handling selection, but just want to call out that we should verify that this doesn't prevent onNavigation from being called when a table is not selectable. We had a regression recently and I want to make sure we test that going forward when updating conditionals to require selectability.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The onNavigation callback is executed in a different logic branch than the handleInteraction callback, so these two should be unrelated (and unrelated to the above regression).

The logic which follows the new !selectable check is purely for triggering selections, so I'm confident it will behave as expected.

@aaronccasanova aaronccasanova force-pushed the clickable-disabled-checkbox branch from 74e3e2d to 0f6b754 Compare April 19, 2024 21:52
@jesstelford jesstelford requested a review from sam-b-rose as a code owner April 19, 2024 21:52
@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024
@translation-platform

This comment was marked as off-topic.

Sign in to view
@jesstelford jesstelford force-pushed the clickable-disabled-checkbox branch from 0f6b754 to 7dfd737 Compare April 22, 2024 01:53
@github-actions github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 22, 2024
@jesstelford jesstelford merged commit a83084b into main Apr 22, 2024
@jesstelford jesstelford deleted the clickable-disabled-checkbox branch April 22, 2024 02:49
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Apr 22, 2024
Merged
sophschneider pushed a commit that referenced this pull request Apr 24, 2024
@shopify-github-actions-access @github-actions
Version Packages (#11922)
d3099a5 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@13.2.0

### Minor Changes

- [#11535](#11535)
[`bcd16df24`](bcd16df)
Thanks [@ShabanaRumane](https://github.com/ShabanaRumane)! - Added
support for setting `maxHeight` and `minHeight` on `Popover.Pane` and
`Combobox`


- [#11907](#11907)
[`45308c97a`](45308c9)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - Added an optional
`fiterLabel` prop to `ActionList` to allow for a custom placeholder

### Patch Changes

- [#11897](#11897)
[`a83084b3b`](a83084b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed edges of
disabled `IndexTable.Row` `Checkbox` triggering selection


- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29


- [#11929](#11929)
[`9ee700be6`](9ee700b)
Thanks [@sophschneider](https://github.com/sophschneider)! - Rounded
`Navigation` at `mdDown` behind a feature flag


- [#11923](#11923)
[`ce13c4366`](ce13c43)
Thanks [@jesstelford](https://github.com/jesstelford)! - Update dev
dependency: `postcss-import@^15.1.0` -> `postcss-import@^16.1.0`


- [#11925](#11925)
[`364ada59e`](364ada5)
Thanks [@sophschneider](https://github.com/sophschneider)! - Updated
Frame to only apply rounded Frame when passed a `topBar`


- [#11734](#11734)
[`1fef06256`](1fef062)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to
Storybook v8


- [#11898](#11898)
[`1539f0e7c`](1539f0e)
Thanks [@jesstelford](https://github.com/jesstelford)! - Removed extra
padding around `IndexTable.Row` `Checkbox`


- [#11927](#11927)
[`5a32a3ff6`](5a32a3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added
`prefers-reduced-motion` media queries to `Frame` width transitions


- [#11930](#11930)
[`b111629d7`](b111629)
Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate
Storybook stories to CSF v3


- [#11805](#11805)
[`0a9b72721`](0a9b727)
Thanks [@LA1CH3](https://github.com/LA1CH3)! - Fixed `IndexTable`
`loading` prop to correctly show/hide loading UI when prop value changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-icons@9.0.1
    -   @shopify/polaris-tokens@9.0.1

## @shopify/polaris-icons@9.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

## @shopify/polaris-migrator@1.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29


- [#11930](#11930)
[`b111629d7`](b111629)
Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate
Storybook stories to CSF v3

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1
    -   @shopify/stylelint-polaris@16.0.1

## @shopify/polaris-tokens@9.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

## @shopify/stylelint-polaris@16.0.1

### Patch Changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1

## polaris-for-vscode@1.0.1

### Patch Changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1

## polaris.shopify.com@1.0.4

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

- Updated dependencies
\[[`a83084b3b`](a83084b),
[`5ec70e688`](5ec70e6),
[`9ee700be6`](9ee700b),
[`bcd16df24`](bcd16df),
[`ce13c4366`](ce13c43),
[`364ada59e`](364ada5),
[`1fef06256`](1fef062),
[`45308c97a`](45308c9),
[`1539f0e7c`](1539f0e),
[`5a32a3ff6`](5a32a3f),
[`b111629d7`](b111629),
[`0a9b72721`](0a9b727)]:
    -   @shopify/polaris@13.2.0
    -   @shopify/polaris-icons@9.0.1
    -   @shopify/polaris-tokens@9.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@sam-b-rose sam-b-rose Awaiting requested review from sam-b-rose

4 more reviewers

@stefanlegg stefanlegg stefanlegg approved these changes

@mrcthms mrcthms mrcthms approved these changes

@chloerice chloerice chloerice approved these changes

@alex-page alex-page alex-page approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug: IndexTable] Small click area where it's still possible to check disabled table rows
5 participants
@jesstelford @stefanlegg @mrcthms @chloerice @alex-page