This repository was archived by the owner on Sep 30, 2025. It is now read-only.
[IndexFilters] Add Edit Columns optional button #10580
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
![translation-platform[bot]](https://avatars.githubusercontent.com/in/7649?s=60&v=4){kind=small}
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
6 times, most recently
from
17c512d to
10cb148
Compare
sirgalleto
commented
Sep 20, 2023
mrcthms
reviewed
Sep 20, 2023
There was a problem hiding this comment.
Thanks for taking this on! Would it also be possible to generate a new story for the Polaris site? Would be nice for folks to be able to discover this new functionality without having to go into the source code.
mattkubej
reviewed
Sep 20, 2023
polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
Outdated
Show resolved
Hide resolved
chloerice
approved these changes
Sep 20, 2023
There was a problem hiding this comment.
Thanks for contributing @sirgalleto, works great! Suggested an update to some naming for extra clarity. Just need to add your example to a new .md file in polaris.shopify.com/pages/examples 👀
polaris-react/src/components/IndexFilters/components/EditColumnsButton/EditColumnsButton.tsx
Outdated
Show resolved
Hide resolved
polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
Outdated
Show resolved
Hide resolved
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
from
c495732 to
b459f2e
Compare
|
Nice work on this @sirgalleto! ✨ Just a note that in the Figma file & the original issue, the edit columns button is displayed in between the sort & filter button: 
|
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
from
b459f2e to
7357a31
Compare
|
Ohh my bad @sjreive, it's on the correct order now :D
|
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
from
7357a31 to
6a57e54
Compare
sjreive
approved these changes
Sep 21, 2023
…r it when editing column
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com> Co-authored-by: Marc Thomas <marc.thomas@shopify.com>
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
2 times, most recently
from
062c7b1 to
038fc83
Compare
sirgalleto
force-pushed
the
sirgalleto/add-column-picker-cta-to-index-component
branch
from
038fc83 to
a38202c
Compare
|
Is this ready for a final review or are you continuing to iterate on anything? |
|
@mattkubej It should be ready for a final review |
chloerice
reviewed
Sep 25, 2023
|
@chloerice working ✨ thanks for the 👁️ 
|
|
I'm impressed of how slow are this translations 🫠 |
sirgalleto
deleted the
sirgalleto/add-column-picker-cta-to-index-component
branch
Merged
sirgalleto
added a commit
that referenced
this pull request
Sep 28, 2023
This reverts commit 9fdd52a.
sophschneider
pushed a commit
that referenced
this pull request
Sep 28, 2023
5 tasks
sirgalleto
added a commit
that referenced
this pull request
Oct 2, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
chloerice
pushed a commit
that referenced
this pull request
Oct 3, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
mrcthms
pushed a commit
that referenced
this pull request
Oct 9, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
mrcthms
pushed a commit
that referenced
this pull request
Oct 9, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
sophschneider
pushed a commit
that referenced
this pull request
Nov 2, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
sophschneider
pushed a commit
that referenced
this pull request
Nov 2, 2023
Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this pull request
Apr 22, 2024
### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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> Co-authored-by: Marc Thomas <marc.thomas@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
ascherkus
pushed a commit
to ascherkus/polaris
that referenced
this pull request
Feb 19, 2025
ascherkus
pushed a commit
to ascherkus/polaris
that referenced
this pull request
Feb 19, 2025
Revert for making Shopify#10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> 1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:**  <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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
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.
WHY are these changes introduced?
Closes https://github.com/Shopify/temp-project-mover-Archetypically-20250409144733/issues/71
We believe giving users more visibility to the move column actions will enhance their experience.
WHAT is this pull request doing?
EditColumnsButtonthat handles the markup for the edit column action.<IndexFilters/>calledshowEditColumns, that when is true, renders the<EditColumnsButton/>Screen.Recording.2023-09-19.at.18.28.18.mov
Updated order or buttons:
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
Copy-paste this code in
playground/Playground.tsx:🎩 checklist
README.mdwith documentation changes