diff --git a/.changeset/afraid-zoos-build.md b/.changeset/afraid-zoos-build.md new file mode 100644 index 00000000000..3bdd82e6ccc --- /dev/null +++ b/.changeset/afraid-zoos-build.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Reduced spacing on ChoiceList children diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx index 905c4c86484..4b191f6bc2a 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx @@ -26,7 +26,7 @@ export function Default() { } export function WithError() { - const [selected, setSelected] = useState('hidden'); + const [selected, setSelected] = useState(['hidden']); const handleChange = useCallback((value) => setSelected(value), []); @@ -103,11 +103,14 @@ export function WithChildrenContent() { title="Discount minimum requirements" choices={[ {label: 'None', value: 'none'}, - {label: 'Minimum purchase', value: 'minimum_purchase'}, + { + label: 'Minimum purchase', + value: 'minimum_purchase', + renderChildren, + }, { label: 'Minimum quantity', value: 'minimum_quantity', - renderChildren, }, ]} selected={selected} @@ -147,7 +150,11 @@ export function WithDynamicChildrenContent() { title="Discount minimum requirements" choices={[ {label: 'None', value: 'none'}, - {label: 'Minimum purchase', value: 'minimum_purchase'}, + { + label: 'Minimum purchase', + value: 'minimum_purchase', + renderChildren, + }, { label: 'Minimum quantity', value: 'minimum_quantity', diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx index f2c5fb73647..3d993dbabb0 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx @@ -103,9 +103,7 @@ export function ChoiceList({ : null; const children = renderedChildren ? (
- - {renderedChildren} - + {renderedChildren}
) : null; return (