material-components-android icon indicating copy to clipboard operation
material-components-android copied to clipboard

[Slider] Unclear redesign specs

Open patzly opened this issue 1 year ago • 1 comments

Description:

Hi, I was happy that a new slider design was released, but I found many unclear and contradictory details in the design specs and resulting unclear details in the 1.12.0-alpha03 implementation. I already thought about giving feedback to the design team but there seems to be no easy way to do that, so as the Material Android team also has connections to the designers and because the unclear guidelines also affect the MDC implementation I hope this issue can lead to improved specs and thus an improved implementation.

Issues in the specs:

  • Specs in the new specs table are a bit confusing (duplicated tokens with different names, unclear naming, tokens with unclear usage), e. g. what is "Enabled / Label text" and why is it set to onPrimary? If it would refer to the rounded label displayed while the handle is dragged, onPrimary would be an incorrect value. Another example: What is "Enabled / Slider with tick marks container size" and all other container tokens? Slider doesn't have a container I think.

  • Stop indicators are supposed to offer enough contrast at the end of the slider, but with color roles, primary should not be placed on primaryContainer (and for active stop indicators primaryContainer on primary) as the container color switches in dynamic contrast and becomes very similar to primary which destroys the contrast. I think only onPrimaryContainer should be placed on primaryContainer to preserve contrast in all dynamic contrast variations. Otherwise the color/alpha combinations of both tick marks and stop indicator should be tested in all contrast states to make sure it looks good, at the moment it only looks correct in the default contrast level, in medium and high it's not very accessible:

    Screenshot_20240209-171906 Screenshot_20240209-171916

  • Distance from track start/end to the first/last tick mark varies in every illustration. Dimension specs mention 4dp but in a lot of the images the dots are centered in the corner radius which would be more than 4dp. Some images show both distance variantions at the same time with one slider using 4dp and another having a centered tick mark, or in the dimension sheet the left image shows the 4dp distance and the right image has a centered tick mark.

    lqbz9nqd-1p-sliders-layout (example)

Resulting issues in the implementation:

  • Instead of 4dp distance, the position of the first/last tick is calculated with corner radius which results in a radius-centered tick, where the specs currently mention 4dp as distance
  • default stop indicator color results in very low contrast in different dynamic contrast modes, see previous screenshots
  • default tick size is incorrect, in the specs table "stop indicator" refers to all tick marks if I understand it correctly so instead of 2dp the ticks would also be 4dp in size

Would be glad if the new guidelines could get reviewed and fixed/improved so that the implementation and default colors/dimens are more clear!

Expected behavior: Up to the design team to decide :)

Material Library version: 1.12.0-alpha03

patzly avatar Feb 09 '24 16:02 patzly

@paulfthomas can you take a look at the implementation issues and raise the spec issues with design?

dsn5ft avatar Feb 12 '24 16:02 dsn5ft