diff --git a/.changeset/lemon-cars-stare.md b/.changeset/lemon-cars-stare.md index d5e9c931c68..5016f6dc0bd 100644 --- a/.changeset/lemon-cars-stare.md +++ b/.changeset/lemon-cars-stare.md @@ -1,5 +1,5 @@ --- -'@shopify/polaris': major +'@shopify/polaris': minor --- - Created a Menu Item with indentation that renders in the user menu diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss index dd251b7de0d..89da95ae6b9 100644 --- a/polaris-react/src/components/ActionList/ActionList.scss +++ b/polaris-react/src/components/ActionList/ActionList.scss @@ -30,8 +30,7 @@ @include focus-ring($size: 'wide'); /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ --pc-action-list-item-min-height: var(--p-space-8); - padding: var(--p-space-1_5-experimental); - // padding: var(--p-space-1_5-experimental) var(--p-space-2); + padding: var(--p-space-1_5-experimental) var(--p-space-2); border-radius: var(--p-border-radius-2); align-items: center; display: flex; diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index d774ba51db7..90623ed2bc7 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -176,7 +176,7 @@ export const TruncateText = ({children}: {children: string}) => { } }, [children]); const text = ( - + {children} @@ -191,7 +191,7 @@ export const TruncateText = ({children}: {children: string}) => { content={children} dismissOnMouseOut > - + {children} diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx index cb851f90119..11d5dc0837c 100644 --- a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx @@ -167,11 +167,7 @@ function generateMenuItem( if (id === OTHER_STORES_ID) { return { - itemMarkup: ( - - {itemMarkup} - - ), + itemMarkup, isOtherStore: true, }; } @@ -193,7 +189,11 @@ function buildSections(actions: ActionListProps['sections'], indent: boolean) { ? storeListSection?.items.map((item, index) => { const {itemMarkup, isOtherStore} = generateMenuItem(item, index); if (isOtherStore) { - otherStoresMarkup = itemMarkup; + otherStoresMarkup = ( + + {itemMarkup} + + ); return null; } return itemMarkup; diff --git a/polaris-react/src/components/TopBar/components/Menu/components/MenuItem/MenuItem.scss b/polaris-react/src/components/TopBar/components/Menu/components/MenuItem/MenuItem.scss index 76b3325af3e..d53cdfa5fb9 100644 --- a/polaris-react/src/components/TopBar/components/Menu/components/MenuItem/MenuItem.scss +++ b/polaris-react/src/components/TopBar/components/Menu/components/MenuItem/MenuItem.scss @@ -61,4 +61,5 @@ $item-vertical-padding: calc((var(--p-space-3)) / 2); color: var(--p-color-text); border-radius: var(--p-border-radius-2); outline: var(--p-border-width-3) solid transparent; + font-weight: var(--p-font-weight-semibold); }