@instructure/ui-buttons 8.56.2-pr-snapshot-1721749364069 → 8.56.2
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 +1 -1
- package/lib/BaseButton/__new-tests__/BaseButton.test.js +2 -2
- package/lib/BaseButton/index.js +15 -12
- package/lib/BaseButton/theme.js +13 -12
- package/lib/Button/__new-tests__/Button.test.js +2 -2
- package/lib/Button/index.js +6 -5
- package/lib/CloseButton/index.js +10 -9
- package/lib/CondensedButton/index.js +4 -4
- package/lib/IconButton/index.js +6 -6
- package/lib/ToggleButton/index.js +8 -7
- package/lib/ToggleButton/props.js +4 -4
- package/package.json +19 -19
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
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
|
-
## [8.56.2
|
|
6
|
+
## [8.56.2](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2) (2024-08-06)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-buttons
|
|
9
9
|
|
|
@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
|
|
|
6
6
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
7
7
|
require("@testing-library/jest-dom");
|
|
8
8
|
var _index = require("../index");
|
|
9
|
-
var
|
|
9
|
+
var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
|
|
10
10
|
var _BaseButton, _BaseButton2, _BaseButton3, _BaseButton4, _BaseButton5, _svg, _BaseButton6, _BaseButton7, _BaseButton8, _BaseButton9, _BaseButton10, _BaseButton11;
|
|
11
11
|
/*
|
|
12
12
|
* The MIT License (MIT)
|
|
@@ -333,7 +333,7 @@ describe('<BaseButton/>', () => {
|
|
|
333
333
|
});
|
|
334
334
|
await _userEvent.default.click(button);
|
|
335
335
|
await (0, _react2.waitFor)(async () => {
|
|
336
|
-
const axeCheck = await (0,
|
|
336
|
+
const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
|
|
337
337
|
expect(axeCheck).toBe(true);
|
|
338
338
|
});
|
|
339
339
|
});
|
package/lib/BaseButton/index.js
CHANGED
|
@@ -10,11 +10,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
12
12
|
var _console = require("@instructure/console");
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
13
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
14
|
+
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
15
|
+
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
16
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
17
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
18
|
+
var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
|
|
19
|
+
var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
|
|
20
|
+
var _View = require("@instructure/ui-view/lib/View");
|
|
18
21
|
var _emotion = require("@instructure/emotion");
|
|
19
22
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
20
23
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -50,7 +53,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
50
53
|
category: components/utilities
|
|
51
54
|
---
|
|
52
55
|
**/
|
|
53
|
-
let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0,
|
|
56
|
+
let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class BaseButton extends _react.Component {
|
|
54
57
|
constructor(...args) {
|
|
55
58
|
super(...args);
|
|
56
59
|
this.ref = null;
|
|
@@ -120,13 +123,13 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
120
123
|
const _this$props4 = this.props,
|
|
121
124
|
children = _this$props4.children,
|
|
122
125
|
renderIcon = _this$props4.renderIcon;
|
|
123
|
-
return !!(renderIcon && !(0,
|
|
126
|
+
return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
|
|
124
127
|
}
|
|
125
128
|
get elementType() {
|
|
126
|
-
return (0,
|
|
129
|
+
return (0, _getElementType.getElementType)(BaseButton, this.props);
|
|
127
130
|
}
|
|
128
131
|
get interaction() {
|
|
129
|
-
return (0,
|
|
132
|
+
return (0, _getInteraction.getInteraction)({
|
|
130
133
|
props: this.props
|
|
131
134
|
});
|
|
132
135
|
}
|
|
@@ -170,7 +173,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
170
173
|
return color.includes('inverse') ? 'inverse' : 'info';
|
|
171
174
|
}
|
|
172
175
|
get focused() {
|
|
173
|
-
return (0,
|
|
176
|
+
return (0, _isActiveElement.isActiveElement)(this.ref);
|
|
174
177
|
}
|
|
175
178
|
focus() {
|
|
176
179
|
this.ref && this.ref.focus();
|
|
@@ -189,7 +192,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
189
192
|
const hasOnlyIconVisible = this.hasOnlyIconVisible;
|
|
190
193
|
const wrappedIcon = (0, _emotion.jsx)("span", {
|
|
191
194
|
css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
|
|
192
|
-
}, (0,
|
|
195
|
+
}, (0, _callRenderProp.callRenderProp)(renderIcon));
|
|
193
196
|
const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
|
|
194
197
|
css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
|
|
195
198
|
}, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
|
|
@@ -230,7 +233,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
230
233
|
isEnabled = this.isEnabled,
|
|
231
234
|
isReadOnly = this.isReadOnly;
|
|
232
235
|
const tabIndexNumber = this.tabIndex;
|
|
233
|
-
return (0, _emotion.jsx)(
|
|
236
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
234
237
|
as: this.elementType,
|
|
235
238
|
focusColor: this.focusColor,
|
|
236
239
|
position: "relative",
|
package/lib/BaseButton/theme.js
CHANGED
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
|
|
8
|
+
var _darken = require("@instructure/ui-color-utils/lib/darken.js");
|
|
8
9
|
/*
|
|
9
10
|
* The MIT License (MIT)
|
|
10
11
|
*
|
|
@@ -39,17 +40,17 @@ const generateButtonThemeVars = ({
|
|
|
39
40
|
ghostBorderColor = borderColor
|
|
40
41
|
}) => ({
|
|
41
42
|
[`${style}Color`]: textColor,
|
|
42
|
-
[`${style}BorderColor`]: (0,
|
|
43
|
+
[`${style}BorderColor`]: (0, _darken.darken)(borderColor, 10),
|
|
43
44
|
[`${style}Background`]: backgroundColor,
|
|
44
|
-
[`${style}HoverBackground`]: (0,
|
|
45
|
-
[`${style}ActiveBackground`]: (0,
|
|
46
|
-
[`${style}ActiveBoxShadow`]: `${activeShadow} ${(0,
|
|
45
|
+
[`${style}HoverBackground`]: (0, _darken.darken)(backgroundColor, 10),
|
|
46
|
+
[`${style}ActiveBackground`]: (0, _darken.darken)(backgroundColor, 10),
|
|
47
|
+
[`${style}ActiveBoxShadow`]: `${activeShadow} ${(0, _darken.darken)(borderColor, 20)}`,
|
|
47
48
|
[`${style}GhostColor`]: ghostTextColor,
|
|
48
49
|
[`${style}GhostBorderColor`]: ghostBorderColor,
|
|
49
50
|
[`${style}GhostBackground`]: 'transparent',
|
|
50
|
-
[`${style}GhostHoverBackground`]: (0,
|
|
51
|
+
[`${style}GhostHoverBackground`]: (0, _alpha.alpha)(ghostTextColor, 10),
|
|
51
52
|
[`${style}GhostActiveBackground`]: 'transparent',
|
|
52
|
-
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0,
|
|
53
|
+
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0, _alpha.alpha)(ghostBorderColor, 28)}`
|
|
53
54
|
});
|
|
54
55
|
|
|
55
56
|
/**
|
|
@@ -73,7 +74,7 @@ const generateComponentTheme = theme => {
|
|
|
73
74
|
textColor: theme['ic-brand-button--primary-text'],
|
|
74
75
|
ghostTextColor: theme['ic-brand-button--primary-bgd']
|
|
75
76
|
}),
|
|
76
|
-
primaryGhostHoverBackground: (0,
|
|
77
|
+
primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10)
|
|
77
78
|
},
|
|
78
79
|
'canvas-high-contrast': {
|
|
79
80
|
secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
@@ -158,12 +159,12 @@ const generateComponentTheme = theme => {
|
|
|
158
159
|
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
|
|
159
160
|
}),
|
|
160
161
|
// Overrides for primary-inverse to match what was previously the `light` button variant
|
|
161
|
-
primaryInverseBorderColor: (0,
|
|
162
|
-
primaryInverseHoverBackground: (0,
|
|
162
|
+
primaryInverseBorderColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
|
|
163
|
+
primaryInverseHoverBackground: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
|
|
163
164
|
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
164
|
-
primaryInverseActiveBoxShadow: `${activeShadow} ${(0,
|
|
165
|
+
primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
|
|
165
166
|
// Overrides for ghost hover states to ensure correct color contrast for a11y
|
|
166
|
-
successGhostHoverBackground: (0,
|
|
167
|
+
successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
|
|
167
168
|
};
|
|
168
169
|
return {
|
|
169
170
|
...componentVariables,
|
|
@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
5
5
|
var _react2 = require("@testing-library/react");
|
|
6
6
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
7
7
|
require("@testing-library/jest-dom");
|
|
8
|
-
var
|
|
8
|
+
var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
|
|
9
9
|
var _index = require("../index");
|
|
10
10
|
var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7, _Button8, _Button10, _Button11, _Button12, _Button13, _Button14, _Button15, _Button16, _Button17, _Button18;
|
|
11
11
|
/*
|
|
@@ -431,7 +431,7 @@ describe('<Button/>', () => {
|
|
|
431
431
|
});
|
|
432
432
|
await _userEvent.default.click(button);
|
|
433
433
|
await (0, _react2.waitFor)(async () => {
|
|
434
|
-
const axeCheck = await (0,
|
|
434
|
+
const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
|
|
435
435
|
expect(axeCheck).toBe(true);
|
|
436
436
|
});
|
|
437
437
|
});
|
package/lib/Button/index.js
CHANGED
|
@@ -8,8 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = exports.Button = void 0;
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
|
+
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
13
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
13
14
|
var _emotion = require("@instructure/emotion");
|
|
14
15
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
15
16
|
var _BaseButton = require("../BaseButton");
|
|
@@ -45,7 +46,7 @@ category: components
|
|
|
45
46
|
---
|
|
46
47
|
**/
|
|
47
48
|
// needed for listing the available theme variables on docs page
|
|
48
|
-
let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
|
|
49
|
+
let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Button extends _react.Component {
|
|
49
50
|
constructor(...args) {
|
|
50
51
|
super(...args);
|
|
51
52
|
this._buttonComponent = null;
|
|
@@ -83,12 +84,12 @@ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.defau
|
|
|
83
84
|
href = _this$props.href,
|
|
84
85
|
renderIcon = _this$props.renderIcon,
|
|
85
86
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
86
|
-
const interaction = (0,
|
|
87
|
+
const interaction = (0, _getInteraction.getInteraction)({
|
|
87
88
|
props
|
|
88
89
|
});
|
|
89
90
|
const themeOverride = this.props.themeOverride;
|
|
90
91
|
const buttonProps = {
|
|
91
|
-
...(0,
|
|
92
|
+
...(0, _passthroughProps.passthroughProps)(props),
|
|
92
93
|
type,
|
|
93
94
|
size,
|
|
94
95
|
elementRef: this.handleElementRef,
|
package/lib/CloseButton/index.js
CHANGED
|
@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.CloseButton = void 0;
|
|
8
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
9
|
var _react = require("react");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
10
|
+
var _IconXSolid = require("@instructure/ui-icons/lib/IconXSolid.js");
|
|
11
|
+
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
|
12
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
13
|
+
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
14
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
14
15
|
var _emotion = require("@instructure/emotion");
|
|
15
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
16
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -47,7 +48,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
47
48
|
category: components
|
|
48
49
|
---
|
|
49
50
|
**/
|
|
50
|
-
let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0,
|
|
51
|
+
let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CloseButton extends _react.Component {
|
|
51
52
|
constructor(...args) {
|
|
52
53
|
super(...args);
|
|
53
54
|
this.ref = null;
|
|
@@ -67,7 +68,7 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
67
68
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
69
|
}
|
|
69
70
|
get interaction() {
|
|
70
|
-
return (0,
|
|
71
|
+
return (0, _getInteraction.getInteraction)({
|
|
71
72
|
props: this.props
|
|
72
73
|
});
|
|
73
74
|
}
|
|
@@ -91,11 +92,11 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
91
92
|
tabIndex = _this$props3.tabIndex,
|
|
92
93
|
styles = _this$props3.styles,
|
|
93
94
|
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
94
|
-
return (0, _emotion.jsx)("span", Object.assign({}, (0,
|
|
95
|
+
return (0, _emotion.jsx)("span", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
95
96
|
css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
|
|
96
97
|
ref: el => this.ref = el
|
|
97
98
|
}), (0, _emotion.jsx)(_BaseButton.BaseButton, {
|
|
98
|
-
renderIcon:
|
|
99
|
+
renderIcon: _IconXSolid.IconXSolid,
|
|
99
100
|
elementRef: this.handleRef,
|
|
100
101
|
interaction: this.interaction,
|
|
101
102
|
type: type,
|
|
@@ -109,7 +110,7 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
109
110
|
href: href,
|
|
110
111
|
cursor: cursor,
|
|
111
112
|
tabIndex: tabIndex
|
|
112
|
-
}, (0, _emotion.jsx)(
|
|
113
|
+
}, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel)));
|
|
113
114
|
}
|
|
114
115
|
}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
115
116
|
// Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
|
|
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = exports.CondensedButton = void 0;
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
13
13
|
var _emotion = require("@instructure/emotion");
|
|
14
14
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
15
15
|
var _BaseButton = require("../BaseButton");
|
|
@@ -45,7 +45,7 @@ category: components
|
|
|
45
45
|
---
|
|
46
46
|
**/
|
|
47
47
|
// needed for listing the available theme variables on docs page
|
|
48
|
-
let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
|
|
48
|
+
let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CondensedButton extends _react.Component {
|
|
49
49
|
constructor(...args) {
|
|
50
50
|
super(...args);
|
|
51
51
|
this._baseButton = null;
|
|
@@ -79,7 +79,7 @@ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(
|
|
|
79
79
|
renderIcon = _this$props.renderIcon,
|
|
80
80
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
81
81
|
const themeOverride = this.props.themeOverride;
|
|
82
|
-
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0,
|
|
82
|
+
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
83
83
|
isCondensed: true,
|
|
84
84
|
withBackground: false,
|
|
85
85
|
withBorder: false,
|
package/lib/IconButton/index.js
CHANGED
|
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = exports.IconButton = void 0;
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
11
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
13
|
+
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
|
14
14
|
var _emotion = require("@instructure/emotion");
|
|
15
15
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
16
16
|
var _BaseButton = require("../BaseButton");
|
|
@@ -46,7 +46,7 @@ category: components
|
|
|
46
46
|
---
|
|
47
47
|
**/
|
|
48
48
|
// needed for listing the available theme variables on docs page
|
|
49
|
-
let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
|
|
49
|
+
let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class IconButton extends _react.Component {
|
|
50
50
|
constructor(...args) {
|
|
51
51
|
super(...args);
|
|
52
52
|
this._baseButton = null;
|
|
@@ -85,7 +85,7 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
|
|
|
85
85
|
href = _this$props.href,
|
|
86
86
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
87
87
|
const themeOverride = this.props.themeOverride;
|
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0,
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
89
89
|
type: type,
|
|
90
90
|
size: size,
|
|
91
91
|
elementRef: this.handleRef,
|
|
@@ -104,7 +104,7 @@ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _the
|
|
|
104
104
|
ref: component => {
|
|
105
105
|
this._baseButton = component;
|
|
106
106
|
}
|
|
107
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
107
|
+
}), /*#__PURE__*/_react.default.createElement(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel));
|
|
108
108
|
}
|
|
109
109
|
}, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
110
110
|
type: 'button',
|
|
@@ -8,9 +8,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = exports.ToggleButton = void 0;
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
11
|
+
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
13
|
+
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
14
|
+
var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
|
|
14
15
|
var _IconButton = require("../IconButton");
|
|
15
16
|
var _props = require("./props");
|
|
16
17
|
const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
|
|
@@ -43,7 +44,7 @@ var _dec, _class, _class2;
|
|
|
43
44
|
category: components
|
|
44
45
|
---
|
|
45
46
|
**/
|
|
46
|
-
let ToggleButton = exports.ToggleButton = (_dec = (0,
|
|
47
|
+
let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class ToggleButton extends _react.Component {
|
|
47
48
|
constructor(props) {
|
|
48
49
|
super(props);
|
|
49
50
|
this.ref = null;
|
|
@@ -75,7 +76,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _uiTestable.testable)(), _
|
|
|
75
76
|
placement = _this$props.placement,
|
|
76
77
|
onClick = _this$props.onClick,
|
|
77
78
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
79
|
+
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
79
80
|
renderTip: renderTooltipContent,
|
|
80
81
|
on: ['hover', 'focus'],
|
|
81
82
|
placement: placement,
|
|
@@ -93,7 +94,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _uiTestable.testable)(), _
|
|
|
93
94
|
},
|
|
94
95
|
mountNode: mountNode,
|
|
95
96
|
elementRef: el => this.ref = el
|
|
96
|
-
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, Object.assign({}, (0,
|
|
97
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
97
98
|
screenReaderLabel: screenReaderLabel,
|
|
98
99
|
withBackground: false,
|
|
99
100
|
withBorder: false,
|
|
@@ -104,7 +105,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _uiTestable.testable)(), _
|
|
|
104
105
|
onClick: onClick,
|
|
105
106
|
interaction: interaction,
|
|
106
107
|
"aria-pressed": status === 'pressed'
|
|
107
|
-
}), (0,
|
|
108
|
+
}), (0, _callRenderProp.callRenderProp)(renderIcon)));
|
|
108
109
|
}
|
|
109
110
|
}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
110
111
|
size: 'medium',
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
|
|
10
10
|
/*
|
|
11
11
|
* The MIT License (MIT)
|
|
12
12
|
*
|
|
@@ -43,8 +43,8 @@ const propTypes = exports.propTypes = {
|
|
|
43
43
|
onClick: _propTypes.default.func,
|
|
44
44
|
color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
|
|
45
45
|
isShowingTooltip: _propTypes.default.bool,
|
|
46
|
-
mountNode:
|
|
47
|
-
placement:
|
|
48
|
-
constrain:
|
|
46
|
+
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
|
|
47
|
+
placement: _PositionPropTypes.PositionPropTypes.placement,
|
|
48
|
+
constrain: _PositionPropTypes.PositionPropTypes.constrain
|
|
49
49
|
};
|
|
50
50
|
const allowedProps = exports.allowedProps = ['as', 'color', 'constrain', 'elementRef', 'interaction', 'isShowingTooltip', 'mountNode', 'onClick', 'placement', 'renderIcon', 'renderTooltipContent', 'screenReaderLabel', 'size', 'status'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-buttons",
|
|
3
|
-
"version": "8.56.2
|
|
3
|
+
"version": "8.56.2",
|
|
4
4
|
"description": "Accessible button components",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,30 +23,30 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-axe-check": "8.56.2
|
|
27
|
-
"@instructure/ui-babel-preset": "8.56.2
|
|
28
|
-
"@instructure/ui-test-utils": "8.56.2
|
|
29
|
-
"@instructure/ui-themes": "8.56.2
|
|
26
|
+
"@instructure/ui-axe-check": "8.56.2",
|
|
27
|
+
"@instructure/ui-babel-preset": "8.56.2",
|
|
28
|
+
"@instructure/ui-test-utils": "8.56.2",
|
|
29
|
+
"@instructure/ui-themes": "8.56.2",
|
|
30
30
|
"@testing-library/jest-dom": "^6.1.4",
|
|
31
31
|
"@testing-library/react": "^14.1.2",
|
|
32
32
|
"@testing-library/user-event": "^14.5.1"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@babel/runtime": "^7.23.2",
|
|
36
|
-
"@instructure/console": "8.56.2
|
|
37
|
-
"@instructure/emotion": "8.56.2
|
|
38
|
-
"@instructure/shared-types": "8.56.2
|
|
39
|
-
"@instructure/ui-a11y-content": "8.56.2
|
|
40
|
-
"@instructure/ui-a11y-utils": "8.56.2
|
|
41
|
-
"@instructure/ui-color-utils": "8.56.2
|
|
42
|
-
"@instructure/ui-dom-utils": "8.56.2
|
|
43
|
-
"@instructure/ui-icons": "8.56.2
|
|
44
|
-
"@instructure/ui-position": "8.56.2
|
|
45
|
-
"@instructure/ui-react-utils": "8.56.2
|
|
46
|
-
"@instructure/ui-testable": "8.56.2
|
|
47
|
-
"@instructure/ui-tooltip": "8.56.2
|
|
48
|
-
"@instructure/ui-utils": "8.56.2
|
|
49
|
-
"@instructure/ui-view": "8.56.2
|
|
36
|
+
"@instructure/console": "8.56.2",
|
|
37
|
+
"@instructure/emotion": "8.56.2",
|
|
38
|
+
"@instructure/shared-types": "8.56.2",
|
|
39
|
+
"@instructure/ui-a11y-content": "8.56.2",
|
|
40
|
+
"@instructure/ui-a11y-utils": "8.56.2",
|
|
41
|
+
"@instructure/ui-color-utils": "8.56.2",
|
|
42
|
+
"@instructure/ui-dom-utils": "8.56.2",
|
|
43
|
+
"@instructure/ui-icons": "8.56.2",
|
|
44
|
+
"@instructure/ui-position": "8.56.2",
|
|
45
|
+
"@instructure/ui-react-utils": "8.56.2",
|
|
46
|
+
"@instructure/ui-testable": "8.56.2",
|
|
47
|
+
"@instructure/ui-tooltip": "8.56.2",
|
|
48
|
+
"@instructure/ui-utils": "8.56.2",
|
|
49
|
+
"@instructure/ui-view": "8.56.2",
|
|
50
50
|
"keycode": "^2.2.1",
|
|
51
51
|
"prop-types": "^15.8.1"
|
|
52
52
|
},
|