Skip to content
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

[Picker Button]: No styling for invalid state #2422

Open
najikahalsema opened this issue Jan 12, 2024 · 3 comments
Open

[Picker Button]: No styling for invalid state #2422

najikahalsema opened this issue Jan 12, 2024 · 3 comments
Assignees
Labels
bug Results from a bug in the CSS implementation

Comments

@najikahalsema
Copy link
Collaborator

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 najikahalsema added the bug Results from a bug in the CSS implementation label Jan 12, 2024
@jenndiaz
Copy link
Contributor

jenndiaz commented Jan 22, 2024

@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

&.is-invalid:not(:disabled, .spectrum-PickerButton--quiet) {
--mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)));

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

cc: @pfulton

@pfulton
Copy link
Collaborator

pfulton commented Feb 15, 2024

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

@najikahalsema
Copy link
Collaborator Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Results from a bug in the CSS implementation
Projects
None yet
Development

No branches or pull requests

4 participants