From da01e50898f8581dd6351c772e42d923213122a0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 12 Mar 2022 08:16:38 +0900 Subject: [PATCH 1/5] CustomSelectControl: Add flag for larger default size --- .../src/custom-select-control/index.js | 10 ++++++++-- .../src/custom-select-control/style.scss | 17 ++++++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 9c13cc6b0e661..fda5d0edb076e 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -56,6 +56,8 @@ const stateReducer = ( } }; export default function CustomSelectControl( { + /** Start opting into the larger default height that will become the default size in a future version. */ + __next36pxDefaultSize = false, className, hideLabelFromVision, label, @@ -141,8 +143,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-next-36px-default-size': __next36pxDefaultSize } + ), + isSmall: ! __next36pxDefaultSize, describedBy: getDescribedBy(), } ) } > @@ -169,6 +174,7 @@ export default function CustomSelectControl( { 'is-highlighted': index === highlightedIndex, 'has-hint': !! item.__experimentalHint, + 'is-next-36px-default-size': __next36pxDefaultSize, } ), style: item.style, diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index f3175331336bf..2cd19a9616c54 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -10,15 +10,22 @@ .components-custom-select-control__button { border: 1px solid $gray-700; border-radius: $radius-block-ui; - min-height: 30px; min-width: 130px; position: relative; text-align: left; + &:not(.is-next-36px-default-size) { + min-height: 30px; + } + // For all button sizes allow sufficient space for the // dropdown "arrow" icon to display. &.components-custom-select-control__button { - padding-right: $icon-size; + padding-right: $icon-size + $grid-unit-05; + + &:not(.is-next-36px-default-size) { + padding-right: $icon-size; + } } &:focus:not(:disabled) { @@ -61,10 +68,14 @@ display: grid; grid-template-columns: auto auto; list-style-type: none; - padding: $grid-unit-10; + padding: $grid-unit-10 $grid-unit-15; cursor: default; line-height: $icon-size + $grid-unit-05; + &:not(.is-next-36px-default-size) { + padding: $grid-unit-10; + } + &.has-hint { grid-template-columns: auto auto 30px; } From ff4b0bdaee0ba20ef81d7aa9c2d75eebe574f195 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 12 Mar 2022 08:01:33 +0900 Subject: [PATCH 2/5] Migrate stories --- .../custom-select-control/stories/index.js | 151 +++++++++--------- 1 file changed, 77 insertions(+), 74 deletions(-) diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js index fbfe70c6fe7f4..524482bdf4b71 100644 --- a/packages/components/src/custom-select-control/stories/index.js +++ b/packages/components/src/custom-select-control/stories/index.js @@ -6,81 +6,84 @@ import CustomSelectControl from '../'; export default { title: 'Components/CustomSelectControl', component: CustomSelectControl, -}; - -const defaultOptions = [ - { - key: 'small', - name: 'Small', - style: { fontSize: '50%' }, - }, - { - key: 'normal', - name: 'Normal', - style: { fontSize: '100%' }, - className: 'can-apply-custom-class-to-option', - }, - { - key: 'large', - name: 'Large', - style: { fontSize: '200%' }, - }, - { - key: 'huge', - name: 'Huge', - 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.', + argTypes: { + __next36pxDefaultSize: { + control: { type: 'boolean' }, + }, }, -]; +}; -export const longLabels = () => ( - -); +export const Default = CustomSelectControl.bind( {} ); +Default.args = { + label: 'Label', + options: [ + { + key: 'small', + name: 'Small', + style: { fontSize: '50%' }, + }, + { + key: 'normal', + name: 'Normal', + style: { fontSize: '100%' }, + className: 'can-apply-custom-class-to-option', + }, + { + key: 'large', + name: 'Large', + style: { fontSize: '200%' }, + }, + { + key: 'huge', + name: 'Huge', + style: { fontSize: '300%' }, + }, + ], +}; -const withHintsOptions = [ - { - key: 'thumbnail', - name: 'Thumbnail', - __experimentalHint: '150x150', - }, - { - key: 'medium', - name: 'Medium', - __experimentalHint: '250x250', - }, - { - key: 'large', - name: 'Large', - __experimentalHint: '1024x1024', - }, - { - key: 'full', - name: 'Full Size', - __experimentalHint: '1600x1600', - }, -]; +export const WithLongLabels = CustomSelectControl.bind( {} ); +WithLongLabels.args = { + ...Default.args, + 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.', + }, + ], +}; -export const hints = () => ( - -); +export const WithHints = CustomSelectControl.bind( {} ); +WithHints.args = { + ...Default.args, + options: [ + { + key: 'thumbnail', + name: 'Thumbnail', + __experimentalHint: '150x150', + }, + { + key: 'medium', + name: 'Medium', + __experimentalHint: '250x250', + }, + { + key: 'large', + name: 'Large', + __experimentalHint: '1024x1024', + }, + { + key: 'full', + name: 'Full Size', + __experimentalHint: '1600x1600', + }, + ], +}; From 916720d18b7c6f52ebabc4081a494554dc4f91fa Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 12 Mar 2022 08:38:57 +0900 Subject: [PATCH 3/5] Add changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d8f53cd75fab5..45359f886e57e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - `InputControl`: Allow `onBlur` for empty values to commit the change when `isPressEnterToChange` is true, and move reset behavior to the ESCAPE key. ([#39109](https://github.com/WordPress/gutenberg/pull/39109)). - `TreeGrid`: Add tests for Home/End keyboard navigation. Add `onFocusRow` callback for Home/End keyboard navigation, this was missed in the implementation PR. Modify test for expanding/collapsing a row as row 1 implements this now. Update README with latest changes. ([#39302](https://github.com/WordPress/gutenberg/pull/39302)) - `ToggleGroupControlOption`: Calculate width from button content and remove `LabelPlaceholderView` ([#39345](https://github.com/WordPress/gutenberg/pull/39345)) +- `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)). ### Bug Fix From 126c3d999d184c526efc275d0ceec2aedbc2858b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 15 Mar 2022 02:46:40 +0900 Subject: [PATCH 4/5] Increase paddings to 16px --- packages/components/src/custom-select-control/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index 2cd19a9616c54..08c3c8a6c0109 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -21,9 +21,13 @@ // For all button sizes allow sufficient space for the // dropdown "arrow" icon to display. &.components-custom-select-control__button { - padding-right: $icon-size + $grid-unit-05; + // TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron + // (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431) + padding-left: $grid-unit-20; + padding-right: $icon-size + $grid-unit-10; &:not(.is-next-36px-default-size) { + padding-left: $grid-unit-10; padding-right: $icon-size; } } @@ -68,7 +72,7 @@ display: grid; grid-template-columns: auto auto; list-style-type: none; - padding: $grid-unit-10 $grid-unit-15; + padding: $grid-unit-10 $grid-unit-20; cursor: default; line-height: $icon-size + $grid-unit-05; From 982a4a64058a9101d83a5f1e63b9947d6a9e8da2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 15 Mar 2022 02:59:01 +0900 Subject: [PATCH 5/5] Fixup changelog --- packages/components/CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 45359f886e57e..5c41362b785fe 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)). + ## 19.6.0 (2022-03-11) ### Enhancements @@ -10,7 +14,6 @@ - `InputControl`: Allow `onBlur` for empty values to commit the change when `isPressEnterToChange` is true, and move reset behavior to the ESCAPE key. ([#39109](https://github.com/WordPress/gutenberg/pull/39109)). - `TreeGrid`: Add tests for Home/End keyboard navigation. Add `onFocusRow` callback for Home/End keyboard navigation, this was missed in the implementation PR. Modify test for expanding/collapsing a row as row 1 implements this now. Update README with latest changes. ([#39302](https://github.com/WordPress/gutenberg/pull/39302)) - `ToggleGroupControlOption`: Calculate width from button content and remove `LabelPlaceholderView` ([#39345](https://github.com/WordPress/gutenberg/pull/39345)) -- `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)). ### Bug Fix