chore: update Optionlist layout

Shopify · Mar 6, 2024 · 1ad488a · 1ad488a
1 parent b4ef876
commit 1ad488a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.module.scss b/polaris-react/src/components/OptionList/components/Option/Option.module.scss
@@ -32,7 +32,7 @@ $control-vertical-adjustment: 2px;
 
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
+  gap: var(--p-space-200);
 
   // stylelint-disable-next-line selector-max-specificity -- required for focus-visible support
   &.focused:focus-visible:not(:active) {
@@ -140,14 +140,6 @@ $control-vertical-adjustment: 2px;
   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;

diff --git a/polaris-react/src/components/OptionList/components/Option/Option.tsx b/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.scss';
 
@@ -125,20 +126,20 @@ export function Option({
       onBlur={toggleFocused}
       aria-pressed={active || select}
     >
-      <>
-        <InlineStack
-          wrap={false}
-          blockAlign={verticalAlignToBlockAlign(verticalAlign)}
-        >
-          {mediaMarkup}
-          {label}
-        </InlineStack>
-        {(select || active) && (
-          <span className={styles.Icon}>
-            <Icon source={CheckIcon} />
-          </span>
-        )}
-      </>
+      {select || active ? (
+        <span className={styles.Icon}>
+          <Icon source={CheckIcon} tone="base" />
+        </span>
+      ) : (
+        <Box width="20px" />
+      )}
+      <InlineStack
+        wrap={false}
+        blockAlign={verticalAlignToBlockAlign(verticalAlign)}
+      >
+        {mediaMarkup}
+        {label}
+      </InlineStack>
     </button>
   );