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.

Sign up for GitHub

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

Jump to bottom

ToggleGroupControl: fix unselected icon color #44575

Merged
merged 3 commits into from
Sep 29, 2022
Merged

ToggleGroupControl: fix unselected icon color #44575

merged 3 commits into from
Sep 29, 2022

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Sep 29, 2022 •
edited

What?

Fix the unselected icon color in ToggleGroupControl, as flagged by @jasmussen in #44560 (comment),

Why?

Unselected icons in ToggleGroupControl should be using the darkest gray (gray-900) as their color, but they currently use a lighter shade (gray-700), since that is the text color used for unselected options in the component.

How?

Change the unselected icon color in ToggleGroupControl to be gray-900.

Note: when text is used instead of icons, the text color for unselected options will remain gray-700

Testing Instructions

  • Visit the Storybook examples for the ToggleGroupControl component, check that:
    • Unselected options in the default example look the same as on trunk
    • Unselected icon options (in the "With Icons" example) use gray-900, unlike trunk
  • Check that the icons in the layout panel in the editor also use the new gray-900

Screenshots or screencast

trunk This PR
Text options Screenshot 2022-09-29 at 13 26 19 Screenshot 2022-09-29 at 13 34 07
Icons Screenshot 2022-09-29 at 13 26 29 Screenshot 2022-09-29 at 13 48 46

(ignore the focus ring around the component, that will remained unchanged)

