@instructure/ui-buttons 8.56.4 → 8.56.5-pr-snapshot-1728655013879
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 +8 -0
- package/lib/BaseButton/__new-tests__/BaseButton.test.js +2 -2
- package/lib/BaseButton/index.js +12 -15
- package/lib/BaseButton/theme.js +12 -13
- package/lib/Button/__new-tests__/Button.test.js +2 -2
- package/lib/Button/index.js +5 -6
- package/lib/CloseButton/index.js +9 -10
- package/lib/CondensedButton/index.js +4 -4
- package/lib/IconButton/index.js +6 -6
- package/lib/ToggleButton/index.js +7 -8
- package/lib/ToggleButton/props.js +4 -4
- package/package.json +19 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.5-pr-snapshot-1728655013879](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1728655013879) (2024-10-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-buttons
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [8.56.4](https://github.com/instructure/instructure-ui/compare/v8.56.3...v8.56.4) (2024-10-02)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-buttons
|
|
@@ -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 _uiAxeCheck = require("@instructure/ui-axe-check");
|
|
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, _uiAxeCheck.runAxeCheck)(button);
|
|
337
337
|
expect(axeCheck).toBe(true);
|
|
338
338
|
});
|
|
339
339
|
});
|
package/lib/BaseButton/index.js
CHANGED
|
@@ -10,14 +10,11 @@ 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
|
|
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");
|
|
13
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
14
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
15
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
16
|
+
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
|
|
17
|
+
var _uiView = require("@instructure/ui-view");
|
|
21
18
|
var _emotion = require("@instructure/emotion");
|
|
22
19
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
23
20
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -53,7 +50,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
53
50
|
category: components/utilities
|
|
54
51
|
---
|
|
55
52
|
**/
|
|
56
|
-
let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0,
|
|
53
|
+
let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class BaseButton extends _react.Component {
|
|
57
54
|
constructor(...args) {
|
|
58
55
|
super(...args);
|
|
59
56
|
this.ref = null;
|
|
@@ -123,13 +120,13 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
123
120
|
const _this$props4 = this.props,
|
|
124
121
|
children = _this$props4.children,
|
|
125
122
|
renderIcon = _this$props4.renderIcon;
|
|
126
|
-
return !!(renderIcon && !(0,
|
|
123
|
+
return !!(renderIcon && !(0, _uiA11yUtils.hasVisibleChildren)(children));
|
|
127
124
|
}
|
|
128
125
|
get elementType() {
|
|
129
|
-
return (0,
|
|
126
|
+
return (0, _uiReactUtils.getElementType)(BaseButton, this.props);
|
|
130
127
|
}
|
|
131
128
|
get interaction() {
|
|
132
|
-
return (0,
|
|
129
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
133
130
|
props: this.props
|
|
134
131
|
});
|
|
135
132
|
}
|
|
@@ -173,7 +170,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
173
170
|
return color.includes('inverse') ? 'inverse' : 'info';
|
|
174
171
|
}
|
|
175
172
|
get focused() {
|
|
176
|
-
return (0,
|
|
173
|
+
return (0, _uiDomUtils.isActiveElement)(this.ref);
|
|
177
174
|
}
|
|
178
175
|
focus() {
|
|
179
176
|
this.ref && this.ref.focus();
|
|
@@ -192,7 +189,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
192
189
|
const hasOnlyIconVisible = this.hasOnlyIconVisible;
|
|
193
190
|
const wrappedIcon = (0, _emotion.jsx)("span", {
|
|
194
191
|
css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
|
|
195
|
-
}, (0,
|
|
192
|
+
}, (0, _uiReactUtils.callRenderProp)(renderIcon));
|
|
196
193
|
const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
|
|
197
194
|
css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
|
|
198
195
|
}, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
|
|
@@ -233,7 +230,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
233
230
|
isEnabled = this.isEnabled,
|
|
234
231
|
isReadOnly = this.isReadOnly;
|
|
235
232
|
const tabIndexNumber = this.tabIndex;
|
|
236
|
-
return (0, _emotion.jsx)(
|
|
233
|
+
return (0, _emotion.jsx)(_uiView.View, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
|
|
237
234
|
as: this.elementType,
|
|
238
235
|
focusColor: this.focusColor,
|
|
239
236
|
position: "relative",
|
package/lib/BaseButton/theme.js
CHANGED
|
@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
var _darken = require("@instructure/ui-color-utils/lib/darken.js");
|
|
7
|
+
var _uiColorUtils = require("@instructure/ui-color-utils");
|
|
9
8
|
/*
|
|
10
9
|
* The MIT License (MIT)
|
|
11
10
|
*
|
|
@@ -40,17 +39,17 @@ const generateButtonThemeVars = ({
|
|
|
40
39
|
ghostBorderColor = borderColor
|
|
41
40
|
}) => ({
|
|
42
41
|
[`${style}Color`]: textColor,
|
|
43
|
-
[`${style}BorderColor`]: (0,
|
|
42
|
+
[`${style}BorderColor`]: (0, _uiColorUtils.darken)(borderColor, 10),
|
|
44
43
|
[`${style}Background`]: backgroundColor,
|
|
45
|
-
[`${style}HoverBackground`]: (0,
|
|
46
|
-
[`${style}ActiveBackground`]: (0,
|
|
47
|
-
[`${style}ActiveBoxShadow`]: `${activeShadow} ${(0,
|
|
44
|
+
[`${style}HoverBackground`]: (0, _uiColorUtils.darken)(backgroundColor, 10),
|
|
45
|
+
[`${style}ActiveBackground`]: (0, _uiColorUtils.darken)(backgroundColor, 10),
|
|
46
|
+
[`${style}ActiveBoxShadow`]: `${activeShadow} ${(0, _uiColorUtils.darken)(borderColor, 20)}`,
|
|
48
47
|
[`${style}GhostColor`]: ghostTextColor,
|
|
49
48
|
[`${style}GhostBorderColor`]: ghostBorderColor,
|
|
50
49
|
[`${style}GhostBackground`]: 'transparent',
|
|
51
|
-
[`${style}GhostHoverBackground`]: (0,
|
|
50
|
+
[`${style}GhostHoverBackground`]: (0, _uiColorUtils.alpha)(ghostTextColor, 10),
|
|
52
51
|
[`${style}GhostActiveBackground`]: 'transparent',
|
|
53
|
-
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0,
|
|
52
|
+
[`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0, _uiColorUtils.alpha)(ghostBorderColor, 28)}`
|
|
54
53
|
});
|
|
55
54
|
|
|
56
55
|
/**
|
|
@@ -74,7 +73,7 @@ const generateComponentTheme = theme => {
|
|
|
74
73
|
textColor: theme['ic-brand-button--primary-text'],
|
|
75
74
|
ghostTextColor: theme['ic-brand-button--primary-bgd']
|
|
76
75
|
}),
|
|
77
|
-
primaryGhostHoverBackground: (0,
|
|
76
|
+
primaryGhostHoverBackground: (0, _uiColorUtils.alpha)(theme['ic-brand-button--primary-bgd'], 10)
|
|
78
77
|
},
|
|
79
78
|
'canvas-high-contrast': {
|
|
80
79
|
secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
@@ -159,12 +158,12 @@ const generateComponentTheme = theme => {
|
|
|
159
158
|
ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
|
|
160
159
|
}),
|
|
161
160
|
// Overrides for primary-inverse to match what was previously the `light` button variant
|
|
162
|
-
primaryInverseBorderColor: (0,
|
|
163
|
-
primaryInverseHoverBackground: (0,
|
|
161
|
+
primaryInverseBorderColor: (0, _uiColorUtils.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
|
|
162
|
+
primaryInverseHoverBackground: (0, _uiColorUtils.darken)(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
|
|
164
163
|
primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
165
|
-
primaryInverseActiveBoxShadow: `${activeShadow} ${(0,
|
|
164
|
+
primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
|
|
166
165
|
// Overrides for ghost hover states to ensure correct color contrast for a11y
|
|
167
|
-
successGhostHoverBackground: (0,
|
|
166
|
+
successGhostHoverBackground: (0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
|
|
168
167
|
};
|
|
169
168
|
return {
|
|
170
169
|
...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 _uiAxeCheck = require("@instructure/ui-axe-check");
|
|
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, _uiAxeCheck.runAxeCheck)(button);
|
|
435
435
|
expect(axeCheck).toBe(true);
|
|
436
436
|
});
|
|
437
437
|
});
|
package/lib/Button/index.js
CHANGED
|
@@ -8,9 +8,8 @@ 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
|
|
13
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
11
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
14
13
|
var _emotion = require("@instructure/emotion");
|
|
15
14
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
16
15
|
var _BaseButton = require("../BaseButton");
|
|
@@ -46,7 +45,7 @@ category: components
|
|
|
46
45
|
---
|
|
47
46
|
**/
|
|
48
47
|
// needed for listing the available theme variables on docs page
|
|
49
|
-
let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
|
|
48
|
+
let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Button extends _react.Component {
|
|
50
49
|
constructor(...args) {
|
|
51
50
|
super(...args);
|
|
52
51
|
this._buttonComponent = null;
|
|
@@ -84,12 +83,12 @@ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.defau
|
|
|
84
83
|
href = _this$props.href,
|
|
85
84
|
renderIcon = _this$props.renderIcon,
|
|
86
85
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
87
|
-
const interaction = (0,
|
|
86
|
+
const interaction = (0, _uiReactUtils.getInteraction)({
|
|
88
87
|
props
|
|
89
88
|
});
|
|
90
89
|
const themeOverride = this.props.themeOverride;
|
|
91
90
|
const buttonProps = {
|
|
92
|
-
...(0,
|
|
91
|
+
...(0, _uiReactUtils.passthroughProps)(props),
|
|
93
92
|
type,
|
|
94
93
|
size,
|
|
95
94
|
elementRef: this.handleElementRef,
|
package/lib/CloseButton/index.js
CHANGED
|
@@ -7,11 +7,10 @@ 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
|
|
14
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
10
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
11
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
12
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
13
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
15
14
|
var _emotion = require("@instructure/emotion");
|
|
16
15
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
17
16
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -48,7 +47,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
48
47
|
category: components
|
|
49
48
|
---
|
|
50
49
|
**/
|
|
51
|
-
let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0,
|
|
50
|
+
let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CloseButton extends _react.Component {
|
|
52
51
|
constructor(...args) {
|
|
53
52
|
super(...args);
|
|
54
53
|
this.ref = null;
|
|
@@ -68,7 +67,7 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
68
67
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
69
68
|
}
|
|
70
69
|
get interaction() {
|
|
71
|
-
return (0,
|
|
70
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
72
71
|
props: this.props
|
|
73
72
|
});
|
|
74
73
|
}
|
|
@@ -92,11 +91,11 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
92
91
|
tabIndex = _this$props3.tabIndex,
|
|
93
92
|
styles = _this$props3.styles,
|
|
94
93
|
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
95
|
-
return (0, _emotion.jsx)("span", Object.assign({}, (0,
|
|
94
|
+
return (0, _emotion.jsx)("span", Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
|
|
96
95
|
css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
|
|
97
96
|
ref: el => this.ref = el
|
|
98
97
|
}), (0, _emotion.jsx)(_BaseButton.BaseButton, {
|
|
99
|
-
renderIcon:
|
|
98
|
+
renderIcon: _uiIcons.IconXSolid,
|
|
100
99
|
elementRef: this.handleRef,
|
|
101
100
|
interaction: this.interaction,
|
|
102
101
|
type: type,
|
|
@@ -110,7 +109,7 @@ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.
|
|
|
110
109
|
href: href,
|
|
111
110
|
cursor: cursor,
|
|
112
111
|
tabIndex: tabIndex
|
|
113
|
-
}, (0, _emotion.jsx)(
|
|
112
|
+
}, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, screenReaderLabel)));
|
|
114
113
|
}
|
|
115
114
|
}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
116
115
|
// 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 _uiTestable = require("@instructure/ui-testable");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
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, _uiTestable.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, _uiReactUtils.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 _uiTestable = require("@instructure/ui-testable");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
13
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
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, _uiTestable.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, _uiReactUtils.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(_uiA11yContent.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,10 +8,9 @@ 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
|
|
14
|
-
var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
|
|
11
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
13
|
+
var _uiTooltip = require("@instructure/ui-tooltip");
|
|
15
14
|
var _IconButton = require("../IconButton");
|
|
16
15
|
var _props = require("./props");
|
|
17
16
|
const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
|
|
@@ -44,7 +43,7 @@ var _dec, _class, _class2;
|
|
|
44
43
|
category: components
|
|
45
44
|
---
|
|
46
45
|
**/
|
|
47
|
-
let ToggleButton = exports.ToggleButton = (_dec = (0,
|
|
46
|
+
let ToggleButton = exports.ToggleButton = (_dec = (0, _uiTestable.testable)(), _dec(_class = (_class2 = class ToggleButton extends _react.Component {
|
|
48
47
|
constructor(props) {
|
|
49
48
|
super(props);
|
|
50
49
|
this.ref = null;
|
|
@@ -76,7 +75,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _de
|
|
|
76
75
|
placement = _this$props.placement,
|
|
77
76
|
onClick = _this$props.onClick,
|
|
78
77
|
props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
79
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
|
|
80
79
|
renderTip: renderTooltipContent,
|
|
81
80
|
on: ['hover', 'focus'],
|
|
82
81
|
placement: placement,
|
|
@@ -94,7 +93,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _de
|
|
|
94
93
|
},
|
|
95
94
|
mountNode: mountNode,
|
|
96
95
|
elementRef: el => this.ref = el
|
|
97
|
-
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, Object.assign({}, (0,
|
|
96
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
|
|
98
97
|
screenReaderLabel: screenReaderLabel,
|
|
99
98
|
withBackground: false,
|
|
100
99
|
withBorder: false,
|
|
@@ -105,7 +104,7 @@ let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _de
|
|
|
105
104
|
onClick: onClick,
|
|
106
105
|
interaction: interaction,
|
|
107
106
|
"aria-pressed": status === 'pressed'
|
|
108
|
-
}), (0,
|
|
107
|
+
}), (0, _uiReactUtils.callRenderProp)(renderIcon)));
|
|
109
108
|
}
|
|
110
109
|
}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
111
110
|
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 _uiPosition = require("@instructure/ui-position");
|
|
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: _uiPosition.PositionPropTypes.mountNode,
|
|
47
|
+
placement: _uiPosition.PositionPropTypes.placement,
|
|
48
|
+
constrain: _uiPosition.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.
|
|
3
|
+
"version": "8.56.5-pr-snapshot-1728655013879",
|
|
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.
|
|
27
|
-
"@instructure/ui-babel-preset": "8.56.
|
|
28
|
-
"@instructure/ui-test-utils": "8.56.
|
|
29
|
-
"@instructure/ui-themes": "8.56.
|
|
26
|
+
"@instructure/ui-axe-check": "8.56.5-pr-snapshot-1728655013879",
|
|
27
|
+
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1728655013879",
|
|
28
|
+
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
29
|
+
"@instructure/ui-themes": "8.56.5-pr-snapshot-1728655013879",
|
|
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.
|
|
37
|
-
"@instructure/emotion": "8.56.
|
|
38
|
-
"@instructure/shared-types": "8.56.
|
|
39
|
-
"@instructure/ui-a11y-content": "8.56.
|
|
40
|
-
"@instructure/ui-a11y-utils": "8.56.
|
|
41
|
-
"@instructure/ui-color-utils": "8.56.
|
|
42
|
-
"@instructure/ui-dom-utils": "8.56.
|
|
43
|
-
"@instructure/ui-icons": "8.56.
|
|
44
|
-
"@instructure/ui-position": "8.56.
|
|
45
|
-
"@instructure/ui-react-utils": "8.56.
|
|
46
|
-
"@instructure/ui-testable": "8.56.
|
|
47
|
-
"@instructure/ui-tooltip": "8.56.
|
|
48
|
-
"@instructure/ui-utils": "8.56.
|
|
49
|
-
"@instructure/ui-view": "8.56.
|
|
36
|
+
"@instructure/console": "8.56.5-pr-snapshot-1728655013879",
|
|
37
|
+
"@instructure/emotion": "8.56.5-pr-snapshot-1728655013879",
|
|
38
|
+
"@instructure/shared-types": "8.56.5-pr-snapshot-1728655013879",
|
|
39
|
+
"@instructure/ui-a11y-content": "8.56.5-pr-snapshot-1728655013879",
|
|
40
|
+
"@instructure/ui-a11y-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
41
|
+
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
42
|
+
"@instructure/ui-dom-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
43
|
+
"@instructure/ui-icons": "8.56.5-pr-snapshot-1728655013879",
|
|
44
|
+
"@instructure/ui-position": "8.56.5-pr-snapshot-1728655013879",
|
|
45
|
+
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
46
|
+
"@instructure/ui-testable": "8.56.5-pr-snapshot-1728655013879",
|
|
47
|
+
"@instructure/ui-tooltip": "8.56.5-pr-snapshot-1728655013879",
|
|
48
|
+
"@instructure/ui-utils": "8.56.5-pr-snapshot-1728655013879",
|
|
49
|
+
"@instructure/ui-view": "8.56.5-pr-snapshot-1728655013879",
|
|
50
50
|
"keycode": "^2.2.1",
|
|
51
51
|
"prop-types": "^15.8.1"
|
|
52
52
|
},
|