fix: fix #icon with border to act more polite + add better examples

dnbexperience · Nov 29, 2019 · a349f40 · a349f40
1 parent c385fbb
commit a349f40
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 57 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/Examples.js
@@ -38,16 +38,19 @@ class Example extends PureComponent {
         <ComponentBox
           data-dnb-test="icon-border"
           scope={{ Bell, BellMedium }}
-          caption="Icons with border"
+          caption="Icons with border. **NB:** Use it with caution. It should not be used where the usage can confuse users to be a clickable button."
         >
           {/* @jsx */ `
-<Icon border="true" icon={Bell} right="x-small" />
-<Icon border="true" icon={BellMedium} size="medium" right="x-small" />
-<IconPrimary border="true" icon={"information"} right="x-small" />
-<IconPrimary border="true" icon={"information"} size="medium" />
-<h1 className="dnb-h1">
-  h1 with  <Icon icon={Bell} border /> Icon
-</h1>
+<P>
+  <Icon border="true" icon={Bell} right />
+  <Icon border="true" icon={BellMedium} size="medium" right />
+  <IconPrimary border="true" icon={"information"} right />
+  <IconPrimary border="true" icon={"information"} size="medium" right />
+  <Button
+    icon={<IconPrimary icon="add" border />}
+    text="Button"
+  />
+</P>
           `}
         </ComponentBox>
 

diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js
@@ -25,7 +25,10 @@ export const DefaultIconSizes = {
   // large: 32 // currently not in use
 }
 // instead of using Object.entries(DefaultIconSizes)
-export const ListDefaultIconSizes = [['default', 16], ['medium', 24]]
+export const ListDefaultIconSizes = [
+  ['default', 16],
+  ['medium', 24]
+]
 export const ValidIconSizes = [
   'small', // 12px 0.75rem
   'default', // 16px 1rem
@@ -258,7 +261,7 @@ export const calcSize = props => {
   if (size === 'auto') {
     iconParams.width = '100%'
     iconParams.height = '100%'
-    sizeAsString = null
+    sizeAsString = 'auto'
   }
 
   return {
@@ -340,7 +343,7 @@ export const prepareIcon = props => {
     'dnb-icon',
     modifier ? `dnb-icon--${modifier}` : null,
     isTrue(border) ? 'dnb-icon--border' : null,
-    sizeAsString ? `dnb-icon--${sizeAsString}` : null,
+    sizeAsString ? `dnb-icon--${sizeAsString}` : `dnb-icon--default`,
     createSpacingClasses(props),
     _className,
     className

diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/Icon.test.js b/packages/dnb-ui-lib/src/components/icon/__tests__/Icon.test.js
@@ -50,7 +50,7 @@ describe('Icon component', () => {
     )
     Comp.setProps({ size: 16 })
     expect(Comp.find('span.dnb-icon').hasClass('dnb-icon--default')).toBe(
-      false
+      true
     )
   })
 

diff --git a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
@@ -5,6 +5,8 @@
 
 .dnb-icon {
   display: inline-block;
+
+  font-size: 1rem; // to make sure we have always the same starting point
   line-height: 1; // for vertical alignment, we have to have no line-height
   color: inherit;
 
@@ -70,6 +72,27 @@
     width: auto; // only to feed the svg
     height: auto; // only to feed the svg
   }
+  &--auto {
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
+  }
+  &--auto > &--wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  p &,
+  blockquote &,
+  h1 &,
+  h2 &,
+  h3 &,
+  h4 &,
+  h5 &,
+  h6 & {
+    vertical-align: middle;
+  }
 
   // IE fix
   @media screen and (-ms-high-contrast: none) {

diff --git a/packages/dnb-ui-lib/src/components/icon/style/themes/dnb-icon-theme-ui.scss b/packages/dnb-ui-lib/src/components/icon/style/themes/dnb-icon-theme-ui.scss
@@ -6,37 +6,36 @@
 .dnb-icon {
   &--border {
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+  }
+  &--border > &--wrapper {
+    position: relative;
 
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
-    color: inherit;
+    width: inherit;
+    height: inherit;
 
-    border-radius: 50%;
-    border: 0.0875em solid; // use 1.4px instead of 1.5 so webkit is rounding down
-    border-color: currentColor;
+    &::after {
+      content: '';
+      position: absolute;
 
-    // default size
-    width: 1.5em;
-    height: 1.5em;
-    svg {
-      width: 1em;
-      height: 1em;
-    }
+      width: 150%;
+      height: 150%;
 
-    & > span {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  &--border#{&}--medium {
-    width: 2em;
-    height: 2em;
-    svg {
-      width: 1.5em;
-      height: 1.5em;
+      border-radius: 50%;
+      border: 0.0875em solid; // use 1.4px instead of 1.5 so webkit is rounding down
+      border-color: currentColor;
     }
   }
+
+  // &--border#{&}--default > &--wrapper {
+  //   margin: 0 0.25rem;
+  // }
+  // &--border#{&}--medium > &--wrapper {
+  //   margin: 0 0.5rem;
+  // }
 }
diff --git a/packages/dnb-ui-lib/stories/components/Icons.js b/packages/dnb-ui-lib/stories/components/Icons.js
@@ -9,43 +9,59 @@ import { Wrapper, Box } from '../helpers'
 
 import { Button, Icon, IconPrimary } from '../../src/components'
 import { add as Svg } from '../../src/icons'
+import { P, H1, H4 } from '../../src/elements'
 
 export default [
   'Icons',
   () => (
     <Wrapper>
       <Box>
+        text
         <Svg />
         <Icon icon={Svg} />
       </Box>
       <Box>
-        <h1>
-          My H1 with an Icon <Icon icon={Svg} size="auto" />
-        </h1>
-        <h4>
-          My H4 with the same Icon <Icon icon={Svg} size="auto" />
-        </h4>
+        <H1>
+          My H1 with an auto <Icon icon={Svg} size="auto" />
+        </H1>
+        <H4>
+          My H4 with the same auto <Icon icon={Svg} size="auto" />
+        </H4>
       </Box>
       <Box>
         <IconPrimary icon="add" size="medium" />
       </Box>
       <Box>
-        text <IconPrimary icon="add" right="x-small" />
-        <IconPrimary icon="add" size="medium" /> text
-        <h1 className="dnb-h1">
-          text <IconPrimary icon="add" right="x-small" />
-          <IconPrimary icon="add" size="medium" /> text{' '}
-          <IconPrimary icon="add" size="auto" /> text
-        </h1>
+        <P>
+          text <IconPrimary icon="add" />
+          text <IconPrimary icon="add" size="medium" />
+          text
+        </P>
+        <H1>
+          text <IconPrimary icon="add" right />
+          text <IconPrimary icon="add" size="medium" right />
+          auto <IconPrimary icon="add" size="auto" right />
+          text
+        </H1>
       </Box>
       <Box>
-        text <IconPrimary icon="add" border right="x-small" />
-        <IconPrimary icon="add" size="medium" border /> text
-        <h1 className="dnb-h1">
-          text <IconPrimary icon="add" border right="x-small" />
-          <IconPrimary icon="add" size="medium" border /> text{' '}
-          <IconPrimary icon="add" size="auto" border /> text
-        </h1>
+        <P>
+          text <IconPrimary icon="add" border right />
+          text <IconPrimary icon="add" size="medium" border right />
+          text
+          <Button icon="add" text="Button" right />
+          <Button
+            icon={<IconPrimary icon="add" border />}
+            text="Button"
+            right
+          />
+        </P>
+        <H1 top>
+          text <IconPrimary icon="add" border right />
+          text <IconPrimary icon="add" size="medium" border right />
+          auto <IconPrimary icon="add" size="auto" border right />
+          text
+        </H1>
       </Box>
       <Box>
         <Button icon="add" right />