@instructure/ui-buttons 8.8.1-snapshot.3 → 8.8.1-snapshot.63

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 (93) hide show
  1. package/es/BaseButton/index.js +14 -135
  2. package/es/BaseButton/props.js +138 -0
  3. package/es/Button/index.js +4 -87
  4. package/es/Button/props.js +107 -0
  5. package/es/CloseButton/index.js +5 -93
  6. package/es/CloseButton/props.js +103 -0
  7. package/es/CondensedButton/index.js +4 -65
  8. package/es/CondensedButton/props.js +86 -0
  9. package/es/IconButton/index.js +4 -91
  10. package/es/IconButton/props.js +111 -0
  11. package/es/ToggleButton/index.js +2 -77
  12. package/es/ToggleButton/props.js +100 -0
  13. package/lib/BaseButton/index.js +14 -135
  14. package/lib/BaseButton/props.js +150 -0
  15. package/lib/Button/index.js +4 -87
  16. package/lib/Button/props.js +119 -0
  17. package/lib/CloseButton/index.js +5 -93
  18. package/lib/CloseButton/props.js +115 -0
  19. package/lib/CondensedButton/index.js +4 -65
  20. package/lib/CondensedButton/props.js +98 -0
  21. package/lib/IconButton/index.js +4 -91
  22. package/lib/IconButton/props.js +123 -0
  23. package/lib/ToggleButton/index.js +3 -79
  24. package/lib/ToggleButton/props.js +112 -0
  25. package/package.json +21 -21
  26. package/src/BaseButton/index.tsx +18 -123
  27. package/src/BaseButton/props.ts +192 -0
  28. package/src/BaseButton/styles.ts +1 -1
  29. package/src/Button/index.tsx +7 -81
  30. package/src/Button/props.ts +149 -0
  31. package/src/CloseButton/index.tsx +8 -82
  32. package/src/CloseButton/props.ts +137 -0
  33. package/src/CloseButton/styles.ts +1 -1
  34. package/src/CondensedButton/index.tsx +7 -57
  35. package/src/CondensedButton/props.ts +118 -0
  36. package/src/IconButton/index.tsx +7 -84
  37. package/src/IconButton/props.ts +154 -0
  38. package/src/ToggleButton/index.tsx +5 -68
  39. package/src/ToggleButton/props.ts +140 -0
  40. package/src/index.ts +6 -6
  41. package/types/BaseButton/index.d.ts +63 -117
  42. package/types/BaseButton/index.d.ts.map +1 -1
  43. package/types/BaseButton/{types.d.ts → props.d.ts} +14 -8
  44. package/types/BaseButton/props.d.ts.map +1 -0
  45. package/types/BaseButton/styles.d.ts +1 -1
  46. package/types/Button/index.d.ts +36 -73
  47. package/types/Button/index.d.ts.map +1 -1
  48. package/types/Button/{types.d.ts → props.d.ts} +12 -4
  49. package/types/Button/props.d.ts.map +1 -0
  50. package/types/CloseButton/index.d.ts +41 -75
  51. package/types/CloseButton/index.d.ts.map +1 -1
  52. package/types/CloseButton/props.d.ts +27 -0
  53. package/types/CloseButton/props.d.ts.map +1 -0
  54. package/types/CloseButton/styles.d.ts +1 -1
  55. package/types/CondensedButton/index.d.ts +28 -55
  56. package/types/CondensedButton/index.d.ts.map +1 -1
  57. package/types/CondensedButton/props.d.ts +24 -0
  58. package/types/CondensedButton/props.d.ts.map +1 -0
  59. package/types/IconButton/index.d.ts +38 -76
  60. package/types/IconButton/index.d.ts.map +1 -1
  61. package/types/IconButton/{types.d.ts → props.d.ts} +11 -3
  62. package/types/IconButton/props.d.ts.map +1 -0
  63. package/types/ToggleButton/index.d.ts +34 -65
  64. package/types/ToggleButton/index.d.ts.map +1 -1
  65. package/types/ToggleButton/{types.d.ts → props.d.ts} +10 -3
  66. package/types/ToggleButton/props.d.ts.map +1 -0
  67. package/types/index.d.ts +6 -6
  68. package/es/BaseButton/types.js +0 -1
  69. package/es/Button/types.js +0 -1
  70. package/es/CloseButton/types.js +0 -1
  71. package/es/CondensedButton/types.js +0 -1
  72. package/es/IconButton/types.js +0 -1
  73. package/es/ToggleButton/types.js +0 -1
  74. package/lib/BaseButton/types.js +0 -1
  75. package/lib/Button/types.js +0 -1
  76. package/lib/CloseButton/types.js +0 -1
  77. package/lib/CondensedButton/types.js +0 -1
  78. package/lib/IconButton/types.js +0 -1
  79. package/lib/ToggleButton/types.js +0 -1
  80. package/src/BaseButton/types.ts +0 -57
  81. package/src/Button/types.ts +0 -44
  82. package/src/CloseButton/types.ts +0 -45
  83. package/src/CondensedButton/types.ts +0 -40
  84. package/src/IconButton/types.ts +0 -45
  85. package/src/ToggleButton/types.ts +0 -48
  86. package/types/BaseButton/types.d.ts.map +0 -1
  87. package/types/Button/types.d.ts.map +0 -1
  88. package/types/CloseButton/types.d.ts +0 -22
  89. package/types/CloseButton/types.d.ts.map +0 -1
  90. package/types/CondensedButton/types.d.ts +0 -16
  91. package/types/CondensedButton/types.d.ts.map +0 -1
  92. package/types/IconButton/types.d.ts.map +0 -1
  93. package/types/ToggleButton/types.d.ts.map +0 -1
