Skip to content

fix: set border- and label-color for in/valid state of textarea, custom select and input #4258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
+29 −27
Open

fix: set border- and label-color for in/valid state of textarea, custom select and input #4258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fe0c9b2
feat: set border- and label-color for in/valid state of textarea, cus…
michaelmkraus May 23, 2025
47323e2
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus May 26, 2025
2fed1af
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
mfranzke May 27, 2025
9ce544a
test: updated snapshots
mfranzke May 27, 2025
f799e24
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
mfranzke May 27, 2025
e3ca589
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
mfranzke May 27, 2025
5e77ac3
test: updated snapshots
mfranzke May 27, 2025
7cbdd01
test: updated snapshots
mfranzke May 27, 2025
2c0d76f
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
mfranzke May 27, 2025
7fc595d
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 2, 2025
151ff76
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 3, 2025
3527455
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 5, 2025
7f76068
fix(): set validity color for textarea border
michaelmkraus Jun 5, 2025
69066bf
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 11, 2025
bda4286
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 11, 2025
f224e29
test: updated snapshots
michaelmkraus Jun 11, 2025
25b11d3
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 11, 2025
c64fa75
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 12, 2025
6458556
Merge branch 'main' into fix-valid-invalid-data-inputs-border-label-c…
michaelmkraus Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/workflows/00-init.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ jobs:
ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}

# - name: 🚮 Dump GitHub context for debugging
# env:
# GITHUB_CONTEXT: ${{ toJson(github) }}
# run: echo "$GITHUB_CONTEXT"
# - name: 🚮 Dump GitHub context for debugging
# env:
# GITHUB_CONTEXT: ${{ toJson(github) }}
# run: echo "$GITHUB_CONTEXT"

- name: 💀 Killing me softly
uses: ./.github/actions/cancel-workflow
Expand Down
Binary file modified ...ium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
View file
Open in desktop
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 ...fox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
View file
Open in desktop
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 ...ome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 25 additions & 23 deletions packages/components/src/styles/internal/_form-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,24 @@ $db-min-inline-size: var(
}
}
}

@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;
}
}
}
}
Comment on lines +156 to +173
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@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.

Copy link
Contributor Author

@michaelmkraus michaelmkraus Jun 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the problem with long texts. We could handle it like that

Suggested change
@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.

}
}

Expand Down Expand Up @@ -183,30 +201,14 @@ $db-min-inline-size: var(
$variant: "critical";
}

@if ($selector != textarea) {
& {
@if ($selector == textarea) {
--db-textarea-read-only: var(
--db-#{$variant}-bg-basic-level-1-default
);
}

@extend %db-#{$variant}-variables;
/* stylelint-disable-next-line at-rule-empty-line-before */
} @else {
// this is a workaround for the textarea scrollbar
--db-textarea-read-only: var(--db-#{$variant}-bg-basic-level-1-default);
--db-adaptive-bg-basic-transparent-full-default: var(
--db-#{$variant}-bg-basic-transparent-full-default
);
--db-adaptive-bg-basic-transparent-semi-default: var(
--db-#{$variant}-bg-basic-transparent-semi-default
);
--db-adaptive-bg-basic-transparent-hovered: var(
--db-#{$variant}-bg-basic-transparent-hovered
);
--db-adaptive-bg-basic-transparent-pressed: var(
--db-#{$variant}-bg-basic-transparent-pressed
);
--db-adaptive-on-bg-basic-emphasis-100-default: var(
--db-#{$variant}-on-bg-basic-emphasis-100-default
);
--db-adaptive-on-bg-basic-emphasis-60-default: var(
--db-#{$variant}-on-bg-basic-emphasis-60-default
);
}

#{$selector},
Expand Down
Loading