@instructure/ui-buttons 8.13.1-snapshot.9 → 8.14.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 (81) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/BaseButton/index.js +64 -43
  3. package/es/BaseButton/props.js +2 -88
  4. package/es/BaseButton/theme.js +1 -1
  5. package/es/Button/index.js +2 -2
  6. package/es/Button/props.js +3 -65
  7. package/es/CloseButton/index.js +23 -18
  8. package/es/CloseButton/props.js +2 -60
  9. package/es/CondensedButton/index.js +2 -2
  10. package/es/CondensedButton/props.js +3 -48
  11. package/es/IconButton/index.js +2 -2
  12. package/es/IconButton/props.js +3 -68
  13. package/es/ToggleButton/index.js +4 -5
  14. package/es/ToggleButton/props.js +1 -58
  15. package/lib/BaseButton/index.js +67 -43
  16. package/lib/BaseButton/props.js +2 -88
  17. package/lib/BaseButton/theme.js +1 -1
  18. package/lib/Button/index.js +2 -2
  19. package/lib/Button/props.js +3 -65
  20. package/lib/CloseButton/index.js +23 -18
  21. package/lib/CloseButton/props.js +2 -60
  22. package/lib/CondensedButton/index.js +2 -2
  23. package/lib/CondensedButton/props.js +3 -48
  24. package/lib/IconButton/index.js +2 -2
  25. package/lib/IconButton/props.js +3 -68
  26. package/lib/ToggleButton/index.js +4 -5
  27. package/lib/ToggleButton/props.js +1 -58
  28. package/package.json +21 -22
  29. package/src/BaseButton/index.tsx +35 -27
  30. package/src/BaseButton/props.ts +103 -72
  31. package/src/BaseButton/theme.ts +1 -6
  32. package/src/Button/index.tsx +4 -8
  33. package/src/Button/props.ts +74 -48
  34. package/src/CloseButton/index.tsx +4 -6
  35. package/src/CloseButton/props.ts +67 -41
  36. package/src/CondensedButton/index.tsx +3 -7
  37. package/src/CondensedButton/props.ts +56 -34
  38. package/src/IconButton/index.tsx +3 -7
  39. package/src/IconButton/props.ts +77 -50
  40. package/src/ToggleButton/index.tsx +8 -15
  41. package/src/ToggleButton/props.ts +65 -39
  42. package/tsconfig.build.json +25 -2
  43. package/tsconfig.build.tsbuildinfo +1 -0
  44. package/types/BaseButton/BaseButtonLocator.d.ts +57 -56
  45. package/types/BaseButton/BaseButtonLocator.d.ts.map +1 -1
  46. package/types/BaseButton/index.d.ts +16 -15
  47. package/types/BaseButton/index.d.ts.map +1 -1
  48. package/types/BaseButton/props.d.ts +76 -5
  49. package/types/BaseButton/props.d.ts.map +1 -1
  50. package/types/BaseButton/theme.d.ts.map +1 -1
  51. package/types/Button/ButtonLocator.d.ts +57 -56
  52. package/types/Button/ButtonLocator.d.ts.map +1 -1
  53. package/types/Button/index.d.ts +10 -7
  54. package/types/Button/index.d.ts.map +1 -1
  55. package/types/Button/locator.d.ts +52 -52
  56. package/types/Button/props.d.ts +57 -3
  57. package/types/Button/props.d.ts.map +1 -1
  58. package/types/CloseButton/CloseButtonLocator.d.ts +52 -52
  59. package/types/CloseButton/index.d.ts +4 -3
  60. package/types/CloseButton/index.d.ts.map +1 -1
  61. package/types/CloseButton/props.d.ts +55 -5
  62. package/types/CloseButton/props.d.ts.map +1 -1
  63. package/types/CondensedButton/CondensedButtonLocator.d.ts +57 -56
  64. package/types/CondensedButton/CondensedButtonLocator.d.ts.map +1 -1
  65. package/types/CondensedButton/index.d.ts +9 -6
  66. package/types/CondensedButton/index.d.ts.map +1 -1
  67. package/types/CondensedButton/props.d.ts +44 -3
  68. package/types/CondensedButton/props.d.ts.map +1 -1
  69. package/types/IconButton/IconButtonLocator.d.ts +57 -56
  70. package/types/IconButton/IconButtonLocator.d.ts.map +1 -1
  71. package/types/IconButton/index.d.ts +11 -8
  72. package/types/IconButton/index.d.ts.map +1 -1
  73. package/types/IconButton/props.d.ts +60 -4
  74. package/types/IconButton/props.d.ts.map +1 -1
  75. package/types/ToggleButton/ToggleButtonLocator.d.ts +57 -56
  76. package/types/ToggleButton/ToggleButtonLocator.d.ts.map +1 -1
  77. package/types/ToggleButton/index.d.ts +12 -13
  78. package/types/ToggleButton/index.d.ts.map +1 -1
  79. package/types/ToggleButton/props.d.ts +52 -4
  80. package/types/ToggleButton/props.d.ts.map +1 -1
  81. package/LICENSE.md +0 -27
