chore: update listbox layout

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

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/polaris-react/src/components/Listbox/components/Action/Action.module.scss b/polaris-react/src/components/Listbox/components/Action/Action.module.scss
@@ -8,7 +8,3 @@
 .ActionDivider {
   margin-bottom: var(--p-space-100);
 }
-
-.Icon {
-  padding-right: var(--p-space-200);
-}
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx b/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="150">
+        {selected ? (
+          <span>
+            <Icon source={CheckIcon} />
+          </span>
+        ) : (
+          placeholder
+        )}
         {children}
-        <InlineStack align="end">
-          <Icon source={CheckIcon} />
-        </InlineStack>
       </InlineStack>
     </Box>
-  ) : (
-    <>{children}</>
   );
 
   return (