From fd37c18968011142d6b5db480e720513ae5172c6 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 19 Apr 2024 13:28:22 -0400 Subject: [PATCH] Revert "Revert "Revert "[Listbox, OptionList] Right align check icons on selected list items""" (#11918) Reverts Shopify/polaris#11842 --- .changeset/unlucky-pens-fix.md | 5 +++ .../components/Listbox/Listbox.stories.tsx | 7 ++-- .../components/Action/Action.module.css | 4 +++ .../components/TextOption/TextOption.tsx | 18 ++++------- .../components/Option/Option.module.css | 10 +++++- .../OptionList/components/Option/Option.tsx | 32 +++++++------------ 6 files changed, 42 insertions(+), 34 deletions(-) create mode 100644 .changeset/unlucky-pens-fix.md diff --git a/.changeset/unlucky-pens-fix.md b/.changeset/unlucky-pens-fix.md new file mode 100644 index 00000000000..f13d7b90c75 --- /dev/null +++ b/.changeset/unlucky-pens-fix.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Reverted selected icon placement on Option and TextOption diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx index 7f2758fadbf..d128dcb0b0a 100644 --- a/polaris-react/src/components/Listbox/Listbox.stories.tsx +++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx @@ -102,8 +102,11 @@ export function WithAction() { Item 2 - - Add item + + + +
Add item
+
); 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 1dca8c4a6ab..8193e14902d 100644 --- a/polaris-react/src/components/Listbox/components/Action/Action.module.css +++ b/polaris-react/src/components/Listbox/components/Action/Action.module.css @@ -6,3 +6,7 @@ .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 434c4c965e7..6055e124512 100644 --- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx +++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx @@ -35,21 +35,17 @@ export const TextOption = memo(function TextOption({ isAction && styles.isAction, ); - const placeholder = isAction ? null : ; - - const optionMarkup = ( + const optionMarkup = selected ? ( - - {selected ? ( - - - - ) : ( - placeholder - )} + {children} + + + + ) : ( + <>{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 af804a206d3..690ef9d85c7 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; - gap: var(--p-space-100); + justify-content: space-between; /* stylelint-disable-next-line selector-max-specificity -- required for focus-visible support */ &.focused:focus-visible:not(:active) { @@ -134,6 +134,14 @@ 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 3747b3cf7ef..6b8578fe516 100644 --- a/polaris-react/src/components/OptionList/components/Option/Option.tsx +++ b/polaris-react/src/components/OptionList/components/Option/Option.tsx @@ -11,7 +11,6 @@ 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'; @@ -126,27 +125,20 @@ export function Option({ onBlur={toggleFocused} aria-pressed={active || select} > - {select || active ? ( - - - - ) : ( - - )} - - {mediaMarkup} - + + {mediaMarkup} {label} - - + + {(select || active) && ( + + + + )} + );