Revert "Revert "[Listbox, OptionList] Right align check icons on selected list items"" (Shopify#11842)

Reverts Shopify#11838

https://admin.web.check-alignment.kyle-durand.us.spin.dev/store/shop1

Author: kyledurand

.changeset/chatty-timers-marry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed layout shift for option lists within popovers

.changeset/strong-otters-fetch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Changed selected icon position in Listbox and OptionList

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

@@ -102,11 +102,8 @@ export function WithAction() {
       <Listbox.Option value="UniqueValue-2" divider>
         Item 2
       </Listbox.Option>
-      <Listbox.Action value="ActionValue">
-        <LegacyStack spacing="tight">
-          <Icon source={PlusCircleIcon} tone="base" />
-          <div>Add item</div>
-        </LegacyStack>
+      <Listbox.Action value="ActionValue" icon={PlusCircleIcon}>
+        Add item
       </Listbox.Action>
     </Listbox>
   );

polaris-react/src/components/Listbox/components/Action/Action.module.css

@@ -6,7 +6,3 @@
 .ActionDivider {
   margin-bottom: var(--p-space-100);
 }
-
-.Icon {
-  padding-right: var(--p-space-200);
-}

polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx

@@ -35,17 +35,21 @@ export const TextOption = memo(function TextOption({
     isAction && styles.isAction,
   );
 
-  const optionMarkup = selected ? (
+  const placeholder = isAction ? null : <Box width="20px" />;
+
+  const optionMarkup = (
     <Box width="100%">
-      <InlineStack wrap={false} align="space-between" gap="200">
+      <InlineStack wrap={false} gap="100">
+        {selected ? (
+          <span>
+            <Icon source={CheckIcon} />
+          </span>
+        ) : (
+          placeholder
+        )}
         {children}
-        <InlineStack align="end">
-          <Icon source={CheckIcon} />
-        </InlineStack>
       </InlineStack>
     </Box>
-  ) : (
-    <>{children}</>
   );
 
   return (

polaris-react/src/components/OptionList/components/Option/Option.module.css

@@ -26,7 +26,7 @@
 
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
+  gap: var(--p-space-100);
 
   /* stylelint-disable-next-line selector-max-specificity -- required for focus-visible support */
   &.focused:focus-visible:not(:active) {
@@ -134,14 +134,6 @@
   align-items: flex-end;
 }
 
-.Icon {
-  margin-left: var(--p-space-200);
-
-  svg {
-    fill: var(--p-color-icon-brand);
-  }
-}
-
 .Checkbox {
   box-sizing: border-box;
   display: flex;

polaris-react/src/components/OptionList/components/Option/Option.tsx

@@ -11,6 +11,7 @@ import {classNames, variationName} from '../../../../utilities/css';
 import type {InlineStackProps} from '../../../InlineStack';
 import {InlineStack} from '../../../InlineStack';
 import {Checkbox as PolarisCheckbox} from '../../../Checkbox';
+import {Box} from '../../../Box';
 
 import styles from './Option.module.css';
 
@@ -125,20 +126,27 @@ export function Option({
       onBlur={toggleFocused}
       aria-pressed={active || select}
     >
-      <>
-        <InlineStack
-          wrap={false}
-          blockAlign={verticalAlignToBlockAlign(verticalAlign)}
+      {select || active ? (
+        <span className={styles.Icon}>
+          <Icon source={CheckIcon} tone="base" />
+        </span>
+      ) : (
+        <Box width="20px" />
+      )}
+      <InlineStack
+        wrap={false}
+        blockAlign={verticalAlignToBlockAlign(verticalAlign)}
+      >
+        {mediaMarkup}
+        <span
+          style={{
+            minWidth:
+              typeof label === 'string' ? `${label.length}ch` : 'initial',
+          }}
         >
-          {mediaMarkup}
           {label}
-        </InlineStack>
-        {(select || active) && (
-          <span className={styles.Icon}>
-            <Icon source={CheckIcon} />
-          </span>
-        )}
-      </>
+        </span>
+      </InlineStack>
     </button>
   );