Visibility of RGBA values on gradient

[MarkS99]

When adding a gradient to a block, the RGBA values can not be seen in the

div.components-popover__content

 .components-color-picker__inputs-fields

See example image on Google Drive:
​https://drive.google.com/file/d/114wEYZFYiaydsXyptfZVwp1wYnORShsS/view?usp=sharing
Problem occurs in WP Version 5.5-beta-2, not tested earlier versions.
System running OSX and tested in Chrome, Safari & Firefox. Not tested Windows browsers.

[sabernhardt]

RGBA inputs in Windows Chrome (hidden increment buttons show on hover/focus)

[sabernhardt]

HSLA inputs in Windows Firefox (increment buttons show automatically)

[sabernhardt]

visually-hidden legend

[sabernhardt]

@MarkS99 Thanks for the report!

It occurs on Windows browsers, too. The inputs are not large enough for the numbers plus the number-input increment buttons.

The simplest fix might be to add a min-width on the container.

.components-color-picker__inputs-wrapper {
    min-width: 25em;
}

I like 25em for larger screens (medium breakpoint up), though it might need to be 20em or a similar pixel value for narrower screens.

Also, the legends do not mention the alpha channel. Maybe they only need the "A" added to each abbreviation, but something like "Color value in RGB with alpha transparency" might give more meaning. The "a" input label is not as (wait for it) clear as it could be.

[desrosj]

I’m going to move this to 5.5 because this is a particularly nasty little issue that pretty much renders these inputs useless, and it’s not yet clear if this is a regression in trunk or a preexisting issue. If anyone that has better knowledge of this and feels that this is not realistic, feel free to put to future release.

[whyisjake]

I think we need to get this issue moved over to the Gutenberg repo. Let's make sure to tag Backport to WordPress core so that this lands in 5.5.

[sabernhardt]

The Gutenberg issue is opened:
​https://github.com/WordPress/gutenberg/issues/24201

[ocean90]

@sabernhardt Thanks for the issue, resolving as reported upstream.