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

Used fallBack styles to compute font size slider initial value. #6088

Merged
merged 1 commit into from Apr 11, 2018

Conversation

@jorgefilipecosta
Member

jorgefilipecosta commented Apr 9, 2018

Description

This PR changes the RangeSlider to have a new prop called initialPosition. If this prop is set, when no value is passed to the slider, the slider appears with the given start value.
withFallbackStyles is used to get the font size of the paragraph if it is not known. Fallback value is used as the initial position in the slider.
As we use compute styles, even if the paragraph is nested and a CSS rule changes the size of the nested paragraph, the default value in the slider should be right.

Before the slider was in the middle so when the user changed the slider it would make the size very big and different from what it was. Now the slider starts at the correct size so when the user slides the behavior looks more correct.

How Has This Been Tested?

Add paragraph verify the slider starting position corresponds to the actual font size of the paragraph.

Screenshots (jpeg or gifs if applicable):

After:
apr-09-2018 18-31-11
Before:
apr-09-2018 18-38-12

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Apr 10, 2018

Love this. Works as advertised. 👍 👍

For context, this was my only remaining issue with using the slider for the font size — that the initial state was just "centered". It didn't properly communicate "unset", and it was just jarring when you started dragging and you'd immediately jump to a giant size. Nice work.

@gziolo

This comment has been minimized.

Member

gziolo commented Apr 10, 2018

It all works pretty well I found one small issue. When using Reset button, it doesn't always return to the initial value. We probably need to ensure it is never updated in the state.

Code wise everything looks good aside from this little thing. I hope it isn't hard to fix.

@jorgefilipecosta

This comment has been minimized.

Member

jorgefilipecosta commented Apr 10, 2018

Hi @jasmussen and @gziolo thank you for the reviews.

When using Reset button, it doesn't always return to the initial value. We probably need to ensure it is never updated in the state.

Nice catch, I was able to reproduce the behavior when the paragraph was already saved with a specific size doing reset was not moving the slider, I applied a fix and I think the problem is now solved.

@gziolo gziolo added this to the 2.7 milestone Apr 11, 2018

@gziolo

gziolo approved these changes Apr 11, 2018

Everything works perfectly fine with the recent code update. Thanks for solving this subtle but very annoying UX issue 👏

@jorgefilipecosta jorgefilipecosta merged commit bd55363 into master Apr 11, 2018

2 checks passed

codecov/project 44.56% (+0.07%) compared to 9f473f4
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the update/fontSize-slider-initial-value branch Apr 11, 2018

@aduth

This comment has been minimized.

Member

aduth commented Apr 18, 2018

Should this have been called defaultValue for consistency with React?

https://reactjs.org/docs/uncontrolled-components.html#default-values

@jorgefilipecosta

This comment has been minimized.

Member

jorgefilipecosta commented Apr 18, 2018

Hi @aduth,

Should this have been called defaultValue for consistency with React?

The RangeControl has "two inputs" a slider and an input text with the value. The initialPosition prop is just used to position the slider in a given place when no value was set. It is not exactly a default value as for example the input text still shows no value. Using defaultValue may create the expectation that we are in the presence of a normal defaultValue.

@aduth

This comment has been minimized.

Member

aduth commented Apr 18, 2018

Okay, that makes sense. It wasn't entirely clear from the documentation that this is more of a visual effect, not an actual value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment