spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

[Picker Button]: No styling for `invalid` state

Open najikahalsema opened this issue 2 years ago • 3 comments

Description

The CSS for the picker button doesn't seem to have any styling specification for an invalid state. While Spectrum doesn't document this usage specifically for a picker button, I would wager that an invalid picker styling also begets an invalid style for the picker button, too, for components like Combobox or a Date Picker.

Steps to reproduce

  1. Go here
  2. Observe that though <sp-picker-button> has the invalid attribute, the styling is the same as it would be by default.

Expected behavior

The picker button should have a red border when it's invalid:

image image from spectrum contributions

image Image from Spectrum CSS Combobox documentation. Here, the picker button has a class of Combobox-button.

Screenshots

image from @paulodetarsofm

Environment

  • Version of the impacted component(s):
  • Browser(s) and OS(s):

Additional context

najikahalsema avatar Jan 12 '24 18:01 najikahalsema

@najikahalsema

We are currently implementing the invalid styling for picker button with a class associated with the parent component, so in the case of an invalid combo box the HTML is:

<button tabindex="-1" class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--uiicononly spectrum-PickerButton--quiet spectrum-PickerButton--right spectrum-Combobox-button is-invalid" aria-haspopup="listbox">

And the invalid border color is set with spectrum-Combobox-button https://github.com/adobe/spectrum-css/blob/ce9187dd3538a624c92258ae8eb040b0856c288e/components/combobox/index.css#L274-L275

Would using these for combobox and date-picker address the concerns about invalid styling for picker button?

cc: @pfulton

jenndiaz avatar Jan 22 '24 15:01 jenndiaz

@najikahalsema just circling back to this and the comment from @jenndiaz above. Is there something else we could do for you here?

pfulton avatar Feb 15 '24 21:02 pfulton

This works, but there's another inconsistency. I came across re: the styling of the textfield and the picker button when focusing the combobox. I just haven't been able to articulate it yet. I can make another issue when the time comes, though! Thanks for pinging me.

najikahalsema avatar Feb 15 '24 21:02 najikahalsema