@cloudflare/component-button 2.11.11 → 2.11.15

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 (6) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/es/Button.js +29 -23
  3. package/es/IconTextButton.js +1 -0
  4. package/lib/Button.js +29 -23
  5. package/lib/IconTextButton.js +1 -0
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,38 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.11.15](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.14...@cloudflare/component-button@2.11.15) (2021-12-03)
7
+
8
+ **Note:** Version bump only for package @cloudflare/component-button
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.11.14](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.13...@cloudflare/component-button@2.11.14) (2021-11-23)
15
+
16
+ **Note:** Version bump only for package @cloudflare/component-button
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.11.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.12...@cloudflare/component-button@2.11.13) (2021-11-22)
23
+
24
+ **Note:** Version bump only for package @cloudflare/component-button
25
+
26
+
27
+
28
+
29
+
30
+ ## [2.11.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.11...@cloudflare/component-button@2.11.12) (2021-11-16)
31
+
32
+ **Note:** Version bump only for package @cloudflare/component-button
33
+
34
+
35
+
36
+
37
+
6
38
  ## [2.11.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.10...@cloudflare/component-button@2.11.11) (2021-11-16)
7
39
 
8
40
  **Note:** Version bump only for package @cloudflare/component-button
package/es/Button.js CHANGED
@@ -102,21 +102,24 @@ const buttonColors = theme => {
102
102
  };
103
103
  };
104
104
 