@@ -27,13 +27,13 @@ var _dec, _dec2, _class, _class2, _temp;
27
27
  * SOFTWARE.
28
28
  */
29
29
  import React, { Component } from 'react';
30
- import PropTypes from 'prop-types';
31
30
  import { testable } from '@instructure/ui-testable';
32
31
  import { passthroughProps } from '@instructure/ui-react-utils';
33
32
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
34
- import { withStyle, ThemeablePropTypes } from '@instructure/emotion';
33
+ import { withStyle } from '@instructure/emotion';
35
34
  import generateComponentTheme from './theme';
36
35
  import { BaseButton } from '../BaseButton';
36
+ import { propTypes, allowedProps } from './props';
37
37
 
38
38
  /**
39
39
  ---
@@ -99,106 +99,19 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
99
99
  }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderLabel));
100
100
  }
101
101
 
102
- }, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = {
103
- /**
104
- * An icon, or function returning an icon (identical to the `renderIcon` prop).
105
- */
106
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
107
-
108
- /**
109
- * An icon, or function that returns an icon (identical to the `children` prop).
110
- */
111
- renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
112
-
113
- /**
114
- * An accessible label for the `IconButton`.
115
- */
116
- screenReaderLabel: PropTypes.string.isRequired,
117
-
118
- /**
119
- * Specifies the type of the `IconButton`'s underlying html element.
120
- */
121
- type: PropTypes.oneOf(['button', 'submit', 'reset']),
122
-
123
- /**
124
- * The size of the `IconButton`
125
- */
126
- size: PropTypes.oneOf(['small', 'medium', 'large']),
127
-
128
- /**
129
- * Provides a reference to the `IconButton`'s underlying html element.
130
- */
131
- elementRef: PropTypes.func,
132
-
133
- /**
134
- * The element to render as the component root, `button` by default.
135
- */
136
- as: PropTypes.elementType,
137
-
138
- /**
139
- * Specifies if interaction with the `IconButton` is enabled, disabled, or readonly.
140
- */
141
- interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
142
-
143
- /**
144
- * Specifies the color for the `IconButton`.
145
- */
146
- color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
147
-
148
- /**
149
- * Override the `Button`'s default focus outline color.
150
- */
151
- focusColor: PropTypes.oneOf(['info', 'inverse']),
152
-
153
- /**
154
- * Specifies if the `IconButton` shape should be a circle or rectangle.
155
- */
156
- shape: PropTypes.oneOf(['rectangle', 'circle']),
157
-
158
- /**
159
- * Specifies if the `IconButton` should render with a solid background. When false, the background is transparent.
160
- */
161
- withBackground: PropTypes.bool,
162
-
163
- /**
164
- * Specifies if the `IconButton` should render with a border.
165
- */
166
- withBorder: PropTypes.bool,
167
-
168
- /**
169
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
170
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
171
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
172
- */
173
- margin: ThemeablePropTypes.spacing,
174
-
175
- /**
176
- * Specify a mouse cursor to use when hovering over the button.
177
- * The `pointer` cursor is used by default.
178
- */
179
- cursor: PropTypes.string,
180
-
181
- /**
182
- * Specifies an href attribute for the `IconButton`'s underlying html element.
183
- */
184
- href: PropTypes.string
185
- }, _class2.defaultProps = {
102
+ }, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
186
103
  children: null,
