RangeControls: Improve UI + UX #19916

ItsJonQ · 2020-01-27T17:56:22Z

Description

This update improves the UI and UX for the RangeControl component with @wordpress/components.

Features ✨

Visual tooltip that displays current value (Tooltip). Follows the "thumb" (circle)
Larger hitbox, making it easier to click/drag
More consistent UI between slider, input, and Reset button
Renders step markers with a simple + custom prop (marks)
Tooltip auto positions top or bottom, based on ideal rendering position
Can easily change the color of the "track" using a color prop
Can customize the tooltip's content with a custom renderProp
Ability to show/hide the accompanying input[type="number"]

Example of step marks + Tooltip rendering:

A11Y Considerations 💪

Uses native input[range] under the hood, which gives us native keyboard interaction handling
Uses aria roles on elements to emphasize changes / reduce noise (via aria-hidden)
Respects reduce-motion to disable all animations

Other Considerations ✌️

RTL support
README file has been updated with additive API changes

How has this been tested?

This update was developed within Storybook. When ready, it was integrated and tested with Gutenberg, local dev.

Voiceover

This component was tested with Mac OS Voiceover, to ensure the value change announcements + keyboard interactions worked as expected.

Mobile

Although, this component only updates the Web version, the changes were tested on both iOS (iPhone 8) and Android (Samsung A50)

iPhone 8 Screen Recording

Note: The inputMode for the number input was set to decimal, which allows for the numpad keyboard to appear for mobile.

Types of changes

CSS

The CSS for the updated component was written with Emotion, leveraging the new/experimental CSS-in-JS system.

Tooltip

The Tooltip that appears to indicate the value is not a @wordpress/components one, but rather, a simple/custom implementation.

Reason

I had originally tried using the Popover/Tooltip from @wordpress/components, but this led to (perceived) performance rendering issues:

https://d.pr/i/a6i3R4

The positioning render cycle was not in sync with the quick changes, which made the experience look and feel really laggy.

