[UserMenu] Create a new Item component that contains the user menu changes #9771

zakwarsame · 2023-07-20T05:28:51Z

WHY are these changes introduced?

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

The user menu's designs for uplift have been updated as follows:

WHAT is this pull request doing?

This PR breaks away from the ActionList's Item being used in the Menu item. Instead we create a custom MenuItem that can easily support features like indentation and removing constraints on the avatar.
If a consumer wants to use this MenuItem, they provide a topSection prop that's passed to the UserMenu. The prop should specify to values: indentItems and items
The UserMenu passes this prop down to Menu which applies these changes by rendering the new MenuItem
The regular actions normally passed to UserMenu is not affected, thus anyone using UserMenu today does not need to make any changes.

A follow up to this PR is required after it's released, opened here: https://github.com/Shopify/web/pull/98734

How to 🎩

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

🎩 checklist

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

…on markup'

zakwarsame · 2023-07-20T18:20:31Z

/snapit

github-actions · 2023-07-20T18:24:33Z

🫰✨ 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]

zakwarsame · 2023-07-20T19:09:59Z

/snapit

github-actions · 2023-07-20T19:15:47Z

🫰✨ 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]

zakwarsame · 2023-07-20T20:19:36Z

/snapit

github-actions · 2023-07-20T20:23:47Z

🫰✨ 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]

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

zakwarsame · 2023-07-20T21:39:49Z

polaris-react/src/components/TruncateText/TruncateText.tsx

@@ -0,0 +1,46 @@
+import React, {useRef, useState} from 'react';


Moving this component to the top-level since multiple components are now using it.

I'll let the Polaris folk chime in but I'm not sure if this makes sense as a top level component named a such since it seems like it would be a replacement for <Text truncate />.
Maybe we can rename it to like: TextWithTooltipWhenTruncated but that's a bit wordy 😛

zakwarsame · 2023-07-20T21:51:22Z

/snapit

github-actions · 2023-07-20T21:55:09Z

🫰✨ 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]

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

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

zakwarsame · 2023-07-21T00:50:39Z

@henryyi Please see this thread for why we're going with this approach: https://shopify.slack.com/archives/C4Y8N30KD/p1689780576017759
I think ultimately we'll want to pass in a prop to ActionList's item and make our customizaitons there. However, the approach discussed for now was to conditionally our custom store section while leaving the User Menu unaffected.

zakwarsame · 2023-07-21T03:00:02Z

@henryyi I've refactored the code so that we pass in a topSection prop with both the indentItems and regular items pre-separated from the consumer. That way Polaris is agnostic to the admin. Thanks a lot for the feedback!

zakwarsame · 2023-07-21T16:25:30Z

/snapit

github-actions · 2023-07-21T16:30:01Z

🫰✨ 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]

#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](#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]>

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]>

github-actions · 2024-01-18T03:32:55Z

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

zakwarsame force-pushed the zak/menu branch 2 times, most recently from f753005 to 52b3405 Compare July 20, 2023 05:47

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

zakwarsame force-pushed the zak/menu branch from 621abc0 to 4e0afe5 Compare July 20, 2023 16:04

zakwarsame added 5 commits July 20, 2023 13:06

chore: separate sections; create menuitem component; create indentati…

8b3f16a

…on markup'

add changeset

80a34cf

chore: gate changes behind uplift

056b81e

chore: separate indentation logic in css

0b39c10

chore: refactor code; support and style active prop

3d0c80d

zakwarsame force-pushed the zak/menu branch from 1541ede to 3d0c80d Compare July 20, 2023 17:25

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

chore: update changeset; temporary override to polaris

c232af0

zakwarsame force-pushed the zak/menu branch from 629d08c to c232af0 Compare July 20, 2023 18:19

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

zakwarsame force-pushed the zak/menu branch 2 times, most recently from 0cb50c8 to cb77783 Compare July 20, 2023 19:41

chore: move truncate text to top-level'

2e0f351

zakwarsame force-pushed the zak/menu branch from cb77783 to 2e0f351 Compare July 20, 2023 20:04

zakwarsame marked this pull request as ready for review July 20, 2023 20:11

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

chore: remove unnecessary code

793e49b

zakwarsame force-pushed the zak/menu branch from 1b661bb to 793e49b Compare July 20, 2023 21:22

zakwarsame commented Jul 20, 2023

View reviewed changes

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

zakwarsame commented Jul 20, 2023

View reviewed changes

henryyi reviewed Jul 20, 2023

View reviewed changes

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

henryyi reviewed Jul 20, 2023

View reviewed changes

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

zakwarsame force-pushed the zak/menu branch from 1c02d98 to 334c2f3 Compare July 21, 2023 02:49

review: refactor code to admin agnostic by passing a prop

ade7a94

zakwarsame force-pushed the zak/menu branch from 334c2f3 to ade7a94 Compare July 21, 2023 15:17

pass test by providing key

bce9409

zakwarsame force-pushed the zak/menu branch from 14cacaa to bce9409 Compare July 21, 2023 16:25

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

zakwarsame mentioned this pull request Jul 24, 2023

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

Merged

4 tasks

github-actions bot added the no-pr-activity label Jan 18, 2024

sam-b-rose closed this Jan 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UserMenu] Create a new Item component that contains the user menu changes #9771

[UserMenu] Create a new Item component that contains the user menu changes #9771

zakwarsame commented Jul 20, 2023 •

edited

Loading

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame Jul 20, 2023

henryyi Jul 20, 2023

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 21, 2023

zakwarsame commented Jul 21, 2023

zakwarsame commented Jul 21, 2023

github-actions bot commented Jul 21, 2023

github-actions bot commented Jan 18, 2024

		@@ -0,0 +1,46 @@
		import React, {useRef, useState} from 'react';

[UserMenu] Create a new Item component that contains the user menu changes #9771

[UserMenu] Create a new Item component that contains the user menu changes #9771

Conversation

zakwarsame commented Jul 20, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame Jul 20, 2023

Choose a reason for hiding this comment

henryyi Jul 20, 2023

Choose a reason for hiding this comment

zakwarsame commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

zakwarsame commented Jul 21, 2023

zakwarsame commented Jul 21, 2023

zakwarsame commented Jul 21, 2023

github-actions bot commented Jul 21, 2023

github-actions bot commented Jan 18, 2024

zakwarsame commented Jul 20, 2023 •

edited

Loading