Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combine Calendar Help and Close buttons in DateTimePicker #22176

Merged
merged 1 commit into from
May 18, 2020

Conversation

earnjam
Copy link
Contributor

@earnjam earnjam commented May 7, 2020

Description

After merging #20914 and then browsing old issues, I came across #10621.

This is a quick fix that combines the separately rendered help/close buttons into a single toggle. It preserves focus when toggling the help text and is always rendered. This also resolves #21098

Fixes: #10621, #21098

Screenshots

I have a slight design change here, so I'm also flagging Needs Design Feedback to get some thoughts. Basically since it becomes a toggle I'm keeping it in the same location within the window. It's also retaining more of the standard button/link appearance to make it clear that it's a button. I couldn't find any original designs for this item in its current form. Found one older one with a regular style bordered button, but none as a link.

Old:
Screen Shot 2020-05-07 at 10 18 52 AM

New
Screen Shot 2020-05-07 at 10 09 31 AM

@earnjam earnjam added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Package] Components /packages/components [a11y] Keyboard & Focus labels May 7, 2020
@github-actions
Copy link

github-actions bot commented May 7, 2020

Size Change: -55 B (0%)

Total Size: 822 kB

Filename Size Change
build/block-directory/index.js 6.6 kB -7 B (0%)
build/blocks/index.js 48.1 kB -1 B
build/components/index.js 179 kB -5 B (0%)
build/components/style-rtl.css 16.9 kB -12 B (0%)
build/components/style.css 16.9 kB -12 B (0%)
build/core-data/index.js 11.4 kB -14 B (0%)
build/edit-post/index.js 28.1 kB -2 B (0%)
build/edit-site/index.js 12.3 kB +2 B (0%)
build/hooks/index.js 2.13 kB -7 B (0%)
build/media-utils/index.js 5.29 kB +1 B
build/rich-text/index.js 14.8 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-editor/index.js 101 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/editor-rtl.css 7.08 kB 0 B
build/block-library/editor.css 7.08 kB 0 B
build/block-library/index.js 115 kB 0 B
build/block-library/style-rtl.css 7.28 kB 0 B
build/block-library/style.css 7.29 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 4.4 kB 0 B
build/edit-navigation/style-rtl.css 608 B 0 B
build/edit-navigation/style.css 607 B 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/style-rtl.css 5.19 kB 0 B
build/edit-site/style.css 5.2 kB 0 B
build/edit-widgets/index.js 8.37 kB 0 B
build/edit-widgets/style-rtl.css 4.68 kB 0 B
build/edit-widgets/style.css 4.68 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.3 kB 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.63 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@karmatosed karmatosed self-requested a review May 15, 2020 16:41
Copy link
Member

@karmatosed karmatosed left a comment

Choose a reason for hiding this comment

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

I think this works well and is worth merging as an iteration, thanks. Approving based on design so it will also need a code review.

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label May 15, 2020
@karmatosed karmatosed merged commit 4f12398 into master May 18, 2020
@karmatosed karmatosed deleted the fix/combine-datepicker-help-close-button branch May 18, 2020 08:40
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 18, 2020
@priethor priethor added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Calendar not closing after clicking help in Chrome Combine "Calendar Help" and "Close" buttons in Datepicker
4 participants