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

[IndexFilters] Fix layout shift when going from between default and filtering modes #10428

Merged
merged 5 commits into from
Sep 14, 2023
Merged

[IndexFilters] Fix layout shift when going from between default and filtering modes #10428

merged 5 commits into from
Sep 14, 2023

Conversation

mrcthms
Copy link
Contributor

@mrcthms mrcthms commented Sep 13, 2023

WHY are these changes introduced?

Fixes an issue in the IndexFilters where it caused a layout shift when toggling between default and filtering modes. This PR fixes that little layout shift.

Before

Screen.Recording.2023-09-13.at.12.33.49.mov

After

Screen.Recording.2023-09-13.at.13.57.19.mov

🎩 checklist

chloerice
chloerice approved these changes Sep 13, 2023
View reviewed changes
polaris-react/src/components/IndexFilters/IndexFilters.scss Outdated
.IndexFiltersWrapper {
width: 100%;

[class*='Button-Button'] {
Copy link
Member

Choose a reason for hiding this comment

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

Would targeting the class directly work here? Just not sure how this works since the BEM classes are built with a compile script. 🤔

Suggested change
[class*='Button-Button'] {
.Button {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think this would, as we want to target the Polaris <Button> component here. I should be able to target this a different way, targeting the button element, but I'll scope it directly to where I need it to.

mrcthms and others added 3 commits September 13, 2023 17:33
@mrcthms @chloerice
Update .changeset/forty-dolphins-love.md
6c977c9 
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
@mrcthms @chloerice
Update polaris-react/src/components/Filters/components/SearchField/Se…
1c0ca2a 
…archField.scss

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
@mrcthms
chore: remove need to use ineffective class naming
30b54f2
@mrcthms mrcthms merged commit d35d55e into main Sep 14, 2023
@mrcthms mrcthms deleted the mrcthms-index-table-layout-shift branch September 14, 2023 08:39
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Sep 14, 2023
Merged
mrcthms pushed a commit that referenced this pull request Sep 14, 2023
@shopify-github-actions-access @github-actions
Version Packages (#10405)
ea93110 
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@11.18.0

### Minor Changes

- [#10429](#10429)
[`2e65a7e98`](2e65a7e)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `Filters` pinned
filter pill not remaining when applied values are cleared


- [#10394](#10394)
[`b7f25f07f`](b7f25f0)
Thanks [@mrcthms](https://github.com/mrcthms)! - Added support for
disabling 1Password integration in `TextField`


- [#10406](#10406)
[`87f559ca1`](87f559c)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the Toast
component to support multiple re-renders being announced on screen
readers

### Patch Changes

- [#10428](#10428)
[`d35d55e5b`](d35d55e)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed layout shift in
`IndexFilters` when switching modes

- Updated dependencies
\[[`26ab8ce7d`](26ab8ce),
[`7514dd1a3`](7514dd1),
[`16c61668a`](16c6166)]:
    -   @shopify/polaris-tokens@7.8.0

## @shopify/polaris-tokens@7.8.0

### Minor Changes

- [#10432](#10432)
[`26ab8ce7d`](26ab8ce)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `border-radius` token scale


- [#10448](#10448)
[`7514dd1a3`](7514dd1)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `space` token scale


- [#10418](#10418)
[`16c61668a`](16c6166)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added private
primitive `size` token scale

## @shopify/polaris-migrator@0.22.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](26ab8ce),
[`7514dd1a3`](7514dd1),
[`16c61668a`](16c6166)]:
    -   @shopify/polaris-tokens@7.8.0
    -   @shopify/stylelint-polaris@14.0.3

## @shopify/stylelint-polaris@14.0.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](26ab8ce),
[`7514dd1a3`](7514dd1),
[`16c61668a`](16c6166)]:
    -   @shopify/polaris-tokens@7.8.0

## polaris.shopify.com@0.57.6

### Patch Changes

- Updated dependencies
\[[`2e65a7e98`](2e65a7e),
[`b7f25f07f`](b7f25f0),
[`26ab8ce7d`](26ab8ce),
[`d35d55e5b`](d35d55e),
[`7514dd1a3`](7514dd1),
[`16c61668a`](16c6166),
[`87f559ca1`](87f559c)]:
    -   @shopify/polaris@11.18.0
    -   @shopify/polaris-tokens@7.8.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@chloerice chloerice added 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 5, 2023
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@mrcthms @chloerice
[IndexFilters] Fix layout shift when going from between default and f…
ded82d4 
…iltering modes (Shopify#10428)

### WHY are these changes introduced?

Fixes an issue in the IndexFilters where it caused a layout shift when
toggling between default and filtering modes. This PR fixes that little
layout shift.

### Before



https://github.com/Shopify/polaris/assets/2562596/85c96dcd-3854-455a-9ccb-cfecaf86b293

### After



https://github.com/Shopify/polaris/assets/2562596/24b55cfc-2ec8-47d7-9d27-be6088c4e2f1

### 🎩 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)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#10405)
13ae0bb 
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@11.18.0

### Minor Changes

- [Shopify#10429](Shopify#10429)
[`2e65a7e98`](Shopify@78e3c64)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `Filters` pinned
filter pill not remaining when applied values are cleared


- [Shopify#10394](Shopify#10394)
[`b7f25f07f`](Shopify@11a5ec4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Added support for
disabling 1Password integration in `TextField`


- [Shopify#10406](Shopify#10406)
[`87f559ca1`](Shopify@87ef9b6)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the Toast
component to support multiple re-renders being announced on screen
readers

### Patch Changes

- [Shopify#10428](Shopify#10428)
[`d35d55e5b`](Shopify@ded82d4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed layout shift in
`IndexFilters` when switching modes

- Updated dependencies
\[[`26ab8ce7d`](Shopify@2638248),
[`7514dd1a3`](Shopify@beb664a),
[`16c61668a`](Shopify@54284eb)]:
    -   @shopify/polaris-tokens@7.8.0

## @shopify/polaris-tokens@7.8.0

### Minor Changes

- [Shopify#10432](Shopify#10432)
[`26ab8ce7d`](Shopify@2638248)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `border-radius` token scale


- [Shopify#10448](Shopify#10448)
[`7514dd1a3`](Shopify@beb664a)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `space` token scale


- [Shopify#10418](Shopify#10418)
[`16c61668a`](Shopify@54284eb)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added private
primitive `size` token scale

## @shopify/polaris-migrator@0.22.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](Shopify@2638248),
[`7514dd1a3`](Shopify@beb664a),
[`16c61668a`](Shopify@54284eb)]:
    -   @shopify/polaris-tokens@7.8.0
    -   @shopify/stylelint-polaris@14.0.3

## @shopify/stylelint-polaris@14.0.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](Shopify@2638248),
[`7514dd1a3`](Shopify@beb664a),
[`16c61668a`](Shopify@54284eb)]:
    -   @shopify/polaris-tokens@7.8.0

## polaris.shopify.com@0.57.6

### Patch Changes

- Updated dependencies
\[[`2e65a7e98`](Shopify@78e3c64),
[`b7f25f07f`](Shopify@11a5ec4),
[`26ab8ce7d`](Shopify@2638248),
[`d35d55e5b`](Shopify@ded82d4),
[`7514dd1a3`](Shopify@beb664a),
[`16c61668a`](Shopify@54284eb),
[`87f559ca1`](Shopify@87ef9b6)]:
    -   @shopify/polaris@11.18.0
    -   @shopify/polaris-tokens@7.8.0

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
2 more reviewers

@jesstelford jesstelford jesstelford approved these changes

@chloerice chloerice chloerice approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
2023 Contribution tracking for 2023 Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023"
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@mrcthms @jesstelford @chloerice