187
- renderIcon: void 0,
188
104
  type: 'button',
189
105
  size: 'medium',
190
106
  elementRef: el => {},
191
107
  as: 'button',
192
108
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
193
- interaction: void 0,
194
109
  color: 'secondary',
195
- focusColor: void 0,
196
110
  shape: 'rectangle',
197
111
  withBackground: true,
198
112
  withBorder: true,
199
113
  margin: '0',
200
- cursor: 'pointer',
201
- href: void 0
114
+ cursor: 'pointer'
202
115
  }, _temp)) || _class) || _class);
203
116
  export default IconButton;
204
117
  export { IconButton };
@@ -0,0 +1,111 @@
1
+ /*
2
+ * The MIT License (MIT)
3
+ *
4
+ * Copyright (c) 2015 - present Instructure, Inc.
5
+ *
6
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ * of this software and associated documentation files (the "Software"), to deal
8
+ * in the Software without restriction, including without limitation the rights
9
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ * copies of the Software, and to permit persons to whom the Software is
11
+ * furnished to do so, subject to the following conditions:
12
+ *
13
+ * The above copyright notice and this permission notice shall be included in all
14
+ * copies or substantial portions of the Software.
15
+ *
16
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ * SOFTWARE.
23
+ */
24
+ import PropTypes from 'prop-types';
25
+ import { ThemeablePropTypes } from '@instructure/emotion';
26
+ const propTypes = {
27
+ /**
28
+ * An icon, or function returning an icon (identical to the `renderIcon` prop).
29
+ */
30
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
31
+
32
+ /**
33
+ * An icon, or function that returns an icon (identical to the `children` prop).
34
+ */
35
+ renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
36
+
37
+ /**
38
+ * An accessible label for the `IconButton`.
39
+ */
40
+ screenReaderLabel: PropTypes.string.isRequired,
41
+
42
+ /**
43
+ * Specifies the type of the `IconButton`'s underlying html element.
44
+ */
45
+ type: PropTypes.oneOf(['button', 'submit', 'reset']),
46
+
47
+ /**
48
+ * The size of the `IconButton`
49
+ */
50
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
51
+
52
+ /**
53
+ * Provides a reference to the `IconButton`'s underlying html element.
54
+ */
55
+ elementRef: PropTypes.func,
56
+
57
+ /**
58
+ * The element to render as the component root, `button` by default.
59
+ */
60
+ as: PropTypes.elementType,
61
+
62
+ /**
63
+ * Specifies if interaction with the `IconButton` is enabled, disabled, or readonly.
64
+ */
65
+ interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
66
+
67
+ /**
68
+ * Specifies the color for the `IconButton`.
69
+ */
70
+ color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
71
+
72
+ /**
73
+ * Override the `Button`'s default focus outline color.
74
+ */
75
+ focusColor: PropTypes.oneOf(['info', 'inverse']),
76
+
77
+ /**
78
+ * Specifies if the `IconButton` shape should be a circle or rectangle.
79
+ */
80
+ shape: PropTypes.oneOf(['rectangle', 'circle']),
81
+
82
+ /**
83
+ * Specifies if the `IconButton` should render with a solid background. When false, the background is transparent.
84
+ */
85
+ withBackground: PropTypes.bool,
86
+
87
+ /**
88
+ * Specifies if the `IconButton` should render with a border.
89
+ */
90
+ withBorder: PropTypes.bool,
91
+
92
+ /**
93
+ * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
94
+ * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
95
+ * familiar CSS-like shorthand. For example: `margin="small auto large"`.
96
+ */
97
+ margin: ThemeablePropTypes.spacing,
98
+
99
+ /**
100
+ * Specify a mouse cursor to use when hovering over the button.
101
+ * The `pointer` cursor is used by default.
102
+ */
103
+ cursor: PropTypes.string,
104
+
105
+ /**
106
+ * Specifies an href attribute for the `IconButton`'s underlying html element.
107
+ */
108
+ href: PropTypes.string
109
+ };
110
+ const allowedProps = ['as', 'children', 'color', 'cursor', 'elementRef', 'focusColor', 'href', 'interaction', 'margin', 'renderIcon', 'screenReaderLabel', 'shape', 'size', 'type', 'withBackground', 'withBorder'];
111
+ export { propTypes, allowedProps };
@@ -27,12 +27,11 @@ var _dec, _class, _class2, _temp;
27
27
  * SOFTWARE.
