@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.
- package/CHANGELOG.md +4 -0
- package/es/BaseButton/index.js +64 -43
- package/es/BaseButton/props.js +2 -88
- package/es/BaseButton/theme.js +1 -1
- package/es/Button/index.js +2 -2
- package/es/Button/props.js +3 -65
- package/es/CloseButton/index.js +23 -18
- package/es/CloseButton/props.js +2 -60
- package/es/CondensedButton/index.js +2 -2
- package/es/CondensedButton/props.js +3 -48
- package/es/IconButton/index.js +2 -2
- package/es/IconButton/props.js +3 -68
- package/es/ToggleButton/index.js +4 -5
- package/es/ToggleButton/props.js +1 -58
- package/lib/BaseButton/index.js +67 -43
- package/lib/BaseButton/props.js +2 -88
- package/lib/BaseButton/theme.js +1 -1
- package/lib/Button/index.js +2 -2
- package/lib/Button/props.js +3 -65
- package/lib/CloseButton/index.js +23 -18
- package/lib/CloseButton/props.js +2 -60
- package/lib/CondensedButton/index.js +2 -2
- package/lib/CondensedButton/props.js +3 -48
- package/lib/IconButton/index.js +2 -2
- package/lib/IconButton/props.js +3 -68
- package/lib/ToggleButton/index.js +4 -5
- package/lib/ToggleButton/props.js +1 -58
- package/package.json +21 -22
- package/src/BaseButton/index.tsx +35 -27
- package/src/BaseButton/props.ts +103 -72
- package/src/BaseButton/theme.ts +1 -6
- package/src/Button/index.tsx +4 -8
- package/src/Button/props.ts +74 -48
- package/src/CloseButton/index.tsx +4 -6
- package/src/CloseButton/props.ts +67 -41
- package/src/CondensedButton/index.tsx +3 -7
- package/src/CondensedButton/props.ts +56 -34
- package/src/IconButton/index.tsx +3 -7
- package/src/IconButton/props.ts +77 -50
- package/src/ToggleButton/index.tsx +8 -15
- package/src/ToggleButton/props.ts +65 -39
- package/tsconfig.build.json +25 -2
- package/tsconfig.build.tsbuildinfo +1 -0
- package/types/BaseButton/BaseButtonLocator.d.ts +57 -56
- package/types/BaseButton/BaseButtonLocator.d.ts.map +1 -1
- package/types/BaseButton/index.d.ts +16 -15
- package/types/BaseButton/index.d.ts.map +1 -1
- package/types/BaseButton/props.d.ts +76 -5
- package/types/BaseButton/props.d.ts.map +1 -1
- package/types/BaseButton/theme.d.ts.map +1 -1
- package/types/Button/ButtonLocator.d.ts +57 -56
- package/types/Button/ButtonLocator.d.ts.map +1 -1
- package/types/Button/index.d.ts +10 -7
- package/types/Button/index.d.ts.map +1 -1
- package/types/Button/locator.d.ts +52 -52
- package/types/Button/props.d.ts +57 -3
- package/types/Button/props.d.ts.map +1 -1
- package/types/CloseButton/CloseButtonLocator.d.ts +52 -52
- package/types/CloseButton/index.d.ts +4 -3
- package/types/CloseButton/index.d.ts.map +1 -1
- package/types/CloseButton/props.d.ts +55 -5
- package/types/CloseButton/props.d.ts.map +1 -1
- package/types/CondensedButton/CondensedButtonLocator.d.ts +57 -56
- package/types/CondensedButton/CondensedButtonLocator.d.ts.map +1 -1
- package/types/CondensedButton/index.d.ts +9 -6
- package/types/CondensedButton/index.d.ts.map +1 -1
- package/types/CondensedButton/props.d.ts +44 -3
- package/types/CondensedButton/props.d.ts.map +1 -1
- package/types/IconButton/IconButtonLocator.d.ts +57 -56
- package/types/IconButton/IconButtonLocator.d.ts.map +1 -1
- package/types/IconButton/index.d.ts +11 -8
- package/types/IconButton/index.d.ts.map +1 -1
- package/types/IconButton/props.d.ts +60 -4
- package/types/IconButton/props.d.ts.map +1 -1
- package/types/ToggleButton/ToggleButtonLocator.d.ts +57 -56
- package/types/ToggleButton/ToggleButtonLocator.d.ts.map +1 -1
- package/types/ToggleButton/index.d.ts +12 -13
- package/types/ToggleButton/index.d.ts.map +1 -1
- package/types/ToggleButton/props.d.ts +52 -4
- package/types/ToggleButton/props.d.ts.map +1 -1
- package/LICENSE.md +0 -27
package/lib/Button/props.js
CHANGED
|
@@ -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;
|
package/lib/CloseButton/index.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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$
|
|
79
|
-
screenReaderLabel = _this$
|
|
80
|
-
elementRef = _this$
|
|
81
|
-
size = _this$
|
|
82
|
-
onClick = _this$
|
|
83
|
-
margin = _this$
|
|
84
|
-
placement = _this$
|
|
85
|
-
offset = _this$
|
|
86
|
-
type = _this$
|
|
87
|
-
as = _this$
|
|
88
|
-
href = _this$
|
|
89
|
-
cursor = _this$
|
|
90
|
-
tabIndex = _this$
|
|
91
|
-
styles = _this$
|
|
92
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
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',
|
package/lib/CloseButton/props.js
CHANGED
|
@@ -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;
|
package/lib/IconButton/index.js
CHANGED
|
@@ -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,
|
package/lib/IconButton/props.js
CHANGED
|
@@ -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:
|
|
82
|
+
onShowContent: () => {
|
|
82
83
|
this.setState({
|
|
83
84
|
isShowingTooltip: true
|
|
84
85
|
});
|
|
85
86
|
},
|
|
86
|
-
onHideContent:
|
|
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
|
-
|
|
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.
|
|
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.
|
|
28
|
-
"@instructure/ui-test-locator": "8.
|
|
29
|
-
"@instructure/ui-test-queries": "8.
|
|
30
|
-
"@instructure/ui-test-utils": "8.
|
|
31
|
-
"@instructure/ui-themes": "8.
|
|
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.
|
|
36
|
-
"@instructure/emotion": "8.
|
|
37
|
-
"@instructure/shared-types": "8.
|
|
38
|
-
"@instructure/ui-a11y-content": "8.
|
|
39
|
-
"@instructure/ui-a11y-utils": "8.
|
|
40
|
-
"@instructure/ui-color-utils": "8.
|
|
41
|
-
"@instructure/ui-dom-utils": "8.
|
|
42
|
-
"@instructure/ui-icons": "8.
|
|
43
|
-
"@instructure/ui-position": "8.
|
|
44
|
-
"@instructure/ui-react-utils": "8.
|
|
45
|
-
"@instructure/ui-testable": "8.
|
|
46
|
-
"@instructure/ui-tooltip": "8.
|
|
47
|
-
"@instructure/ui-utils": "8.
|
|
48
|
-
"@instructure/ui-view": "8.
|
|
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
|
}
|