105
- const getFocusBorderColor = (theme, type, inverted) => {
106
- var _invertedBorders$type;
105
+ const getFocusOutlineColor = (theme, type, inverted) => {
106
+ var _invertedOutlines$typ;
107
107
 
108
- const borders = {
109
- default: theme.colors.gray[0],
110
- primary: theme.colors.blue[0],
111
- success: theme.colors.green[0],
112
- warning: theme.colors.orange[0],
113
- danger: theme.colors.red[0]
108
+ const standardIndex = isDarkMode() ? 3 : 4;
109
+ const FOCUS_OFFSET_INDEX = 2;
110
+ const focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
111
+ const outlines = {
112
+ default: isDarkMode() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
113
+ primary: theme.colors.blue[focusIndex],
114
+ success: theme.colors.green[focusIndex],
115
+ warning: theme.colors.orange[focusIndex],
116
+ danger: theme.colors.red[focusIndex]
114
117
  };
115
- const invertedBorders = {
116
- danger: theme.colors.red[0],
117
- primary: theme.colors.blue[0]
118
+ const invertedOutlines = {
119
+ danger: theme.colors.red[focusIndex],
120
+ primary: theme.colors.blue[focusIndex]
118
121
  };
119
- return inverted ? (_invertedBorders$type = invertedBorders[type]) !== null && _invertedBorders$type !== void 0 ? _invertedBorders$type : borders[type] : borders[type];
122
+ return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
120
123
  };
121
124
 
122
125
  const colorAccessor = (property, {
@@ -137,8 +140,6 @@ const interactionStyleAccessor = (interactionState, props) => {
137
140
  };
138
141
 
139
142
  const styles = props => {
140
- var _props$type;
141
-
142
143
  const theme = props.theme,
143
144
  _props$loading = props.loading,
144
145
  loading = _props$loading === void 0 ? false : _props$loading,
@@ -147,19 +148,24 @@ const styles = props => {
147
148
  _props$inverted = props.inverted,
148
149
  inverted = _props$inverted === void 0 ? false : _props$inverted,
149
150
  group = props.group,
150
- spaced = props.spaced;
151
+ spaced = props.spaced,
152
+ _props$type = props.type,
153
+ type = _props$type === void 0 ? 'default' : _props$type;
151
154
  const normalStyles = buttonColors(theme).normal;
152
- const focusBorderColor = getFocusBorderColor(theme, (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'default', inverted);
155
+ const hoverStyles = interactionStyleAccessor('hover', props);
156
+ const activeStyles = interactionStyleAccessor('active', props);
157
+ const focusStyles = interactionStyleAccessor('focus', props);
153
158
  return {
154
- '&:hover': interactionStyleAccessor('hover', props),
155
- '&:active': interactionStyleAccessor('active', props),
156
- '&:focus': _objectSpread({}, interactionStyleAccessor('focus', props)),
159
+ '&:hover': hoverStyles,
160
+ '&:active': activeStyles,
161
+ '&:focus': focusStyles,
157
162
  '&:focus-visible': {
158
- outline: 'none',
159
- boxShadow: `inset 0px 0px 0px 2px ${focusBorderColor}`
163
+ outlineOffset: 3,
164
+ outlineStyle: 'auto',
165
+ outlineColor: getFocusOutlineColor(theme, type, inverted)
160
166
  },
161
- '&:focus-within:hover': interactionStyleAccessor('focus', props),
162
- '&:active:hover': interactionStyleAccessor('active', props),
167
+ '&:focus-within:hover': focusStyles,
168
+ '&:active:hover': activeStyles,
163
169
  '&[title]': {
164
170
  pointerEvents: disabled ? 'auto' : 'none'
165
171
  },
package/es/IconTextButton.js CHANGED
@@ -12,6 +12,7 @@ const IconTextButton = ({
12
12
  iconType,
13
13
  children
14
14
  }) => /*#__PURE__*/React.createElement(TextButton, {
15
+ type: "button",
15
16
  onClick: onClick
16
17
  }, /*#__PURE__*/React.createElement(IconTextWrapper, null, /*#__PURE__*/React.createElement(Icon, {
17
18
  type: iconType,
package/lib/Button.js CHANGED
@@ -115,21 +115,24 @@ var buttonColors = function buttonColors(theme) {
115
115
  };
116
116
  };
117
117
 
118
- var getFocusBorderColor = function getFocusBorderColor(theme, type, inverted) {
119
- var _invertedBorders$type;
118
+ var getFocusOutlineColor = function getFocusOutlineColor(theme, type, inverted) {
119
+ var _invertedOutlines$typ;
120
120
 
121
- var borders = {
122
- default: theme.colors.gray[0],
123
- primary: theme.colors.blue[0],
124
- success: theme.colors.green[0],
125
- warning: theme.colors.orange[0],
126
- danger: theme.colors.red[0]
121
+ var standardIndex = (0, _styleConst.isDarkMode)() ? 3 : 4;
122
+ var FOCUS_OFFSET_INDEX = 2;
123
+ var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
124
+ var outlines = {
125
+ default: (0, _styleConst.isDarkMode)() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
126
+ primary: theme.colors.blue[focusIndex],
127
+ success: theme.colors.green[focusIndex],
128
+ warning: theme.colors.orange[focusIndex],
129
+ danger: theme.colors.red[focusIndex]
127
130
  };
128
- var invertedBorders = {
129
- danger: theme.colors.red[0],
130
- primary: theme.colors.blue[0]
131
+ var invertedOutlines = {
132
+ danger: theme.colors.red[focusIndex],
133
+ primary: theme.colors.blue[focusIndex]
131
134
  };
132
- return inverted ? (_invertedBorders$type = invertedBorders[type]) !== null && _invertedBorders$type !== void 0 ? _invertedBorders$type : borders[type] : borders[type];
135
+ return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
133
136
  };
134
137
 
135
138
  var colorAccessor = function colorAccessor(property, _ref) {
@@ -153,8 +156,6 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
153
156
  };
154
157
 
155
158
  var styles = function styles(props) {
156
- var _props$type;
157
-
158
159
  var theme = props.theme,
159
160
  _props$loading = props.loading,
160
161
  loading = _props$loading === void 0 ? false : _props$loading,
@@ -163,19 +164,24 @@ var styles = function styles(props) {
163
164
  _props$inverted = props.inverted,
164
165
  inverted = _props$inverted === void 0 ? false : _props$inverted,
165
166
  group = props.group,
166
- spaced = props.spaced;
167
+ spaced = props.spaced,
168
+ _props$type = props.type,
169
+ type = _props$type === void 0 ? 'default' : _props$type;
167
170
  var normalStyles = buttonColors(theme).normal;
168
- var focusBorderColor = getFocusBorderColor(theme, (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'default', inverted);
171
+ var hoverStyles = interactionStyleAccessor('hover', props);
172
+ var activeStyles = interactionStyleAccessor('active', props);
173
+ var focusStyles = interactionStyleAccessor('focus', props);
169
174
  return {
170
- '&:hover': interactionStyleAccessor('hover', props),
171
- '&:active': interactionStyleAccessor('active', props),
172
- '&:focus': _objectSpread({}, interactionStyleAccessor('focus', props)),
175
+ '&:hover': hoverStyles,
176
+ '&:active': activeStyles,
177
+ '&:focus': focusStyles,
173
178
  '&:focus-visible': {
174
- outline: 'none',
175
- boxShadow: "inset 0px 0px 0px 2px ".concat(focusBorderColor)
179
+ outlineOffset: 3,
180
+ outlineStyle: 'auto',
181
+ outlineColor: getFocusOutlineColor(theme, type, inverted)
176
182
  },
177
- '&:focus-within:hover': interactionStyleAccessor('focus', props),
178
- '&:active:hover': interactionStyleAccessor('active', props),
183
+ '&:focus-within:hover': focusStyles,
184
+ '&:active:hover': activeStyles,
179
185
  '&[title]': {
180
186
  pointerEvents: disabled ? 'auto' : 'none'
181
187
  },
package/lib/IconTextButton.js CHANGED
@@ -27,6 +27,7 @@ var IconTextButton = function IconTextButton(_ref) {
27
27
  iconType = _ref.iconType,
28
28
  children = _ref.children;
29
29
  return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
30
+ type: "button",
30
31
  onClick: onClick
31
32
  }, /*#__PURE__*/_react.default.createElement(IconTextWrapper, null, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
32
33
  type: iconType,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-button",
3
3
  "description": "Cloudflare Button Component",
4
- "version": "2.11.11",
4
+ "version": "2.11.15",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -12,9 +12,9 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@cloudflare/component-icon": "^6.5.11",
16
- "@cloudflare/style-const": "^5.1.11",
17
- "@cloudflare/style-container": "^7.5.17",
15
+ "@cloudflare/component-icon": "^6.5.15",
16
+ "@cloudflare/style-const": "^5.1.15",
17
+ "@cloudflare/style-container": "^7.5.21",
18
18
  "polished": "^1.9.3",
19
19
  "prop-types": "^15.6.0"
20
20
  },
@@ -32,5 +32,5 @@
32
32
  "test-coverage": "stratus test --coverage",
33
33
  "test-watch": "stratus test --watch"
34
34
  },
35
- "gitHead": "737c0d5801ce0a460ef414075e1de979c645ade4"
35
+ "gitHead": "ceaeb1a7b750bec5b0dfc6edbba94bf2ddac31bf"
36
36
  }