Skip to content

Commit 6cc68f0

Browse files
reidbarberreidbarber
authored
Remove 'invalid' focus styles from focused input fields (#3384)
* add quiet invalid/valid Form stories * remove invalid focus styles
1 parent 07f99e3 commit 6cc68f0

File tree

4 files changed

+59
-25
lines changed

4 files changed

+59
-25
lines changed

‎packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ governing permissions and limitations under the License.
4545
&.spectrum-InputGroup--invalid {
4646
.spectrum-FieldButton,
4747
.spectrum-InputGroup-input {
48-
border-color: var(--spectrum-dropdown-border-color-error);
48+
border-color: var(--spectrum-dropdown-border-color-key-focus);
4949
}
5050
}
5151
}
@@ -64,7 +64,7 @@ governing permissions and limitations under the License.
6464
&.spectrum-InputGroup--invalid {
6565
.spectrum-FieldButton,
6666
.spectrum-InputGroup-input {
67-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
67+
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);
6868
}
6969
}
7070
}
@@ -119,8 +119,9 @@ governing permissions and limitations under the License.
119119
}
120120

121121
&.spectrum-InputGroup--invalid {
122-
.spectrum-FieldButton {
123-
border-color: var(--spectrum-textfield-border-color-error);
122+
.spectrum-FieldButton,
123+
.spectrum-InputGroup-input {
124+
border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
124125
}
125126
}
126127
}
@@ -137,11 +138,11 @@ governing permissions and limitations under the License.
137138

138139
&.spectrum-InputGroup--invalid {
139140
.spectrum-InputGroup-input {
140-
box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
141+
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
141142
}
142143

143144
.spectrum-FieldButton {
144-
box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
145+
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
145146
}
146147
}
147148
}
@@ -166,32 +167,32 @@ governing permissions and limitations under the License.
166167
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);
167168

168169
&.spectrum-InputGroup--invalid {
169-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
170+
box-shadow: 0 0 0 1px var(--spectrum-textfield-quiet-border-color-key-focus);
170171

171172
.spectrum-FieldButton {
172-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
173+
box-shadow: 0 0 0 1px var(--spectrum-textfield-quiet-border-color-key-focus);
173174
}
174175
}
175176
}
176177

177178
&.spectrum-InputGroup--invalid {
178179
.spectrum-InputGroup-input {
179-
border-color: var(--spectrum-dropdown-border-color-error) !important;
180+
border-color: var(--spectrum-dropdown-border-color-error);
180181
}
181182

182183
/* Focus ring: When one of the inputs or the button has keyboard focus, render the focus ring border around the entire input group by styling an adjacent descendant element. */
183184
&:focus-ring {
184185
.spectrum-FieldButton {
185-
border-color: var(--spectrum-dropdown-border-color-error);
186-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
186+
border-color: var(--spectrum-dropdown-border-color-key-focus);
187+
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);
187188
}
188189
}
189190
.spectrum-FieldButton {
190191
border-color: var(--spectrum-dropdown-border-color-error);
191192
&.spectrum-FieldButton--invalid {
192193
&:focus-ring {
193-
border-color: var(--spectrum-dropdown-border-color-error);
194-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
194+
border-color: var(--spectrum-dropdown-border-color-key-focus);
195+
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);
195196
}
196197
}
197198
}
@@ -203,15 +204,15 @@ governing permissions and limitations under the License.
203204
&.spectrum-InputGroup--invalid {
204205
.spectrum-FieldButton {
205206
box-shadow: none;
206-
border-color: var(--spectrum-dropdown-border-color-error);
207+
border-color: var(--spectrum-dropdown-border-color-key-focus);
207208
&.spectrum-FieldButton--invalid {
208209
&:focus-ring {
209-
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-error);
210+
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus);
210211
}
211212
}
212213
}
213214
&:focus-ring {
214-
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-error);
215+
box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus);
215216
}
216217
}
217218
}

‎packages/@adobe/spectrum-css-temp/components/stepper/skin.css‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,15 @@ governing permissions and limitations under the License.
110110
}
111111
&.is-invalid {
112112
&.focus-ring, &:focus-ring {
113-
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error);
113+
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus);
114+
}
115+
&.focus-ring, &:focus-ring, &.is-focused {
116+
.spectrum-Stepper-input {
117+
border-color: var(--spectrum-textfield-border-color-key-focus);
118+
}
119+
.spectrum-Stepper-button {
120+
border-color: var(--spectrum-textfield-border-color-key-focus);
121+
}
114122
}
115123
.spectrum-Stepper-input {
116124
border-color: var(--spectrum-textfield-border-color-error);
@@ -173,7 +181,15 @@ governing permissions and limitations under the License.
173181
}
174182
&.is-invalid {
175183
&.focus-ring, &:focus-ring {
176-
box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-error);
184+
box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus);
185+
}
186+
&.is-focused {
187+
.spectrum-Stepper-input {
188+
border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
189+
}
190+
.spectrum-Stepper-button {
191+
border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
192+
}
177193
}
178194
.spectrum-Stepper-input {
179195
border-color: var(--spectrum-textfield-quiet-border-color-error);

‎packages/@adobe/spectrum-css-temp/components/textfield/skin.css‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,17 +84,22 @@ governing permissions and limitations under the License.
8484
border-color: var(--spectrum-textfield-border-color-error);
8585

8686
&:hover {
87-
border-color: var(--spectrum-textfield-border-color-error-hover);
87+
border-color: var(--spectrum-textfield-border-color-key-focus);
8888
}
8989

9090
&:active {
91-
border-color: var(--spectrum-textfield-border-color-error-down);
91+
border-color: var(--spectrum-textfield-border-color-key-focus);
92+
}
93+
94+
&:focus,
95+
&.is-focused {
96+
border-color: var(--spectrum-textfield-border-color-key-focus);
9297
}
9398

9499
&:focus-ring { /* might break things due to pre-defined focus-ring */
95100
&:not(:active) {
96-
border-color: var(--spectrum-textfield-border-color-error);
97-
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error);
101+
border-color: var(--spectrum-textfield-border-color-key-focus);
102+
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus);
98103
}
99104
}
100105
}
@@ -133,18 +138,22 @@ governing permissions and limitations under the License.
133138
.spectrum-Textfield.spectrum-Textfield--invalid & {
134139
border-color: var(--spectrum-textfield-border-color-error);
135140

141+
&:focus {
142+
border-color: var(--spectrum-textfield-border-color-key-focus);
143+
}
144+
136145
&:focus-ring { /* might break things due to pre-defined focus-ring */
137146
&:not(:active) {
138-
border-color: var(--spectrum-textfield-border-color-error);
139-
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error);
147+
border-color: var(--spectrum-textfield-border-color-key-focus);
148+
box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus);
140149
}
141150
}
142151
}
143152

144153
.spectrum-Textfield--quiet.spectrum-Textfield--invalid & {
145154
&:focus-ring { /* might break things due to pre-defined focus-ring */
146155
&:not(:active) {
147-
box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
156+
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
148157
}
149158
}
150159
}

‎packages/@react-spectrum/form/stories/Form.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,14 @@ storiesOf('Form', module)
181181
'validationState: valid',
182182
() => render({validationState: 'valid'})
183183
)
184+
.add(
185+
'validationState: invalid, isQuiet: true',
186+
() => render({validationState: 'invalid', isQuiet: true})
187+
)
188+
.add(
189+
'validationState: valid, isQuiet: true',
190+
() => render({validationState: 'valid', isQuiet: true})
191+
)
184192
.add(
185193
'form with reset',
186194
() => <FormWithControls />

0 commit comments

Comments
 (0)