28
28
  */
29
29
  import React, { Component } from 'react';
30
- import PropTypes from 'prop-types';
31
30
  import { testable } from '@instructure/ui-testable';
32
- import { PositionPropTypes } from '@instructure/ui-position';
33
31
  import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
34
32
  import { Tooltip } from '@instructure/ui-tooltip';
35
33
  import { IconButton } from '../IconButton';
34
+ import { propTypes, allowedProps } from './props';
36
35
 
37
36
  /**
38
37
  ---
@@ -98,89 +97,15 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_temp = _class2 = class To
98
97
  }), callRenderProp(renderIcon)));
99
98
  }
100
99
 
101
- }, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = {
102
- /**
103
- * Text to output only to screen readers
104
- */
105
- screenReaderLabel: PropTypes.string.isRequired,
106
-
107
- /**
108
- * Text to render in the tooltip shown on hover/focus
109
- */
110
- renderTooltipContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
111
-
112
- /**
113
- * An icon or function that returns an icon
114
- */
115
- renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
116
-
117
- /**
118
- * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
119
- */
120
- status: PropTypes.oneOf(['pressed', 'unpressed']).isRequired,
121
-
122
- /**
123
- * The element to render as the component root; `button` by default
124
- */
125
- as: PropTypes.elementType,
126
-
127
- /**
128
- * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
129
- */
130
- interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
131
-
132
- /**
133
- * The size of the `ToggleButton`
134
- */
135
- size: PropTypes.oneOf(['small', 'medium', 'large']),
136
-
137
- /**
138
- * Provides a reference to `ToggleButton`'s underlying HTML element
139
- */
140
- elementRef: PropTypes.func,
141
-
142
- /**
143
- * Callback fired when the `ToggleButton` is clicked
144
- */
145
- onClick: PropTypes.func,
146
-
147
- /**
148
- * The color in which to display the icon
149
- */
150
- color: PropTypes.string,
151
-
152
- /**
153
- * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
154
- */
155
- isShowingTooltip: PropTypes.bool,
156
-
157
- /**
158
- * An element or a function returning an element to use as the mount node
159
- */
160
- mountNode: PositionPropTypes.mountNode,
161
-
162
- /**
163
- * The placement of the tooltip in relation to the button
164
- */
165
- placement: PositionPropTypes.placement,
166
-
167
- /**
168
- * The parent in which to constrain the tooltip.
169
- * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
170
- * or a function returning an element.
171
- */
172
- constrain: PositionPropTypes.constrain
173
- }, _class2.defaultProps = {
100
+ }, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
174
101
  size: 'medium',
175
102
  as: 'button',
176
103
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
177
- interaction: void 0,
178
104
  elementRef: el => {},
179
105
  renderIcon: () => {},
180
106
  onClick: () => {},
181
107
  mountNode: null,
182
108
  color: 'secondary',
183
- isShowingTooltip: void 0,
184
109
  placement: 'top center',
185
110
  constrain: 'window'
186
111
  }, _temp)) || _class);
