Skip to content

Commit 0a4206a

Browse files
mfranzkemfranzke
authored
fix: data-variant overwrites (in)valid border colors (#422)
* chore: simplified this attribute * fix: overwriting form stylings for errors * feat: added new programmatic invalid example * refactor: added the correct styling for invalid selects * Update select.scss * refactor: generalizing the form validations * fix: corrected this previously necessary declaration * Revert "fix: corrected this previously necessary declaration" This reverts commit 25e3473. * refactor: we need to differentiate in between the different form elements * refactor: enabled floating labels again * chore: make this more generic * chore: make this more generic * refactor: this obviously was only related to floating labels and not form validation * refactor: modern floating label for selects w/o necessary required on the select, yeah ! * refactor: reunited the form validation SCSS placeholder we've found another way to support floating labels on selects w/o having them as a required element * Revert "refactor: reunited the form validation SCSS placeholder" This reverts commit 48a1acb. * style: further optimizations
1 parent 3855da9 commit 0a4206a

12 files changed

+80
-47
lines changed

‎source/_patterns/01-elements/_form-elements.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,38 @@
3333
}
3434
}
3535

36+
// Validation
37+
// We need to differentiate here for select elements, that we couldn't handle by :placeholder-shown
38+
// TODO: maybe we could totally restructure this, work with a :not(select) instead, differentiate in between user-invalid and provide a fallback (https://github.com/db-ui/mono/pull/893), etc.
39+
%form-element-validation {
40+
// listing the relevant form attributes related to form validation
41+
&:is(:required, [pattern], [min], [max], [step], [minlength], [maxlength]) {
42+
&,
43+
// workaround for the DB UI Core selectors
44+
&[data-variant] {
45+
&:not([aria-invalid]) {
46+
&:not(:placeholder-shown) {
47+
&:valid {
48+
--formElement---borderColor: #{$db-color-green-600};
49+
}
50+
51+
&:invalid {
52+
--formElement---borderColor: #{$db-color-red-500};
53+
}
54+
}
55+
}
56+
}
57+
}
58+
}
59+
%form-element-validation-programmatic {
60+
&[aria-invalid="true"] {
61+
&,
62+
&[data-variant] {
63+
--formElement---borderColor: #{$db-color-red-500};
64+
}
65+
}
66+
}
67+
3668
// ### Style variations
3769
// Semitransparent
3870
%form-element-semitransparent {

‎source/_patterns/01-elements/input/input.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{#if disabled}} disabled{{/if }}
88
value="{{ value }}"
99
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
10-
{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
10+
{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
1111
{{{ validation }}}
1212
{{#if datalist }} list="datalist{{ id }}"{{/if }}
1313
aria-labelledby="{{ id }}-label"

‎source/_patterns/01-elements/input/input.scss‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -107,23 +107,10 @@
107107
color: $db-color-cool-gray-500;
108108
}
109109

110-
// TODO: Evaluate whether those could get moved to ../_form-elements.scss
111-
// Validation
112-
&:required {
113-
&:valid:not([aria-invalid]) {
114-
--formElement---borderColor: #{$db-color-green-600};
115-
}
116-
117-
&:invalid {
118-
&:not(:placeholder-shown) {
119-
--formElement---borderColor: #{$db-color-red-500};
120-
}
121-
}
122-
}
123-
124-
&[aria-invalid="true"] {
125-
--formElement---borderColor: #{$db-color-red-500};
126-
}
110+
/* stylelint-disable order/order */
111+
@extend %form-element-validation;
112+
@extend %form-element-validation-programmatic;
113+
/* stylelint-enable order/order */
127114

128115
// ### Style variations
129116
&[data-variant="semitransparent"] {

‎source/_patterns/01-elements/input/input~invalid-attribute.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
"describedbyid": "input15hint",
55
"value": "Inpu",
66
"validation": " minlength=\"5\"",
7-
"aria-invalid": "true"
7+
"invalid": "true"
88
}

‎source/_patterns/01-elements/select/_select.hbs‎ renamed to ‎source/_patterns/01-elements/select/select.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
{{#if id }} name="{{ id }}" id="{{ id }}"{{/if }}
33
{{#if disabled}} disabled{{/if }}
44
{{#if multiple}} multiple{{/if }}
5-
{{#unless multiple}} required{{/unless}}
6-
{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}" {{/if }}
5+
{{#if required}} required{{/if}}
6+
{{#if invalid }} aria-invalid="{{ invalid }}" {{/if }}
77
{{#if variant}} data-variant="{{variant}}"{{/if }}>
88
{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}<option></option>{{/unless}}{{/if }}
99
<option value="smartphone">Smartphone</option>

‎source/_patterns/01-elements/select/_select.json‎ renamed to ‎source/_patterns/01-elements/select/select.json‎

File renamed without changes.

‎source/_patterns/01-elements/select/select.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,30 @@
3939
}
4040
}
4141

42-
&:required:invalid,
43-
&[aria-invalid="true"] {
42+
&:has(option:checked:empty) {
4443
& + .elm-label {
4544
color: $select-floatingLabel--color;
4645
font-size: to-rem($pxValue: 16);
4746
transform: translate($db-spacing-m, -#{to-rem($pxValue: 35)});
4847
}
4948
}
49+
50+
// Validation
51+
/* stylelint-disable order/order */
52+
@extend %form-element-validation-programmatic;
53+
/* stylelint-enable order/order */
54+
&,
55+
&[data-variant]  {
56+
&:not([aria-invalid]) {
57+
&:is(:user-valid) {
58+
--formElement---borderColor: #{$db-color-green-600};
59+
}
60+
61+
&:is(:user-invalid) {
62+
--formElement---borderColor: #{$db-color-red-500};
63+
}
64+
}
65+
}
5066
}
5167

5268
// TODO: Evaluate whether those could get moved to ../_form-elements.scss

‎source/_patterns/01-elements/select/select~invalid-attribute.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"id": "select13",
3+
"label": "Devices",
4+
"invalid": "true"
5+
}

‎source/_patterns/01-elements/select/select~invalid-attribute.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Select - Invalid state by HTML attribute
3+
state: complete
4+
order: 7
5+
---
6+
7+
## Form validation
8+
9+
Please have a look especially at the section for form validation within the overall [components/forms](../components-form/index.html) page.
10+
11+
Additionally to the browser built-in pseudo-selector `:invalid` we're providing styling for the [`aria-invalid="true"` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) as well.

‎source/_patterns/01-elements/textarea/textarea.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
88
{{{ validation }}}
99
{{#if maxlength }} maxlength="{{ maxlength }}"
10-
{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
10+
{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
1111
oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}
1212
{{#if variant}} data-variant="{{variant}}"{{/if }}>{{ value }}</textarea>
1313
{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}

0 commit comments

Comments
 (0)