@flodesk/grain 5.5.1 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/es/components/button.js +11 -4
  3. package/es/components/icon-toggle.js +1 -1
  4. package/es/components/tab.js +1 -1
  5. package/es/components/text-toggle.js +1 -1
  6. package/es/styles/variables.css +6 -4
  7. package/es/variables.js +4 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -44,6 +44,6 @@ import { Text, Button, Input } from '@flodesk/grain';
44
44
  .dashboard-header {
45
45
  font-size: var(--grn-text-xl);
46
46
  margin-bottom: var(--grn-space-l);
47
- color: var(--grn-color-contentDimmed);
47
+ color: var(--grn-color-content2);
48
48
  }
49
49
  ```
package/es/components/button.js CHANGED
@@ -4,7 +4,7 @@ import "core-js/modules/es.object.define-properties.js";
4
4
  import "core-js/modules/es.object.keys.js";
5
5
  import "core-js/modules/es.array.index-of.js";
6
6
  import "core-js/modules/es.symbol.js";
7
- var _excluded = ["children", "variant", "isDisabled", "icon", "hasFullWidth", "hasSpinner"];
7
+ var _excluded = ["children", "variant", "isDisabled", "icon", "iconPosition", "hasFullWidth", "hasSpinner"];
8
8
 
9
9
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
10
10
 
@@ -31,11 +31,13 @@ var variants = {
31
31
  primary: accentCss,
32
32
  accent: accentCss
33
33
  };
34
- var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, transitions, getWeight('medium'), getRadius('s'), function (p) {
34
+ var Wrapper = styled.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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\n .buttonIcon {\n ", ";\n }\n"])), variables, transitions, getWeight('medium'), getRadius('s'), function (p) {
35
35
  return !p.isDisabled && variants[p.variant];
36
36
  }, function (p) {
37
37
  return p.hasFullWidth && "width: 100%";
38
- }, getColor('contentDisabled'), getColor('backgroundDisabled'));
38
+ }, getColor('contentDisabled'), getColor('backgroundDisabled'), function (p) {
39
+ return p.iconPosition === 'right' && "order: 1";
40
+ });
39
41
 
40
42
  var checkDeprecatedVariant = function checkDeprecatedVariant(variant) {
41
43
  if (variant === 'primary') {
@@ -49,6 +51,8 @@ export var Button = function Button(_ref) {
49
51
  variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
50
52
  isDisabled = _ref.isDisabled,
51
53
  icon = _ref.icon,
54
+ _ref$iconPosition = _ref.iconPosition,
55
+ iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
52
56
  hasFullWidth = _ref.hasFullWidth,
53
57
  hasSpinner = _ref.hasSpinner,
54
58
  props = _objectWithoutProperties(_ref, _excluded);
@@ -58,18 +62,21 @@ export var Button = function Button(_ref) {
58
62
  variant: variant,
59
63
  disabled: isDisabled,
60
64
  icon: icon,
65
+ iconPosition: iconPosition,
61
66
  hasFullWidth: hasFullWidth,
62
67
  hasSpinner: hasSpinner
63
68
  }, props), hasSpinner && /*#__PURE__*/React.createElement(Spinner, {
64
69
  color: "currentColor"
65
70
  }), icon && /*#__PURE__*/React.createElement(Icon, {
66
71
  icon: icon,
67
- color: "currentColor"
72
+ color: "currentColor",
73
+ className: "buttonIcon"
68
74
  }), children);
69
75
  };
70
76
  Button.propTypes = {
71
77
  children: PropTypes.node,
72
78
  icon: PropTypes.node,
79
+ iconPosition: PropTypes.oneOf(['left', 'right']),
73
80
  variant: PropTypes.oneOf(['neutral', 'accent']),
74
81
  onClick: PropTypes.func,
75
82
  isDisabled: PropTypes.bool,
package/es/components/icon-toggle.js CHANGED
@@ -26,7 +26,7 @@ import { css } from '@emotion/react';
26
26
  import { types } from '../types';
27
27
  var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
28
28
  var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n border: 1px solid var(--grn-color-border);\n border-radius: var(--grn-radius-s);\n width: fit-content;\n"])));
29
- var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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-contentDimmed);\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-of-type {\n min-width: calc(var(--grn-width) - 1px);\n }\n\n &:first-of-type: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-content);\n }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
29
+ var ItemWrapper = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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-content2);\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-of-type {\n min-width: calc(var(--grn-width) - 1px);\n }\n\n &:first-of-type: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-content);\n }\n"])), variables, getWeight('medium'), getTransition('fast'), function (p) {
30
30
  return p.isActive && "\n color: var(--grn-color-content);\n ";
31
31
  }, getTransition('xFast'), function (p) {
32
32
  return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
package/es/components/tab.js CHANGED
@@ -25,7 +25,7 @@ import { types } from '../types';
25
25
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: var(--grn-space-l);\n width: fit-content;\n align-items: stretch;\n height: ", ";\n"])), function (p) {
26
26
  return getDimension(p.height);
27
27
  });
28
- var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: 100%;\n background-color: transparent;\n color: var(--grn-color-contentDimmed);\n border-radius: 0;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
28
+ var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n appearance: none;\n border: none;\n padding: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: ", ";\n cursor: pointer;\n height: 100%;\n background-color: transparent;\n color: var(--grn-color-content2);\n border-radius: 0;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
29
29
  return p.isActive && "\n box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n color: var(--grn-color-content);\n ";
30
30
  });
31
31
  export var Tab = function Tab(_ref) {
package/es/components/text-toggle.js CHANGED
@@ -22,7 +22,7 @@ import React from 'react';
22
22
  import styled from '@emotion/styled';
23
23
  import PropTypes from 'prop-types';
24
24
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n border: 1px solid var(--grn-color-border);\n border-radius: 1000px;\n width: fit-content;\n"])));
25
- var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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-contentDimmed);\n border-radius: 1000px;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
25
+ var ItemWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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-content2);\n border-radius: 1000px;\n white-space: nowrap;\n transition: color ", ", box-shadow ", ";\n\n &:hover {\n color: var(--grn-color-content);\n }\n\n ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
26
26
  return p.isActive && "\n box-shadow: 0 0 0 1px var(--grn-color-grey6);\n color: var(--grn-color-content);\n ";
27
27
  });
28
28
  export var TextToggle = function TextToggle(_ref) {
package/es/styles/variables.css CHANGED
@@ -79,6 +79,8 @@
79
79
  /* internal */
80
80
  --grn-color-accent: var(--grn-color-grey8);
81
81
  --grn-color-backgroundOverlay: var(--grn-color-fade1);
82
+ --grn-color-contentDisabled: var(--grn-color-grey5);
83
+ --grn-color-backgroundDisabled: var(--grn-color-fade1);
82
84
 
83
85
  /* generic */
84
86
  --grn-color-danger: var(--grn-color-red);
@@ -86,13 +88,13 @@
86
88
 
87
89
  /* content */
88
90
  --grn-color-content: var(--grn-color-grey8);
89
- --grn-color-contentDimmed: var(--grn-color-fade7);
90
- --grn-color-contentDisabled: var(--grn-color-grey5);
91
+ --grn-color-content2: var(--grn-color-fade7);
92
+ --grn-color-content3: var(--grn-color-fade5);
91
93
 
92
94
  /* background */
93
95
  --grn-color-background: white;
94
- --grn-color-backgroundLow: var(--grn-color-grey1);
95
- --grn-color-backgroundDisabled: var(--grn-color-fade1);
96
+ --grn-color-background2: var(--grn-color-grey1);
97
+ --grn-color-background3: var(--grn-color-grey2);
96
98
 
97
99
  /* border */
98
100
  --grn-color-border: var(--grn-color-fade2);
package/es/variables.js CHANGED
@@ -52,11 +52,13 @@ export var colors = {
52
52
  },
53
53
  content: {
54
54
  content: 'content',
55
- contentDimmed: 'contentDimmed'
55
+ content2: 'content2',
56
+ content3: 'content3'
56
57
  },
57
58
  background: {
58
59
  background: 'background',
59
- backgroundLow: 'backgroundLow'
60
+ background2: 'background2',
61
+ background3: 'background3'
60
62
  },
61
63
  border: {
62
64
  border: 'border'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "5.5.1",
3
+ "version": "5.6.0",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",