@@ -35,85 +35,23 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * Specifies the `Button` children.
40
- */
41
38
  children: _propTypes.default.node,
42
-
43
- /**
44
- * Specifies the type of the `Button`'s underlying html element.
45
- */
46
39
  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
47
-
48
- /**
49
- * The size of the `Button`
50
- */
51
40
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
52
-
53
- /**
54
- * Provides a reference to the `Button`'s underlying html element.
55
- */
56
41
  elementRef: _propTypes.default.func,
57
-
58
- /**
59
- * The element to render as the component root, `Button` by default.
60
- */
61
42
  as: _propTypes.default.elementType,
62
-
63
- /**
64
- * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
65
- */
66
43
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
67
-
68
- /**
69
- * Specifies the color for the `Button`.
70
- */
71
44
  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
72
-
73
- /**
74
- * Override the `Button`'s default focus outline color.
75
- */
76
45
  focusColor: _propTypes.default.oneOf(['info', 'inverse']),
77
-
78
- /**
79
- * The `Button` display property. When set to `inline-block`, the `Button` displays inline with other elements.
80
- * When set to block, the `Button` expands to fill the width of the container.
81
- */
82
46
  display: _propTypes.default.oneOf(['inline-block', 'block']),
83
-
84
- /**
85
- * Sets the alignment of the `Button` children and/or icon.
86
- */
87
47
  textAlign: _propTypes.default.oneOf(['start', 'center']),
88
-
89
- /**
90
- * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
91
- */
92
48
  withBackground: _propTypes.default.bool,
93
-
94
- /**
95
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
96
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
97
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
98
- */
99
49
  margin: _emotion.ThemeablePropTypes.spacing,
100
-
101
- /**
102
- * Specify a mouse cursor to use when hovering over the button.
103
- * The `pointer` cursor is used by default.
104
- */
105
50
  cursor: _propTypes.default.string,
106
-
107
- /**
108
- * Specifies an href attribute for the `Button`'s underlying html element.
109
- */
110
51
  href: _propTypes.default.string,
111
-
112
- /**
113
- * An icon, or function that returns an icon.
114
- */
115
- renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
52
+ renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
53
+ onClick: _propTypes.default.func
116
54
  };
117
55
  exports.propTypes = propTypes;
118
- const allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'textAlign', 'type', 'withBackground'];
56
+ const allowedProps = ['as', 'children', 'color', 'cursor', 'display', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'textAlign', 'type', 'withBackground', 'onClick'];
119
57
  exports.allowedProps = allowedProps;
@@ -39,6 +39,7 @@ var _dec, _dec2, _class, _class2, _temp;
39
39
  ---
40
40
  category: components
41
41
  ---
42
+ @tsProps
42
43
  **/
