UnitControl: Update unit dropdown design #42000

mirka · 2022-06-28T09:53:36Z

Part of #41973

What?

Updates the unit dropdown to the new designs for the 40px size variant.

Why?

To get our components closer to the mockups.

How?

Add conditional styles for the dropdown depending on the size variant.

Testing Instructions

npm run storybook:dev
See the stories for UnitControl.

Known issues

UnitControl: Unit dropdown text is not centered in Safari #42650

Screenshots or screencast

CleanShot.2022-07-27.at.00.09.00.mp4

When the unit isn't a dropdown (i.e. single unit case)

mirka · 2022-06-28T10:07:00Z

@pablohoneyhoney @jameskoster Hi 👋 Can we get some guidance on the interaction details (touch target boundary, hover/focus styles) of this unit dropdown? For reference, these are the hover/focus styles we had for the previous design:

Similarly, we'll soon need guidance for the new step button designs in the NumberControl as well. (Not in this PR though)

jameskoster · 2022-06-28T11:27:54Z

Assuming the following anatomy:

Where state styling is informed by existing components (InputControl and Button), we'd end up with the following:

Here's a gif demonstrating the interactions:

To me this seems like a reasonable place to start that avoids changing other components (better handled separately). But I'll defer to Pablo on how to proceed.

mirka · 2022-06-28T11:33:00Z

packages/components/src/unit-control/styles/unit-control-styles.ts

