This repository was archived by the owner on Sep 30, 2025. It is now read-only.
[IndexTable] Use consistent padding around checkboxes #11898
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jesstelford
force-pushed
the
indextable-padding-cleanup
branch
from
0970011 to
90d4aad
Compare
jesstelford
commented
Apr 17, 2024
|
|
||
| .Table:not(.Table-unselectable) & { | ||
| /* stylelint-disable-next-line -- specificity overrides */ | ||
| padding-right: var(--pc-index-table-checkbox-offset-right); |
There was a problem hiding this comment.
This is --p-space-200 (ie; 8px). Before it was getting --p-space-150 (6px) from above.
The 2px difference was being added to the inner width of the element, making it 20px wide even though the checkbox is only 18px wide.
Later, when the checkbox is rendered, it was then being wrapped in a flex container whos only job was to re-center the checkbox due to the added 2px.
So, by setting the correct padding here, we can remove the unnecessary div later 👍
jesstelford
force-pushed
the
indextable-padding-cleanup
branch
from
90d4aad to
59d2197
Compare
jesstelford
force-pushed
the
indextable-padding-cleanup
branch
2 times, most recently
from
7662be1 to
ac55a88
Compare
alex-page
approved these changes
Apr 17, 2024
There was a problem hiding this comment.
Thanks Jess. Pinging @chloerice and @mrcthms for a second pair of eyes.
chloerice
approved these changes
Apr 17, 2024
.changeset/seven-suns-love.md
Outdated
| '@shopify/polaris': patch | ||
| --- | ||
|
|
||
| [IndexTable] Use consistent padding around checkboxes |
There was a problem hiding this comment.
Suggested change
| [IndexTable] Use consistent padding around checkboxes | |
| Removed extra padding around `IndexTable.Row` `Checkbox` |
mrcthms
approved these changes
Apr 18, 2024
aaronccasanova
force-pushed
the
indextable-padding-cleanup
branch
from
ac55a88 to
7dd81a2
Compare
github-actions
bot
added
the
cla-needed
This comment was marked as off-topic.
This comment was marked as off-topic.
jesstelford
force-pushed
the
indextable-padding-cleanup
branch
from
7dd81a2 to
724be1e
Compare
github-actions
bot
removed
the
cla-needed
Merged
sophschneider
pushed a commit
that referenced
this pull request
Apr 24, 2024
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Final rendered output should be identical.
Discovered when investigating #11895