feat(Button): hack button spacing & colors to be Connect friendly

BREAKING CHANGE: Primary & default button colors and spacing all modified. Please adjust accordingly.
Tripwire · Jul 28, 2017 · e1f27b5 · e1f27b5
1 parent d7e4e39
commit e1f27b5
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/semantic/src/themes/tripwire/elements/button.overrides b/semantic/src/themes/tripwire/elements/button.overrides
@@ -10,6 +10,10 @@
   border-radius: 0px;
 }
 
+.ui.button.primary {
+  border: none;
+}
+
 .ui.button:active,
 .ui.active.button:active {
   border-color: @blue;
@@ -24,9 +28,8 @@
 
 .ui.button:focus,
 .ui.button:hover {
-  border-color: @blue;
-  color: @blue;
-  background: @white;
+  border-color: @hoverBackgroundColor;
+  color: @white;
 }
 .ui.button:active {
   border-color: @blue;

diff --git a/semantic/src/themes/tripwire/elements/button.variables b/semantic/src/themes/tripwire/elements/button.variables
@@ -8,7 +8,7 @@
 
 /* Button */
 @verticalMargin: 0em;
-@horizontalMargin: 0.5em;
+@horizontalMargin: 0.8em;
 @backgroundColor: #E0E1E2;
 @backgroundImage: none;
 @background: @backgroundColor @backgroundImage;
@@ -84,7 +84,7 @@
 --------------------*/
 
 /* Hovered */
-@hoverBackgroundColor: #CACBCD;
+@hoverBackgroundColor: #999;
 @hoverBackgroundImage: @backgroundImage;
 @hoverBoxShadow: @boxShadow;
 @hoverColor: @hoveredTextColor;

diff --git a/src/components/suir/button/Button.examples.md b/src/components/suir/button/Button.examples.md
@@ -3,18 +3,6 @@
     const Button = require('semantic-ui-react').Button;
     <Button className=''>Test button</Button>
 
-## Disabled Button
-
-    const Button = require('semantic-ui-react').Button;
-    <Button className='' disabled >Some Copy </Button>
-
-## Active Button
-
-    const Button = require('semantic-ui-react').Button;
-    <Button className='' active>
-        Some Copy
-    </Button>
-
 ## Positive Button
 
     const Button = require('semantic-ui-react').Button;
@@ -31,6 +19,54 @@
     Negative
     </Button>
 
+## Primary Button
+
+    const Button = require('semantic-ui-react').Button;
+    <div>
+      <Button primary className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Primary
+      </Button>
+      <Button primary active className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Primary Active
+      </Button>
+      <Button primary disabled className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Primary Disabled
+      </Button>
+    </div>
+
+## Secondary Button
+
+    const Button = require('semantic-ui-react').Button;
+    <div>
+      <Button secondary className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Secondary
+      </Button>
+      <Button secondary active className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Secondary Active
+      </Button>
+      <Button secondary disabled className=''>
+        <i className='icon_check' style={{marginRight: '10px'}} />
+        Secondary Disabled
+      </Button>
+    </div>
+
+## Disabled Button
+
+    const Button = require('semantic-ui-react').Button;
+    <Button className='' disabled >Some Copy </Button>
+
+## Active Button
+
+    const Button = require('semantic-ui-react').Button;
+    <Button className='' active>
+        Some Copy
+    </Button>
+
 ## Icon Button
 
     const Button = require('semantic-ui-react').Button;

diff --git a/yarn.lock b/yarn.lock
@@ -382,7 +382,7 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-[email protected]:
+[email protected], async@^2.0.1, async@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
   dependencies:
@@ -396,12 +396,6 @@ async@^1.2.1, async@^1.3.0, async@^1.4.0, async@^1.4.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.1, async@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
-  dependencies:
-    lodash "^4.14.0"
-
 async@~0.2.6:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
@@ -3874,7 +3868,7 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-[email protected], graceful-fs@^4.1.11, graceful-fs@^4.1.9, graceful-fs@~4.1.11:
+[email protected], graceful-fs@^4.1.11, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@~4.1.11:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -3884,7 +3878,7 @@ graceful-fs@^3.0.0:
   dependencies:
     natives "^1.1.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
+graceful-fs@^4.1.2:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"