From 805d1bf619351b5c89fbbe3e3a5ec3ce1006c6db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 24 May 2023 11:21:47 +0200 Subject: [PATCH] fix(Icon): enhance alignment when used in paragraphs (#2368) * fix(Icon): enhance alignment when used in paragraphs * Correct demo example paragraph usage * Update snapshots * Update visual snapshots --- .../docs/uilib/components/icon/Examples.tsx | 44 +++++++++++++++++- .../uilib/components/icon/visual-tests.mdx | 3 ++ .../uilib/demos/eufemia-demo/form-demo-01.js | 6 +-- .../__snapshots__/Accordion.test.tsx.snap | 10 ++-- .../__snapshots__/Autocomplete.test.tsx.snap | 40 +++++++++++----- .../__snapshots__/Breadcrumb.test.tsx.snap | 10 ++-- .../__snapshots__/Button.test.tsx.snap | 10 ++-- .../__snapshots__/DatePicker.test.tsx.snap | 40 +++++++++++----- .../__snapshots__/Dialog.test.tsx.snap | 10 ++-- .../__snapshots__/Drawer.test.tsx.snap | 10 ++-- .../__snapshots__/Dropdown.test.tsx.snap | 20 +++++--- .../__snapshots__/GlobalError.test.tsx.snap | 10 ++-- .../__snapshots__/GlobalStatus.test.tsx.snap | 10 ++-- .../__snapshots__/HelpButton.test.tsx.snap | 10 ++-- .../icon/__tests__/Icon.screenshot.test.ts | 7 +++ ...atch-all-primary-icons-with-color.snap.png | Bin 5176 -> 5221 bytes ...n-have-to-match-all-primary-icons.snap.png | Bin 4933 -> 4965 bytes ...ch-all-secondary-icons-with-color.snap.png | Bin 84118 -> 84186 bytes ...have-to-match-all-secondary-icons.snap.png | Bin 85905 -> 85970 bytes ...on-have-to-match-responsive-icons.snap.png | Bin 1579 -> 1613 bytes ...icon-have-to-match-text-alignment.snap.png | Bin 0 -> 3090 bytes .../__snapshots__/Icon.test.tsx.snap | 10 ++-- .../src/components/icon/style/dnb-icon.scss | 26 +++++++---- .../__snapshots__/InputMasked.test.tsx.snap | 20 +++++--- .../__snapshots__/Input.test.tsx.snap | 20 +++++--- .../__snapshots__/Modal.test.tsx.snap | 10 ++-- .../__snapshots__/Pagination.test.tsx.snap | 10 ++-- .../__snapshots__/SkipContent.test.tsx.snap | 10 ++-- .../__snapshots__/Slider.test.tsx.snap | 10 ++-- .../__snapshots__/StepIndicator.test.tsx.snap | 10 ++-- .../__tests__/__snapshots__/Tag.test.tsx.snap | 10 ++-- .../__snapshots__/ToggleButton.test.tsx.snap | 10 ++-- .../__snapshots__/Upload.test.tsx.snap | 20 +++++--- 33 files changed, 296 insertions(+), 110 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/icon/__tests__/__image_snapshots__/icon-have-to-match-text-alignment.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx index 81b7977cce5..e52462dea4b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.tsx @@ -13,7 +13,8 @@ import * as PrimaryIconsMedium from '@dnb/eufemia/src/icons/dnb/primary_icons_me import * as SecondaryIconsMedium from '@dnb/eufemia/src/icons/dnb/secondary_icons_medium' import { getListOfIcons } from '../../../../shared/parts/icons/ListAllIcons' -import { Icon, P, IconPrimary, Button } from '@dnb/eufemia/src' +import { Icon, P, H2, IconPrimary, Button } from '@dnb/eufemia/src' +import styled from '@emotion/styled' export const IconDefault = () => ( { ) } +export const IconAlignment = () => { + if (!globalThis.IS_TEST) { + return null + } + + return ( + + {() => { + const ColoredP = styled(P)` + display: inline-block; + background-color: yellowgreen; + ` + const ColoredH = styled(H2)` + display: inline-block; + margin: 0 0 0.5rem 0 !important; + background-color: yellowgreen; + ` + const ColoredIcon = styled(Icon)` + background-color: yellow; + ` + return ( +
+ + + Text + +
+ + + Text + +
+ ) + }} +
+ ) +} + export const AllPrimaryIcons = () => { if (!globalThis.IS_TEST) { return null diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/visual-tests.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/visual-tests.mdx index e3a6857f411..c9df7ad3812 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/visual-tests.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/visual-tests.mdx @@ -3,10 +3,13 @@ draft: true --- import { + IconAlignment, IconMedium, AllIconsTest, } from 'Docs/uilib/components/icon/Examples' + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js index 57624c0612f..005a71a6102 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js @@ -204,8 +204,8 @@ const MainForm = () => { - - {' filename_01.jpg'} + + filename_01.jpg