@ciampo ciampo self-assigned this Sep 29, 2022
@ciampo ciampo force-pushed the fix/toggle-group-control-icon-color branch from 231ba90 to e79f8a5 Compare September 29, 2022 11:50
@ciampo ciampo added [Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components labels Sep 29, 2022
@jasmussen jasmussen requested review from jasmussen and removed request for jasmussen September 29, 2022 11:52
ciampo
ciampo commented Sep 29, 2022
View reviewed changes
packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
width: ${ iconButtonSizes[ size ] };
padding-left: 0;
padding-right: 0;
`;
};

export const buttonActive = css`
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved buttonActive styles after the isIcon styles, so that the active color will still take precedence (thus making the icon's color white when it's selected/active)

jasmussen
jasmussen approved these changes Sep 29, 2022
View reviewed changes
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Wonderful!
Screenshot 2022-09-29 at 13 53 31
Screenshot 2022-09-29 at 13 53 20

Thank you 🙏

@ciampo ciampo added this to In progress (owned) ⏳ in WordPress Components via automation Sep 29, 2022
@ciampo ciampo merged commit b06eac0 into trunk Sep 29, 2022
WordPress Components automation moved this from In progress (owned) ⏳ to Done 🎉 Sep 29, 2022
@ciampo ciampo deleted the fix/toggle-group-control-icon-color branch September 29, 2022 13:48
@ciampo ciampo added [Type] Enhancement A suggestion for improvement. Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Sep 29, 2022
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 29, 2022
michalczaplinski pushed a commit that referenced this pull request Oct 3, 2022
@ciampo @michalczaplinski
ToggleGroupControl: fix unselected icon color (#44575)
d4cb2cc 
* ToggleGroupControl: fix unselected icon
color

* CHANGELOG

* Snapshots
@michalczaplinski michalczaplinski mentioned this pull request Oct 3, 2022
Merged
@michalczaplinski michalczaplinski removed the Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 3, 2022
@michalczaplinski
Copy link
Contributor

Cherry-picked for the 6.1 release in #44656

ockham pushed a commit that referenced this pull request Oct 4, 2022
@ciampo @ockham
ToggleGroupControl: fix unselected icon color (#44575)
7df9ffe 
* ToggleGroupControl: fix unselected icon
color

* CHANGELOG

* Snapshots
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Oct 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
306d934 
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
4de88db 
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: http://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Oct 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
4737a6e 
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54383


git-svn-id: https://core.svn.wordpress.org/trunk@53942 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@t-hamano t-hamano mentioned this pull request Oct 13, 2022
Closed
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
@dream-encode
Editor: Update packages for 6.1 Beta 3.
a25b067 
Package updates for bug and regression fixes:

* @wordpress/annotations: 2.17.3
* @wordpress/block-directory: 3.15.4
* @wordpress/block-editor: 10.0.4
* @wordpress/block-library: 7.14.4
* @wordpress/blocks: 11.16.4
* @wordpress/components: 21.0.4
* @wordpress/core-data: 5.0.4
* @wordpress/customize-widgets: 3.14.4
* @wordpress/data: 7.1.3
* @wordpress/data-controls: 2.17.3
* @wordpress/edit-post: 6.14.4
* @wordpress/edit-site: 4.14.5
* @wordpress/edit-widgets: 4.14.4
* @wordpress/editor: 12.16.4
* @wordpress/format-library: 3.15.4
* @wordpress/interface: 4.16.3
* @wordpress/keyboard-shortcuts: 3.15.3
* @wordpress/list-reusable-blocks: 3.15.4
* @wordpress/notices: 3.17.3
* @wordpress/nux: 5.15.4
* @wordpress/preferences: 2.9.4
* @wordpress/reusable-blocks: 3.15.4
* @wordpress/rich-text: 5.15.3
* @wordpress/server-side-render: 3.15.4
* @wordpress/style-engine: 1.0.3
* @wordpress/viewport: 4.15.3
* @wordpress/widgets: 2.15.4

References:
* [WordPress/gutenberg#44634 Gutenberg PR 44634] – Quote block: stop slash inserter popup showing in citation
* [WordPress/gutenberg#44630 Gutenberg PR 44630] – Query Loop: Fix condition for displaying 'parents' control
* [WordPress/gutenberg#44554 Gutenberg PR 44554] – Hide the Classic block in the Site Editor
* [WordPress/gutenberg#44594 Gutenberg PR 44594] – Fix navigation block console error
* [WordPress/gutenberg#44555 Gutenberg PR 44555] – Theme export: Fix broken spacingScale export
* [WordPress/gutenberg#44580 Gutenberg PR 44580] – Code Block: Add box-sizing to fix inconsistent layout
* [WordPress/gutenberg#44556 Gutenberg PR 44556] – Remove border from Global Styles previews
* [WordPress/gutenberg#44141 Gutenberg PR 44141] – Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides
* [WordPress/gutenberg#44453 Gutenberg PR 44453] – Preserve the generic signature of getEntityRecord and getEntityRecords through currying
* [WordPress/gutenberg#44504 Gutenberg PR 44504] – Theme.json: fix some outline properties doesn't work properly on the editor
* [WordPress/gutenberg#44516 Gutenberg PR 44516] – Add style engine to editor tsconfig references
* [WordPress/gutenberg#44523 Gutenberg PR 44523] – Query Loop Block: Rename Query Loop variations allowControls to allowedControls
* [WordPress/gutenberg#44520 Gutenberg PR 44520] – Post Featured Image: Fix application of default border style in editor
* [WordPress/gutenberg#44286 Gutenberg PR 44286] – Post Featured Image: Fix borders after addition of overlay feature
* [WordPress/gutenberg#44482 Gutenberg PR 44482] – Template Editor: Fix crashes due to undefined variables
* [WordPress/gutenberg#44480 Gutenberg PR 44480] – Template Parts: Prevent adding block in post editor or inside post template or content blocks
* [WordPress/gutenberg#44425 Gutenberg PR 44425] – Fix rotated image crop area aspect ratio
* [WordPress/gutenberg#44485 Gutenberg PR 44485] – Fix padding/margin visualizer accuracy
* [WordPress/gutenberg#44569 Gutenberg PR 44569] – Theme.json: Fix some shadow properties that do not work properly in the site editor
* [WordPress/gutenberg#44575 Gutenberg PR 44575] – ToggleGroupControl: Fix unselected icon color
* [WordPress/gutenberg#44526 Gutenberg PR 44526] – TokenInput Field: Try alternative approach to fix screen reader focus issue
* [WordPress/gutenberg#44506 Gutenberg PR 44506] – Edit Post: Optimize legacy post content layout
* [WordPress/gutenberg#44258 Gutenberg PR 44258] – Add layout styles from Post Content block to post editor

Follow-up to [54257] and [54335].

Props czapla, isabel_brison, wildworks, bernhard-reiter, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54383 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jasmussen jasmussen jasmussen approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@mirka mirka Awaiting requested review from mirka

@chad1008 chad1008 Awaiting requested review from chad1008

Assignees

@ciampo ciampo

Labels
[Feature] UI Components Impacts or related to the UI component system [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
WordPress Components
Done 🎉
Milestone
Gutenberg 14.3
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@ciampo @michalczaplinski @jasmussen