[ActionList][Item] Allow indentation to be applied to individual items #9820

zakwarsame · 2023-07-24T23:16:23Z

WHY are these changes introduced?

Fixes #0000

Fixes https://github.com/Shopify/polaris-summer-editions/issues/785
Fixes https://github.com/Shopify/core-workflows/issues/1029
Fixes https://github.com/Shopify/polaris-summer-editions/issues/789

Expand to see specifications/designs for this PR:

WHAT is this pull request doing?

This PR takes an alternative approach to this PR
It adds a new prop to ActionList's Item component called indent. This prop adds some space and a border to the left of the individual items.
Given that the indentation only applies to Plus stores in the original design, we can simply specify the prop in the consumer.

How to 🎩

Non-Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop1
Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop2

Ensure the user menu matches the designs

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
~~- [ ] Updated the component's README.md with documentation changes~~
Tophatted documentation changes in the style guide

zakwarsame · 2023-07-24T23:16:32Z

/snapit

github-actions · 2023-07-24T23:21:39Z

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

zakwarsame · 2023-07-25T01:19:55Z

/snapit

github-actions · 2023-07-25T01:25:15Z

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

zakwarsame · 2023-07-25T01:46:28Z

polaris-react/src/components/ActionList/components/Section/Section.tsx

        padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
        {...(hasMultipleSections && {paddingBlockStart: '0'})}
        {...(sectionRole && {role: sectionRole})}
        tabIndex={!hasMultipleSections ? -1 : undefined}
      >
