Merge pull request #219 from dabapps/button-fixes

Button fixes
dabapps · Feb 22, 2018 · 21396a9 · 21396a9
2 parents 0843112 + c9cbb12
commit 21396a9
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 44 deletions.
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -10,6 +10,7 @@ import {
   ContentBoxHeader,
   DabIpsum,
   Footer,
+  FormGroup,
   NavBar,
   Row,
   Section,
@@ -45,6 +46,74 @@ ReactDOM.render(
 
         <DabIpsum />
 
+        <Row>
+          <Column>
+            <h2>
+              Can't touch these
+            </h2>
+
+            <FormGroup block>
+              <label>
+                Nope
+              </label>
+              <input type="text" disabled />
+            </FormGroup>
+
+            <SpacedGroup>
+              <Button disabled>
+                Nope
+              </Button>
+
+              <Button className="disabled">
+                Also nope
+              </Button>
+            </SpacedGroup>
+          </Column>
+        </Row>
+
+        <Row>
+          <Column sm={8} smOffset={2} md={6} mdOffset={3} lg={4} lgOffset={4}>
+            <ContentBox>
+              <ContentBoxHeader>
+                <h2 className="font-size-large">
+                  Login
+                </h2>
+              </ContentBoxHeader>
+
+              <FormGroup block>
+                <label>
+                  Email
+                </label>
+                <input type="email" />
+              </FormGroup>
+
+              <FormGroup block>
+                <label>
+                  Password
+                </label>
+                <input type="password" />
+              </FormGroup>
+
+              <p className="error">
+                Incorrect email or password
+              </p>
+
+              <ContentBoxFooter>
+                <SpacedGroup block className="margin-vertical-base">
+                  <Button>
+                    Forgot password
+                  </Button>
+                  <Button className="primary">
+                    <span className="this-span-is-here-for-testing-purposes">
+                      Login
+                    </span>
+                  </Button>
+                </SpacedGroup>
+              </ContentBoxFooter>
+            </ContentBox>
+          </Column>
+        </Row>
+
         <ContentBox>
           <ContentBoxHeader>
             <h2>
@@ -85,17 +154,6 @@ ReactDOM.render(
               </Column>
             </Row>
           </Section>
-
-          <ContentBoxFooter>
-            <SpacedGroup block className="padding-vertical-base">
-              <Button>
-                Cancel
-              </Button>
-              <Button className="primary">
-                Submit
-              </Button>
-            </SpacedGroup>
-          </ContentBoxFooter>
         </ContentBox>
       </Container>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -92,8 +92,7 @@
   "peerDependencies": {
     "react": ">= 15 < 16",
     "react-dom": ">= 15 < 16",
-    "react-transition-group": ">= 1 < 2",
-    "typescript": ">= 2.3.3 < 3"
+    "react-transition-group": ">= 1 < 2"
   },
   "jest": {
     "setupFiles": [

diff --git a/src/less/buttons.less b/src/less/buttons.less
@@ -1,11 +1,44 @@
 /* @group Mixins */
 
+.create-button-pew () {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: transparent;
+  transition: ease-in-out 0.2s background-color;
+  border-radius: @border-radius-base;
+
+  &::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 0;
+    padding-bottom: 200%;
+    border-radius: 50%;
+    transition: 0.5s ease-out transform, 0.5s ease-out opacity;
+    transform: translate(-50%, -50%) scale(1, 1);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:active:not([disabled]):not(.disabled) {
+    &::before {
+      transition: none;
+      transform: translate(-50%, -50%) scale(0, 0);
+      opacity: 1;
+    }
+  }
+}
+
 .create-button-styles (@background: @button-background-default, @color: @button-text-color-dark) {
+  .create-button-pew();
   background-color: @background;
   color: @color;
 
-  &:hover:not([disabled]),
-  &:hover:not(.disabled) {
+  &:hover:not([disabled]):not(.disabled) {
     background-color: darken(@background, 5%);
     color: @color;
   }
@@ -37,34 +70,14 @@
   transition: ease-in-out 0.1s background-color, ease-in-out 0.1s box-shadow;
   box-shadow: @shadow-none;
 
-  &:hover:not([disabled]),
-  &:hover:not(.disabled) {
+  &:hover:not([disabled]):not(.disabled) {
     box-shadow: @shadow-inset-subtle;
   }
 
-  &:active:not([disabled]),
-  &:active:not(.disabled) {
+  &:active:not([disabled]):not(.disabled) {
     box-shadow: @shadow-inset-hard;
   }
 
-  &:focus:not([disabled]),
-  &:focus:not(.disabled) {
-    &::before {
-      content: ' ';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transition: 0.2s opacity, 0.2s transform;
-      transform: translate(-50%, -50%) scale(0, 0);
-      opacity: 0;
-      width: 200%;
-      height: 0;
-      padding-bottom: 200%;
-      animation: 1s button-click linear forwards;
-      border-radius: 50%;
-    }
-  }
-
   &.block + .button.block {
     margin-top: @margin-base;
   }

diff --git a/src/less/nav-bar.less b/src/less/nav-bar.less
@@ -21,8 +21,7 @@
     color: @nav-bar-link-color;
     text-decoration: @nav-bar-link-text-decoration;
 
-    &:hover:not([disabled]),
-    &:hover:not(.disabled) {
+    &:hover:not([disabled]):not(.disabled) {
       color: @nav-bar-link-color-hover;
       text-decoration: @nav-bar-link-text-decoration-hover;
     }

diff --git a/src/less/overrides.less b/src/less/overrides.less
@@ -48,8 +48,7 @@ a {
   cursor: pointer;
   transition: ease-in-out color 0.1s;
 
-  &:hover:not([disabled]),
-  &:hover:not(.disabled) {
+  &:hover:not([disabled]):not(.disabled) {
     color: @link-color-hover;
     text-decoration: @link-text-decoration-hover;
   }
@@ -255,6 +254,7 @@ keygen {
   &[disabled],
   &.disabled {
     cursor: not-allowed;
+    outline: none;
   }
 }
 

diff --git a/src/less/tables.less b/src/less/tables.less
@@ -46,8 +46,7 @@
         transition: ease-in-out 0.1s background-color;
       }
 
-      &:hover:not([disabled]),
-      &:hover:not(.disabled) {
+      &:hover:not([disabled]):not(.disabled) {
         .table-header,
         .table-cell {
           background-color: @table-hover;