change the way we display the button in the portal. This is still WIP…

…, and will be changes overtime to all components.
dnbexperience · Feb 5, 2019 · 1df2ef6 · 1df2ef6
1 parent 9e86370
commit 1df2ef6
Show file tree

Hide file tree

Showing 18 changed files with 173 additions and 109 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md b/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md
@@ -2,7 +2,7 @@
 title: 'Accordion'
 draft: false
 status: 'wip'
-# order: 1
+order: 1
 ---
 
 import Tabs from 'Tags/Tabs'

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
@@ -1,40 +1,25 @@
 ---
 title: 'Button'
 draft: false
-status: null
-order: 1
+order: 2
 ---
 
 import Tabs from 'Tags/Tabs'
-import ComponentBox from 'Tags/ComponentBox'
-import Description from 'Pages/uilib/components/button/description'
-import Details from 'Pages/uilib/components/button/details'
-import Demos from 'Pages/uilib/components/button/Examples'
+
+import FirstTabContent from 'Pages/uilib/components/button/first-tab-content'
+import SecondTabContent from 'Pages/uilib/components/button/second-tab-content'
+import ThirdTabContent from 'Pages/uilib/components/button/third-tab-content'
 
 # Button
 
 <Tabs>
   <Tabs.Content>
-    <Description />
-    <h2>Demos</h2>
-    <Demos />
+    <FirstTabContent />
   </Tabs.Content>
   <Tabs.Content>
-    <Details />
-    <ComponentBox caption="Test">
-    {`
-      <Button
-        text="Secondary button with text only 2"
-        variant="secondary"
-        title="This is a button title"
-      />
-    `}
-    </ComponentBox>
+    <SecondTabContent />
   </Tabs.Content>
-  <Tabs.Content title="Markup">
-    <h2>H2</h2>
+  <Tabs.Content>
+    <ThirdTabContent  />
   </Tabs.Content>
 </Tabs>
-
-<!-- import ButtonPage from 'Src/uilib/components/demos/Button' -->
-<!-- <ButtonPage /> -->
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
@@ -4,7 +4,7 @@
  */
 
 import React, { PureComponent, Fragment } from 'react'
-import styled from '@emotion/styled'
+import ComponentBox from '../../../../shared/inlineTags/ComponentBox'
 import Button from 'dnb-ui-lib/src/components/button'
 import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons'
 
@@ -13,25 +13,26 @@ class Example extends PureComponent {
     alert('You clicked a button with a click function attached to it')
   }
   render() {
+    console.log('Example')
     return (
       <Fragment>
-        <div className="example-box">
-          <Button
-            text="Primary button with text only"
-            title="This is a button title"
-            on_click={this.clickHandler}
-            attributes={{
-              'data-fake:on_click': 'clickme()'
-            }}
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Secondary button with text only"
-            variant="secondary"
-            title="This is a button title"
-          />
-        </div>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with text only"
+  title="This is a button title"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Secondary button with text only"
+  variant="secondary"
+  title="This is a button title"
+/>
+          `}
+        </ComponentBox>
         <div className="example-box">
           <Button
             text="Disabled primary button"
@@ -132,14 +133,4 @@ class Example extends PureComponent {
   }
 }
 
-const Wrapper = styled.div`
-  display: block;
-  width: 100%;
-`
-
-// export { Example }
-export default () => (
-  <Wrapper>
-    <Example />
-  </Wrapper>
-)
+export default Example
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md
diff --git a/...es/uilib/components/button/description.md → ...ib/components/button/first-tab-content.md b/...es/uilib/components/button/description.md → ...ib/components/button/first-tab-content.md
@@ -2,6 +2,12 @@
 draft: true
 ---
 
+import Examples from 'Pages/uilib/components/button/Examples'
+
 ## Description
 
 The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the `action-nav` element.
+
+## Demos
+
+<Examples />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/index.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/index.js
diff --git a/.../pages/uilib/components/button/details.md → ...b/components/button/second-tab-content.md b/.../pages/uilib/components/button/details.md → ...b/components/button/second-tab-content.md
@@ -2,6 +2,8 @@
 draft: true
 ---
 
+## Properties
+
 | Properties      | Description                                                                                                                            |
 | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | `type`          | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) .                                       |
@@ -17,6 +19,8 @@ draft: true
 | `attributes`    | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes.                                       |
 | `href`          | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
 
+## Events
+
 | Events     | Description                                   |
 | ---------- | --------------------------------------------- |
 | `on_click` | _(optional)_ will be called on a click event. |
diff --git a/...dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md b/...dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md
@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+## Events
+
+| Events     | Description                                   |
+| ---------- | --------------------------------------------- |
+| `on_click` | _(optional)_ will be called on a click event. |
diff --git a/...esign-system-portal/src/pages/uilib/usage/customisation/component-properties.md b/...esign-system-portal/src/pages/uilib/usage/customisation/component-properties.md
@@ -6,7 +6,6 @@ order: 6
 
 import 'dnb-ui-lib/src/web-components'
 import ComponentBox from 'Tags/ComponentBox'
-import PropertiesExample from 'Pages/uilib/usage/customisation/examples/properties-example'
 
 # Component Properties
 

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js
@@ -0,0 +1,21 @@
+/**
+ * Inline Tag
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Code from '../parts/uilib/Code'
+
+export default class Markup extends PureComponent {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  }
+  static defaultProps = {
+    children: null
+  }
+  render() {
+    const { children } = this.props
+    return <Code source={children} />
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -194,7 +194,7 @@ export default class Button extends PureComponent {
       ...this.renderProps,
       className: classes,
       type,
-      title: title || text,
+      title,
       id,
       disabled,
       onMouseOut: this.onMouseOutHandler, // for resetting the button to the default state

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
@@ -607,6 +607,14 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -632,13 +640,11 @@ exports[`Button scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -649,13 +655,16 @@ exports[`Button scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .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
@@ -24,14 +24,13 @@
 }
 
 .dnb-button {
-  display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
+  cursor: pointer;
   white-space: nowrap;
 
-  cursor: pointer;
+  // we use flex, even if they dont has effect in safari and webkit
+  display: inline-flex;
+  align-items: center; //centering icons
+  justify-content: center; //centering icons
 
   width: var(--button-width);
   height: var(--button-height);
@@ -50,12 +49,14 @@
       width: var(--button-icon-size);
       height: var(--button-icon-size);
     }
+
+    /* -1px because of the border width */
+    @supports not (-ms-ime-align: auto) {
+      transform: translateY(calc(1px - 1px - var(--button-border-width)));
+    }
   }
   &__text {
     color: inherit;
-
-    // +1px because of the border width
-    transform: translateY(var(--button-border-width));
   }
 
   // size small

diff --git a/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss b/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss
@@ -10,6 +10,18 @@
 
 .dnb-button {
   @include componentReset();
+
+  button {
+    overflow: visible;
+    text-transform: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
 }
 
 @import './_button.scss';
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
@@ -377,6 +377,14 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -402,13 +410,11 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -419,13 +425,16 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);