From 0a4206a8548ba58d75b363cd0a1558bb755e5349 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Fri, 21 Apr 2023 13:34:11 +0200 Subject: [PATCH] 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 25e347390eb4d7f703ac099a68afcdb491ba725d. * 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 48a1acb02bae11587bead786041e1115bf82183e. * style: further optimizations --- .../_patterns/01-elements/_form-elements.scss | 32 +++++++++++++++++++ source/_patterns/01-elements/input/input.hbs | 2 +- source/_patterns/01-elements/input/input.scss | 21 +++--------- .../input/input~invalid-attribute.json | 2 +- .../select/{_select.hbs => select.hbs} | 4 +-- .../select/{_select.json => select.json} | 0 .../_patterns/01-elements/select/select.scss | 20 ++++++++++-- .../select/select~invalid-attribute.json | 5 +++ .../select/select~invalid-attribute.md | 11 +++++++ .../01-elements/textarea/textarea.hbs | 2 +- .../01-elements/textarea/textarea.scss | 26 +++------------ .../textarea/textarea~invalid-attribute.json | 2 +- 12 files changed, 80 insertions(+), 47 deletions(-) rename source/_patterns/01-elements/select/{_select.hbs => select.hbs} (88%) rename source/_patterns/01-elements/select/{_select.json => select.json} (100%) create mode 100644 source/_patterns/01-elements/select/select~invalid-attribute.json create mode 100644 source/_patterns/01-elements/select/select~invalid-attribute.md diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index 6aa52275c4..eec79a0b65 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -33,6 +33,38 @@ } } +// Validation +// We need to differentiate here for select elements, that we couldn't handle by :placeholder-shown +// 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. +%form-element-validation { + // listing the relevant form attributes related to form validation + &:is(:required, [pattern], [min], [max], [step], [minlength], [maxlength]) { + &, + // workaround for the DB UI Core selectors + &[data-variant] { + &:not([aria-invalid]) { + &:not(:placeholder-shown) { + &:valid { + --formElement---borderColor: #{$db-color-green-600}; + } + + &:invalid { + --formElement---borderColor: #{$db-color-red-500}; + } + } + } + } + } +} +%form-element-validation-programmatic { + &[aria-invalid="true"] { + &, + &[data-variant] { + --formElement---borderColor: #{$db-color-red-500}; + } + } +} + // ### Style variations // Semitransparent %form-element-semitransparent { diff --git a/source/_patterns/01-elements/input/input.hbs b/source/_patterns/01-elements/input/input.hbs index 6d8dc1f184..4d87165cf9 100644 --- a/source/_patterns/01-elements/input/input.hbs +++ b/source/_patterns/01-elements/input/input.hbs @@ -7,7 +7,7 @@ {{#if disabled}} disabled{{/if }} value="{{ value }}" {{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }} - {{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }} + {{#if invalid }} aria-invalid="{{ invalid }}"{{/if }} {{{ validation }}} {{#if datalist }} list="datalist{{ id }}"{{/if }} aria-labelledby="{{ id }}-label" diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss index ebe43f75ac..194e2dd49b 100644 --- a/source/_patterns/01-elements/input/input.scss +++ b/source/_patterns/01-elements/input/input.scss @@ -107,23 +107,10 @@ color: $db-color-cool-gray-500; } - // TODO: Evaluate whether those could get moved to ../_form-elements.scss - // Validation - &:required { - &:valid:not([aria-invalid]) { - --formElement---borderColor: #{$db-color-green-600}; - } - - &:invalid { - &:not(:placeholder-shown) { - --formElement---borderColor: #{$db-color-red-500}; - } - } - } - - &[aria-invalid="true"] { - --formElement---borderColor: #{$db-color-red-500}; - } + /* stylelint-disable order/order */ + @extend %form-element-validation; + @extend %form-element-validation-programmatic; + /* stylelint-enable order/order */ // ### Style variations &[data-variant="semitransparent"] { diff --git a/source/_patterns/01-elements/input/input~invalid-attribute.json b/source/_patterns/01-elements/input/input~invalid-attribute.json index 32efee78be..bc6d713536 100644 --- a/source/_patterns/01-elements/input/input~invalid-attribute.json +++ b/source/_patterns/01-elements/input/input~invalid-attribute.json @@ -4,5 +4,5 @@ "describedbyid": "input15hint", "value": "Inpu", "validation": " minlength=\"5\"", - "aria-invalid": "true" + "invalid": "true" } diff --git a/source/_patterns/01-elements/select/_select.hbs b/source/_patterns/01-elements/select/select.hbs similarity index 88% rename from source/_patterns/01-elements/select/_select.hbs rename to source/_patterns/01-elements/select/select.hbs index 551919922a..13bed7c5c4 100644 --- a/source/_patterns/01-elements/select/_select.hbs +++ b/source/_patterns/01-elements/select/select.hbs @@ -2,8 +2,8 @@ {{#if id }} name="{{ id }}" id="{{ id }}"{{/if }} {{#if disabled}} disabled{{/if }} {{#if multiple}} multiple{{/if }} - {{#unless multiple}} required{{/unless}} - {{#if aria-invalid }} aria-invalid="{{ aria-invalid }}" {{/if }} + {{#if required}} required{{/if}} + {{#if invalid }} aria-invalid="{{ invalid }}" {{/if }} {{#if variant}} data-variant="{{variant}}"{{/if }}> {{#if optgroup}}{{else}}{{#unless multiple}}{{/unless}}{{/if }} diff --git a/source/_patterns/01-elements/select/_select.json b/source/_patterns/01-elements/select/select.json similarity index 100% rename from source/_patterns/01-elements/select/_select.json rename to source/_patterns/01-elements/select/select.json diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss index ad6ffcd995..da63aa3622 100644 --- a/source/_patterns/01-elements/select/select.scss +++ b/source/_patterns/01-elements/select/select.scss @@ -39,14 +39,30 @@ } } - &:required:invalid, - &[aria-invalid="true"] { + &:has(option:checked:empty) { & + .elm-label { color: $select-floatingLabel--color; font-size: to-rem($pxValue: 16); transform: translate($db-spacing-m, -#{to-rem($pxValue: 35)}); } } + + // Validation + /* stylelint-disable order/order */ + @extend %form-element-validation-programmatic; + /* stylelint-enable order/order */ + &, + &[data-variant]  { + &:not([aria-invalid]) { + &:is(:user-valid) { + --formElement---borderColor: #{$db-color-green-600}; + } + + &:is(:user-invalid) { + --formElement---borderColor: #{$db-color-red-500}; + } + } + } } // TODO: Evaluate whether those could get moved to ../_form-elements.scss diff --git a/source/_patterns/01-elements/select/select~invalid-attribute.json b/source/_patterns/01-elements/select/select~invalid-attribute.json new file mode 100644 index 0000000000..c3c7a4e57d --- /dev/null +++ b/source/_patterns/01-elements/select/select~invalid-attribute.json @@ -0,0 +1,5 @@ +{ + "id": "select13", + "label": "Devices", + "invalid": "true" +} diff --git a/source/_patterns/01-elements/select/select~invalid-attribute.md b/source/_patterns/01-elements/select/select~invalid-attribute.md new file mode 100644 index 0000000000..12091860c2 --- /dev/null +++ b/source/_patterns/01-elements/select/select~invalid-attribute.md @@ -0,0 +1,11 @@ +--- +title: Select - Invalid state by HTML attribute +state: complete +order: 7 +--- + +## Form validation + +Please have a look especially at the section for form validation within the overall [components/forms](../components-form/index.html) page. + +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. diff --git a/source/_patterns/01-elements/textarea/textarea.hbs b/source/_patterns/01-elements/textarea/textarea.hbs index 760603a56a..0f31ddae86 100644 --- a/source/_patterns/01-elements/textarea/textarea.hbs +++ b/source/_patterns/01-elements/textarea/textarea.hbs @@ -7,7 +7,7 @@ {{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }} {{{ validation }}} {{#if maxlength }} maxlength="{{ maxlength }}" - {{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }} + {{#if invalid }} aria-invalid="{{ invalid }}"{{/if }} oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }} {{#if variant}} data-variant="{{variant}}"{{/if }}>{{ value }} {{#if maxlength }}{{/if }} diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss index 9d28c7b691..c26ee019d5 100644 --- a/source/_patterns/01-elements/textarea/textarea.scss +++ b/source/_patterns/01-elements/textarea/textarea.scss @@ -56,28 +56,10 @@ } } - // TODO: Evaluate whether those could get moved to ../_form-elements.scss - // Validation - &:required, - &:focus { - &:valid:not([aria-invalid]) { - --formElement---borderColor: #{$db-color-green-600}; - } - - &:invalid { - &:not(:placeholder-shown) { - --formElement---borderColor: #{$db-color-red-500}; - - & ~ .description { - color: $db-color-red-500; - } - } - } - } - - &[aria-invalid="true"] { - --formElement---borderColor: #{$db-color-red-500}; - } + /* stylelint-disable order/order */ + @extend %form-element-validation; + @extend %form-element-validation-programmatic; + /* stylelint-enable order/order */ // TODO: Evaluate whether those could get moved to ../_form-elements.scss & + output { diff --git a/source/_patterns/01-elements/textarea/textarea~invalid-attribute.json b/source/_patterns/01-elements/textarea/textarea~invalid-attribute.json index 13d0eaa816..a39ebb5aa2 100644 --- a/source/_patterns/01-elements/textarea/textarea~invalid-attribute.json +++ b/source/_patterns/01-elements/textarea/textarea~invalid-attribute.json @@ -2,5 +2,5 @@ "id": "textarea06", "value": "Inpu", "validation": " minlength=\"5\"", - "aria-invalid": "true" + "invalid": "true" }