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..6472f2c4078 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) { @@ -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 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} + );