chore: update changeset; temporary override to polaris

Shopify · Jul 20, 2023 · c232af0 · c232af0
1 parent 3d0c80d
commit c232af0
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 21 deletions.
diff --git 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
@@ -20,7 +20,7 @@
   text-decoration: none;
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
+  padding: var(--pc-action-list-item-vertical-padding);
   border-radius: var(--p-border-radius-1);
   border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
@@ -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
@@ -176,7 +176,7 @@ export const TruncateText = ({children}: {children: string}) => {
     }
   }, [children]);
   const text = (
-    <Text as="span" variant="bodyMd" truncate>
+    <Text as="span" truncate>
       <Box width="100%" ref={textRef}>
         {children}
       </Box>
@@ -191,7 +191,7 @@ export const TruncateText = ({children}: {children: string}) => {
       content={children}
       dismissOnMouseOut
     >
-      <Text as="span" variant="bodyMd" truncate>
+      <Text as="span" truncate>
         {children}
       </Text>
     </Tooltip>

diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -3,7 +3,7 @@ import type {ComponentMeta} from '@storybook/react';
 import {ActionList, Frame, Icon, TopBar, Text, Avatar} from '@shopify/polaris';
 import {
   ArrowLeftMinor,
-  TickSmallMinor,
+  TickMinor,
   ResetMinor,
   QuestionMarkMajor,
   SearchMinor,
@@ -255,7 +255,7 @@ export function WithUserMenu() {
           ),
           truncate: true,
           active: true,
-          suffix: <Icon source={TickSmallMinor} />,
+          suffix: <Icon source={TickMinor} />,
           url: '#',
         },
         {

diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -153,18 +153,18 @@ $activator-variables: (
     flex-direction: column;
     gap: var(--p-space-1);
     padding-right: var(--p-space-2);
-
-    &-indent {
-      margin-left: var(--p-space-6);
-    }
   }
 }
 
+.StoreListSection-indent {
+  margin-left: var(--p-space-6);
+}
+
 .TopSection::after {
   content: '';
   position: absolute;
   left: calc(var(--p-space-4) * -1);
-  width: calc(100% + var(--p-space-4));
   bottom: 0;
+  width: calc(100% + var(--p-space-4));
   border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
diff --git 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: (
-        <Box width="100%" paddingInlineEnd="2" insetInlineEnd="2">
-          {itemMarkup}
-        </Box>
-      ),
+      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 = (
+            <Box width="100%" paddingInlineEnd="2" insetInlineEnd="2">
+              {itemMarkup}
+            </Box>
+          );
           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
@@ -7,7 +7,6 @@ $item-vertical-padding: calc((var(--p-space-3)) / 2);
   @include unstyled-button;
   // stylelint-disable-next-line -- set focus styles
   @include focus-ring;
-
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -26,11 +25,11 @@ $item-vertical-padding: calc((var(--p-space-3)) / 2);
   &:focus-visible {
     // stylelint-disable-next-line -- set focus styles
     @include no-focus-ring;
-
     outline: var(--p-border-width-2) solid
       var(--p-color-border-interactive-focus);
     background-color: var(--p-color-bg);
   }
+
   &:hover {
     text-decoration: none;
     outline: var(--p-border-width-3) solid transparent;
@@ -61,4 +60,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);
 }