@cloudflare/component-button 2.11.8 → 2.11.12

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 (9) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/Button.d.ts +1 -0
  3. package/es/Button.js +6 -3
  4. package/es/IconTextButton.js +2 -2
  5. package/es/TextButton.js +3 -3
  6. package/lib/Button.js +6 -3
  7. package/lib/IconTextButton.js +2 -2
  8. package/lib/TextButton.js +3 -3
  9. 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.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.11...@cloudflare/component-button@2.11.12) (2021-11-16)
7
+
8
+ **Note:** Version bump only for package @cloudflare/component-button
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+ **Note:** Version bump only for package @cloudflare/component-button
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.11.10](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.9...@cloudflare/component-button@2.11.10) (2021-11-15)
23
+
24
+ **Note:** Version bump only for package @cloudflare/component-button
25
+
26
+
27
+
28
+
29
+
30
+ ## [2.11.9](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.8...@cloudflare/component-button@2.11.9) (2021-11-05)
31
+
32
+ **Note:** Version bump only for package @cloudflare/component-button
33
+
34
+
35
+
36
+
37
+
6
38
  ## [2.11.8](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.7...@cloudflare/component-button@2.11.8) (2021-11-04)
7
39
 
8
40
  **Note:** Version bump only for package @cloudflare/component-button