@@ -0,0 +1,100 @@
1
+ /*
2
+ * The MIT License (MIT)
3
+ *
4
+ * Copyright (c) 2015 - present Instructure, Inc.
5
+ *
6
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ * of this software and associated documentation files (the "Software"), to deal
8
+ * in the Software without restriction, including without limitation the rights
9
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ * copies of the Software, and to permit persons to whom the Software is
11
+ * furnished to do so, subject to the following conditions:
12
+ *
13
+ * The above copyright notice and this permission notice shall be included in all
14
+ * copies or substantial portions of the Software.
15
+ *
16
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ * SOFTWARE.
23
+ */
24
+ import PropTypes from 'prop-types';
25
+ import { PositionPropTypes } from '@instructure/ui-position';
26
+ const propTypes = {
27
+ /**
28
+ * Text to output only to screen readers
29
+ */
30
+ screenReaderLabel: PropTypes.string.isRequired,
31
+
32
+ /**
33
+ * Text to render in the tooltip shown on hover/focus
34
+ */
35
+ renderTooltipContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
36
+
37
+ /**
38
+ * An icon or function that returns an icon
39
+ */
40
+ renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
41
+
42
+ /**
43
+ * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
44
+ */
45
+ status: PropTypes.oneOf(['pressed', 'unpressed']).isRequired,
46
+
47
+ /**
48
+ * The element to render as the component root; `button` by default
49
+ */
50
+ as: PropTypes.elementType,
51
+
52
+ /**
53
+ * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
54
+ */
55
+ interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
56
+
57
+ /**
58
+ * The size of the `ToggleButton`
59
+ */
60
+ size: PropTypes.oneOf(['small', 'medium', 'large']),
61
+
62
+ /**
63
+ * Provides a reference to `ToggleButton`'s underlying HTML element
64
+ */
65
+ elementRef: PropTypes.func,
66
+
67
+ /**
68
+ * Callback fired when the `ToggleButton` is clicked
69
+ */
70
+ onClick: PropTypes.func,
71
+
72
+ /**
73
+ * The color in which to display the icon
74
+ */
75
+ color: PropTypes.string,
76
+
77
+ /**
78
+ * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
79
+ */
80
+ isShowingTooltip: PropTypes.bool,
81
+
82
+ /**
83
+ * An element or a function returning an element to use as the mount node
84
+ */
85
+ mountNode: PositionPropTypes.mountNode,
86
+
87
+ /**
88
+ * The placement of the tooltip in relation to the button
89
+ */
90
+ placement: PositionPropTypes.placement,
91
+
92
+ /**
93
+ * The parent in which to constrain the tooltip.
94
+ * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
95
+ * or a function returning an element.
96
+ */
97
+ constrain: PositionPropTypes.constrain
98
+ };
99
+ const allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
100
+ export { propTypes, allowedProps };
@@ -11,8 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
11
11
 
12
12
  var _react = require("react");
13
13
 
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
14
  var _keycode = _interopRequireDefault(require("keycode"));
17
15
 
18
16
  var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -37,6 +35,8 @@ var _styles = _interopRequireDefault(require("./styles"));
37
35
 
38
36
  var _theme = _interopRequireDefault(require("./theme"));
39
37
 
38
+ var _props = require("./props");
39
+
40
40
  const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
41
41
 
42
42
  var _dec, _dec2, _class, _class2, _temp;
@@ -177,7 +177,7 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
177
177
  children = _this$props4.children,
178
178
  styles = _this$props4.styles;
179
179
  const wrappedChildren = (0, _emotion.jsx)("span", {
180
- css: styles.children
180
+ css: styles === null || styles === void 0 ? void 0 : styles.children
181
181
  }, children);
182
182
 
183
183
  if (!renderIcon) {
@@ -186,19 +186,19 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
186
186
 
187
187
  const hasOnlyIconVisible = this.hasOnlyIconVisible;
188
188
  const wrappedIcon = (0, _emotion.jsx)("span", {
189
- css: styles.iconSVG
189
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
190
190
  }, (0, _callRenderProp.callRenderProp)(renderIcon));
191
191
  const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
192
- css: styles.iconOnly
192
+ css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
193
193
  }, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
194
194
  key: "icon",
195
- css: styles.iconWrapper
195
+ css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
196
196
  }, wrappedIcon), (0, _emotion.jsx)("span", {
197
197
  key: "children",
198
- css: styles.childrenWrapper
198
+ css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
199
199
  }, wrappedChildren)];
200
200
  return (0, _emotion.jsx)("span", {
201
- css: styles.childrenLayout
201
+ css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
202
202
  }, flexChildren);
203
203
  }
204
204
 
@@ -241,144 +241,27 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
241
241
  margin: margin,
242
242
  cursor: isDisabled ? 'not-allowed' : cursor,
243
243
  href: href,
244
- type: href ? null : type,
244
+ type: href ? void 0 : type,
245
245
  elementRef: this.handleElementRef,
246
246
  onClick: this.handleClick,
247
247
  onKeyDown: this.handleKeyDown,
248
- role: onClick && as !== 'button' ? 'button' : null,
248
+ role: onClick && as !== 'button' ? 'button' : void 0,
249
249
  tabIndex: onClick && as ? tabIndex || '0' : tabIndex,
250
250
  disabled: isDisabled || isReadOnly,
251
- css: isEnabled ? styles.baseButton : null
251
+ css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null
252
252
  }), (0, _emotion.jsx)("span", {
253
- css: styles.content
253
+ css: styles === null || styles === void 0 ? void 0 : styles.content
254
254
  }, this.renderChildren()));
