[Darkside] Updated Focus design for Checkbox, Radio and Switch (#3513)

* 💄 Focus-outline now around item checkbox,radio * 🐛 Resolved small and indeterminate-state * 💄 updated focus-markings for switch * Update @navikt/core/css/darkside/form/radio-checkbox.darkside.css * 🐛 Hide new indeterminate node from old checkbox
navikt · Jan 28, 2025 · 68a2f02 · 68a2f02
1 parent 5f9fdb6
commit 68a2f02
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 32 deletions.
diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-space-6), -50%);
-  background-color: var(--ax-bg-default);
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
   width: 0.75rem;
   height: 0.25rem;
+  background-color: var(--ax-bg-default);
   border-radius: 1px;
-  flex-shrink: 0;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -221,7 +237,7 @@
     inset 0 0 0 8px var(--ax-bg-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
   background-color: var(--ax-text-subtle);
 }
 
@@ -246,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -264,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

diff --git a/@navikt/core/css/darkside/form/switch.darkside.css b/@navikt/core/css/darkside/form/switch.darkside.css
@@ -31,26 +31,41 @@
 }
 
 .navds-switch__content {
+  --__axc-switch-block-padding: 0.75rem;
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
+  gap: var(--ax-space-2);
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
   .navds-switch--right & {
-    padding: 0.75rem 3.25rem 0.75rem 0;
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
   .navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
+    --__axc-switch-block-padding: 0.375rem;
   }
 
-  .navds-switch--right.navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
+  &.navds-switch--with-description {
+    padding-bottom: 0;
   }
-}
 
-.navds-switch--with-description {
-  padding-bottom: 0;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: calc(100% - var(--__axc-switch-block-padding) * 2);
+    border-radius: var(--ax-border-radius-medium);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    pointer-events: none;
+  }
+
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+    height: calc(100% - var(--__axc-switch-block-padding) * 1);
+  }
 }
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
@@ -100,9 +115,9 @@
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:focus-visible ~ & {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
@@ -238,17 +253,17 @@
     color: field;
   }
 
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
+  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 3px solid highlight;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) {
     opacity: 1;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
+    background-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
@@ -87,6 +87,11 @@
     0 0 0 4px var(--a-border-focus);
 }
 
+/* Temp-fix to remove new darkside indeterminate node */
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
   content: "";
   position: absolute;

diff --git a/@navikt/core/react/src/form/checkbox/Checkbox.tsx b/@navikt/core/react/src/form/checkbox/Checkbox.tsx
@@ -78,6 +78,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               />
             </svg>
           </span>
+          <span className="navds-checkbox__icon-indeterminate" />
           <span
             className={cl("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,

diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -85,6 +85,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             "navds-switch--loading": loading,
             "navds-switch--disabled": inputProps.disabled ?? loading,
             "navds-switch--readonly": readOnly,
+            "navds-switch--standalone": hideLabel,
           },
         )}
       >
-Original file line number
+Diff line change
@@ Expand Up @@
                   />
                 </svg>
               </span>
+              <span className="navds-checkbox__icon-indeterminate" />
               <span
                 className={cl("navds-checkbox__content", {
                   "navds-sr-only": props.hideLabel,
@@ Expand Down @@