feat: focus styles for Textbox and Textarea components

nl-design-system · Aug 5, 2021 · a51a17e · a51a17e
1 parent 104c4a4
commit a51a17e
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git a/components/textarea/bem.css → components/textarea/bem.scss b/components/textarea/bem.css → components/textarea/bem.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
+@import "../focus/bem";
+
 .utrecht-textarea {
   border-width: var(--utrecht-textarea-border-width);
   border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
@@ -30,7 +32,30 @@
   color: var(--utrecht-textarea-disabled-color);
 }
 
+.utrecht-textarea--focus {
+  @include utrecht-focus;
+}
+
 .utrecht-textarea--read-only {
   border-color: var(--utrecht-textarea-read-only-border-color);
   color: var(--utrecht-textarea-read-only-color);
 }
+
+.utrecht-textarea--html-textarea {
+  &:disabled {
+    @extend .utrecht-textarea--disabled;
+  }
+
+  &:focus {
+    @extend .utrecht-textarea--focus;
+  }
+
+  &:invalid,
+  &[aria-invalid="true"] {
+    @extend .utrecht-textarea--invalid;
+  }
+
+  &:read-only {
+    @extend .utrecht-textarea--read-only;
+  }
+}
diff --git a/components/textarea/html.scss b/components/textarea/html.scss
@@ -7,17 +7,5 @@
 
 .utrecht-html textarea {
   @extend .utrecht-textarea;
-}
-
-.utrecht-html textarea:disabled {
-  @extend .utrecht-textarea--disabled;
-}
-
-.utrecht-html textarea:invalid,
-.utrecht-html textarea[aria-invalid="true"] {
-  @extend .utrecht-textarea--invalid;
-}
-
-.utrecht-html textarea:read-only {
-  @extend .utrecht-textarea--read-only;
+  @extend .utrecht-textarea--html-textarea;
 }
diff --git a/components/textbox/bem.css → components/textbox/bem.scss b/components/textbox/bem.css → components/textbox/bem.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
+@import "../focus/bem";
+
 .utrecht-textbox {
   border-width: var(--utrecht-textbox-border-width);
   border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
@@ -31,7 +33,30 @@
   color: var(--utrecht-textbox-disabled-color);
 }
 
+.utrecht-textbox--focus {
+  @include utrecht-focus;
+}
+
 .utrecht-textbox--read-only {
   border-color: var(--utrecht-textbox-read-only-border-color);
   color: var(--utrecht-textbox-read-only-color);
 }
+
+.utrecht-textbox--html-input {
+  &:disabled {
+    @extend .utrecht-textbox--disabled;
+  }
+
+  &:focus {
+    @extend .utrecht-textbox--focus;
+  }
+
+  &:invalid,
+  &[aria-invalid="true"] {
+    @extend .utrecht-textbox--invalid;
+  }
+
+  &:read-only {
+    @extend .utrecht-textbox--read-only;
+  }
+}
diff --git a/components/textbox/html.scss b/components/textbox/html.scss
@@ -13,19 +13,7 @@
   input[type="url"] {
     & {
       @extend .utrecht-textbox;
-    }
-
-    &:disabled {
-      @extend .utrecht-textbox--disabled;
-    }
-
-    &:invalid,
-    &[aria-invalid="true"] {
-      @extend .utrecht-textbox--invalid;
-    }
-
-    &:read-only {
-      @extend .utrecht-textbox--read-only;
+      @extend .utrecht-textbox--html-input;
     }
   }
 }