255
255
  }
256
256
 
257
- }, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = {
258
- // eslint-disable-next-line react/require-default-props
259
- makeStyles: _propTypes.default.func,
260
- // eslint-disable-next-line react/require-default-props
261
- styles: _propTypes.default.object,
262
-
263
- /**
264
- * Specifies the `Button` children.
265
- */
266
- children: _propTypes.default.node,
267
-
268
- /**
269
- * Specifies the type of the `Button`'s underlying html element.
270
- */
271
- type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
272
-
273
- /**
274
- * The size of the `Button`
275
- */
276
- size: _propTypes.default.oneOf(['small', 'medium', 'large']),
277
-
278
- /**
279
- * Provides a reference to the `Button`'s underlying html element.
280
- */
281
- elementRef: _propTypes.default.func,
282
-
283
- /**
284
- * The element to render as the component root, `Button` by default.
285
- */
286
- as: _propTypes.default.elementType,
287
-
288
- /**
289
- * Specifies if interaction with the `Button` is enabled, disabled, or readonly.
290
- */
291
- interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
292
-
293
- /**
294
- * Specifies the color for the `Button`.
295
- */
296
- color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
297
-
298
- /**
299
- * Override the `Button`'s default focus outline color.
300
- */
301
- focusColor: _propTypes.default.oneOf(['info', 'inverse']),
302
-
303
- /**
304
- * The `Button` display property. When set to `inline-block`, the `Button` displays inline with other elements.
305
- * When set to block, the `Button` expands to fill the width of the container.
306
- */
307
- display: _propTypes.default.oneOf(['inline-block', 'block']),
308
-
309
- /**
310
- * Sets the alignment of the `Button` children and/or icon.
311
- */
312
- textAlign: _propTypes.default.oneOf(['start', 'center']),
313
-
314
- /**
315
- * Specifies if the `Button` shape should be a circle or rectangle.
316
- */
317
- shape: _propTypes.default.oneOf(['rectangle', 'circle']),
318
-
319
- /**
320
- * Specifies if the `Button` should render with a solid background. When false, the background is transparent.
321
- */
322
- withBackground: _propTypes.default.bool,
323
-
324
- /**
325
- * Specifies if the `Button` should render with a border.
326
- */
327
- withBorder: _propTypes.default.bool,
328
-
329
- /**
330
- * Designates if the `Button` should render without padding. This option should only be set when `withBorder` and
331
- * `withBackground` are also set to false.
332
- */
333
- isCondensed: _propTypes.default.bool,
334
-
335
- /**
336
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
337
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
338
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
339
- */
340
- margin: _emotion.ThemeablePropTypes.spacing,
341
-
342
- /**
343
- * Specify a mouse cursor to use when hovering over the button.
344
- * The `pointer` cursor is used by default.
345
- */
346
- cursor: _propTypes.default.string,
347
-
348
- /**
349
- * Specifies an href attribute for the `Button`'s underlying html element.
350
- */
351
- href: _propTypes.default.string,
352
-
353
- /**
354
- * Callback fired when the `Button` is clicked.
355
- */
356
- onClick: _propTypes.default.func,
357
-
358
- /**
359
- * Callback fired when the `Button` receives a keydown event.
360
- */
361
- onKeyDown: _propTypes.default.func,
362
-
363
- /**
364
- * An icon, or function that returns an icon.
365
- */
366
- renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
367
-
368
- /**
369
- * Specifies the tabindex of the `Button`.
370
- */
371
- tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
372
- }, _class2.defaultProps = {
257
+ }, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
373
258
  children: null,
374
259
  type: 'button',
375
260
  size: 'medium',
376
261
  elementRef: el => {},
377
262
  as: 'button',
378
263
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
379
- interaction: void 0,
380
264
  color: 'secondary',
381
- focusColor: void 0,
382
265
  shape: 'rectangle',
383
266
  display: 'inline-block',
384
267
  textAlign: 'start',
@@ -387,11 +270,7 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
387
270
  isCondensed: false,
388
271
  margin: '0',
389
272
  cursor: 'pointer',
390
- href: void 0,
391
- onClick: void 0,
392
- onKeyDown: event => {},
393
- renderIcon: void 0,
394
- tabIndex: void 0
273
+ onKeyDown: event => {}
395
274
  }, _temp)) || _class) || _class);
396
275
  exports.BaseButton = BaseButton;
397
276
  var _default = BaseButton;