43
44
  let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class CloseButton extends _react.Component {
44
45
  constructor() {
@@ -56,11 +57,15 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
56
57
  }
57
58
 
58
59
  componentDidMount() {
59
- this.props.makeStyles();
60
+ var _this$props$makeStyle, _this$props;
61
+
62
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
63
  }
61
64
 
62
65
  componentDidUpdate() {
63
- this.props.makeStyles();
66
+ var _this$props$makeStyle2, _this$props2;
67
+
68
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
64
69
  }
65
70
 
66
71
  get interaction() {
@@ -75,21 +80,21 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
75
80
  }
76
81
 
77
82
  render() {
78
- const _this$props = this.props,
79
- screenReaderLabel = _this$props.screenReaderLabel,
80
- elementRef = _this$props.elementRef,
81
- size = _this$props.size,
82
- onClick = _this$props.onClick,
83
- margin = _this$props.margin,
84
- placement = _this$props.placement,
85
- offset = _this$props.offset,
86
- type = _this$props.type,
87
- as = _this$props.as,
88
- href = _this$props.href,
89
- cursor = _this$props.cursor,
90
- tabIndex = _this$props.tabIndex,
91
- styles = _this$props.styles,
92
- props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
83
+ const _this$props3 = this.props,
84
+ screenReaderLabel = _this$props3.screenReaderLabel,
85
+ elementRef = _this$props3.elementRef,
86
+ size = _this$props3.size,
87
+ onClick = _this$props3.onClick,
88
+ margin = _this$props3.margin,
89
+ placement = _this$props3.placement,
90
+ offset = _this$props3.offset,
91
+ type = _this$props3.type,
92
+ as = _this$props3.as,
93
+ href = _this$props3.href,
94
+ cursor = _this$props3.cursor,
95
+ tabIndex = _this$props3.tabIndex,
96
+ styles = _this$props3.styles,
97
+ props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
93
98
  return (0, _emotion.jsx)("span", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
94
99
  css: styles === null || styles === void 0 ? void 0 : styles.closeButton
95
100
  }), (0, _emotion.jsx)(_BaseButton.BaseButton, {
@@ -111,8 +116,8 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
111
116
  }
112
117
 
113
118
  }, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
114
- onClick: event => {},
115
119
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
120
+ interaction: void 0,
116
121
  type: 'button',
117
122
  placement: 'static',
118
123
  offset: 'x-small',
@@ -35,79 +35,21 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * An accessible label for the `CloseButton` (required)
40
- */
41
38
  screenReaderLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
42
-
43
- /**
44
- * Specifies the color for the `CloseButton`.
45
- */
46
39
  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
47
-
48
- /**
49
- * Specifies if interaction with the `CloseButton` is enabled, disabled, or readonly.
50
- */
51
40
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
52
-
53
- /**
54
- * Provides a reference to the `CloseButton`'s underlying html element.
55
- */
56
41
  elementRef: _propTypes.default.func,
57
-
58
- /**
59
- * The size of the `CloseButton`
60
- */
61
42
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
62
-
63
- /**
64
- * Callback fired when the `CloseButton` is clicked.
65
- */
66
43
  onClick: _propTypes.default.func,
67
-
68
- /**
69
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
70
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
71
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
72
- */
73
44
  margin: _emotion.ThemeablePropTypes.spacing,
74
-
75
- /**
76
- * Specifies the placement of the `CloseButton`
77
- */
78
45
  placement: _propTypes.default.oneOf(['start', 'end', 'static']),
79
-
80
- /**
81
- * Specifies the offset distance for the `CloseButton` with respect to both the top and start/end of the container.
82
- * Note that for this property to have an effect, the `placement` prop must be set to either `start` or `end`. The
83
- * offset will also be created with respect to a positioned parent. If it does not appear to be working, try setting
84
- * the `position` of the parent container to `relative`.
85
- */
86
46
  offset: _propTypes.default.oneOf(['none', 'x-small', 'small', 'medium']),
87
-
88
- /**
89
- * Specifies the type of the `Button`'s underlying html element.
90
- */
91
47
  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
92
-
93
- /**
94
- * The element to render as the component root, `CloseButton` by default.
95
- */
96
48
  as: _propTypes.default.elementType,
97
-
98
- /**
99
- * Specifies an href attribute for the `CloseButton`'s underlying html element.
100
- */
101
49
  href: _propTypes.default.string,
102
-
103
- /**
104
- * Specify a mouse cursor to use when hovering over the `CloseButton`.
105
- */
106
50
  cursor: _propTypes.default.string,
107
-
108
- /**
109
- * Specifies the tabindex of the `CloseButton`.
110
- */
51
+ // Deprecated `string` tabIndex type
52
+ // TODO: remove string type in v9
111
53
  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
112
54
  };
