fix: set border- and label-color for in/valid state of textarea, custom select and input #4258
Conversation
…tom select and input
|
🔭🐙🐈 Test this branch here: https://db-ux-design-system.github.io/core-web/review/fix-valid-invalid-data-inputs-border-label-color |
michaelmkraus
changed the title
|
|
||
| &:is(textarea) { | ||
| @each $state, $variant in (valid: successful, invalid: critical) { | ||
| &[data-custom-validity="#{$state}"] { | ||
| border: var(--db-border-width-3xs) | ||
| solid | ||
| var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
| &:is(textarea) { | |
| @each $state, $variant in (valid: successful, invalid: critical) { | |
| &[data-custom-validity="#{$state}"] { | |
| border: var(--db-border-width-3xs) | |
| solid | |
| var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | |
| } | |
| } | |
| } |
We don't need this here replace https://github.com/db-ux-design-system/core-web/pull/4258/files#diff-fc8ed644a470e8653bcb58e284747ce63f7ab258a112d921ab5605159aa41a8cR204-R228 with:
` & {
@if ($selector == textarea) {
--db-textarea-read-only: var(
--db-#{$variant}-bg-basic-level-1-default
);
}
@extend %db-#{$variant}-variables;
}`
I don't know why there was a workaround for textarea but with this we set all adaptive colors like we should.
|
|
||
| @each $state, $variant in (valid: successful, invalid: critical) { | ||
| &[data-custom-validity="#{$state}"] > label, | ||
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) > label { | ||
| color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | ||
| } | ||
|
|
||
| @if ($selector == textarea) { | ||
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) { | ||
| &::before, | ||
| &::after { | ||
| // necessary to force this override over the placeholder-content mixin's ::before rule | ||
| // to avoid the label to influence the border of the textarea | ||
| content: none !important; | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
| @each $state, $variant in (valid: successful, invalid: critical) { | |
| &[data-custom-validity="#{$state}"] > label, | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) > label { | |
| color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | |
| } | |
| @if ($selector == textarea) { | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) { | |
| &::before, | |
| &::after { | |
| // necessary to force this override over the placeholder-content mixin's ::before rule | |
| // to avoid the label to influence the border of the textarea | |
| content: none !important; | |
| } | |
| } | |
| } | |
| } |
You cannot remove the content on ::before or ::after it is a workaround to ensure the floating label stays above the text. You see the problem, when you add a lot of text into the textarea.
There was a problem hiding this comment.
I see the problem with long texts. We could handle it like that
| @each $state, $variant in (valid: successful, invalid: critical) { | |
| &[data-custom-validity="#{$state}"] > label, | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) > label { | |
| color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | |
| } | |
| @if ($selector == textarea) { | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) { | |
| &::before, | |
| &::after { | |
| // necessary to force this override over the placeholder-content mixin's ::before rule | |
| // to avoid the label to influence the border of the textarea | |
| content: none !important; | |
| } | |
| } | |
| } | |
| } | |
| @each $state, $variant in (valid: successful, invalid: critical) { | |
| &[data-custom-validity="#{$state}"] > label, | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) > label { | |
| color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default); | |
| } | |
| @if ($selector == textarea) { | |
| &:has(> #{$selector}[data-custom-validity="#{$state}"]) { | |
| &::before, | |
| &::after { | |
| // necessary to force this override over the placeholder-content mixin's ::before rule | |
| // to avoid the label to influence the border of the textarea | |
| border-color: transparent; | |
| background-color: inherit !important; | |
| } | |
| } | |
| } | |
| } |
This way, we would keep the workaround and ensure that the label does not influence the border of the textarea.
|
There is another issue with the label for |
…olor # Conflicts: # __snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png # __snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
…olor # Conflicts: # __snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the border and label color for textareas, custom selects, and inputs based on their validity state. The changes ensure that the correct colors are applied for valid and invalid states, and a workaround has been implemented for the textarea scrollbar by modifying pseudo-elements and CSS variables.
Comments suppressed due to low confidence (1)
packages/components/src/styles/internal/_form-components.scss:203
- The removal of several textarea-specific variable assignments (e.g., --db-adaptive-bg-basic-transparent-* and --db-adaptive-on-bg-basic-emphasis-*) from the previous workaround could potentially affect the textarea's appearance or behavior. Confirm that consolidating these assignments into %db-#{$variant}-variables is intentional and that no regressions occur.
@if ($selector != textarea) {
Proposed changes
closes #4209
Types of changes