fix(Textarea): correct outline

dnbexperience · Jan 18, 2024 · 3d8e143 · 3d8e143
1 parent 5c9dde9
commit 3d8e143
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 6 deletions.
diff --git a/...__/form-components-alignment-for-ui-have-to-match-horizontal-direction.snap.png b/...__/form-components-alignment-for-ui-have-to-match-horizontal-direction.snap.png
diff --git a/...ts__/form-components-alignment-for-ui-have-to-match-vertical-direction.snap.png b/...ts__/form-components-alignment-for-ui-have-to-match-vertical-direction.snap.png
diff --git a/...rm-components-alignment-for-ui-have-to-match-vertical-labels-direction.snap.png b/...rm-components-alignment-for-ui-have-to-match-vertical-labels-direction.snap.png
diff --git a/...age_snapshots__/textarea-for-ui-have-to-match-stretched-textarea-style.snap.png b/...age_snapshots__/textarea-for-ui-have-to-match-stretched-textarea-style.snap.png
diff --git a/...e_snapshots__/textarea-for-ui-have-to-match-the-default-textarea-style.snap.png b/...e_snapshots__/textarea-for-ui-have-to-match-the-default-textarea-style.snap.png
diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -170,7 +170,10 @@ button .dnb-form-status__text {
   bottom: -0.5rem;
   right: -0.5rem;
   background-color: var(--color-white);
-  box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+  --border-color: var(--textarea-border-color);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25rem;
 }
 .dnb-textarea__row {
@@ -350,6 +353,13 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+.dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+}
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--textarea-background-color);
@@ -363,14 +373,20 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   color: var(--color-black-55);
 }
 .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+  --border-color: var(--textarea-border-color--hover);
+  --border-width: var(--textarea-border-width--hover);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] {
   color: var(--color-black-55);
   background-color: var(--color-black-3);
 }
 .dnb-textarea--disabled .dnb-textarea__state, .dnb-textarea__textarea[disabled] ~ .dnb-textarea__state {
-  box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+  --border-color: var(--textarea-border-color--disabled);
+  --border-width: var(--textarea-border-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   background-color: var(--color-black-3);
 }
 .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled), .dnb-textarea__status--error:not(.dnb-textarea--focus) .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover {

diff --git a/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss b/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss
@@ -51,7 +51,11 @@
     right: -0.5rem;
 
     background-color: var(--color-white);
-    box-shadow: 0 0 0 0.0625rem var(--color-sea-green);
+    @include fakeBorder(
+      var(--textarea-border-color),
+      var(--textarea-border-width),
+      inset
+    );
 
     border-radius: 0.25rem;
   }

diff --git a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
@@ -6,6 +6,12 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-textarea {
+  --textarea-border-color: var(--color-sea-green);
+  --textarea-border-color--hover: var(--color-emerald-green);
+  --textarea-border-color--disabled: var(--color-black-55);
+  --textarea-border-width: 0.0625rem;
+  --textarea-border-width--hover: 0.125rem;
+
   &__textarea {
     color: var(--color-black);
     background-color: var(--textarea-background-color);
@@ -23,7 +29,10 @@
 
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
   &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
-    box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+    @include fakeBorder(
+      var(--textarea-border-color--hover),
+      var(--textarea-border-width--hover)
+    );
   }
 
   // We may enable this in future – right now it's unclear
@@ -41,7 +50,11 @@
 
   &--disabled &__state,
   &__textarea[disabled] ~ &__state {
-    box-shadow: 0 0 0 0.0625rem var(--color-black-55);
+    @include fakeBorder(
+      var(--textarea-border-color--disabled),
+      var(--textarea-border-width),
+      inset
+    );
     background-color: var(--color-black-3);
   }
 

diff --git a/.../String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png b/.../String/__tests__/__image_snapshots__/fieldstring-have-to-match-widths.snap.png