113
55
  exports.propTypes = propTypes;
@@ -33,6 +33,7 @@ var _dec, _dec2, _class, _class2, _temp;
33
33
  ---
34
34
  category: components
35
35
  ---
36
+ @tsProps
36
37
  **/
37
38
  // needed for listing the available theme variables on docs page
38
39
  let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class CondensedButton extends _react.Component {
@@ -96,12 +97,11 @@ let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _de
96
97
  }
97
98
 
98
99
  }, _class2.displayName = "CondensedButton", _class2.componentId = 'CondensedButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
99
- children: null,
100
100
  type: 'button',
101
101
  size: 'medium',
102
- elementRef: el => {},
103
102
  as: 'button',
104
103
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
104
+ interaction: void 0,
105
105
  color: 'primary',
106
106
  margin: '0',
107
107
  cursor: 'pointer'
@@ -35,64 +35,19 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * Specifies the `CondensedButton` children.
40
- */
41
38
  children: _propTypes.default.node,
42
-
43
- /**
44
- * Specifies the type of the `CondensedButton`'s underlying html element.
45
- */
46
39
  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
47
-
48
- /**
49
- * The size of the `CondensedButton`
50
- */
51
40
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
52
-
53
- /**
54
- * Provides a reference to the `CondensedButton`'s underlying html element.
55
- */
56
41
  elementRef: _propTypes.default.func,
57
-
58
- /**
59
- * The element to render as the component root, `button` by default.
60
- */
61
42
  as: _propTypes.default.elementType,
62
-
63
- /**
64
- * Specifies if interaction with the `CondensedButton` is enabled, disabled, or readonly.
65
- */
66
43
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
67
-
68
- /**
69
- * Specifies the color for the `CondensedButton`.
70
- */
71
44
  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
72
-
73
- /**
74
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
75
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
76
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
77
- */
78
45
  margin: _emotion.ThemeablePropTypes.spacing,
79
-
80
- /**
81
- * Specify a mouse cursor to use when hovering over the button.
82
- * The `pointer` cursor is used by default.
83
- */
84
46
  cursor: _propTypes.default.string,
85
-
86
- /**
87
- * Specifies an href attribute for the `CondensedButton`'s underlying html element.
88
- */
89
47
  href: _propTypes.default.string,
90
-
91
- /**
92
- * An icon, or function that returns an icon.
93
- */
94
- renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
48
+ renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
49
+ onClick: _propTypes.default.func
95
50
  };
96
51
  exports.propTypes = propTypes;
97
- const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type'];
52
+ const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'href', 'interaction', 'margin', 'renderIcon', 'size', 'type', 'onClick'];
98
53
  exports.allowedProps = allowedProps;
@@ -35,6 +35,7 @@ var _dec, _dec2, _class, _class2, _temp;
35
35
  ---
36
36
  category: components
37
37
  ---
38
+ @tsProps
38
39
  **/
39
40
  // needed for listing the available theme variables on docs page
40
41
  let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class IconButton extends _react.Component {
@@ -104,12 +105,11 @@ let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 =
104
105
  }
105
106
 
106
107
  }, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
107
- children: null,
108
108
  type: 'button',
109
109
  size: 'medium',
110
- elementRef: el => {},
111
110
  as: 'button',
112
111
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
112
+ interaction: void 0,
113
113
  color: 'secondary',
114
114
  shape: 'rectangle',
115
115
  withBackground: true,
@@ -35,89 +35,24 @@ var _emotion = require("@instructure/emotion");
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * An icon, or function returning an icon (identical to the `renderIcon` prop).
40
- */
41
38
  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
42
-
43
- /**
44
- * An icon, or function that returns an icon (identical to the `children` prop).
45
- */
46
39
  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
