feat: make it possible to set a button element as not focus able with…

… tabindex="-1"
dnbexperience · Jan 4, 2019 · cd8c6da · cd8c6da
1 parent 9133eff
commit cd8c6da
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -138,10 +138,12 @@ export default class Button extends PureComponent {
       disabled,
       text,
       icon,
-      icon_position
+      icon_position,
+      href,
+      ...props
     } = this.props
 
-    let { variant, size } = this.props
+    let { variant, size } = props
 
     // if only has Icon, then resize it and define it as secondary
     if (!text && icon) {
@@ -174,7 +176,7 @@ export default class Button extends PureComponent {
       id,
       class_name,
       className,
-      this.props.href ? 'no-underline no-underline-hover' : null
+      href ? 'no-underline no-underline-hover' : null
     )
 
     const params = {
@@ -194,8 +196,8 @@ export default class Button extends PureComponent {
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
 
-    return this.props.href ? (
-      <a href={this.props.href} ref={this._ref} {...params}>
+    return href ? (
+      <a href={href} ref={this._ref} {...params}>
         <Content {...this.props} content={content} />
       </a>
     ) : (

diff --git a/packages/dnb-ui-lib/src/shared/component-helper.js b/packages/dnb-ui-lib/src/shared/component-helper.js
@@ -73,6 +73,14 @@ export const validateDOMAttributes = (props, params) => {
     delete params.disabled
   }
 
+  if (props && props.tabindex) {
+    let tabIndex = props.tabindex
+    if (tabIndex === 'off') {
+      tabIndex = '-1'
+    }
+    params['tabIndex'] = tabIndex
+  }
+
   // add web component event handler
   if (props && typeof props.on_click === 'function') {
     params['onClick'] = props.on_click