[Picker Button]: No styling for `invalid` state
najikahalsema opened this issue · 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
- Go here
- Observe that though
<sp-picker-button>has theinvalidattribute, 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 from spectrum contributions
Image from Spectrum CSS Combobox documentation. Here, the picker button has a class of Combobox-button.
Screenshots
from @paulodetarsofm
Environment
- Version of the impacted component(s):
- Browser(s) and OS(s):
Additional context
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
spectrum-css/components/combobox/index.css
Lines 274 to 275 in ce9187d
Would using these for combobox and date-picker address the concerns about invalid styling for picker button?
cc: @pfulton
@najikahalsema just circling back to this and the comment from @jenndiaz above. Is there something else we could do for you here?
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.