@flodesk/grain 2.17.0 → 2.18.0

package/es/components/button.js

@@ -27,7 +27,7 @@ var _react2 = require("@emotion/react");
 
 var _types = require("../types");
 
-var _excluded = ["children", "variant", "isDisabled", "icon"];
+var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -38,8 +38,10 @@ var variants = {
   primary: (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: ", ";\n    border-color: transparent;\n\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: black;\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey2'))
 };
 
-var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
+var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-textBoxHeight-m);\n  padding: 0 var(--grn-paddingX-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  ", ";\n  ", ";\n  \n  &:hover {\n    transition: ", ";\n  }\n\n  &:active {\n    transition: 0s;\n  }\n  \n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), function (p) {
   return !p.isDisabled && variants[p.variant];
+}, function (p) {
+  return p.hasFullWidth && "width: 100%";
 }, (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'), (0, _utilities.getColor)('disabledBackground'));
 
 var Button = function Button(_ref) {
@@ -48,11 +50,13 @@ var Button = function Button(_ref) {
       variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
       isDisabled = _ref.isDisabled,
       icon = _ref.icon,
+      hasFullWidth = _ref.hasFullWidth,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(Wrapper, (0, _extends2.default)({
     variant: variant,
     disabled: isDisabled,
-    icon: icon
+    icon: icon,
+    hasFullWidth: hasFullWidth
   }, props), icon && __jsx(_components.Icon, {
     icon: icon,
     color: "currentColor"
@@ -110,6 +114,13 @@ Button.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "hasFullWidth": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",