feat: do not hide icons if a button is a icon button only

dnbexperience · Jan 23, 2019 · 1b00672 · 1b00672
1 parent 59743d6
commit 1b00672
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -146,7 +146,8 @@ export default class Button extends PureComponent {
     let { variant, size } = props
 
     // if only has Icon, then resize it and define it as secondary
-    if (!text && icon) {
+    const isIconOnly = Boolean(!text && icon)
+    if (isIconOnly) {
       if (!variant) {
         variant = 'secondary'
       }
@@ -195,11 +196,19 @@ export default class Button extends PureComponent {
 
     return href ? (
       <a href={href} ref={this._ref} {...params}>
-        <Content {...this.props} content={content} />
+        <Content
+          {...this.props}
+          content={content}
+          isIconOnly={isIconOnly}
+        />
       </a>
     ) : (
       <button ref={this._ref} {...params}>
-        <Content {...this.props} content={content} />
+        <Content
+          {...this.props}
+          content={content}
+          isIconOnly={isIconOnly}
+        />
       </button>
     )
   }
@@ -215,17 +224,26 @@ class Content extends PureComponent {
       PropTypes.node,
       PropTypes.func
     ]),
-    icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    isIconOnly: PropTypes.bool
   }
   static defaultProps = {
     text: null,
     title: null,
     content: null,
     icon: null,
-    icon_size: null
+    icon_size: null,
+    isIconOnly: null
   }
   render() {
-    const { text, title, content, icon, icon_size } = this.props
+    const {
+      text,
+      title,
+      content,
+      icon,
+      icon_size,
+      isIconOnly
+    } = this.props
 
     const ret = []
 
@@ -250,7 +268,7 @@ class Content extends PureComponent {
           icon={icon}
           size={icon_size}
           alt={alt}
-          area_hidden={Boolean(alt)}
+          area_hidden={isIconOnly ? false : Boolean(alt)}
         />
       )
     }

diff --git a/packages/dnb-ui-lib/src/components/button/Example.js b/packages/dnb-ui-lib/src/components/button/Example.js
@@ -98,10 +98,10 @@ class Example extends PureComponent {
           />
           <Button title="Button with Icon only" icon="calendar" />
           <Button
-            title="Medium Button with Icon only"
+            title="Default sized Button with medium Icon"
             icon="calendar"
             icon_size="medium"
-            size="medium"
+            size="default"
           />
           <Button
             title="Button with custom, Secondary Icon only"

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -44,6 +44,7 @@ exports[`Button component have to match default button snapshot 1`] = `
       icon_size="icon_size"
       id="id"
       innerRef={Object {}}
+      isIconOnly={false}
       on_click="on_click"
       size={null}
       text="text"
@@ -143,6 +144,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       icon_size="icon_size"
       id="id"
       innerRef={Object {}}
+      isIconOnly={false}
       on_click="on_click"
       size={null}
       text="text"

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -111,6 +111,7 @@ exports[`Modal component have to match snapshot 1`] = `
             icon_size={null}
             id={null}
             innerRef={null}
+            isIconOnly={true}
             on_click={[Function]}
             size={null}
             text={null}
@@ -120,7 +121,7 @@ exports[`Modal component have to match snapshot 1`] = `
           >
             <IconPrimary
               alt="Open Modal"
-              area_hidden={true}
+              area_hidden={false}
               attributes={null}
               class={null}
               className="dnb-button__icon"
@@ -133,7 +134,6 @@ exports[`Modal component have to match snapshot 1`] = `
               width={null}
             >
               <span
-                aria-hidden={true}
                 aria-label="Open Modal"
                 className="dnb-icon dnb-icon--default dnb-button__icon"
                 role="img"
@@ -349,6 +349,7 @@ exports[`Modal component have to match snapshot 1`] = `
                     icon_size={null}
                     id={null}
                     innerRef={null}
+                    isIconOnly={true}
                     on_click={[Function]}
                     size={null}
                     text={null}
@@ -358,7 +359,7 @@ exports[`Modal component have to match snapshot 1`] = `
                   >
                     <IconPrimary
                       alt="Close"
-                      area_hidden={true}
+                      area_hidden={false}
                       attributes={null}
                       class={null}
                       className="dnb-button__icon"
@@ -371,7 +372,6 @@ exports[`Modal component have to match snapshot 1`] = `
                       width={null}
                     >
                       <span
-                        aria-hidden={true}
                         aria-label="Close"
                         className="dnb-icon dnb-icon--default dnb-button__icon"
                         role="img"

diff --git a/packages/dnb-ui-lib/src/patterns/range-slider/description.md b/packages/dnb-ui-lib/src/patterns/range-slider/description.md
@@ -1,5 +1,5 @@
 ---
-status: 'wip'
+status: 'dep'
 ---
 
 ## Description

diff --git a/packages/dnb-ui-lib/src/patterns/summary-table/description.md b/packages/dnb-ui-lib/src/patterns/summary-table/description.md
@@ -1,5 +1,5 @@
 ---
-status: 'wip'
+status: 'dep'
 ---
 
 ## Description