@@ -96,6 +119,7 @@ export const UnitSelect = styled.select< SelectProps >`
 		cursor: pointer;
 		border: 1px solid transparent;
 		height: 100%;
+		font-family: inherit;


Similar to #38969, this was incorrectly rendering in Arial (per Chrome user agent style).

mirka · 2022-06-28T11:34:04Z

packages/components/src/unit-control/types.ts

-	/**
-	 * Size of the control option. Supports "default" and "small".
-	 *
-	 * @default 'default'
-	 */
-	size?: SelectSize;


Moved to a direct import from InputControlProps so it doesn't get out of date.

jameskoster · 2022-06-29T10:09:29Z

An update to the concept above:

It looks like I was using a slightly outdated Figma component with the wrong button size. We have two options for the unit button:

Use the Tertiary button variant (36px height)
Use the Small button size (24px height)

Tertiary

Small

Thinking ahead to the Stepper component mentioned above, I think it makes sense to use the Tertiary variant because its dimensions match the Icon button:

The only small detail we'll need to consider is the color difference:

mirka · 2022-07-23T00:10:16Z

@jameskoster Now for the final touches ✨ Here it is with the exact same hover/focus styles as Tertiary Button:

CleanShot.2022-07-23.at.08.38.10.mp4

(Tertiary button has a 1px inset hover shadow, and a 1.5px outset focus shadow.)

It's a bit cramped. I'll note that, at least from a technical library maintenance standpoint, we don't necessarily have to follow the Button component sizes/styles — we can easily make a new component specifically to use inside text fields.

There are a few ways we can tweak the text field button, like:

Make it slightly smaller than 36px.
Change the hover/focus styles.

Feel free to write down the styles you want, or push the changes directly to this branch (I can take care of any final refactoring that may be necessary).

Known issues

The text-align bug in Safari (UnitControl: Unit dropdown text is not centered in Safari #42650) is more noticeable in this new design 🥲

jameskoster · 2022-07-25T09:43:41Z

Hmm yeah that is a bit tight isn't it. Especially hovering the unit button after focussing the input.

Looking at the 'Remove color' button from global styles (which is somewhat similar in terms of general UI) we can probably try small icon Buttons:

Sorry for flip-flopping 😓

mirka · 2022-07-25T22:09:30Z

Sorry for flip-flopping 😓

No problem at all 😄

Any preferences on how to deal with overflows? A 24px square is pretty small and will already overflow with common units like em/rem.

We can for example set some kind of max-width, and grow to the longest option label within that max.

CleanShot.2022-07-26.at.07.07.16.mp4

This means that most UnitControls will have rectangular dropdown buttons, and the proportions of those rectangles will vary depending on the longest available option in that UnitControl. That subtle variance across UnitControls may not be desirable. In that case it might be better to just set all dropdown widths to the maximum width regardless of the option lengths.

ciampo · 2022-07-26T10:26:03Z

In that case it might be better to just set all dropdown widths to the maximum width regardless of the option lengths.

That would be the best choice, IMO (plus maybe a conservative, safety max-width in case the unit label is extremely long?)

jameskoster · 2022-07-26T10:44:09Z

Oh, I think it would be ok for the button to hug the current value, probably with a 24px min-width, and a max-width as @ciampo suggested.

mirka · 2022-07-26T15:13:05Z

packages/components/src/unit-control/stories/index.tsx

-		size: {
-			control: { type: 'select' },
-		},


Removed this explicit config because Storybook will use a radio by default.

mirka · 2022-07-26T15:13:41Z

packages/components/src/unit-control/stories/index.tsx

@@ -54,16 +51,14 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	const [ value, setValue ] = useState< string | undefined >( '10px' );

 	return (
-		<div style={ { maxWidth: '100px' } }>


Removed these max-width containers in the stories because we need to know whether the width is unconstrained by default, and we need to be able to test __unstableInputWidth.

mirka · 2022-07-26T15:36:34Z

Thanks y'all, I've updated the OP with a screen recording of the latest styles. This PR is now ready for final review.

The Safari issue (#42650) is pretty annoying. I don't have the appetite to address it in this PR, but we might eventually need to move to a custom select implementation if we want the centered design in Safari. It's unlikely that the bug will be fixed in Safari itself — that bug report just celebrated its 12th birthday 😇

ciampo

Code changes LGTM (I just left a few minor comments)

Kapture.2022-07-26.at.18.38.33.mp4

I'll leave it up to @jameskoster for the final approval

packages/components/src/unit-control/styles/unit-control-styles.ts

ciampo · 2022-07-26T16:42:51Z

packages/components/src/unit-control/styles/unit-control-styles.ts

+			margin-inline-end: ${ space( 2 ) };
+			padding: ${ space( 1 ) };
+			color: ${ COLORS.ui.theme };
+			font-size: 13px;


Thought: I'd love to start standardizing font-sizes across components and be able to provide a "typography palette" through the various components from the library (e.g Heading, Text..)

packages/components/src/unit-control/styles/unit-control-styles.ts

jameskoster · 2022-07-27T11:53:35Z

Is it possible to render the button at a width that simply hugs the selected value? At the moment width seems to be based on the longest label in the list of options, which can have some awkward manifestations when there's a mixture of short/long labels:

Something like this would be a bit better:

That would enable us to have a greater max-width value as well which I think could be valuable. 48px is a bit tight.

mirka · 2022-07-27T12:23:00Z

Is it possible to render the button at a width that simply hugs the selected value?

It will be possible if we move to a custom select implementation, which will allow us to fix the Safari issue as well. My recommendation is to merge for now with the current implementation, and move that to a follow-up issue since the task scope will be a bit big. (Unless you feel it's a blocker.)

That would enable us to have a greater max-width value as well which I think could be valuable. 48px is a bit tight.

Yes I was thinking about this too, and it will take a bit of fiddling to get the logic right. The complexity is in maintaining a reasonable flex width balance between the prefix, number, and suffix elements. For example, in a tight context like the Border control:

It might even be that we'll need to allow the consumer to customize the width via props, so it makes sense in different contexts.

mirka · 2022-07-27T12:26:21Z

📌 I'm going to hold off on merging this while I look into #42717 first. The unit dropdown looks fine in Storybook but completely breaks down in WP 😭

ciampo · 2022-07-27T12:34:19Z

Yes I was thinking about this too, and it will take a bit of fiddling to get the logic right. The complexity is in maintaining a reasonable flex width balance between the prefix, number, and suffix elements.

Yeah, I can totally see that. I would personally try to leverage flexbox and model an elastic behavior

📌 I'm going to hold off on merging this while I look into #42717 first. The unit dropdown looks fine in Storybook but completely breaks down in WP 😭

Good catch

jameskoster · 2022-07-27T12:52:07Z

Unless you feel it's a blocker.

I don't think so :)

We need to know whether the width is unconstrained by default, and we need to be able to test `__unstableInputWidth`.

mirka · 2022-08-01T07:12:20Z

Ok, I've fixed the #42717 problem, the unit dropdown now looks the same in isolated Storybook and WP 👍

This is now ready for final review.

ciampo

LGTM 🚀

We can look into refining component in follow-ups:

Is it possible to render the button at a width that simply hugs the selected value?

It will be possible if we move to a custom select implementation, which will allow us to fix the Safari issue as well. My recommendation is to merge for now with the current implementation, and move that to a follow-up issue since the task scope will be a bit big. (Unless you feel it's a blocker.)

That would enable us to have a greater max-width value as well which I think could be valuable. 48px is a bit tight.

Yes I was thinking about this too, and it will take a bit of fiddling to get the logic right. The complexity is in maintaining a reasonable flex width balance between the prefix, number, and suffix elements. For example, in a tight context like the Border control:

It might even be that we'll need to allow the consumer to customize the width via props, so it makes sense in different contexts.

mirka · 2022-08-02T03:38:03Z

Follow-ups moved to #42879

mirka added the [Package] Components /packages/components label Jun 28, 2022

mirka self-assigned this Jun 28, 2022

mirka added this to In progress (owned) ⏳ in WordPress Components via automation Jun 28, 2022

mirka requested review from pablohoneyhoney, jameskoster and ciampo June 28, 2022 10:07

mirka commented Jun 28, 2022

View reviewed changes

mirka mentioned this pull request Jun 28, 2022

ToggleGroupControl: Add size variants #42008

Merged

mirka force-pushed the update/unit-control-dropdown branch from 345a3e1 to 505c5d5 Compare July 22, 2022 23:40

mirka commented Jul 26, 2022

View reviewed changes

mirka marked this pull request as ready for review July 26, 2022 15:17

mirka requested a review from ajitbohra as a code owner July 26, 2022 15:17

ciampo reviewed Jul 26, 2022

View reviewed changes

mirka mentioned this pull request Jul 26, 2022

FontSizePicker: Add 40px size variant #42716

Merged

This was referenced Jul 27, 2022

Storybook: Add global CSS switcher #42747

Merged

Typography Tools: Tracking #34345

Closed

mirka added 11 commits August 1, 2022 15:09

UnitControl: Update unit dropdown design

7c682f6

Get size type from ancestor

460f419

Remove dropdown color when single unit

b1b82d7

Remove unnecessary control type config

effbb57

Fixup eslint issue

a9b7b2a

Update large unit styles

4ac36b2

Decrease size to 24px

20ce800

Remove max width from stories

3d80824

We need to know whether the width is unconstrained by default, and we need to be able to test `__unstableInputWidth`.

Apply overflow handling

cf7d0fe

Add changelog

b2c5a36

Add back handling for forms.css

aa7bf84

mirka force-pushed the update/unit-control-dropdown branch from 1ed6dfc to aa7bf84 Compare August 1, 2022 07:05

mirka requested a review from ciampo August 1, 2022 07:12

ciampo approved these changes Aug 1, 2022

View reviewed changes

mirka merged commit 56a185a into trunk Aug 2, 2022

WordPress Components automation moved this from In progress (owned) ⏳ to Done 🎉 Aug 2, 2022

mirka deleted the update/unit-control-dropdown branch August 2, 2022 03:07

github-actions bot added this to the Gutenberg 13.9 milestone Aug 2, 2022

mirka mentioned this pull request Aug 2, 2022

UnitControl: Improve handling of long values in unit select #42879

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UnitControl: Update unit dropdown design #42000

UnitControl: Update unit dropdown design #42000

mirka commented Jun 28, 2022 •

edited

mirka commented Jun 28, 2022

jameskoster commented Jun 28, 2022

mirka Jun 28, 2022

mirka Jun 28, 2022

jameskoster commented Jun 29, 2022

mirka commented Jul 23, 2022

jameskoster commented Jul 25, 2022

mirka commented Jul 25, 2022

ciampo commented Jul 26, 2022

jameskoster commented Jul 26, 2022

mirka Jul 26, 2022

mirka Jul 26, 2022

mirka commented Jul 26, 2022

ciampo left a comment

ciampo Jul 26, 2022

jameskoster commented Jul 27, 2022

mirka commented Jul 27, 2022

mirka commented Jul 27, 2022

ciampo commented Jul 27, 2022

jameskoster commented Jul 27, 2022

mirka commented Aug 1, 2022

ciampo left a comment

mirka commented Aug 2, 2022

UnitControl: Update unit dropdown design #42000

UnitControl: Update unit dropdown design #42000

Conversation

mirka commented Jun 28, 2022 • edited

What?

Why?

How?

Testing Instructions

Known issues

Screenshots or screencast

When the unit isn't a dropdown (i.e. single unit case)

mirka commented Jun 28, 2022

jameskoster commented Jun 28, 2022

mirka Jun 28, 2022

Choose a reason for hiding this comment

mirka Jun 28, 2022

Choose a reason for hiding this comment

jameskoster commented Jun 29, 2022

Tertiary

Small

mirka commented Jul 23, 2022

Known issues

jameskoster commented Jul 25, 2022

mirka commented Jul 25, 2022

ciampo commented Jul 26, 2022

jameskoster commented Jul 26, 2022

mirka Jul 26, 2022

Choose a reason for hiding this comment

mirka Jul 26, 2022

Choose a reason for hiding this comment

mirka commented Jul 26, 2022

ciampo left a comment

Choose a reason for hiding this comment

ciampo Jul 26, 2022

Choose a reason for hiding this comment

jameskoster commented Jul 27, 2022

mirka commented Jul 27, 2022

mirka commented Jul 27, 2022

ciampo commented Jul 27, 2022

jameskoster commented Jul 27, 2022

mirka commented Aug 1, 2022

ciampo left a comment

Choose a reason for hiding this comment

mirka commented Aug 2, 2022

mirka commented Jun 28, 2022 •

edited