-        {actionMarkup}
+        {polarisSummerEditions2023 ? (
+          <VerticalStack gap="1">{actionMarkup}</VerticalStack>


Outside indentation, this is the change from our designs that will affect all items. It provide a gap to list items:

Before

After

sam-b-rose

This approach looks excellent! Very composable and simple API for toggling the indentation style.

The examples in the spin link look good. I just noticed one spacing issue where the selected Store has a different horizontal margin than the other items. Though I'm not sure if that is an issue within Polaris or in the consumer implementation

.changeset/angry-mirrors-explode.md

polaris-react/src/components/TopBar/TopBar.stories.tsx

kyledurand

👏

chrisblinstrub · 2023-07-25T13:16:41Z

Hey @zakwarsame, not sure if these items are relevant to this specific PR (apologies if they aren't!), but I noticed three things:

In the Non-Plus link, the store icons for the non-active store are 20x20 when they should be 24x24. You'll see how Shop 3 and Shop 4 are further to the left than Shop 1:

In the Non-Plus link, the icon for the "All Stores" link is sitting in a 20x20 container when it should be 24x24. This is causing similar alignment issues as above screenshot.

This may be the same thing as item 2, but in the Plus link the icon for the "Switch organization" link is sitting in a 20x20 container when it should be 24x24.

Co-authored-by: Sam Rose <[email protected]>

zakwarsame · 2023-07-25T15:58:15Z

/snapit

github-actions · 2023-07-25T16:02:19Z

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

zakwarsame · 2023-07-25T16:37:41Z

/snapit

github-actions · 2023-07-25T16:41:51Z

🫰✨ Thanks @zakwarsame! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

sam-b-rose

🚢 👍

@zakwarsame

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/[email protected] ### Minor Changes - [#9820](#9820) [`5fe84e33b`](5fe84e3) Thanks [@zakwarsame](https://github.com/zakwarsame)! - Added a `variant` prop to ActionList for applying avatar size and left indentation space and border to items ### Patch Changes - [#9773](#9773) [`a5f68c9a5`](a5f68c9) Thanks [@jesstelford](https://github.com/jesstelford)! - [Scrollable] shadow overlays scrollable content correctly. - [#9764](#9764) [`d3315de2e`](d3315de) Thanks [@andy-schneidr](https://github.com/andy-schneidr)! - Wrap SkeletonBodyText lines in a div (width 100%) - [#9831](#9831) [`078bddad1`](078bdda) Thanks [@zakwarsame](https://github.com/zakwarsame)! - Updated the user menu's avatar to include `name` - [#9828](#9828) [`80c87bb1a`](80c87bb) Thanks [@felipeleusin](https://github.com/felipeleusin)! - [Frame] Applies margin to Content when using sidebar ## @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`5fe84e33b`](5fe84e3), [`a5f68c9a5`](a5f68c9), [`d3315de2e`](d3315de), [`078bddad1`](078bdda), [`80c87bb1a`](80c87bb)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Shopify#9820)  ### WHY are these changes introduced? Fixes #0000  Fixes https://github.com/Shopify/polaris-summer-editions/issues/785 Fixes https://github.com/Shopify/core-workflows/issues/1029 Fixes https://github.com/Shopify/polaris-summer-editions/issues/789  <details> <summary> Expand to see specifications/designs for this PR: </summary> ![image](https://github.com/Shopify/polaris/assets/42528878/752f0a05-ffad-4361-b84e-db96cdf8ec84) </details> ### WHAT is this pull request doing?   - This PR takes an alternative approach to [this PR](Shopify#9771) - It adds a new prop to `ActionList`'s `Item` component called `indent`. This prop adds some space and a border to the left of the individual items. - Given that the indentation only applies to `Plus` stores in the original design, we can simply specify the prop in the consumer. ### How to 🎩 Non-Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop1 Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop2 Ensure the user menu matches the designs ### 🎩 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) ~- [ ] 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: Sam Rose <[email protected]>

@zakwarsame

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/[email protected] ### Minor Changes - [Shopify#9820](Shopify#9820) [`5fe84e33b`](Shopify@5fe84e3) Thanks [@zakwarsame](https://github.com/zakwarsame)! - Added a `variant` prop to ActionList for applying avatar size and left indentation space and border to items ### Patch Changes - [Shopify#9773](Shopify#9773) [`a5f68c9a5`](Shopify@a5f68c9) Thanks [@jesstelford](https://github.com/jesstelford)! - [Scrollable] shadow overlays scrollable content correctly. - [Shopify#9764](Shopify#9764) [`d3315de2e`](Shopify@d3315de) Thanks [@andy-schneidr](https://github.com/andy-schneidr)! - Wrap SkeletonBodyText lines in a div (width 100%) - [Shopify#9831](Shopify#9831) [`078bddad1`](Shopify@078bdda) Thanks [@zakwarsame](https://github.com/zakwarsame)! - Updated the user menu's avatar to include `name` - [Shopify#9828](Shopify#9828) [`80c87bb1a`](Shopify@80c87bb) Thanks [@felipeleusin](https://github.com/felipeleusin)! - [Frame] Applies margin to Content when using sidebar ## @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`5fe84e33b`](Shopify@5fe84e3), [`a5f68c9a5`](Shopify@a5f68c9), [`d3315de2e`](Shopify@d3315de), [`078bddad1`](Shopify@078bdda), [`80c87bb1a`](Shopify@80c87bb)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Shopify#9820)  ### WHY are these changes introduced? Fixes #0000  Fixes Shopify/archive-polaris-backlog-2024#785 Fixes Shopify/core-workflows#1029 Fixes Shopify/archive-polaris-backlog-2024#789  <details> <summary> Expand to see specifications/designs for this PR: </summary> ![image](https://github.com/Shopify/polaris/assets/42528878/752f0a05-ffad-4361-b84e-db96cdf8ec84) </details> ### WHAT is this pull request doing?   - This PR takes an alternative approach to [this PR](Shopify#9771) - It adds a new prop to `ActionList`'s `Item` component called `indent`. This prop adds some space and a border to the left of the individual items. - Given that the indentation only applies to `Plus` stores in the original design, we can simply specify the prop in the consumer. ### How to 🎩 Non-Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop1 Plus: https://admin.web.mn.zakaria-warsame.us.spin.dev/store/shop2 Ensure the user menu matches the designs ### 🎩 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) ~- [ ] 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: Sam Rose <[email protected]>

zakwarsame added 2 commits July 24, 2023 13:38

chore: add indent prop to Item (ActionList)

07033a1

chore: add styles for indentation

2086785

zakwarsame force-pushed the zak/usermenu branch 6 times, most recently from e83fa5e to d9ccc2e Compare July 25, 2023 01:03

changeset'

67fd18e

zakwarsame force-pushed the zak/usermenu branch from d9ccc2e to 67fd18e Compare July 25, 2023 01:19

zakwarsame commented Jul 25, 2023

View reviewed changes

zakwarsame marked this pull request as ready for review July 25, 2023 02:06

sam-b-rose approved these changes Jul 25, 2023

View reviewed changes

.changeset/angry-mirrors-explode.md Outdated Show resolved Hide resolved

polaris-react/src/components/TopBar/TopBar.stories.tsx Outdated Show resolved Hide resolved

kyledurand approved these changes Jul 25, 2023

View reviewed changes

zakwarsame and others added 2 commits July 25, 2023 09:59

review: remove unnecessary code; apply 24px to avatars in menu item

89ba985

update changeset

34ca3ff

Co-authored-by: Sam Rose <[email protected]>

Shopify deleted a comment from github-actions bot Jul 25, 2023

chore: update prop to variant with default and menu state

1bf7adc

Shopify deleted a comment from github-actions bot Jul 25, 2023

zakwarsame force-pushed the zak/usermenu branch from f0c4741 to 3df739d Compare July 25, 2023 15:57

Shopify deleted a comment from github-actions bot Jul 25, 2023

update changeset

f69f824

zakwarsame force-pushed the zak/usermenu branch from 3df739d to f69f824 Compare July 25, 2023 16:37

Shopify deleted a comment from github-actions bot Jul 25, 2023

review: update vertical stack to use ul

9f6b4b7

sam-b-rose reviewed Jul 25, 2023

View reviewed changes

sam-b-rose merged commit 5fe84e3 into main Jul 25, 2023
10 checks passed

sam-b-rose deleted the zak/usermenu branch July 25, 2023 17:55

shopify-github-actions-access bot mentioned this pull request Jul 25, 2023

Version Packages #9824

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ActionList][Item] Allow indentation to be applied to individual items #9820

[ActionList][Item] Allow indentation to be applied to individual items #9820

zakwarsame commented Jul 24, 2023 •

edited

Loading

zakwarsame commented Jul 24, 2023

github-actions bot commented Jul 24, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

zakwarsame Jul 25, 2023 •

edited

Loading

sam-b-rose left a comment

kyledurand left a comment

chrisblinstrub commented Jul 25, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

sam-b-rose left a comment

[ActionList][Item] Allow indentation to be applied to individual items #9820

[ActionList][Item] Allow indentation to be applied to individual items #9820

Conversation

zakwarsame commented Jul 24, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

zakwarsame commented Jul 24, 2023

github-actions bot commented Jul 24, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

zakwarsame Jul 25, 2023 • edited Loading

Choose a reason for hiding this comment

sam-b-rose left a comment

Choose a reason for hiding this comment

kyledurand left a comment

Choose a reason for hiding this comment

chrisblinstrub commented Jul 25, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

zakwarsame commented Jul 25, 2023

github-actions bot commented Jul 25, 2023

sam-b-rose left a comment

Choose a reason for hiding this comment

zakwarsame commented Jul 24, 2023 •

edited

Loading

zakwarsame Jul 25, 2023 •

edited

Loading