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
dnbexperience · May 31, 2023 · 78cc1e4 · 78cc1e4
1 parent 56748cc
commit 78cc1e4
Show file tree

Hide file tree

Showing 33 changed files with 296 additions and 110 deletions.
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
@@ -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 = () => (
   <ComponentBox
@@ -78,6 +79,47 @@ export const IconMedium = () => {
   )
 }
 
+export const IconAlignment = () => {
+  if (!globalThis.IS_TEST) {
+    return null
+  }
+
+  return (
+    <ComponentBox
+      data-visual-test="icon-alignment"
+      scope={{ Bell, BellMedium }}
+    >
+      {() => {
+        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 (
+          <div className="dnb-core-style">
+            <ColoredH>
+              <ColoredIcon icon={Bell} />
+              Text
+            </ColoredH>
+            <br />
+            <ColoredP>
+              <ColoredIcon icon={Bell} />
+              Text
+            </ColoredP>
+          </div>
+        )
+      }}
+    </ComponentBox>
+  )
+}
+
 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
@@ -3,10 +3,13 @@ draft: true
 ---
 
 import {
+  IconAlignment,
   IconMedium,
   AllIconsTest,
 } from 'Docs/uilib/components/icon/Examples'
 
+<IconAlignment />
+
 <IconMedium />
 
 <AllIconsTest />
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
@@ -204,8 +204,8 @@ const MainForm = () => {
 
           <Attachment>
             <Attachment.FileRow>
-              <Icon icon={AttachmentIcon} aria-hidden />
-              {' filename_01.jpg'}
+              <Icon icon={AttachmentIcon} />
+              filename_01.jpg
             </Attachment.FileRow>
             <Button
               text="Delete"
@@ -304,7 +304,7 @@ const Ingress = (props) => (
 )
 
 // Attachment area
-const Attachment = styled(Space)`
+const Attachment = styled(P)`
   .dnb-button {
     margin-left: 1rem;
   }

diff --git a/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -317,8 +317,9 @@ exports[`Accordion scss have to match snapshot 1`] = `
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -366,9 +367,12 @@ exports[`Accordion scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }

diff --git a/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -1598,8 +1598,9 @@ exports[`Autocomplete scss have to match snapshot 1`] = `
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -1647,9 +1648,12 @@ exports[`Autocomplete scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -2136,8 +2140,9 @@ button.dnb-button::-moz-focus-inner {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -2185,9 +2190,12 @@ button.dnb-button::-moz-focus-inner {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -2822,8 +2830,9 @@ html[data-visual-test] .dnb-input__input {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -2871,9 +2880,12 @@ html[data-visual-test] .dnb-input__input {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -2911,8 +2923,9 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -2960,9 +2973,12 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }

diff --git a/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/...es/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -38,8 +38,9 @@ exports[`Breadcrumb scss have to match snapshot 1`] = `
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -87,9 +88,12 @@ exports[`Breadcrumb scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }

diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1426,8 +1426,9 @@ exports[`Button scss have to match snapshot 1`] = `
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -1475,9 +1476,12 @@ exports[`Button scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }

diff --git a/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -1852,8 +1852,9 @@ exports[`DatePicker scss have to match snapshot 1`] = `
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -1901,9 +1902,12 @@ exports[`DatePicker scss have to match snapshot 1`] = `
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -2390,8 +2394,9 @@ button.dnb-button::-moz-focus-inner {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -2439,9 +2444,12 @@ button.dnb-button::-moz-focus-inner {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -3076,8 +3084,9 @@ html[data-visual-test] .dnb-input__input {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -3125,9 +3134,12 @@ html[data-visual-test] .dnb-input__input {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -3671,8 +3683,9 @@ legend.dnb-form-label {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -3720,9 +3733,12 @@ legend.dnb-form-label {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }