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

Align checkbox, radio, and toggle input design #63490

Merged
merged 17 commits into from
Jul 23, 2024

Conversation

jameskoster
Copy link
Contributor

@jameskoster jameskoster commented Jul 12, 2024

storybook

This PR is to scrutinize some design system explorations about better aligning ToggleControl, RadioControl, and CheckboxControl.

Changes

  • Align labels
    • Line-height matches input height to ensure alignment
    • cursor: pointer across
  • Reduced footprint for Checkboxes and Radios on larger screens making them more proportionally aligned with the label
  • Update toggle dimensions based on 4px baseline. 16px height to align with radio + checkbox.
  • Apply the standard input border color to toggle off state
  • Indent help text consistently between checkbox and toggle (aligned with label on Y axis)
  • Consistent focus ring styling
  • Consistent spacing between input and help text
  • Consistent spacing between input and label

To test

  • npm run storybook:dev
  • Check RadioControl, CheckboxControl, ToggleControl
  • Smoke test the Editor

Changes in context

inputs

Copy link

github-actions bot commented Jul 12, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link

github-actions bot commented Jul 12, 2024

Size Change: +70 B (0%)

Total Size: 1.75 MB

Filename Size Change
build/components/index.min.js 221 kB +23 B (+0.01%)
build/components/style-rtl.css 12 kB +35 B (+0.29%)
build/components/style.css 12 kB +40 B (+0.33%)
build/editor/style-rtl.css 9.1 kB +10 B (+0.11%)
build/editor/style.css 9.1 kB +10 B (+0.11%)
build/preferences/style-rtl.css 554 B -24 B (-4.15%)
build/preferences/style.css 554 B -24 B (-4.15%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.29 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.58 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/index.min.js 254 kB
build/block-editor/style-rtl.css 16.2 kB
build/block-editor/style.css 16.2 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 310 B
build/block-library/blocks/button/editor.css 310 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 336 B
build/block-library/blocks/buttons/editor.css 336 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 221 B
build/block-library/blocks/comments-pagination/editor.css 211 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 668 B
build/block-library/blocks/cover/editor.css 669 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 314 B
build/block-library/blocks/embed/editor.css 314 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 402 B
build/block-library/blocks/group/editor.css 402 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.59 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 204 B
build/block-library/blocks/latest-posts/editor.css 204 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 663 B
build/block-library/blocks/navigation-link/editor.css 664 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.25 kB
build/block-library/blocks/navigation/style.css 2.23 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 522 B
build/block-library/blocks/post-comments-form/style.css 522 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 341 B
build/block-library/blocks/post-featured-image/style.css 341 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 452 B
build/block-library/blocks/query/editor.css 451 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 225 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 183 B
build/block-library/blocks/search/editor.css 183 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 553 B
build/block-library/blocks/video/editor.css 554 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.9 kB
build/block-library/editor.css 11.8 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 216 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.2 kB
build/commands/index.min.js 16.1 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.78 kB
build/core-data/index.min.js 72.8 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.6 kB
build/edit-post/style-rtl.css 2.34 kB
build/edit-post/style.css 2.33 kB
build/edit-site/index.min.js 211 kB
build/edit-site/posts-rtl.css 6.74 kB
build/edit-site/posts.css 6.76 kB
build/edit-site/style-rtl.css 11.9 kB
build/edit-site/style.css 11.9 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.2 kB
build/edit-widgets/style.css 4.2 kB
build/editor/index.min.js 98.8 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 506 B
build/format-library/style.css 505 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.78 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.16 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.59 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/index.min.js 7.36 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.54 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Dimensions and metrics look great. As we've talked about in chat, I'm personally unsure about the font weight change, but I'll let you reach a broader group when you're ready for that, and I'll defer to group consensus. But it would be useful to see these change in context, not just storybook, if you can include a couple of screenshots of the editor with these components and their weight shown there.

@jameskoster
Copy link
Contributor Author

Good point, I added some 'changes in context' screenshots.

The font-weight is a tricky one. Objectively judging the components in isolation I feel it's a good change because it viaully differentiates the label from regular body text, which seems like an a11y enhancements.

However in some circumstances I see how it can feel a bit overweight. But that might suggest there are other styles in the type scale to address, rather than the component styles being 'wrong'. Keen to gather more feedback around that.

@jameskoster jameskoster added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. labels Jul 15, 2024
@jameskoster jameskoster requested a review from a team July 15, 2024 12:33
@jameskoster jameskoster added the [Type] Enhancement A suggestion for improvement. label Jul 15, 2024
@mirka
Copy link
Member

mirka commented Jul 15, 2024

How much do we take into consideration non-Latin scripts when making legibility decisions?

This is what the proposed RadioControl would look like with Chinese/Japanese characters, for example:

Before After
Current RadioControl weights with Japanese language New RadioControl weights with Japanese language

Aside from the heading label which is already hard to read even on a high-res screen with quality fonts, I feel like this adds even more legibility issues by adding extra weight to small text. Also note that all caps styling will not add any visible contrast in languages that do not have a lower/upper case distinction. (@t-hamano Does the legibility issue ever come up in your circles?)

In my experience it is hard to achieve a single style that works in all languages, and it is possible to set slightly different styles based on the lang attribute, if all else fails.

@t-hamano
Copy link
Contributor

Does the legibility issue ever come up in your circles?

I have never heard anyone around me suggest that the readability of the text is an issue in the UI of the entire editor, including the RadioControl and CheckboxControl components.

Another issue here is that, as this CSS variable indicates, the font depends on the OS and the fonts installed on your machine, so readability may vary depending on your environment.

For example, on my Windows machine, English text looks like this. Personally, I feel the font-weight:500 is a little heavy.

trunk this PR
en_before en_after

Strangely, font-weight:500 is not applied to Japanese. This is probably because I don't have a local font installed on my machine that supports weight 500:

trunk this PR
ja_before ja_after

@tyxla
Copy link
Member

tyxla commented Jul 16, 2024

Just my two cents: I find the smaller controls rather a regression than an improvement.

@jameskoster
Copy link
Contributor Author

Thanks for the feedback y'all!

Aside from the heading label which is already hard to read even on a high-res screen with quality fonts

That would suggest an issue with the all-caps label style, no?

I still think there's value in differentiating labels from body text, but acknowledge it's a tricky detail to get right and probably one to explore independently. I reset the weight change in this PR and updated the OP.

@mirka
Copy link
Member

mirka commented Jul 16, 2024

I went ahead and pushed a couple tweaks, if that's ok. They're mostly just architectural fixes, which shouldn't change the resulting visual. The only visual changes I added are the pointer cursor styles — these should now exclude disabled states, and also be applied in a non-WP context.

Comment on lines 98 to 101
$toggle-width: $grid-unit-40;
$toggle-height: $grid-unit-20;
$toggle-border-width: 1px;
$toggle-thumb-size: $grid-unit-15;
Copy link
Member

Choose a reason for hiding this comment

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

Is it necessary to lift all these variables up into base-styles? I'm not sure how conservative we are about adding global variables, but personally I wouldn't add them if it isn't necessary to share them across packages.

If it's just to share values between the FormToggle and ToggleControl components, we can keep them within the @wordpress/components package.

Copy link
Contributor

Choose a reason for hiding this comment

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

Agreed. On a separate note, at some point we should look at tidying up shared styles in the package: some variables are defined in Sass, some as CSS custom properties, and some in JS.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If it's just to share values between the FormToggle and ToggleControl components

That was it. Your suggestion makes sense, though I'm not sure how to do it.

Copy link
Member

Choose a reason for hiding this comment

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

Moved back to the FormToggle styles in 0d73cc5. (Ideally this should use a @use to scope the variables better, but we're not set up to do that properly right now.)

@jameskoster
Copy link
Contributor Author

if that's ok

Absolutely!

Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Looks good from my end, let's add a changelog before merging 👍

@jameskoster jameskoster requested a review from a team July 18, 2024 12:42
matticbot pushed a commit to Automattic/jetpack-crm that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-explat that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-publicize that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-jitm that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-stats-admin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/automattic-for-agencies-client that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-blaze that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-wordads that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-inspect that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-storybook that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-masterbar that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-forms that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-my-jetpack that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-protect-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-backup that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-starter-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-mu-wpcom that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-videopress that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-boost-production that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-social-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-backup-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-mu-wpcom-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-search that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-videopress-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/wpcom-site-helper that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/wpcom-migration that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-search-plugin that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
matticbot pushed a commit to Automattic/jetpack-production that referenced this pull request Sep 3, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10684158857

Upstream-Ref: Automattic/jetpack@fe2a3d1
@jameskoster jameskoster added the Design System Issues related to the system of combining components according to best practices. label Sep 24, 2024
gogdzl pushed a commit to Automattic/jetpack that referenced this pull request Oct 25, 2024
* Update wordpress monorepo
* js-packages/components: ToggleControl: Update styles for WordPress/gutenberg#63490
  That change started setting a height on the control itself (versus
  just the stuff inside it), so update our styles to override that too.
* Add `__nextHasNoMarginBottom` all over the place
  The vast majority are inside a `PanelBody`, which already overrides
  margins. Had to fix one margin on the simple-payments block.

---------

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Brad Jorsch <brad.jorsch@automattic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design System Issues related to the system of combining components according to best practices. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

9 participants