47
-
48
- /**
49
- * An accessible label for the `IconButton`.
50
- */
51
40
  screenReaderLabel: _propTypes.default.string.isRequired,
52
-
53
- /**
54
- * Specifies the type of the `IconButton`'s underlying html element.
55
- */
56
41
  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
57
-
58
- /**
59
- * The size of the `IconButton`
60
- */
61
42
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
62
-
63
- /**
64
- * Provides a reference to the `IconButton`'s underlying html element.
65
- */
66
43
  elementRef: _propTypes.default.func,
67
-
68
- /**
69
- * The element to render as the component root, `button` by default.
70
- */
71
44
  as: _propTypes.default.elementType,
72
-
73
- /**
74
- * Specifies if interaction with the `IconButton` is enabled, disabled, or readonly.
75
- */
76
45
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
77
-
78
- /**
79
- * Specifies the color for the `IconButton`.
80
- */
81
46
  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
82
-
83
- /**
84
- * Override the `Button`'s default focus outline color.
85
- */
86
47
  focusColor: _propTypes.default.oneOf(['info', 'inverse']),
87
-
88
- /**
89
- * Specifies if the `IconButton` shape should be a circle or rectangle.
90
- */
91
48
  shape: _propTypes.default.oneOf(['rectangle', 'circle']),
92
-
93
- /**
94
- * Specifies if the `IconButton` should render with a solid background. When false, the background is transparent.
95
- */
96
49
  withBackground: _propTypes.default.bool,
97
-
98
- /**
99
- * Specifies if the `IconButton` should render with a border.
100
- */
101
50
  withBorder: _propTypes.default.bool,
102
-
103
- /**
104
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
105
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
106
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
107
- */
108
51
  margin: _emotion.ThemeablePropTypes.spacing,
109
-
110
- /**
111
- * Specify a mouse cursor to use when hovering over the button.
112
- * The `pointer` cursor is used by default.
113
- */
114
52
  cursor: _propTypes.default.string,
115
-
116
- /**
117
- * Specifies an href attribute for the `IconButton`'s underlying html element.
118
- */
119
- href: _propTypes.default.string
53
+ href: _propTypes.default.string,
54
+ onClick: _propTypes.default.func
120
55
  };
121
56
  exports.propTypes = propTypes;
122
- const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder'];
57
+ const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder', 'onClick'];
123
58
  exports.allowedProps = allowedProps;
@@ -33,6 +33,7 @@ var _dec, _class, _class2, _temp;
33
33
  ---
34
34
  category: components
35
35
  ---
36
+ @tsProps
36
37
  **/
