diff --git a/.changeset/chatty-timers-marry.md b/.changeset/chatty-timers-marry.md new file mode 100644 index 00000000000..1ea7124b4d9 --- /dev/null +++ b/.changeset/chatty-timers-marry.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed layout shift for option lists within popovers diff --git a/.changeset/strong-otters-fetch.md b/.changeset/strong-otters-fetch.md new file mode 100644 index 00000000000..db3462aafc5 --- /dev/null +++ b/.changeset/strong-otters-fetch.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Changed selected icon position in Listbox and OptionList diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx index d128dcb0b0a..7f2758fadbf 100644 --- a/polaris-react/src/components/Listbox/Listbox.stories.tsx +++ b/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> ); diff --git a/polaris-react/src/components/Listbox/components/Action/Action.module.css b/polaris-react/src/components/Listbox/components/Action/Action.module.css index 8193e14902d..1dca8c4a6ab 100644 --- a/polaris-react/src/components/Listbox/components/Action/Action.module.css +++ b/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); -} diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx index 6055e124512..434c4c965e7 100644 --- 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="100"> + {selected ? ( + <span> + <Icon source={CheckIcon} /> + </span> + ) : ( + placeholder + )} {children} - <InlineStack align="end"> - <Icon source={CheckIcon} /> - </InlineStack> </InlineStack> </Box> - ) : ( - <>{children}</> ); return ( diff --git a/polaris-react/src/components/OptionList/components/Option/Option.module.css b/polaris-react/src/components/OptionList/components/Option/Option.module.css index 690ef9d85c7..af804a206d3 100644 --- a/polaris-react/src/components/OptionList/components/Option/Option.module.css +++ b/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; diff --git a/polaris-react/src/components/OptionList/components/Option/Option.tsx b/polaris-react/src/components/OptionList/components/Option/Option.tsx index 6b8578fe516..3747b3cf7ef 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.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> );