Merge pull request #179 from npm/nexdrew/btn-lg

feat(buttons): add btn-lg class
pivotal-cf · Jun 1, 2016 · 89235eb · 89235eb
2 parents 334e6f2 + 58274da
commit 89235eb
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@npmcorp/pui-css-backgrounds": "^2.1.1",
     "@npmcorp/pui-css-bootstrap": "^2.0.2",
     "@npmcorp/pui-css-button-group": "^2.0.4",
-    "@npmcorp/pui-css-buttons": "^2.0.4",
+    "@npmcorp/pui-css-buttons": "^2.2.0",
     "@npmcorp/pui-css-code": "^2.0.3",
     "@npmcorp/pui-css-collapse": "^2.0.1",
     "@npmcorp/pui-css-colors": "^2.2.0",

diff --git a/src/pivotal-ui-react/buttons/package.json b/src/pivotal-ui-react/buttons/package.json
@@ -1,10 +1,10 @@
 {
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A collection of React components providing styled buttons and links",
   "homepage": "http://styleguide.pivotal.io/react.html#button_react",
   "dependencies": {
     "classnames": "^1.2.0",
-    "@npmcorp/pui-css-buttons": "^2.0.0",
+    "@npmcorp/pui-css-buttons": "^2.2.0",
     "@npmcorp/pui-react-helpers": "^2.0.0"
   }
 }
diff --git a/src/pivotal-ui-react/dropdowns/package.json b/src/pivotal-ui-react/dropdowns/package.json
@@ -1,12 +1,12 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A React dropdown component",
   "homepage": "http://styleguide.pivotal.io/react.html#dropdown_react",
   "dependencies": {
     "react-bootstrap": "0.25.1",
     "@npmcorp/pui-css-dropdowns": "^2.1.0",
     "@npmcorp/pui-css-iconography": "^4.0.0",
-    "@npmcorp/pui-css-buttons": "^2.0.0",
+    "@npmcorp/pui-css-buttons": "^2.2.0",
     "@npmcorp/pui-css-button-group": "^2.0.0",
     "classnames": "^2.1.2",
     "lodash.uniqueid": "^3.0.0"

diff --git a/src/pivotal-ui/components/button-group/package.json b/src/pivotal-ui/components/button-group/package.json
@@ -2,7 +2,7 @@
   "homepage": "http://styleguide.pivotal.io/elements#button-group",
   "dependencies": {
     "@npmcorp/pui-css-bootstrap": "^2.0.0",
-    "@npmcorp/pui-css-buttons": "^2.0.3"
+    "@npmcorp/pui-css-buttons": "^2.2.0"
   },
-  "version": "2.0.4"
+  "version": "2.1.0"
 }
diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
@@ -207,6 +207,8 @@ size modifier class for the desired size.
 <button class="btn btn-default btn-sm em-alt">Small</button>
 
 <button class="btn btn-default">Default</button>
+
+<button class="btn btn-default btn-lg em-low">Large button test</button>
 ```
 
 */
@@ -217,3 +219,7 @@ size modifier class for the desired size.
   @include pui-button-size($btn-sm-padding, $btn-sm-font-size, $btn-sm-line-height, $btn-sm-border-radius);
 }
 
+.btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  @include pui-button-size($btn-lg-padding, $btn-lg-font-size, $btn-lg-line-height, $btn-lg-border-radius);
+}
diff --git a/src/pivotal-ui/components/buttons/package.json b/src/pivotal-ui/components/buttons/package.json
@@ -4,5 +4,5 @@
     "@npmcorp/pui-css-bootstrap": "^2.0.0",
     "@npmcorp/pui-css-typography": "^4.0.0"
   },
-  "version": "2.1.0"
+  "version": "2.2.0"
 }
diff --git a/src/pivotal-ui/components/dropdowns/package.json b/src/pivotal-ui/components/dropdowns/package.json
@@ -3,7 +3,7 @@
   "main": "index.js",
   "dependencies": {
     "@npmcorp/pui-css-bootstrap": "^2.0.0",
-    "@npmcorp/pui-css-buttons": "^2.0.0"
+    "@npmcorp/pui-css-buttons": "^2.2.0"
   },
-  "version": "2.1.0"
+  "version": "2.2.0"
 }
diff --git a/src/pivotal-ui/components/marketing/package.json b/src/pivotal-ui/components/marketing/package.json
@@ -4,7 +4,7 @@
     "@npmcorp/pui-css-bootstrap": "^2.0.1",
     "@npmcorp/pui-css-typography": "^4.1.0",
     "@npmcorp/pui-css-colors": "^2.2.0",
-    "@npmcorp/pui-css-buttons": "^2.0.4"
+    "@npmcorp/pui-css-buttons": "^2.2.0"
   },
-  "version": "1.0.0"
+  "version": "1.1.0"
 }
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -417,11 +417,12 @@ $line-height-large:              1.33 !default;
 $line-height-small:              1.5 !default;
 
 $border-radius-base:             4px !default;
+$border-radius-none:             0;
+$border-radius-small:            3px !default;
 $border-radius-medium:           6px !default;
-$border-radius-xl:               20px;
 $border-radius-large:            10px !default;
-$border-radius-small:            3px !default;
-$border-radius-none:             0;
+$border-radius-xl:               20px;
+$border-radius-xxl:              35px;
 
 $component-active-color:         #fff !default;
 $component-active-bg:            $brand-primary !default;
@@ -472,6 +473,11 @@ $btn-sm-font-size:               $font-size-small;
 $btn-sm-line-height:             $line-height-small;
 $btn-sm-border-radius:           $border-radius-xl;
 
+$btn-lg-padding:                 15px 40px 15px 40px;
+$btn-lg-font-size:               $font-size-extra-large;
+$btn-lg-line-height:             $line-height-large;
+$btn-lg-border-radius:           $border-radius-xxl;
+
 // Button styles
 
 $btn-default-color:              $npm-navy-2;