@flodesk/grain 2.18.2 → 2.19.2

package/es/components/box.js

@@ -358,9 +358,6 @@ Box.__docgenInfo = {
         "value": [{
           "name": "enum",
           "value": [{
-            "value": "\"xs\"",
-            "computed": false
-          }, {
             "value": "\"s\"",
             "computed": false
           }, {

package/es/components/button.js

@@ -35,7 +35,7 @@ var __jsx = _react.default.createElement;
 var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 16px;\n  --grn-borderColor: var(--grn-color-fade4);\n  --grn-borderColor-hover: var(--grn-color-fade6);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
 var variants = {
   neutral: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: inherit;\n    background-color: transparent;\n    border-color: var(--grn-borderColor);\n\n    &:hover {\n      border-color: var(--grn-borderColor-hover);\n    }\n    &:active {\n      border-color: var(--grn-borderColor-active);\n    }\n  "]))),
-  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'))
+  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      background-color: ", ";\n    }\n  "])), (0, _utilities.getColor)('accent'), (0, _utilities.getColor)('grey7'), (0, _utilities.getColor)('grey6'))
 };
 
 var Wrapper = _styled.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\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  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  &:disabled {\n    color: ", ";\n    background-color: ", ";\n    border-color: transparent;\n    cursor: default;\n  }\n"])), variables, _foundational.transitions, (0, _utilities.getWeight)('medium'), (0, _utilities.getRadius)('s'), function (p) {

package/es/components/{toggle-group.js → icon-toggle.js}

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToggleGroup = exports.ToggleOption = void 0;
+exports.IconToggleGroup = exports.IconToggle = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,24 +33,24 @@ var _excluded = ["children", "icon", "isActive", "onClick"],
 var _templateObject, _templateObject2, _templateObject3;
 
 var __jsx = _react.default.createElement;
-var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 4px);\n"])));
+var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n  --grn-width: calc(var(--grn-textBoxHeight-m) + 2px);\n"])));
 
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: var(--grn-radius-s);\n  width: fit-content;\n"])));
 
-var ItemWrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  transition: ", ";\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n\n  ", ";\n  \n  & + .ToggleOption {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", ";\n  }\n\n  &:first-child {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-child:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n    transition: ", ";\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('slow'), function (p) {
+var ItemWrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  transition: color ", ";\n\n  ", ";\n  \n  & + .IconToggle {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition: ", ";\n    ", ";\n  }\n\n  &:first-child {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-child:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('fast'), function (p) {
   return p.isActive && "\n    color: var(--grn-color-body);\n  ";
-}, function (p) {
+}, (0, _utilities.getTransition)('xFast'), function (p) {
   return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
-}, (0, _utilities.getTransition)('fast'));
+});
 
-var ToggleOption = function ToggleOption(_ref) {
+var IconToggle = function IconToggle(_ref) {
   var children = _ref.children,
       icon = _ref.icon,
       isActive = _ref.isActive,
       onClick = _ref.onClick,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return __jsx(ItemWrapper, (0, _extends2.default)({
-    className: "ToggleOption",
+    className: "IconToggle",
     isActive: isActive,
     onClick: onClick
   }, props), icon && __jsx(_.Icon, {
@@ -59,19 +59,19 @@ var ToggleOption = function ToggleOption(_ref) {
   }), children && children);
 };
 
-exports.ToggleOption = ToggleOption;
+exports.IconToggle = IconToggle;
 
-var ToggleGroup = function ToggleGroup(_ref2) {
+var IconToggleGroup = function IconToggleGroup(_ref2) {
   var children = _ref2.children,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return __jsx(Wrapper, props, children);
 };
 
-exports.ToggleGroup = ToggleGroup;
-ToggleOption.__docgenInfo = {
+exports.IconToggleGroup = IconToggleGroup;
+IconToggle.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "ToggleOption",
+  "displayName": "IconToggle",
   "props": {
     "children": {
       "type": {
@@ -89,8 +89,7 @@ ToggleOption.__docgenInfo = {
     },
     "isActive": {
       "type": {
-        "name": "custom",
-        "raw": "PropTypes.boolean"
+        "name": "bool"
       },
       "required": false,
       "description": ""
@@ -104,10 +103,10 @@ ToggleOption.__docgenInfo = {
     }
   }
 };
-ToggleGroup.__docgenInfo = {
+IconToggleGroup.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "ToggleGroup",
+  "displayName": "IconToggleGroup",
   "props": {
     "children": {
       "type": {

package/es/components/icon.js

@@ -60,7 +60,7 @@ var Icon = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 exports.Icon = Icon;
 Icon.propTypes = {
   icon: _propTypes.PropTypes.node,
-  hasEvenBoundary: _propTypes.PropTypes.boolean,
+  hasEvenBoundary: _propTypes.PropTypes.bool,
   size: _types.types.iconSize,
   color: _types.types.color
 };
@@ -141,8 +141,7 @@ Icon.__docgenInfo = {
     },
     "hasEvenBoundary": {
       "type": {
-        "name": "custom",
-        "raw": "PropTypes.boolean"
+        "name": "bool"
       },
       "required": false,
       "description": ""

package/es/components/index.js

@@ -53,16 +53,28 @@ Object.defineProperty(exports, "TextButton", {
     return _textButton.TextButton;
   }
 });
-Object.defineProperty(exports, "ToggleGroup", {
+Object.defineProperty(exports, "IconToggleGroup", {
   enumerable: true,
   get: function get() {
-    return _toggleGroup.ToggleGroup;
+    return _iconToggle.IconToggleGroup;
   }
 });
-Object.defineProperty(exports, "ToggleOption", {
+Object.defineProperty(exports, "IconToggle", {
   enumerable: true,
   get: function get() {
-    return _toggleGroup.ToggleOption;
+    return _iconToggle.IconToggle;
+  }
+});
+Object.defineProperty(exports, "TextToggleGroup", {
+  enumerable: true,
+  get: function get() {
+    return _textToggle.TextToggleGroup;
+  }
+});
+Object.defineProperty(exports, "TextToggle", {
+  enumerable: true,
+  get: function get() {
+    return _textToggle.TextToggle;
   }
 });
 
@@ -82,4 +94,6 @@ var _iconButton = require("./icon-button");
 
 var _textButton = require("./text-button");
 
-var _toggleGroup = require("./toggle-group");
+var _iconToggle = require("./icon-toggle");
+
+var _textToggle = require("./text-toggle");

package/es/components/text-toggle.js

@@ -0,0 +1,98 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextToggleGroup = exports.TextToggle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _utilities = require("../utilities");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _excluded = ["children", "isActive", "onClick"],
+    _excluded2 = ["children"];
+
+var _templateObject, _templateObject2;
+
+var __jsx = _react.default.createElement;
+
+var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: 1000px;\n  width: fit-content;\n"])));
+
+var ItemWrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  padding: 0 16px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 1000px;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n  \n  &:hover {\n    color: var(--grn-color-body);\n  }\n  \n  ", ";\n"])), (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('fast'), (0, _utilities.getTransition)('xFast'), function (p) {
+  return p.isActive && "\n    box-shadow: 0 0 0 1px var(--grn-color-grey6);\n    color: var(--grn-color-body);\n  ";
+});
+
+var TextToggle = function TextToggle(_ref) {
+  var children = _ref.children,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return __jsx(ItemWrapper, (0, _extends2.default)({
+    isActive: isActive,
+    onClick: onClick
+  }, props), children);
+};
+
+exports.TextToggle = TextToggle;
+
+var TextToggleGroup = function TextToggleGroup(_ref2) {
+  var children = _ref2.children,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return __jsx(Wrapper, props, children);
+};
+
+exports.TextToggleGroup = TextToggleGroup;
+TextToggle.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TextToggle",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isActive": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+TextToggleGroup.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TextToggleGroup",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};

package/es/styles/variables.css

@@ -3,8 +3,8 @@
 }
 
 :root {
-  --grn-text-s: 13px;
-  --grn-text-m: 15px;
+  --grn-text-s: 12px;
+  --grn-text-m: 14px;
   --grn-text-l: 20px;
   --grn-text-xl: 24px;
   --grn-text-xxl: 30px;
@@ -35,8 +35,7 @@
 }
 
 :root {
-  --grn-radius-xs: 3.5px;
-  --grn-radius-s: 5px;
+  --grn-radius-s: 3px;
   --grn-radius-m: 10px;
   --grn-radius-l: 15px;
 }
@@ -44,6 +43,7 @@
 :root {
   --grn-transition-slow: 400ms;
   --grn-transition-fast: 200ms;
+  --grn-transition-xFast: 160ms;
 }
 
 :root {

package/es/variables.js

@@ -74,7 +74,6 @@ var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.textSize.g
   medium: "medium",
   semiBold: "semiBold"
 }), (0, _defineProperty2.default)(_vars, varNames.radius.group, {
-  xs: "xs",
   s: "s",
   m: "m",
   l: "l"
@@ -84,7 +83,8 @@ var vars = (_vars = {}, (0, _defineProperty2.default)(_vars, varNames.textSize.g
   l: "l"
 }), (0, _defineProperty2.default)(_vars, varNames.transition.group, {
   slow: "slow",
-  fast: "fast"
+  fast: "fast",
+  xFast: "xFast"
 }), (0, _defineProperty2.default)(_vars, varNames.color.group, {
   greys: {
     grey8: "grey8",

package/package.json

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