fix(checkbox): update checkbox focus to ensure border is used (#672)

* fix(checkbox): update checkbox focus to ensure border is used * chore: update css snapshot
carbon-design-system · Jul 17, 2020 · 53bd877 · 53bd877
1 parent 8b09049
commit 53bd877
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
@@ -7619,6 +7619,12 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
 .bx--checkbox:indeterminate:focus + .bx--checkbox-label::before,
 .bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"].bx--checkbox-label__focus::before {
   border-color: var(--interactive-04, #4589ff);
+  border-width: 3px;
+  width: 1.25rem;
+  height: 1.25rem;
+  left: -2px;
+  top: 0;
+  box-shadow: none;
 }
 
 .security--scroll-gradient {

diff --git a/src/components/Checkbox/_index.scss b/src/components/Checkbox/_index.scss
@@ -12,7 +12,7 @@
 
 /// Carbon style overrides.
 @include export-namespace($name: checkbox) {
-  // TODO - remove when issue is resolved & release in Carbon: https://github.com/carbon-design-system/carbon/issues/5984
+  // TODO - remove when issue is resolved & released in Carbon: https://github.com/carbon-design-system/carbon/issues/6471
   // Unchecked
   .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
     .#{$prefix}--checkbox-label__focus::before,
@@ -23,5 +23,11 @@
     .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before,
     .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before {
     border-color: $interactive-04;
+    border-width: 3px;
+    width: rem(20px);
+    height: rem(20px);
+    left: -2px;
+    top: 0;
+    box-shadow: none;
   }
 }