From df32624119ee9eb3fe55fd44869a5148641ef4c8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 3 Nov 2021 05:19:34 +0900 Subject: [PATCH 1/5] CustomSelectControl: Refactor story to use controls --- .../custom-select-control/stories/index.js | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js index 7b8b07a2c7d00..05a58cc5c5ce6 100644 --- a/packages/components/src/custom-select-control/stories/index.js +++ b/packages/components/src/custom-select-control/stories/index.js @@ -31,29 +31,31 @@ const defaultOptions = [ style: { fontSize: '300%' }, }, ]; -export const _default = () => ( - -); -const longLabelOptions = [ - { - key: 'reallylonglabel1', - name: 'Really long labels are good for stress testing', - }, - { - key: 'reallylonglabel2', - name: 'But they can take a long time to type.', - }, - { - key: 'reallylonglabel3', - name: - 'That really is ok though because you should stress test your UIs.', - }, -]; +export const Default = CustomSelectControl.bind( {} ); +Default.args = { + hideLabelFromVision: false, + label: 'Font size', + options: defaultOptions, +}; -export const longLabels = () => ( - -); +export const LongLabels = CustomSelectControl.bind( {} ); +LongLabels.args = { + ...Default.args, + label: 'Testing long labels', + options: [ + { + key: 'reallylonglabel1', + name: 'Really long labels are good for stress testing', + }, + { + key: 'reallylonglabel2', + name: 'But they can take a long time to type.', + }, + { + key: 'reallylonglabel3', + name: + 'That really is ok though because you should stress test your UIs.', + }, + ], +}; From 0e2c9a652d54464266e21ea575fa655ece479563 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 3 Nov 2021 05:58:39 +0900 Subject: [PATCH 2/5] CustomSelectControl: Add `__unstableSize` prop --- packages/components/src/custom-select-control/index.js | 8 ++++++-- .../components/src/custom-select-control/stories/index.js | 6 ++++++ packages/components/src/custom-select-control/style.scss | 5 +++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 90b5bbf2115e2..3bfc07a0bf9a6 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -55,6 +55,7 @@ const stateReducer = ( }; export default function CustomSelectControl( { className, + __unstableSize, hideLabelFromVision, label, describedBy, @@ -130,8 +131,11 @@ export default function CustomSelectControl( { // This is needed because some speech recognition software don't support `aria-labelledby`. 'aria-label': label, 'aria-labelledby': undefined, - className: 'components-custom-select-control__button', - isSmall: true, + className: classnames( + 'components-custom-select-control__button', + { 'is-unstable-size-large': __unstableSize === 'large' } + ), + isSmall: __unstableSize !== 'large', describedBy: getDescribedBy(), } ) } > diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js index 05a58cc5c5ce6..430821074617e 100644 --- a/packages/components/src/custom-select-control/stories/index.js +++ b/packages/components/src/custom-select-control/stories/index.js @@ -6,6 +6,12 @@ import CustomSelectControl from '../'; export default { title: 'Components/CustomSelectControl', component: CustomSelectControl, + argTypes: { + __unstableSize: { + options: [ 'default', 'large' ], + control: { type: 'select' }, + }, + }, }; const defaultOptions = [ diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index f3175331336bf..0033c00e0d0e3 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -15,6 +15,11 @@ position: relative; text-align: left; + &.is-unstable-size-large { + min-height: 40px; + padding-left: 16px; + } + // For all button sizes allow sufficient space for the // dropdown "arrow" icon to display. &.components-custom-select-control__button { From 53a01b164215e0ce90696b8b46cf418c3853b3b4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 3 Nov 2021 06:23:20 +0900 Subject: [PATCH 3/5] FontAppearanceControl: Use `__unstableSize` large Because this component is marked as experimental, I think we can default it to large. --- .../block-editor/src/components/font-appearance-control/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js index d4c9dc85715d2..b7cc441dc3c00 100644 --- a/packages/block-editor/src/components/font-appearance-control/index.js +++ b/packages/block-editor/src/components/font-appearance-control/index.js @@ -206,6 +206,7 @@ export default function FontAppearanceControl( props ) { hasStylesOrWeights && ( Date: Wed, 3 Nov 2021 06:23:41 +0900 Subject: [PATCH 4/5] FontSizePicker: Pass down `__unstableSize` prop --- packages/components/src/font-size-picker/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 548eb2265f508..572b376fb34e1 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -28,6 +28,7 @@ import { function FontSizePicker( { + __unstableSize, fallbackFontSize, fontSizes = [], disableCustomFontSizes = false, @@ -148,6 +149,7 @@ function FontSizePicker( shouldUseSelectControl && ! showCustomValueControl && ( Date: Wed, 3 Nov 2021 06:25:34 +0900 Subject: [PATCH 5/5] FontSizePicker: Use `large` in Typography panels --- packages/block-editor/src/hooks/font-size.js | 1 + packages/components/src/tools-panel/stories/typography-panel.js | 1 + .../edit-site/src/components/global-styles/typography-panel.js | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 3a2abfbb85f25..f4e4d1384971e 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -142,6 +142,7 @@ export function FontSizeEdit( props ) { return ( { isShownByDefault={ true } >