feat: add new property to enable a larger bounding box to a #button -…

… currently used in #date-picker
dnbexperience · May 5, 2019 · 645d95e · 645d95e
1 parent 5c58b07
commit 645d95e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 0 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -36,6 +36,7 @@ export const propTypes = {
   class: PropTypes.string,
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   href: PropTypes.string,
+  bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   // React props
@@ -69,6 +70,7 @@ export const defaultProps = {
   id: null,
   class: null,
   attributes: null,
+  bounding: false,
   disabled: false,
 
   // React props
@@ -146,6 +148,7 @@ export default class Button extends PureComponent {
       icon,
       icon_position,
       href,
+      bounding, // eslint-disable-line
       attributes, // eslint-disable-line
       innerRef, // eslint-disable-line
       ...props
@@ -242,6 +245,7 @@ class Content extends PureComponent {
       PropTypes.func
     ]),
     icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     isIconOnly: PropTypes.bool
   }
   static defaultProps = {
@@ -250,6 +254,7 @@ class Content extends PureComponent {
     content: null,
     icon: null,
     icon_size: 'default',
+    bounding: false,
     isIconOnly: null
   }
   render() {
@@ -259,11 +264,18 @@ class Content extends PureComponent {
       content,
       icon,
       icon_size,
+      bounding,
       isIconOnly
     } = this.props
 
     const ret = []
 
+    if (bounding) {
+      ret.push(
+        <span key="button-bounding" className="dnb-button__bounding" />
+      )
+    }
+
     if (content) {
       ret.push(content)
     }

diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/Button.test.js b/packages/dnb-ui-lib/src/components/button/__tests__/Button.test.js
@@ -56,6 +56,11 @@ describe('Button component', () => {
     expect(Comp.find('.dnb-button--has-text').exists()).toBe(false)
   })
 
+  it('has to have a bounding tag if property is set', () => {
+    const Comp = mount(<Component bounding={true} />)
+    expect(Comp.find('.dnb-button__bounding').exists()).toBe(true)
+  })
+
   it('has a button tag', () => {
     const Comp = mount(<Component {...props} href="https://url" />)
     expect(Comp.find('a').exists()).toBe(true)

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
@@ -3,6 +3,7 @@
 exports[`Button component have to match default button snapshot 1`] = `
 <Button
   attributes="attributes"
+  bounding="bounding"
   class="class"
   className="className"
   custom_element={Object {}}
@@ -34,6 +35,7 @@ exports[`Button component have to match default button snapshot 1`] = `
   >
     <Content
       attributes="attributes"
+      bounding="bounding"
       class="class"
       className="className"
       content="children"
@@ -55,6 +57,10 @@ exports[`Button component have to match default button snapshot 1`] = `
       type="type"
       variant="primary"
     >
+      <span
+        className="dnb-button__bounding"
+        key="button-bounding"
+      />
       children
       <span
         className="dnb-button__text"
@@ -108,6 +114,7 @@ exports[`Button component have to match default button snapshot 1`] = `
 exports[`Button component have to match href="..." snapshot 1`] = `
 <Button
   attributes="attributes"
+  bounding="bounding"
   class="class"
   className="className"
   custom_element={Object {}}
@@ -140,6 +147,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   >
     <Content
       attributes="attributes"
+      bounding="bounding"
       class="class"
       className="className"
       content="children"
@@ -161,6 +169,10 @@ exports[`Button component have to match href="..." snapshot 1`] = `
       type="type"
       variant="primary"
     >
+      <span
+        className="dnb-button__bounding"
+        key="button-bounding"
+      />
       children
       <span
         className="dnb-button__text"
@@ -572,6 +584,13 @@ exports[`Button scss have to match snapshot 1`] = `
     @supports not (-ms-ime-align: auto) {
       .dnb-button__text {
         transform: translateY(calc(1px - var(--button-border-width))); } }
+  .dnb-button__bounding {
+    position: absolute;
+    background-color: transparent;
+    width: var(--button-width);
+    height: var(--button-height);
+    border-radius: var(--button-border-radius);
+    transform: scale(1.2); }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -67,6 +67,15 @@
     }
   }
 
+  &__bounding {
+    position: absolute;
+    background-color: transparent;
+    width: var(--button-width);
+    height: var(--button-height);
+    border-radius: var(--button-border-radius);
+    transform: scale(1.2);
+  }
+
   // size small
   &--size-small {
     width: var(--button-width--small);

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
@@ -95,6 +95,7 @@ exports[`Modal component have to match snapshot 1`] = `
   >
     <Button
       attributes={null}
+      bounding={false}
       class={null}
       className="dnb-modal__trigger"
       custom_element={null}
@@ -125,6 +126,7 @@ exports[`Modal component have to match snapshot 1`] = `
       >
         <Content
           attributes={null}
+          bounding={false}
           class={null}
           className="dnb-modal__trigger"
           content={null}
@@ -384,6 +386,7 @@ exports[`Modal component have to match snapshot 1`] = `
             >
               <Button
                 attributes={null}
+                bounding={false}
                 class={null}
                 className="dnb-modal__close-button"
                 custom_element={null}
@@ -413,6 +416,7 @@ exports[`Modal component have to match snapshot 1`] = `
                 >
                   <Content
                     attributes={null}
+                    bounding={false}
                     class={null}
                     className="dnb-modal__close-button"
                     content={null}
@@ -665,6 +669,13 @@ exports[`Modal scss have to match snapshot 1`] = `
     @supports not (-ms-ime-align: auto) {
       .dnb-button__text {
         transform: translateY(calc(1px - var(--button-border-width))); } }
+  .dnb-button__bounding {
+    position: absolute;
+    background-color: transparent;
+    width: var(--button-width);
+    height: var(--button-height);
+    border-radius: var(--button-border-radius);
+    transform: scale(1.2); }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);