As a work-around, I created a simple Tooltip which is currently only being used in the new RangeControl component. (I'm open to changing this approach if anyone has suggestions)

Backwards Compatibility

This update preserves all of the Component APIs. Therefore, it shouldn't break backwards compatibility. It passes all of the previous unit tests and appears to be working as expected when testing within Gutenberg. Component API changes are additive.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR. .

Resolves: #19845

packages/components/src/range-control/README.md

karmatosed · 2020-01-28T22:07:51Z

This is great! A few pieces of feedback to talk about and then happy to review.

Could we have no shadow perhaps as I'm not sure we had before on the circle?
Are we able to increase the size of the arrows on input, I would love that to be bigger.

Also test integration with Gutenberg

Also add comments for hooks and functions

ItsJonQ · 2020-01-29T14:27:55Z

@karmatosed Haii!

Could we have no shadow perhaps as I'm not sure we had before on the circle?

Shadow removed. In doing so, I noticed that there was barely any visual feedback to indicate a focus state. I've adjusted it so that the circle has a blue ring (similar to input fields) when focused:

Are we able to increase the size of the arrows on input, I would love that to be bigger.

That input field is currently using an out of the box number input. How they render is based on your browser x OS.

To make the arrows bigger, we'd need to do quite a bit of custom UI/CSS work. In which case, I'd advise perhaps updating the base TextControl to support this (in a separate PR).

Hope that makes sense!

ItsJonQ · 2020-02-06T17:49:03Z

@youknowriad I just pushed my fix. The issue was the .components-range-control__number className was being used ad-hoc outside of RangeControl, specifically in FontSizePicker.

I've fixed it by adding the style rule back in, with a comment:

// Keeping this className style rule as it is currently being
// used OUTSIDE of the RangeControl component.
.components-range-control__number {
	display: inline-block;
	margin-left: $grid-size;
	font-weight: 500;
	width: 54px;
}

youknowriad · 2020-02-06T17:49:06Z

packages/components/src/range-control/style.scss

@@ -0,0 +1,8 @@
+// Keeping this className style rule as it is currently being
+// used OUTSIDE of the RangeControl component.


I did a quick search and I noticed that it's only used in FontSizePicker.
Maybe we can just move the style there and rename the class to follow our guidelines components-font-size-picker__number

Sounds good to me! I'll do that now

youknowriad

LGTM 👍 Thanks for your hard work here.

Rename rangeControl related ID and classNames to match the structure of FontSizePicker

ItsJonQ · 2020-02-06T19:57:24Z

@youknowriad

Module cssjanus has an incompatible license 'Apache-2.0'

Aww. Does that mean we can't use this package?

ZebulanStanphill · 2020-02-06T20:11:46Z

Just to clarify, Apache 2.0 is compatible with GPLv3, but not earlier versions of the GPL. WordPress is GPLv2+ (which means it could legally switch to GPLv3+ to use this library, but dropping GPLv2 compatibility is probably not a reasonable option here).

If you really want to use this particular library, you could ask the library contributors (there are 12 of them) to consider relicensing or dual-licensing under a license compatible with GPLv2+.

ItsJonQ · 2020-02-06T20:20:00Z

@ZebulanStanphill Thanks for your insight! I'm going to explore alternative solutions now

ItsJonQ · 2020-02-06T21:04:13Z

Updates! I took a look at various solutions, and nothing seemed to feel right. I've opted to remove cssjanus, and wrote a tiny albeit naively simple and basic utility.

cc'ing @youknowriad and @aduth for thoughts!

(Sidenote: My Regex game is quite weak 😂 . Please feel free to improve the implementation!)

It's definitely not as seamless as cssjanus or the postcss auto-generated workflow.
I can see this working short term... but would definitely love something better for the long term.

youknowriad · 2020-02-07T07:37:27Z

Looks like there's some valid e2e test failures.

ItsJonQ · 2020-02-07T15:11:18Z

@youknowriad Ah. Looks like I need to update the E2E selectors for FontSizePicker, since we renamed them

By updating the className for the input number field

ItsJonQ · 2020-02-07T20:30:56Z

Yay! E2E is fixed 😍

aduth · 2020-02-14T20:16:46Z

packages/components/src/range-control/README.md

+		value: 0,
+		label: '0',


If it's a common use case that the label would be the same as value, could we make it optional and fall back to a stringified value?

I'm not sure if it's common yet :).
I can see cases where you may want to render '10%' instead

aduth · 2020-02-14T20:17:58Z

packages/components/src/range-control/README.md

+- Type: `Boolean`
+- Required: No
+- Platform: Web


Would be good to describe the default here, since it might be unexpected that the default is true (that it's an opt-out, not an opt-in).

aduth · 2020-02-14T20:19:34Z

packages/components/src/font-size-picker/style.scss

-	.components-range-control__number {
+	.components-font-size-picker__number {
+		display: inline-block;
+		font-weight: 500;


aduth · 2020-02-14T20:21:25Z

packages/components/src/range-control/index.js

-		currentInput: null,
-	} ),
-] )( RangeControl );
+export const RangeControlNext = compose( withInstanceId )( BaseRangeControl );


We could have dropped compose here rather easily, as it really only provides value when composing multiple:

Suggested change

export const RangeControlNext = compose( withInstanceId )( BaseRangeControl );

export const RangeControlNext = withInstanceId( BaseRangeControl );

aduth · 2020-02-14T20:22:03Z

packages/components/src/range-control/stories/index.js

-import RangeControl from '../';
+import RangeControl from '../index';


aduth · 2020-02-14T20:25:32Z

packages/components/src/range-control/styles/range-control-styles.js

+	top: -4px;
+	width: 1px;
+
+	${markFill};


I see it's not really documented anywhere (other than "when in doubt, space it out"), but: I would expect this should be formatted as:

Suggested change

${markFill};

${ markFill };

@jsnajdr Is this something we should/can integrate into wp-prettier?

Edit: Now I'm confused, because I see the expected spacing in another example below. Is this something that Prettier doesn't have opinions about?

It's a template string with backticks, isn't it? Then Prettier should have an opinion here and should do the `${ spaced }` formatting.

@jsnajdr That's what I would expect as well, but it does not appear to be working correctly.