package/dist/Button.d.ts CHANGED
@@ -18,6 +18,7 @@ declare const _default: React.ComponentType<{
18
18
  iconType?: IconType | undefined;
19
19
  iconLabel?: string | undefined;
20
20
  iconSize?: number | undefined;
21
+ ariaLabel?: string | undefined;
21
22
  p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
22
23
  color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
23
24
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
package/es/Button.js CHANGED
@@ -241,7 +241,8 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
241
241
  iconLabel = props.iconLabel,
242
242
  iconSize = props.iconSize,
243
243
  form = props.form,
244
- tabIndex = props.tabIndex;
244
+ tabIndex = props.tabIndex,
245
+ ariaLabel = props.ariaLabel;
245
246
  const dataAttributes = Object.keys(props).filter(propName => propName.startsWith('data-')).reduce((memo, dataPropName) => _objectSpread({}, memo, {
246
247
  [dataPropName]: props[dataPropName]
247
248
  }), {});
@@ -253,7 +254,8 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
253
254
  onClick: onClick,
254
255
  form: form,
255
256
  tabIndex: tabIndex,
256
- ref: ref
257
+ ref: ref,
258
+ "aria-label": ariaLabel
257
259
  }), iconType && /*#__PURE__*/React.createElement(Icon, {
258
260
  size: iconSize,
259
261
  type: iconType,
@@ -276,7 +278,8 @@ Button.propTypes = {
276
278
  iconLabel: PropTypes.string,
277
279
  iconSize: PropTypes.number,
278
280
  form: PropTypes.string,
279
- tabIndex: PropTypes.number
281
+ tabIndex: PropTypes.number,
282
+ ariaLabel: PropTypes.string
280
283
  };
281
284
  Button.displayName = 'Button';
282
285
  export default createStyledComponent(styles, Button);
package/es/IconTextButton.js CHANGED
@@ -4,8 +4,7 @@ import { Icon } from '@cloudflare/component-icon';
4
4
  import TextButton from './TextButton';
5
5
  const IconTextWrapper = createStyledComponent(() => ({
6
6
  display: 'flex',
7
- alignItems: 'center',
8
- marginTop: '2px'
7
+ alignItems: 'center'
9
8
  }), 'div');
10
9
 
11
10
  const IconTextButton = ({
@@ -13,6 +12,7 @@ const IconTextButton = ({
13
12
  iconType,
14
13
  children
15
14
  }) => /*#__PURE__*/React.createElement(TextButton, {
15
+ type: "button",
16
16
  onClick: onClick
17
17
  }, /*#__PURE__*/React.createElement(IconTextWrapper, null, /*#__PURE__*/React.createElement(Icon, {
18
18
  type: iconType,
package/es/TextButton.js CHANGED
@@ -12,6 +12,7 @@ const TextButton = createStyledComponent(({
12
12
  padding: '0px',
13
13
  display: 'inline-block',
14
14
  alignItems: 'center',
15
+ lineHeight: '1.5',
15
16
  height: 'fit-content',
16
17
  fontSize: 2,
17
18
  fontWeight: 400,
@@ -19,10 +20,9 @@ const TextButton = createStyledComponent(({
19
20
  ':hover': {
20
21
  color: theme.colors.orange[6]
21
22
  },
22
- ':focus': {
23
+ ':focus-visible': {
23
24
  outline: '-webkit-focus-ring-color auto 1px',
24
- outlineOffset: '1px',
25
- paddingBottom: '2px'
25
+ outlineOffset: '1px'
26
26
  }
27
27
  }), 'button');
28
28
  export default TextButton;
package/lib/Button.js CHANGED
@@ -257,7 +257,8 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
257
257
  iconLabel = props.iconLabel,
258
258
  iconSize = props.iconSize,
259
259
  form = props.form,
260
- tabIndex = props.tabIndex;
260
+ tabIndex = props.tabIndex,
261
+ ariaLabel = props.ariaLabel;
261
262
  var dataAttributes = Object.keys(props).filter(function (propName) {
262
263
  return propName.startsWith('data-');
263
264
  }).reduce(function (memo, dataPropName) {
@@ -271,7 +272,8 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
271
272
  onClick: onClick,
272
273
  form: form,
273
274
  tabIndex: tabIndex,
274
- ref: ref
275
+ ref: ref,
276
+ "aria-label": ariaLabel
275
277
  }), iconType && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
276
278
  size: iconSize,
277
279
  type: iconType,
@@ -295,7 +297,8 @@ Button.propTypes = {
295
297
  iconLabel: _propTypes.default.string,
296
298
  iconSize: _propTypes.default.number,
297
299
  form: _propTypes.default.string,
298
- tabIndex: _propTypes.default.number
300
+ tabIndex: _propTypes.default.number,
301
+ ariaLabel: _propTypes.default.string
299
302
  };
300
303
  Button.displayName = 'Button';
301
304
 
package/lib/IconTextButton.js CHANGED
@@ -18,8 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
18
18
  var IconTextWrapper = (0, _styleContainer.createStyledComponent)(function () {
19
19
  return {
20
20
  display: 'flex',
21
- alignItems: 'center',
22
- marginTop: '2px'
21
+ alignItems: 'center'
23
22
  };
24
23
  }, 'div');
25
24
 
@@ -28,6 +27,7 @@ var IconTextButton = function IconTextButton(_ref) {
28
27
  iconType = _ref.iconType,
29
28
  children = _ref.children;
30
29
  return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
30
+ type: "button",
31
31
  onClick: onClick
32
32
  }, /*#__PURE__*/_react.default.createElement(IconTextWrapper, null, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
33
33
  type: iconType,
package/lib/TextButton.js CHANGED
@@ -20,6 +20,7 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
20
20
  padding: '0px',
21
21
  display: 'inline-block',
22
22
  alignItems: 'center',
23
+ lineHeight: '1.5',
23
24
  height: 'fit-content',
24
25
  fontSize: 2,
25
26
  fontWeight: 400,
@@ -27,10 +28,9 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
27
28
  ':hover': {
28
29
  color: theme.colors.orange[6]
29
30
  },
30
- ':focus': {
31
+ ':focus-visible': {
31
32
  outline: '-webkit-focus-ring-color auto 1px',
32
- outlineOffset: '1px',
33
- paddingBottom: '2px'
33
+ outlineOffset: '1px'
34
34
  }
35
35
  };
36
36
  }, 'button');
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.8",
4
+ "version": "2.11.12",
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.8",
16
- "@cloudflare/style-const": "^5.1.8",
17
- "@cloudflare/style-container": "^7.5.14",
15
+ "@cloudflare/component-icon": "^6.5.12",
16
+ "@cloudflare/style-const": "^5.1.12",
17
+ "@cloudflare/style-container": "^7.5.18",
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": "c0f55b7686dd50538f3aecd7e24e86681fe61ad4"
35
+ "gitHead": "68e1591044330301f80c8c524e49f4c1ce328e5c"
36
36
  }