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

ColorPicker: Widen hex input field for mobile #42004

Merged
merged 2 commits into from
Jul 1, 2022
Merged

ColorPicker: Widen hex input field for mobile #42004

merged 2 commits into from
Jul 1, 2022

Conversation

mirka
Copy link
Member

@mirka mirka commented Jun 28, 2022 •
edited
Loading

What?

Increases the width of the Hex input field in ColorPicker.

Why?

So the value doesn't get cut off on narrow screens (where font-size is increased to 16px).

How?

Via the __unstableInputWidth prop, instead of ad hoc CSS.

Testing Instructions

  1. npm run storybook:dev
  2. See the ColorPicker story in Canvas mode.
  3. Make the preview narrow enough to where the input field text size increases to 16px. (It's easier to test if you temporarily remove the code for the duplicate ColorPicker in the story.)
  4. Try some hex values and make sure they don't overflow.

Screenshots or screencast

Before After
Hex value is slightly cut off at the end Hex value fits

@mirka
ColorPicker: Widen hex input field for mobile
0a15ed1 
So the value doesn't get cut off on mobile when font-size=16
@mirka mirka added the [Package] Components /packages/components label Jun 28, 2022
@mirka mirka requested a review from ciampo June 28, 2022 11:08
@mirka mirka requested a review from ajitbohra as a code owner June 28, 2022 11:08
@mirka mirka added this to In progress (owned) ⏳ in WordPress Components via automation Jun 28, 2022
@mirka mirka self-assigned this Jun 28, 2022
@mirka mirka mentioned this pull request Jun 28, 2022
Closed
7 tasks
@ciampo ciampo requested a review from chad1008 July 1, 2022 10:44
@ciampo ciampo added [Type] Enhancement A suggestion for improvement. [Feature] UI Components Impacts or related to the UI component system labels Jul 1, 2022
ciampo
ciampo approved these changes Jul 1, 2022
View reviewed changes
Copy link
Contributor

@ciampo ciampo left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Small but good quality of life improvement, thank you! 🚀

@ciampo ciampo merged commit 65dd019 into trunk Jul 1, 2022
@ciampo ciampo deleted the fix/color-picker-mobile branch July 1, 2022 10:57
WordPress Components automation moved this from In progress (owned) ⏳ to Done 🎉 Jul 1, 2022
@github-actions github-actions bot added this to the Gutenberg 13.7 milestone Jul 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ciampo ciampo ciampo approved these changes

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

@chad1008 chad1008 Awaiting requested review from chad1008

Assignees

@mirka mirka

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 13.7
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@mirka @ciampo