Skip to content

Conversation

@youknowriad
Copy link
Contributor

When using the ComboboxControl in selects where "null" values are allowed like #25267 we need to be able to reset its value.
This PR does so by adding a reset button.

Testing instructions

  • npm run storybook:dev
  • Check the ComboboxControl story and see that you can choose countries and reset the value as well.

@youknowriad youknowriad added [Feature] UI Components Impacts or related to the UI component system [Type] New API New API to be used by plugin developers or package users. labels Sep 29, 2020
@youknowriad youknowriad self-assigned this Sep 29, 2020
@github-actions
Copy link

github-actions bot commented Sep 29, 2020

Size Change: +156 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-directory/index.js 8.55 kB -3 B (0%)
build/block-editor/index.js 129 kB -7 B (0%)
build/components/index.js 169 kB +93 B (0%)
build/components/style-rtl.css 15.5 kB +38 B (0%)
build/components/style.css 15.5 kB +40 B (0%)
build/edit-post/index.js 306 kB -6 B (0%)
build/edit-site/index.js 21 kB -1 B
build/edit-widgets/index.js 21.2 kB -3 B (0%)
build/editor/index.js 45.5 kB +2 B (0%)
build/format-library/index.js 7.49 kB +2 B (0%)
build/nux/index.js 3.27 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.54 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.65 kB 0 B
build/block-library/editor.css 8.65 kB 0 B
build/block-library/index.js 144 kB 0 B
build/block-library/style-rtl.css 7.66 kB 0 B
build/block-library/style.css 7.65 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.5 kB 0 B
build/compose/index.js 9.43 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.6 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.27 kB 0 B
build/edit-site/style-rtl.css 3.73 kB 0 B
build/edit-site/style.css 3.73 kB 0 B
build/edit-widgets/style-rtl.css 3.02 kB 0 B
build/edit-widgets/style.css 3.02 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This extra Flex was only needed to center the Button properly, I was wondering if FlexItems should automatically be flexes as well 🤔 cc @ItsJonQ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hesitated between a "grow" prop or an "expand" one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer "grow" since it's already CSS/flex terminology.

@youknowriad youknowriad force-pushed the add/allow-reset-combobox branch from ec05e14 to 650d876 Compare September 29, 2020 08:59
@ItsJonQ
Copy link

ItsJonQ commented Sep 29, 2020

@youknowriad Haiii! So cool that you're using Flex in this component 😍 .

You can achieve what you need with FlexBlock. It's designed to take up the rest of the remaining space.

<Flex>
	<FlexBlock>Adaptively wide thing</FlexBlock>
	<FlexItem>Tiny thing</FlexItem>
</Flex>

The only thing I needed to adjust (css wise) was to change the display of the button to flex.
The reason for this is because inline-flex (it's original display) causes it to have bottom margin styles.
This is the same for display: inline as well.

Switching it to a block based HTML element display: flex | block resolves this 👍

Hope this helps!!

@ItsJonQ
Copy link

ItsJonQ commented Oct 8, 2020

Thanks @mcsf ! Looks like there's a snapshot test conflict. I'm going to resolve that and merge :)

@ItsJonQ ItsJonQ force-pushed the add/allow-reset-combobox branch from 41efdf5 to 359abb2 Compare October 8, 2020 12:50
@ItsJonQ ItsJonQ merged commit dc83782 into master Oct 8, 2020
@ItsJonQ ItsJonQ deleted the add/allow-reset-combobox branch October 8, 2020 14:20
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] UI Components Impacts or related to the UI component system [Type] New API New API to be used by plugin developers or package users.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants