From 43723ab8c143e36119a4a9a5a87f7d9b419876e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Mon, 6 Nov 2023 13:45:54 +0100
Subject: [PATCH] fix(FormLabel): move hover color logic to act on properties
 forId and onClick (#2848)

---
 .../src/components/form-label/FormLabel.tsx   |  6 +++
 .../form-label/__tests__/FormLabel.test.tsx   | 41 +++++++++++++++----
 .../__snapshots__/FormLabel.test.tsx.snap     |  4 +-
 .../style/themes/dnb-form-label-theme-ui.scss |  2 +-
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
index 04027b0a416..693bbe8522b 100644
--- a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
+++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
@@ -83,6 +83,11 @@ 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',
@@ -90,6 +95,7 @@ export default function FormLabel(localProps: FormLabelAllProps) {
         `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
index a4f309af446..65966897c53 100644
--- 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,10 +26,9 @@ 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', () => {
@@ -37,10 +36,36 @@ describe('FormLabel component', () => {
 
     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/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap
index 62a23cf59ec..e02a311c0de 100644
--- a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap
+++ b/packages/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
index 752f6262c3a..5233fece73e 100644
--- 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 {