feat: add additional size to #button

dnbexperience · Jan 23, 2019 · 058ba07 · 058ba07
1 parent 24f9302
commit 058ba07
Show file tree

Hide file tree

Showing 11 changed files with 145 additions and 35 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -98,10 +98,6 @@ export default class StickyMenuBar extends PureComponent {
                         {({ toggleMenu, isOpen }) => (
                           <Button
                             icon={isOpen ? closeIcon : hamburgerIcon}
-                            // icon_size="medium"
-                            // size="medium"
-                            // variant="tertiary"
-                            // variant="secondary"
                             on_click={toggleMenu}
                             className="toggle-sidebar-menu"
                             title={isOpen ? 'Hide Menu' : 'Show Menu'}
@@ -180,12 +176,6 @@ const barStyle = css`
       display: flex;
     }
   }
-
-  ${'' /* not used anymore up there .heading {
-    font-size: 1.5em;
-    font-weight: 200;
-    text-align: center;
-  } */}
 `
 
 const hideSiebarToggleButtonStyle = css`

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -151,7 +151,7 @@ export default class Button extends PureComponent {
         variant = 'secondary'
       }
       if (!size) {
-        size = 'small'
+        size = 'medium'
       }
     } else if (text) {
       if (!variant) {

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
@@ -45,8 +45,8 @@ describe('Button component', () => {
   it('icon only has to have some extra classes', () => {
     const Comp = mount(<Component icon="question" />)
 
-    // size "small" (32px)
-    expect(Comp.find('.dnb-button--size-small').exists()).toBe(true)
+    // size "medium" (32px)
+    expect(Comp.find('.dnb-button--size-medium').exists()).toBe(true)
 
     // has icon class, but not has text
     expect(Comp.find('.dnb-button--has-icon').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
@@ -597,18 +597,22 @@ exports[`Button scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-size: 1rem;
+  --button-font-size: var(--font-size-default);
+  --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--small: 2rem;
-  --button-height--small: 2rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -639,6 +643,8 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
+    font-size: var(--button-font-size-small);
+    line-height: var(--button-font-size-small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
@@ -647,9 +653,22 @@ exports[`Button scss have to match snapshot 1`] = `
     padding-left: 0.5em; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
+  .dnb-button--size-medium {
+    width: var(--button-width--medium);
+    height: var(--button-height--medium);
+    line-height: var(--button-height--medium);
+    border-radius: var(--button-border-radius--medium); }
+  .dnb-button--has-text.dnb-button--size-medium {
+    padding-left: 1em;
+    padding-right: 1em; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+    padding-left: 0.5em; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+    padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);
     height: var(--button-height--large);
+    line-height: var(--button-height--large);
     border-radius: var(--button-border-radius--large); }
   .dnb-button--has-text.dnb-button--size-large {
     padding-left: 2em;

diff --git a/packages/dnb-ui-lib/src/components/button/details.md b/packages/dnb-ui-lib/src/components/button/details.md
@@ -4,7 +4,7 @@
 | `text`          | _(optional)_ the content of the button.                                                                                                |
 | `title`         | _(optional)_ title of the button. Optional, but should always be included because of accessibility.                                    |
 | `variant`       | _(optional)_ defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.                          |
-| `size`          | _(optional)_ the size of the button. For now there is **small**, **default** and **large**.                                            |
+| `size`          | _(optional)_ the size of the button. For now there is **medium**, **default** and **large**.                                           |
 | `icon`          | _(optional)_ name of icon to be included in the button.                                                                                |
 | `icon_position` | _(optional)_ position of icon inside the button. Set to `left` or `right`. Defaults to `right` if not set.                             |
 | `icon_size`     | _(optional)_ define icon width and height. Defaults to 16px                                                                            |

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -4,18 +4,22 @@
 */
 
 :root {
-  --button-font-size: 1rem;
+  --button-font-size: var(--font-size-default);
+  --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--small: 2rem;
-  --button-height--small: 2rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
 }
 
@@ -58,6 +62,8 @@
   &--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
+    font-size: var(--button-font-size-small);
+    line-height: var(--button-font-size-small);
     border-radius: var(--button-border-radius--small);
   }
   &--has-text#{&}--size-small {
@@ -71,10 +77,29 @@
     padding-right: 0.5em;
   }
 
+  // size medium
+  &--size-medium {
+    width: var(--button-width--medium);
+    height: var(--button-height--medium);
+    line-height: var(--button-height--medium);
+    border-radius: var(--button-border-radius--medium);
+  }
+  &--has-text#{&}--size-medium {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  &--has-text#{&}--icon-position-left#{&}--size-medium {
+    padding-left: 0.5em;
+  }
+  &--has-text#{&}--icon-position-right#{&}--size-medium {
+    padding-right: 0.5em;
+  }
+
   // size large
   &--size-large {
     width: var(--button-width--large);
     height: var(--button-height--large);
+    line-height: var(--button-height--large);
     border-radius: var(--button-border-radius--large);
   }
   &--has-text#{&}--size-large {

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -372,18 +372,22 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-size: 1rem;
+  --button-font-size: var(--font-size-default);
+  --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--small: 2rem;
-  --button-height--small: 2rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -414,6 +418,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
+    font-size: var(--button-font-size-small);
+    line-height: var(--button-font-size-small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
@@ -422,9 +428,22 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     padding-left: 0.5em; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
+  .dnb-button--size-medium {
+    width: var(--button-width--medium);
+    height: var(--button-height--medium);
+    line-height: var(--button-height--medium);
+    border-radius: var(--button-border-radius--medium); }
+  .dnb-button--has-text.dnb-button--size-medium {
+    padding-left: 1em;
+    padding-right: 1em; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+    padding-left: 0.5em; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+    padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);
     height: var(--button-height--large);
+    line-height: var(--button-height--large);
     border-radius: var(--button-border-radius--large); }
   .dnb-button--has-text.dnb-button--size-large {
     padding-left: 2em;

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -229,18 +229,22 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-size: 1rem;
+  --button-font-size: var(--font-size-default);
+  --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--small: 2rem;
-  --button-height--small: 2rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -271,6 +275,8 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
+    font-size: var(--button-font-size-small);
+    line-height: var(--button-font-size-small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
@@ -279,9 +285,22 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     padding-left: 0.5em; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
+  .dnb-button--size-medium {
+    width: var(--button-width--medium);
+    height: var(--button-height--medium);
+    line-height: var(--button-height--medium);
+    border-radius: var(--button-border-radius--medium); }
+  .dnb-button--has-text.dnb-button--size-medium {
+    padding-left: 1em;
+    padding-right: 1em; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+    padding-left: 0.5em; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+    padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);
     height: var(--button-height--large);
+    line-height: var(--button-height--large);
     border-radius: var(--button-border-radius--large); }
   .dnb-button--has-text.dnb-button--size-large {
     padding-left: 2em;

diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -376,7 +376,7 @@ class Submit extends PureComponent {
           className="dnb-input__search-submit__button"
           variant="secondary"
           icon="search"
-          size="small"
+          size="medium"
           onClick={this.onSubmitHandler}
           onFocus={this.onFocusHandler}
           onBlur={this.onBlurHandler}

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -415,18 +415,22 @@ exports[`Input scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-size: 1rem;
+  --button-font-size: var(--font-size-default);
+  --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
   --button-height: 2.5rem;
-  --button-width--small: 2rem;
-  --button-height--small: 2rem;
+  --button-width--small: 1.5rem;
+  --button-height--small: 1.5rem;
+  --button-width--medium: 2rem;
+  --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
   --button-icon-size: 1rem;
   --button-border-width: 1px;
   --button-border-width--hover: 3px;
   --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
+  --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
@@ -457,6 +461,8 @@ exports[`Input scss have to match snapshot 1`] = `
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
+    font-size: var(--button-font-size-small);
+    line-height: var(--button-font-size-small);
     border-radius: var(--button-border-radius--small); }
   .dnb-button--has-text.dnb-button--size-small {
     padding-left: 1em;
@@ -465,9 +471,22 @@ exports[`Input scss have to match snapshot 1`] = `
     padding-left: 0.5em; }
   .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small {
     padding-right: 0.5em; }
+  .dnb-button--size-medium {
+    width: var(--button-width--medium);
+    height: var(--button-height--medium);
+    line-height: var(--button-height--medium);
+    border-radius: var(--button-border-radius--medium); }
+  .dnb-button--has-text.dnb-button--size-medium {
+    padding-left: 1em;
+    padding-right: 1em; }
+  .dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium {
+    padding-left: 0.5em; }
+  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
+    padding-right: 0.5em; }
   .dnb-button--size-large {
     width: var(--button-width--large);
     height: var(--button-height--large);
+    line-height: var(--button-height--large);
     border-radius: var(--button-border-radius--large); }
   .dnb-button--has-text.dnb-button--size-large {
     padding-left: 2em;