feat(ld-select): implement focus states

emdgroup-liquid · Jun 30, 2021 · 31246bb · 31246bb
1 parent c1828c5
commit 31246bb
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/src/liquid/components/ld-option/ld-option.css b/src/liquid/components/ld-option/ld-option.css
@@ -8,6 +8,7 @@
   user-select: none;
   touch-action: manipulation;
   border: 0;
+  outline: none;
   -webkit-touch-callout: none;
 
   [data-popper-placement*='bottom'] & {
@@ -40,6 +41,18 @@
   &[aria-disabled='true'] {
     color: var(--ld-col-disabled);
   }
+
+  /* Pseudo element for focus outline */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: var(--ld-br-m);
+    pointer-events: none;
+  }
 }
 
 .ld-option__check {
@@ -53,6 +66,10 @@
 .ld-option,
 .ld-theme-ocean .ld-option,
 [class*='ld-theme'] .ld-theme-ocean .ld-option {
+  &:where(:focus:focus-visible):before {
+    box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
+  }
+
   &:where(:not([disabled]):not([aria-disabled='true'])) {
     .ld-option__check {
       color: var(--ld-thm-ocean-bg-primary);
@@ -80,6 +97,10 @@
 .ld-theme-solvent,
 [class*='ld-theme'] .ld-theme-solvent {
   :where(.ld-option) {
+    &:where(:focus:focus-visible):before {
+      box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+    }
+
     &:where(:not([disabled]):not([aria-disabled='true'])) {
       .ld-option__check {
         color: var(--ld-thm-solvent-bg-primary);
@@ -104,6 +125,10 @@
 .ld-theme-tea,
 [class*='ld-theme'] .ld-theme-tea {
   :where(.ld-option) {
+    &:where(:focus:focus-visible):before {
+      box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
+    }
+
     &:where(:not([disabled]):not([aria-disabled='true'])) {
       .ld-option__check {
         color: var(--ld-thm-tea-bg-primary);

diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css
@@ -11,6 +11,7 @@
   position: relative;
   font: var(--ld-typo-body-m);
   border: 0;
+  outline: none;
   padding: var(--ld-sp-8) var(--ld-sp-12);
   border-radius: var(--ld-br-m);
   min-height: 2.5rem;
@@ -39,12 +40,46 @@
   }
 }
 
+/* .ld-theme-ocean -> default */
+.ld-select__btn-trigger,
+.ld-theme-ocean .ld-select__btn-trigger,
+[class*='ld-theme'] .ld-theme-ocean .ld-select__btn-trigger {
+  &:where(:focus:focus-visible) {
+    box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary);
+  }
+}
+
+.ld-theme-bubblegum,
+[class*='ld-theme'] .ld-theme-bubblegum,
+.ld-theme-shake,
+[class*='ld-theme'] .ld-theme-shake,
+.ld-theme-solvent,
+[class*='ld-theme'] .ld-theme-solvent {
+  :where(.ld-select__btn-trigger) {
+    &:where(:focus:focus-visible) {
+      box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default);
+    }
+  }
+}
+
+.ld-theme-tea,
+[class*='ld-theme'] .ld-theme-tea {
+  :where(.ld-select__btn-trigger) {
+    &:where(:focus:focus-visible) {
+      box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary);
+    }
+  }
+}
+
 .ld-select--expanded {
   z-index: 2147483647;
 
   .ld-select__btn-trigger {
     z-index: 2;
-    box-shadow: none;
+
+    &:not(:focus:focus-visible) {
+      box-shadow: none;
+    }
   }
 }