refactor(Button): refactor button and add gallery (#78)

* refactor(Button): refactor button and add gallery * remove focus-trap in button * use new BEM style * fix dialog message queue delay issue * remove secondary type in button * add focus style and autoFocus prop * remove autoFocus and fix local error * small tweaks * fix snapshot test failed * polish the tests in Button
webapp-suite · Dec 14, 2019 · 06486e4 · 06486e4
1 parent ebb5842
commit 06486e4
Show file tree

Hide file tree

Showing 35 changed files with 759 additions and 626 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,7 +82,6 @@
   "dependencies": {
     "classlist": "^2.0.0",
     "classnames": "^2.2.5",
-    "focus-trap": "^5.0.2",
     "invariant": "^2.2.2",
     "marked": "^0.7.0",
     "react-avatar-editor": "^11.0.7",
@@ -128,7 +127,7 @@
     "jsx-loader": "^0.13.2",
     "less": "^3.8.1",
     "less-loader": "^5.0.0",
-    "lint-staged": "^9.2.5",
+    "lint-staged": "^9.5.0",
     "lodash.template": "^4.4.0",
     "markdown-loader": "^5.1.0",
     "mini-css-extract-plugin": "^0.8.0",

diff --git a/site/apps/NotFound/index.js b/site/apps/NotFound/index.js
@@ -452,7 +452,7 @@ const NotFound = props => {
         <Button type="primary" onClick={() => navigate('/')}>
           Go To Home
         </Button>
-        <Button type="tertiary" onClick={() => window.history.back()}>
+        <Button onClick={() => window.history.back()}>
           Go Back
         </Button>
       </div>

diff --git a/site/apps/Start/usage.md b/site/apps/Start/usage.md
@@ -38,7 +38,7 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-          <Button icon="add">添加</Button>
+          <Button icon="add">ADD</Button>
       </div>
     );
   }

diff --git a/site/apps/apps.json b/site/apps/apps.json
@@ -58,7 +58,17 @@
       },
       {
         "name":"Button",
-        "cn":"按钮"
+        "cn":"按钮",
+        "tabs":[
+          {
+            "label":"Basic",
+            "doc":"Button-basic"
+          },
+          {
+            "label":"Gallery",
+            "doc":"Button-gallery"
+          }
+        ]
       },
       {
         "name":"Spinner",

diff --git a/site/pages/Home/index.js b/site/pages/Home/index.js
@@ -1,4 +1,4 @@
-import { Link } from '@reach/router'
+import { navigate } from '@reach/router'
 import { Button, BackToTop } from 'earth-ui'
 import NProgress from 'nprogress'
 import QueueAnim from 'rc-queue-anim'
@@ -26,6 +26,7 @@ class Home extends React.Component {
     this.setState({ imageStatus: 'failed' })
     NProgress.done()
   }
+
   render () {
     if (this.state.imageStatus === 'loading') {
       return (
@@ -63,14 +64,12 @@ class Home extends React.Component {
                 developers and designers.
               </p>
               <div key="buttons">
-                <Link to="/apps/start/usage">
-                  <Button type="primary" className="home__banner-btn">
-                    Get Started
-                  </Button>
-                </Link>
+                <Button type="primary" size="lg" onClick={() => navigate('/apps/start/usage')}>
+                  GET STARTED
+                </Button>
                 <a href="https://github.com/cosmos-x/earth-ui">
-                  <Button type="secondary" className="home__banner-btn">
-                    Github
+                  <Button type="primary" size="lg" ghost>
+                    GITHUB
                   </Button>
                 </a>
               </div>

diff --git a/site/pages/Home/index.less b/site/pages/Home/index.less
@@ -53,11 +53,4 @@
       color: @ui-color-slate-lightest;
     }
   }
-  &-btn {
-    width: 190px;
-    height: 56px;
-    font-size: 18px;
-    margin-right: @ui-unit !important;
-    border-radius: 28px;
-  }
 }
diff --git a/site/widgets/Demo/index.js b/site/widgets/Demo/index.js
@@ -61,8 +61,8 @@ class Demo extends React.Component {
               <Tabs>
                 <BoardHeader>
                   <TabList>
-                    <Tab>渲染</Tab>
-                    <Tab>代码</Tab>
+                    <Tab>Render</Tab>
+                    <Tab>Code</Tab>
                   </TabList>
                 </BoardHeader>
                 <BoardBody>

diff --git a/site/widgets/Doc/index.less b/site/widgets/Doc/index.less
@@ -10,7 +10,7 @@
     p {
       margin-top: 0;
       margin-bottom: 0;
-      font-family: @ui-fontstack;
+      font-family: 'Menlo', 'Monaco', 'Consolas', 'Bitstream Vera Sans Mono', monospace;
       font-size: 13px;
       font-weight: @ui-fontweight;
     }
@@ -56,8 +56,9 @@
     }
     thead {
       th {
+        padding-top: @ui-unit;
         font-size: @ui-fontsize;
-        font-weight: @ui-fontweight-medium;
+        font-weight: @ui-fontweight-bold;
       }
     }
   }

diff --git a/src/components/Aside/docs/Aside.dox b/src/components/Aside/docs/Aside.dox
@@ -18,7 +18,7 @@ class AsideBasic extends Component {
   render () {
     return (
       <div>
-        <Button type="secondary" onClick={this.openAside}>Open Aside</Button>
+        <Button ghost type="primary" onClick={this.openAside}>OPEN ASIDE</Button>
         <Aside isOpen={this.state.isOpen} onClose={this.onClose} title="Aside Title">
           Bacon ipsum dolor sit pölsesnack, jerky pork belly short loin sausage andouille kevin capicola ham hamburger doner. Shank prosciutto flank kevin ribeye short ribs swine ham pork porchetta spare ribs kielbasa beef ribs. Prosciutto pancetta shank boudin. Corned beef shoulder capicola, turducken prosciutto pork belly sirloin shankle brisket chuck leberkas tail beef. Sirloin meatloaf pastrami beef ribs. Ball tip pastrami landjaeger, brisket EarthUI strip steak short loin pancetta meatball corned beef tenderloin beef ribs spare ribs. EarthUI sausage strip steak ham, ribeye pork loin meatball turkey corned beef shoulder. Leberkas jerky sirloin boudin, turducken ham hock pastrami. Doner pig boudin sausage, ball tip leberkas ground round beef jowl kielbasa tongue shankle spare ribs tail shoulder. Fatback pork kielbasa ham, doner pig short loin short ribs pancetta. Pancetta jerky biltong short loin capicola beef. Pork belly strip steak venison brisket shoulder beef filet mignon shank tenderloin tri-tip ground round shankle cow.
         </Aside>
@@ -45,7 +45,7 @@ class AsideSpinner extends Component {
   render () {
    return (
      <div>
-       <Button type="secondary" onClick={this.openAside}>Open Aside With Spinner</Button>
+       <Button ghost type="primary" onClick={this.openAside}>OPEN ASIDE WITH SPINNER</Button>
        <Aside isOpen={this.state.isOpen} onClose={this.onClose} title="Aside Title">
          <Spinner isLoading={this.state.isLoading}>
            Bacon ipsum dolor sit pölsesnack, jerky pork belly short loin sausage andouille kevin capicola ham hamburger doner. Shank prosciutto flank kevin ribeye short ribs swine ham pork porchetta spare ribs kielbasa beef ribs. Prosciutto pancetta shank boudin. Corned beef shoulder capicola, turducken prosciutto pork belly sirloin shankle brisket chuck leberkas tail beef. Sirloin meatloaf pastrami beef ribs. Ball tip pastrami landjaeger, brisket EarthUI strip steak short loin pancetta meatball corned beef tenderloin beef ribs spare ribs. EarthUI sausage strip steak ham, ribeye pork loin meatball turkey corned beef shoulder. Leberkas jerky sirloin boudin, turducken ham hock pastrami. Doner pig boudin sausage, ball tip leberkas ground round beef jowl kielbasa tongue shankle spare ribs tail shoulder. Fatback pork kielbasa ham, doner pig short loin short ribs pancetta. Pancetta jerky biltong short loin capicola beef. Pork belly strip steak venison brisket shoulder beef filet mignon shank tenderloin tri-tip ground round shankle cow.
@@ -73,7 +73,7 @@ class AsideTabs extends Component {
   render () {
     return (
       <div>
-        <Button type="secondary" onClick={this.openAside}>Open Aside with Tabs</Button>
+        <Button ghost type="primary" onClick={this.openAside}>OPEN ASIDE WITH TABS</Button>
         <Aside isOpen={this.state.isOpen} onClose={this.onClose} title="Declarative Tabs">
           <Tabs>
             <TabList>
@@ -111,20 +111,20 @@ class StackingAsides extends Component {
   render () {
     return (
       <div>
-        <Button type="secondary" onClick={()=>this.openAside(1)}>
-          Open Stacking Asides
+        <Button ghost type="primary" onClick={()=>this.openAside(1)}>
+          OPEN STACKING ASIDES
         </Button>
         <Aside isOpen={this.state.isOpen1} onClose={()=>this.closeAside(1)} title="Aside One">
-          <Button type="tertiary" onClick={()=>this.openAside(2)} block autoFocus>
-            Open Aside Two
+          <Button ghost type="primary" onClick={()=>this.openAside(2)} block>
+            OPEN ASIDE TWO
           </Button>
           <Aside isOpen={this.state.isOpen2} onClose={()=>this.closeAside(2)} title="Aside Two">
-            <Button type="tertiary" onClick={()=>this.openAside(3)} block autoFocus>
-              Open Aside Three
+            <Button ghost type="primary" onClick={()=>this.openAside(3)} block>
+              OPEN ASIDE THREE
             </Button>
             <Aside isOpen={this.state.isOpen3} onClose={()=>this.closeAside(3)} title="Aside Three">
-              <Button type="primary" onClick={()=>this.closeAside(1)} block autoFocus>
-                Close all asides
+              <Button type="primary" onClick={()=>this.closeAside(1)} block>
+                CLOSE ALL ASIDES
               </Button>
             </Aside>
           </Aside>

diff --git a/src/components/Aside/index.less b/src/components/Aside/index.less
@@ -20,6 +20,11 @@
     }
     &-close {
       top: 3px;
+      padding: @ui-unit-half;
+      border: 1px solid transparent;
+      &:hover {
+        background-color: fade(@ui-color-gray-light, 50%);
+      }
     }
     &_with-tabs {
       padding-bottom: @ui-unit-double;

diff --git a/src/components/AvatarClip/index.js b/src/components/AvatarClip/index.js
@@ -66,7 +66,7 @@ class AvatarClip extends Component {
               <svg viewBox="0 0 18 16" width="21" height="16" aria-hidden="true" style={{ height: 16, width: 21 }}><title /><g><path d="M13.296 3H1.006C.45 3 0 3.45 0 4.003v10.995C0 15.545.45 16 1.007 16h12.986C14.55 16 15 15.553 15 15V4.003C15 3.456 14.55 3 13.993 3h-.697zm-.892 11H2.596c-.33 0-.596-.266-.596-.6V5.6C2 5.27 2.267 5 2.596 5h9.81c.328 0 .595.266.595.6v7.8c0 .33-.268.6-.596.6zM4 0c-.552 0-1 .448-1 1s.448 1 1 1h11.5s.5 0 .5.5V12c0 .552.448 1 1 1s1-.448 1-1V1c0-.552-.448-1-1-1H4z" fillRule="evenodd" /></g></svg>
             </div>
             <div className={`${prefixCls}-avatar-clip__footer`}>
-              <Button type="secondary" onClick={this.handleSave} block>
+              <Button type="primary" onClick={this.handleSave} block ghost>
                 {cropButtonName}
               </Button>
             </div>

diff --git a/src/components/Board/docs/Board.dox b/src/components/Board/docs/Board.dox
@@ -58,9 +58,9 @@ const BoardWithButtons = () => {
   return (
     <Board title="My Board">
       <BoardHeader>
-        <Button type="primary" micro>one</Button>
-        <Button type="secondary" micro>two</Button>
-        <Button type="tertiary" onClick={()=> notification.success('Clicked!')} micro>three</Button>
+        <Button type="primary" size="sm">one</Button>
+        <Button size="sm">two</Button>
+        <Button onClick={()=> notification.success('Clicked!')} size="sm">three</Button>
       </BoardHeader>
       <BoardBody>
         The classic Board with buttons looks like this.

diff --git a/src/components/Button/__tests__/__snapshots__/index.test.js.snap b/src/components/Button/__tests__/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Button should render Chinese characters correctly 1`] = `
 <button
-  class="true-button true-button_nofocus"
+  class="true-button true-button--md"
   type="button"
 >
   <span>
@@ -11,25 +11,9 @@ exports[`Button should render Chinese characters correctly 1`] = `
 </button>
 `;
 
-exports[`Button should render autoFocus button correctly 1`] = `
-<Button
-  autoFocus={true}
-  focus={false}
->
-  <button
-    className="true-button"
-    type="button"
-  >
-    <span>
-      OK
-    </span>
-  </button>
-</Button>
-`;
-
 exports[`Button should render correctly 1`] = `
 <button
-  class="true-button true-button_nofocus"
+  class="true-button true-button--md"
   type="button"
 >
   <span>
@@ -40,21 +24,23 @@ exports[`Button should render correctly 1`] = `
 
 exports[`Button should render icon correctly 1`] = `
 <button
-  class="true-button true-button_nofocus"
+  class="true-button true-button--md"
   type="button"
 >
-  <i
-    class="true-icon true-icon__add"
-  />
-  <span>
-    添加
-  </span>
+  <div>
+    <i
+      class="true-icon true-icon__add"
+    />
+    <span>
+      添加
+    </span>
+  </div>
 </button>
 `;
 
 exports[`Button should render icon correctly 2`] = `
 <button
-  class="true-button true-button_nofocus"
+  class="true-button true-button--md"
   type="button"
 >
   <span>