37
38
  let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class ToggleButton extends _react.Component {
38
39
  constructor(props) {
@@ -78,12 +79,12 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
78
79
  placement: placement,
79
80
  color: color === 'primary-inverse' ? 'primary-inverse' : 'primary',
80
81
  isShowingContent: this.isShowingTooltip,
81
- onShowContent: event => {
82
+ onShowContent: () => {
82
83
  this.setState({
83
84
  isShowingTooltip: true
84
85
  });
85
86
  },
86
- onHideContent: event => {
87
+ onHideContent: () => {
87
88
  this.setState({
88
89
  isShowingTooltip: false
89
90
  });
@@ -107,9 +108,7 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
107
108
  size: 'medium',
108
109
  as: 'button',
109
110
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
110
- elementRef: el => {},
111
- renderIcon: () => {},
112
- onClick: () => {},
111
+ interaction: void 0,
113
112
  mountNode: null,
114
113
  color: 'secondary',
115
114
  placement: 'top center',
@@ -35,76 +35,19 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
35
35
  * SOFTWARE.
36
36
  */
37
37
  const propTypes = {
38
- /**
39
- * Text to output only to screen readers
40
- */
41
38
  screenReaderLabel: _propTypes.default.string.isRequired,
42
-
43
- /**
44
- * Text to render in the tooltip shown on hover/focus
45
- */
46
39
  renderTooltipContent: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
47
-
48
- /**
49
- * An icon or function that returns an icon
50
- */
51
40
  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
52
-
53
- /**
54
- * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
55
- */
56
41
  status: _propTypes.default.oneOf(['pressed', 'unpressed']).isRequired,
57
-
58
- /**
59
- * The element to render as the component root; `button` by default
60
- */
61
42
  as: _propTypes.default.elementType,
62
-
63
- /**
64
- * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
65
- */
66
43
  interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
67
-
68
- /**
69
- * The size of the `ToggleButton`
70
- */
71
44
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
72
-
73
- /**
74
- * Provides a reference to `ToggleButton`'s underlying HTML element
75
- */
76
45
  elementRef: _propTypes.default.func,
77
-
78
- /**
79
- * Callback fired when the `ToggleButton` is clicked
80
- */
81
46
  onClick: _propTypes.default.func,
82
-
83
- /**
84
- * The color in which to display the icon
85
- */
86
- color: _propTypes.default.string,
87
-
88
- /**
89
- * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
90
- */
47
+ color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
91
48
  isShowingTooltip: _propTypes.default.bool,
92
-
93
- /**
94
- * An element or a function returning an element to use as the mount node
95
- */
96
49
  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
97
-
98
- /**
99
- * The placement of the tooltip in relation to the button
100
- */
101
50
  placement: _PositionPropTypes.PositionPropTypes.placement,
102
-
103
- /**
104
- * The parent in which to constrain the tooltip.
105
- * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
106
- * or a function returning an element.
107
- */
108
51
  constrain: _PositionPropTypes.PositionPropTypes.constrain
109
52
  };
110
53
  exports.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "8.13.1-snapshot.9+f32ba918e",
3
+ "version": "8.14.0",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -24,28 +24,28 @@
24
24
  },
25
25
  "license": "MIT",
26
26
  "devDependencies": {
27
- "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
28
- "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
29
- "@instructure/ui-test-queries": "8.13.1-snapshot.9+f32ba918e",
30
- "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
31
- "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
27
+ "@instructure/ui-babel-preset": "8.14.0",
28
+ "@instructure/ui-test-locator": "8.14.0",
29
+ "@instructure/ui-test-queries": "8.14.0",
30
+ "@instructure/ui-test-utils": "8.14.0",
31
+ "@instructure/ui-themes": "8.14.0"
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.13.10",
35
- "@instructure/console": "8.13.1-snapshot.9+f32ba918e",
36
- "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
37
- "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
38
- "@instructure/ui-a11y-content": "8.13.1-snapshot.9+f32ba918e",
39
- "@instructure/ui-a11y-utils": "8.13.1-snapshot.9+f32ba918e",
40
- "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
41
- "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
42
- "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
43
- "@instructure/ui-position": "8.13.1-snapshot.9+f32ba918e",
44
- "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
45
- "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
46
- "@instructure/ui-tooltip": "8.13.1-snapshot.9+f32ba918e",
47
- "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
48
- "@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
35
+ "@instructure/console": "8.14.0",
36
+ "@instructure/emotion": "8.14.0",
37
+ "@instructure/shared-types": "8.14.0",
38
+ "@instructure/ui-a11y-content": "8.14.0",
39
+ "@instructure/ui-a11y-utils": "8.14.0",
40
+ "@instructure/ui-color-utils": "8.14.0",
41
+ "@instructure/ui-dom-utils": "8.14.0",
42
+ "@instructure/ui-icons": "8.14.0",
43
+ "@instructure/ui-position": "8.14.0",
44
+ "@instructure/ui-react-utils": "8.14.0",
45
+ "@instructure/ui-testable": "8.14.0",
46
+ "@instructure/ui-tooltip": "8.14.0",
47
+ "@instructure/ui-utils": "8.14.0",
48
+ "@instructure/ui-view": "8.14.0",
49
49
  "keycode": "^2",
50
50
  "prop-types": "^15"
51
51
  },
@@ -55,6 +55,5 @@
55
55
  "publishConfig": {
56
56
  "access": "public"
57
57
  },
58
- "sideEffects": false,
59
- "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
58
+ "sideEffects": false
60
59
  }