diff --git a/polaris-react/src/components/OptionList/components/Option/Option.module.scss b/polaris-react/src/components/OptionList/components/Option/Option.module.scss
index 9a435c2c504..c3ac6cc677e 100644
--- 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) {
@@ -141,10 +141,8 @@ $control-vertical-adjustment: 2px;
}
.Icon {
- margin-left: var(--p-space-200);
-
svg {
- fill: var(--p-color-icon-brand);
+ // fill: var(--p-color-icon-brand);
}
}
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.tsx b/polaris-react/src/components/OptionList/components/Option/Option.tsx
index d227b35a0ad..68dd3668197 100644
--- 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}
>
- <>
-
- {mediaMarkup}
- {label}
-
- {(select || active) && (
-
-
-
- )}
- >
+ {select || active ? (
+
+
+
+ ) : (
+
+ )}
+
+ {mediaMarkup}
+ {label}
+
);