fix(FormLabel): move hover color logic to act on properties forId and…

… onClick (#2848)
dnbexperience · Nov 6, 2023 · 43723ab · 43723ab
1 parent 099c823
commit 43723ab
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
@@ -83,13 +83,19 @@ export default function FormLabel(localProps: FormLabelAllProps) {
     ...attributes
   } = props
 
+  const isInteractive =
+    !props.disabled &&
+    !srOnly &&
+    (typeof props.onClick === 'function' || forId || for_id)
+
   const params = {
     className: classnames(
       'dnb-form-label',
       (isTrue(vertical) || label_direction === 'vertical') &&
         `dnb-form-label--vertical`,
       (srOnly || isTrue(sr_only)) && 'dnb-sr-only',
       size && `dnb-h--${size}`,
+      isInteractive && 'dnb-form-label--interactive',
       createSkeletonClass('font', skeleton, context),
       createSpacingClasses(props),
       className

diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
@@ -26,21 +26,46 @@ describe('FormLabel component', () => {
 
     const element = document.querySelector('.dnb-form-label')
 
-    expect(Array.from(element.classList)).toEqual([
-      'dnb-form-label',
-      'dnb-space__top--large',
-    ])
+    expect(Array.from(element.classList)).toContain(
+      'dnb-space__top--large'
+    )
   })
 
   it('should set correct class when srOnly is set', () => {
     render(<FormLabel forId="input" srOnly />)
 
     const element = document.querySelector('.dnb-form-label')
 
-    expect(Array.from(element.classList)).toEqual([
-      'dnb-form-label',
-      'dnb-sr-only',
-    ])
+    expect(Array.from(element.classList)).toContain('dnb-sr-only')
+    expect(Array.from(element.classList)).not.toContain(
+      'dnb-form-label--interactive'
+    )
+  })
+
+  it('should not have "--interactive" class when disabled', () => {
+    render(<FormLabel forId="input" disabled />)
+
+    const element = document.querySelector('.dnb-form-label')
+
+    expect(Array.from(element.classList)).not.toContain(
+      'dnb-form-label--interactive'
+    )
+  })
+
+  it('should have "--interactive" when forId or onClick was given', () => {
+    const { rerender } = render(<FormLabel forId="input" />)
+
+    const element = document.querySelector('.dnb-form-label')
+
+    expect(Array.from(element.classList)).toContain(
+      'dnb-form-label--interactive'
+    )
+
+    rerender(<FormLabel onClick={() => null} />)
+
+    expect(Array.from(element.classList)).toContain(
+      'dnb-form-label--interactive'
+    )
   })
 
   it('should set correct for id', () => {

diff --git a/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap b/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap
@@ -52,10 +52,10 @@ exports[`FormLabel scss have to match default theme snapshot 1`] = `
 .dnb-form-label {
   color: var(--color-black-80);
 }
-.dnb-form-label[for]:not([disabled]) {
+.dnb-form-label--interactive {
   cursor: pointer;
 }
-.dnb-form-label[for]:not([disabled]):hover {
+.dnb-form-label--interactive:hover {
   color: var(--color-sea-green);
 }"
 `;
diff --git a/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss b/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss
@@ -6,7 +6,7 @@
 .dnb-form-label {
   color: var(--color-black-80);
 
-  &[for]:not([disabled]) {
+  &--interactive {
     cursor: pointer;
 
     &:hover {