From 235b823f3daeca826594a5ea29a23e83e8636b1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 20 Nov 2024 14:03:09 +0100 Subject: [PATCH] fix(Icon): ensure icon name is rendered as `data-testid` (#4304) Also, it corrects icon size of icon when given like this `icon={}` to e.g. a button. --- ...-have-to-match-a-stretched-button.snap.png | Bin 4936 -> 5011 bytes .../form-status/__tests__/FormStatus.test.tsx | 10 ++++++++++ .../dnb-eufemia/src/components/icon/Icon.tsx | 3 +++ 3 files changed, 13 insertions(+) diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-a-stretched-button.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-a-stretched-button.snap.png index c487a1d9a7badf6f9025d79c1d377f087f92f3e9..0b5a780b97a6fc6885899fa3b381399033311144 100644 GIT binary patch literal 5011 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 literal 4936 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 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 index 5c55607b3a2..b308a81cbd2 100644 --- 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() + 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( diff --git a/packages/dnb-eufemia/src/components/icon/Icon.tsx b/packages/dnb-eufemia/src/components/icon/Icon.tsx index b8fd1b1ff52..054d5e786ea 100644 --- 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