fix: activate cursor for React Form Toggle

nl-design-system · May 17, 2024 · c67bde3 · c67bde3
1 parent e1eb79c
commit c67bde3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/components/form-toggle/css/_mixin.scss b/components/form-toggle/css/_mixin.scss
@@ -93,6 +93,10 @@
   z-index: 20;
 }
 
+@mixin utrecht-form-toggle__track--html-label {
+  cursor: inherit;
+}
+
 @mixin utrecht-form-toggle__thumb--checked {
   margin-inline-start: auto;
 }

diff --git a/components/form-toggle/css/index.scss b/components/form-toggle/css/index.scss
@@ -46,6 +46,10 @@
   @include utrecht-form-toggle__track;
 }
 
+.utrecht-form-toggle__track--html-label {
+  @include utrecht-form-toggle__track--html-label;
+}
+
 .utrecht-form-toggle__track--checked {
   @include utrecht-form-toggle__track--checked;
 }

diff --git a/packages/component-library-react/src/FormToggle.tsx b/packages/component-library-react/src/FormToggle.tsx
@@ -36,7 +36,7 @@ export const FormToggle = forwardRef(
         tabIndex={tabIndex}
         {...restProps}
       />
-      <label htmlFor={id} className="utrecht-form-toggle__track">
+      <label htmlFor={id} className={clsx('utrecht-form-toggle__track', 'utrecht-form-toggle__track--html-label')}>
         <div className="utrecht-form-toggle__thumb"></div>
       </label>
     </div>