Skip to content

Commit

Permalink
fix(styles): fix issue where field focus ring did not provide enough …
Browse files Browse the repository at this point in the history
…contrast (#1489)
  • Loading branch information
scurker authored May 23, 2024
1 parent cdbae48 commit adefb4a
Show file tree
Hide file tree
Showing 9 changed files with 8 additions and 7 deletions.
Binary file modified e2e/screenshots/combobox-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/dark--combobox-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/dark--select-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/dark--textfield-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/select-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/screenshots/textfield-error-.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions packages/styles/forms.css
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,7 @@ textarea.Field--has-error,
[role='listbox'].Field--has-error,
[role='spinbutton'].Field--has-error {
border: 1px solid var(--field-border-color-error);
box-shadow: 0 0 0 1px var(--field-border-color-error),
inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.Checkbox__overlay.Field--has-error {
Expand All @@ -168,6 +167,8 @@ textarea.Field--has-error:hover,
[role='listbox'].Field--has-error:hover,
[role='spinbutton'].Field--has-error:hover {
border-color: var(--field-border-color-error-hover);
box-shadow: 0 0 0 1px var(--field-border-color-error),
inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

input.Field--has-error:focus,
Expand Down
7 changes: 4 additions & 3 deletions packages/styles/select.css
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,21 @@

.Field__select--wrapper select:invalid,
.Field--has-error select {
border-width: var(--space-quarter);
border-width: 1px;
border-color: var(--field-border-color-error);
}

.Field__select--wrapper.Field--has-error select:hover {
border-color: var(--field-border-color-error-hover);
box-shadow: 0 0 0 1px var(--field-border-color-error-hover);
}

.Field__select--wrapper select:invalid:focus,
.Field__select--wrapper.Field--has-error select:focus {
border-width: var(--space-quarter);
border-color: var(--field-border-color-error);
box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
var(--field-border-color-error-focus-glow) 0 0 4px 0;
var(--field-border-color-error) 0 0 0 1px,
var(--field-border-color-error-focus-glow) 0 0 5px 0;
}

.Field__select--wrapper select:invalid:focus:hover,
Expand Down
3 changes: 1 addition & 2 deletions packages/styles/text-field-wrapper.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@

.TextFieldWrapper--error {
border: 1px solid var(--text-field-wrapper-error-border-color);
box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.TextFieldWrapper--error:focus-within {
Expand Down

0 comments on commit adefb4a

Please sign in to comment.