Merge pull request #1986 from SpareBank1/develop_fix-task-button

Develop fix task button
SpareBank1 · May 7, 2024 · 728cda7 · 728cda7
2 parents 596141d + 6b48aa9
commit 728cda7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/packages/ffe-buttons-react/src/TaskButton.spec.tsx b/packages/ffe-buttons-react/src/TaskButton.spec.tsx
@@ -28,9 +28,16 @@ describe('<TaskButton />', () => {
 
     it('sends icon prop on as leftIcon prop', () => {
         renderTaskButton({
-            icon: <Icon ariaLabel="icon" fileUrl="fileUrl" size="md" />,
+            icon: (
+                <Icon
+                    ariaLabel="icon"
+                    fileUrl="fileUrl"
+                    size="md"
+                    data-testid="icon"
+                />
+            ),
         });
-        const icon = screen.getByRole('img');
+        const icon = screen.getByTestId('icon');
         expect(icon.getAttribute('style')).toContain('fileUrl');
     });
 });
diff --git a/packages/ffe-buttons-react/src/TaskButton.tsx b/packages/ffe-buttons-react/src/TaskButton.tsx
@@ -14,11 +14,14 @@ function TaskButtonWithForwardRef<As extends ElementType>(
     props: TaskButtonProps<As>,
     ref: ForwardedRef<any>,
 ) {
+    const propWithRef = { ...props, ref };
+    const { icon, ...rest } = propWithRef;
+
     return (
         <BaseButton
-            leftIcon={props.icon}
-            {...props}
-            ref={ref}
+            leftIcon={<div aria-hidden="true">{icon}</div>}
+            {...rest}
+            ref={propWithRef.ref}
             buttonType="task"
         />
     );

diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less
@@ -173,6 +173,7 @@
     width: auto;
 
     .ffe-button__icon > .ffe-icons {
+        display: block;
         color: var(--ffe-v-button-task-primary-color);
     }
 

diff --git a/packages/ffe-buttons/less/inline-base-button.less b/packages/ffe-buttons/less/inline-base-button.less
@@ -49,7 +49,7 @@
 
 .ffe-inline-button--back {
     color: var(--ffe-v-button-primary-color);
-    line-height: 24px;
+    line-height: 1;
     padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs)
         var(--ffe-spacing-2xl);
     outline: none;
@@ -61,6 +61,7 @@
 
     .ffe-inline-button__icon {
         color: var(--ffe-v-button-primary-color);
+        display: block;
     }
 
     @media (hover: hover) and (pointer: fine) {