It looks like a bug in wp-prettier. If the template literal is a styled component, with the styled.span tag, it's treated specially. Thanks for finding and reporting!

I created a wp-prettier fix in this commit: Automattic/wp-prettier@01fd780

A fix was needed for all the template literals that have a recognized format (CSS, GraphQL, HTML...) and where the string itself is being formatted.

I usually release such patches when a new upstream version comes out. In this case, I'll be waiting for prettier@1.19.2.

aduth · 2020-02-14T20:26:34Z

packages/components/src/range-control/tooltip.js

+
+const TOOLTIP_OFFSET_HEIGHT = 32;
+
+export default function SimpleTooltip( {


Can we create an issue to track this technical debt?

aduth · 2020-02-14T20:32:59Z

packages/components/src/utils/rtl.js

+/**
+ * An incredibly basic ltr -> rtl converter for style properties
+ *
+ * @param {Object} ltrStyles
+ * @return {Object} Converted ltr -> rtl styles
+ */
+const convertLtrToRtl = ( ltrStyles = {} ) => {
+	const nextStyles = {};
+
+	for ( const key in ltrStyles ) {
+		const value = ltrStyles[ key ];
+		let nextKey = key;
+		if ( /left/gi.test( key ) ) {
+			nextKey = [ key.replace( 'left', 'right' ) ];
+		}
+		if ( /Left/gi.test( key ) ) {
+			nextKey = [ key.replace( 'Left', 'Right' ) ];
+		}
+		nextStyles[ nextKey ] = value;
+	}
+
+	return nextStyles;
+};


Seems like a thing we'd want unit tests for.

I see at least one possible issue: It won't handle anything short-hand that's still relevant for RTL, e.g.

margin: 0 10px 0 0;

Also, I'm confused about the reassignment of nextKey. It's being replaced into an array? But then the array is being used as the key of an object? An array is not a valid key of an object.

At which point: The RegExp#tests are redundant, because String#replace will do nothing if the pattern is not found.

Also: String#replace only replaces the first instance when provided a string, not all instances. You'd want your regular expression /left/gi for that (key.replace( /left/gi, 'right' ).

ItsJonQ requested review from karmatosed and youknowriad January 27, 2020 17:56

ItsJonQ requested review from ajitbohra, chrisvanpatten, jorgefilipecosta and talldan as code owners January 27, 2020 17:56

ItsJonQ self-assigned this Jan 27, 2020

ItsJonQ added the [Package] Components /packages/components label Jan 27, 2020

ZebulanStanphill reviewed Jan 27, 2020

View reviewed changes

packages/components/src/range-control/README.md Outdated Show resolved Hide resolved

ItsJonQ added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jan 27, 2020

Jon Q added 17 commits January 29, 2020 09:24

Start with new RangeControl component

a05b713

Add tooltipPosition to RangeControl

8f11bca

Improve styles and interactions for new RangeControl

78d2813

Add custom marks support

99e409d

Updated UI for Ranger Control

9ae09dd

Improve layout rendering of RangeControl

bbb0398

Add wrapper for legacy/next RangeControl.

40fac8c

Also test integration with Gutenberg

Adjusting range-control styles

0687ac9

Update RangeControl UI and snapshots

327dbcb

Darken thumb color

7b21afc

Consolidate legacy/next implementation. Update styles

f6aefdf

Update snapshot + remove RangeControlNext test

8deb219

Update README for RangeControl

7afa6db

Add RTL support

165f4d5

Update storybook snapshots

be4847b

Remove unused Range Control SCSS

704e4f6

Remove color prop and shadow. Improve focus interaction

66c86e6

Also add comments for hooks and functions

ItsJonQ force-pushed the try/range-controls-ui-update branch from 03ac853 to 66c86e6 Compare January 29, 2020 14:24

youknowriad reviewed Feb 6, 2020

View reviewed changes

youknowriad approved these changes Feb 6, 2020

View reviewed changes

Migrate on RangeControl styles to FontSizePicker

2cad85d

Rename rangeControl related ID and classNames to match the structure of FontSizePicker

Replace cssjanus with basic rtl solution

4d3c112

Fix e2e test for FontSizePicker

110831f

By updating the className for the input number field

ItsJonQ requested review from nerrad and ntwb as code owners February 7, 2020 16:55

youknowriad merged commit a46cd2f into master Feb 13, 2020

youknowriad deleted the try/range-controls-ui-update branch February 13, 2020 09:04

github-actions bot added this to the Gutenberg 7.6 milestone Feb 13, 2020

This was referenced Feb 13, 2020

RangeControl: Improve initial hover interaction with Tooltip #20219

Merged

RangeControl: Fix Reset and initialPosition #20247

Merged

jeherve mentioned this pull request Feb 19, 2020

Map Block: Add zoom and height settings controls Automattic/jetpack#14706

Merged

pento mentioned this pull request Feb 19, 2020

RangeControl: Missing disabled style and behaviour. #20319

Closed

aduth reviewed Feb 25, 2020

View reviewed changes

aduth mentioned this pull request May 4, 2020

[ Latest Posts ] Max. number of words control doesn't react to keyboard input #21549

Closed

Mamaduka mentioned this pull request Apr 20, 2021

RangeControl: add tick marks to the track when snapping is enabled #12429

Closed

mirka mentioned this pull request Aug 13, 2024

Update: Move item size control to the new view config UI. #64380

Merged

jameskoster mentioned this pull request Aug 13, 2024

RangeControl: Mark positioning is buggy #64481

Closed

ramonjd mentioned this pull request Aug 14, 2024

RangeControl: tweak mark and label absolute positioning #64487

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RangeControls: Improve UI + UX #19916

RangeControls: Improve UI + UX #19916

ItsJonQ commented Jan 27, 2020

karmatosed commented Jan 28, 2020

ItsJonQ commented Jan 29, 2020 •

edited

Loading

ItsJonQ commented Feb 6, 2020

youknowriad Feb 6, 2020

youknowriad Feb 6, 2020

ItsJonQ Feb 6, 2020

youknowriad left a comment

ItsJonQ commented Feb 6, 2020

ZebulanStanphill commented Feb 6, 2020

ItsJonQ commented Feb 6, 2020

ItsJonQ commented Feb 6, 2020

youknowriad commented Feb 7, 2020

ItsJonQ commented Feb 7, 2020

ItsJonQ commented Feb 7, 2020

aduth Feb 14, 2020

ItsJonQ Feb 27, 2020

aduth Feb 14, 2020

aduth Feb 14, 2020

aduth Feb 14, 2020

aduth Feb 14, 2020

aduth Feb 14, 2020

jsnajdr Feb 25, 2020

aduth Feb 25, 2020

jsnajdr Feb 25, 2020

jsnajdr Feb 26, 2020

aduth Feb 14, 2020

aduth Feb 14, 2020

		@@ -0,0 +1,8 @@
		// Keeping this className style rule as it is currently being
		// used OUTSIDE of the RangeControl component.

	export const RangeControlNext = compose( withInstanceId )( BaseRangeControl );
	export const RangeControlNext = withInstanceId( BaseRangeControl );

		import RangeControl from '../';
		import RangeControl from '../index';


		const TOOLTIP_OFFSET_HEIGHT = 32;

		export default function SimpleTooltip( {

RangeControls: Improve UI + UX #19916

RangeControls: Improve UI + UX #19916

Conversation

ItsJonQ commented Jan 27, 2020

Description

Features ✨

A11Y Considerations 💪

Other Considerations ✌️

How has this been tested?

Voiceover

Mobile

Types of changes

CSS

Tooltip

Backwards Compatibility

Checklist:

karmatosed commented Jan 28, 2020

ItsJonQ commented Jan 29, 2020 • edited Loading

ItsJonQ commented Feb 6, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

ItsJonQ commented Feb 6, 2020

ZebulanStanphill commented Feb 6, 2020

ItsJonQ commented Feb 6, 2020

ItsJonQ commented Feb 6, 2020

youknowriad commented Feb 7, 2020

ItsJonQ commented Feb 7, 2020

ItsJonQ commented Feb 7, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ItsJonQ commented Jan 29, 2020 •

edited

Loading