From 243caa820deda294cfaa3a798080a5531d943925 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 16 Apr 2024 16:23:01 -0600 Subject: [PATCH] ChoiceList Mobile styles & touch target --- .../src/components/Choice/Choice.module.css | 15 +++++++++++++-- .../components/ChoiceList/ChoiceList.module.css | 6 ++++-- .../components/ChoiceList/ChoiceList.stories.tsx | 2 +- .../src/components/ChoiceList/ChoiceList.tsx | 8 ++------ 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/polaris-react/src/components/Choice/Choice.module.css b/polaris-react/src/components/Choice/Choice.module.css index feaf003ee98..413a675b1d3 100644 --- a/polaris-react/src/components/Choice/Choice.module.css +++ b/polaris-react/src/components/Choice/Choice.module.css @@ -22,11 +22,11 @@ cursor: pointer; padding-block-start: calc( var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + - var(--p-space-100) + var(--p-space-300) ); padding-block-end: calc( var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + - var(--p-space-100) + var(--p-space-300) ); padding-inline-start: var( --pc-choice-bleed-inline-start, @@ -60,6 +60,17 @@ var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) ); + + @media (--p-breakpoints-md-up) { + padding-block-start: calc( + var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + + var(--p-space-100) + ); + padding-block-end: calc( + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + + var(--p-space-100) + ); + } } .labelHidden { diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.module.css b/polaris-react/src/components/ChoiceList/ChoiceList.module.css index ddc5dff3952..fc8bab4f822 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.module.css +++ b/polaris-react/src/components/ChoiceList/ChoiceList.module.css @@ -1,4 +1,6 @@ .ChoiceChildren { - /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ - padding-left: calc(var(--p-space-200) + 20px); + @media (--p-breakpoints-md-up) { + /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ + padding-left: calc(var(--p-space-200) + 20px); + } } diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx index e3c6424478b..6ee350287ae 100644 --- a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx +++ b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx @@ -138,7 +138,7 @@ export function WithChildrenContent() { const renderChildren = useCallback( () => ( - {renderedChildren} - +
{renderedChildren}
) : null; return (
  • @@ -143,9 +141,7 @@ export function ChoiceList({ id={finalName} > {titleMarkup} - - {choicesMarkup} - + {choicesMarkup} {errorMarkup} );