fix(Icon): ensure icon name is rendered as data-testid (#4304)

Also, it corrects icon size of icon when given like this `icon={<Bell />}` to e.g. a button.
dnbexperience · Nov 20, 2024 · 235b823 · 235b823
1 parent c585491
commit 235b823
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/...age_snapshots__/button-for-ui-primary-have-to-match-a-stretched-button.snap.png b/...age_snapshots__/button-for-ui-primary-have-to-match-a-stretched-button.snap.png
diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx
@@ -41,6 +41,16 @@ describe('FormStatus component', () => {
     ).toContain('max-width: 30rem;')
   })
 
+  it('should have correct icon label', () => {
+    render(<Input status="Error message" status_state="error" />)
+    expect(
+      document.querySelector('[role="presentation"]')
+    ).toHaveAttribute('data-testid', 'ErrorIcon icon')
+    expect(
+      document.querySelector('.dnb-form-status__text')
+    ).toHaveTextContent('Error message')
+  })
+
   it('should re-calculate max-width', () => {
     const { rerender } = render(
       <Input style={{ width: '10rem' }} status="status message" />

diff --git a/packages/dnb-eufemia/src/components/icon/Icon.tsx b/packages/dnb-eufemia/src/components/icon/Icon.tsx
@@ -157,6 +157,9 @@ export default function Icon(localProps: IconAllProps) {
 }
 
 export function getIconNameFromComponent(icon: IconProps['icon']): string {
+  if (React.isValidElement(icon) && icon?.type) {
+    icon = icon?.type as IconType
+  }
   const name = typeof icon === 'function' ? icon.name : String(icon)
   if (/^data:image\//.test(name)) {
     return null