@instructure/ui-buttons 10.13.0 → 10.13.1-pr-snapshot-1741357986437

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/BaseButton/__new-tests__/BaseButton.test.js +2 -2
  3. package/lib/BaseButton/index.js +12 -15
  4. package/lib/BaseButton/theme.js +16 -17
  5. package/lib/Button/__new-tests__/Button.test.js +2 -2
  6. package/lib/Button/index.js +5 -6
  7. package/lib/CloseButton/index.js +9 -10
  8. package/lib/CondensedButton/index.js +4 -4
  9. package/lib/IconButton/index.js +6 -6
  10. package/lib/ToggleButton/index.js +7 -8
  11. package/lib/ToggleButton/props.js +4 -4
  12. package/package.json +20 -20
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
+ ## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-buttons
9
+
10
+
11
+
12
+
13
+
6
14
  # [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
7
15
 
8
16
 
package/lib/BaseButton/__new-tests__/BaseButton.test.js CHANGED
@@ -7,7 +7,7 @@ var _vitest = require("vitest");
7
7
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
8
8
  require("@testing-library/jest-dom");
9
9
  var _index = require("../index");
10
- var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
+ var _uiAxeCheck = require("@instructure/ui-axe-check");
11
11
  var _BaseButton, _BaseButton2, _BaseButton3, _BaseButton4, _BaseButton5, _svg, _BaseButton6, _BaseButton7, _BaseButton8, _BaseButton9, _BaseButton10, _BaseButton11;
12
12
  /*
13
13
  * The MIT License (MIT)
@@ -337,7 +337,7 @@ describe('<BaseButton/>', () => {
337
337
  });
338
338
  await _userEvent.default.click(button);
339
339
  await (0, _react2.waitFor)(async () => {
340
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
340
+ const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(button);
341
341
  expect(axeCheck).toBe(true);
342
342
  });
343
343
  });
package/lib/BaseButton/index.js CHANGED
@@ -9,14 +9,11 @@ exports.default = exports.BaseButton = void 0;
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _keycode = _interopRequireDefault(require("keycode"));
12
- var _testable = require("@instructure/ui-testable/lib/testable.js");
13
- var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
14
- var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
15
- var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
16
- var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
17
- var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
18
- var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
19
- var _View = require("@instructure/ui-view/lib/View");
12
+ var _uiTestable = require("@instructure/ui-testable");
13
+ var _uiReactUtils = require("@instructure/ui-react-utils");
14
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
15
+ var _uiA11yUtils = require("@instructure/ui-a11y-utils");
16
+ var _uiView = require("@instructure/ui-view");
20
17
  var _emotion = require("@instructure/emotion");
21
18
  var _styles = _interopRequireDefault(require("./styles"));
22
19
  var _theme = _interopRequireDefault(require("./theme"));
@@ -52,7 +49,7 @@ var _dec, _dec2, _class, _BaseButton;
52
49
  category: components/utilities
53
50
  ---
54
51
  **/
55
- let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_BaseButton = class BaseButton extends _react.Component {
52
+ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_BaseButton = class BaseButton extends _react.Component {
56
53
  constructor(...args) {
57
54
  super(...args);
58
55
  this.ref = null;
@@ -119,13 +116,13 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
119
116
  const _this$props4 = this.props,
120
117
  children = _this$props4.children,
121
118
  renderIcon = _this$props4.renderIcon;
122
- return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
119
+ return !!(renderIcon && !(0, _uiA11yUtils.hasVisibleChildren)(children));
123
120
  }
124
121
  get elementType() {
125
- return (0, _getElementType.getElementType)(BaseButton, this.props);
122
+ return (0, _uiReactUtils.getElementType)(BaseButton, this.props);
126
123
  }
127
124
  get interaction() {
128
- return (0, _getInteraction.getInteraction)({
125
+ return (0, _uiReactUtils.getInteraction)({
129
126
  props: this.props
130
127
  });
131
128
  }
@@ -159,7 +156,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
159
156
  return color.includes('inverse') ? 'inverse' : 'info';
160
157
  }
161
158
  get focused() {
162
- return (0, _isActiveElement.isActiveElement)(this.ref);
159
+ return (0, _uiDomUtils.isActiveElement)(this.ref);
163
160
  }
164
161
  focus() {
165
162
  this.ref && this.ref.focus();
@@ -178,7 +175,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
178
175
  const hasOnlyIconVisible = this.hasOnlyIconVisible;
179
176
  const wrappedIcon = (0, _emotion.jsx)("span", {
180
177
  css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
181
- }, (0, _callRenderProp.callRenderProp)(renderIcon));
178
+ }, (0, _uiReactUtils.callRenderProp)(renderIcon));
182
179
  const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
183
180
  css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
184
181
  }, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
@@ -219,7 +216,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
219
216
  const isDisabled = this.isDisabled,
220
217
  isEnabled = this.isEnabled,
221
218
  isReadOnly = this.isReadOnly;
222
- return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
219
+ return (0, _emotion.jsx)(_uiView.View, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
223
220
  as: this.elementType,
224
221
  focusColor: this.focusColor,
225
222
  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 _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
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
  *
@@ -48,17 +47,17 @@ const generateComponentTheme = theme => {
48
47
  const themeSpecificStyle = {
49
48
  canvas: {
50
49
  primaryColor: theme['ic-brand-button--primary-text'],
51
- primaryBorderColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
50
+ primaryBorderColor: (0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']),
52
51
  primaryBackground: theme['ic-brand-button--primary-bgd'],
53
- primaryHoverBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
54
- primaryActiveBackground: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
52
+ primaryHoverBackground: (0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']),
53
+ primaryActiveBackground: (0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']),
55
54
  primaryActiveBoxShadow: `${activeShadow} ${theme['ic-brand-button--primary-bgd']}`,
56
- primaryGhostColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
57
- primaryGhostBorderColor: (0, _darken.darken)(theme['ic-brand-button--primary-bgd']),
55
+ primaryGhostColor: (0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']),
56
+ primaryGhostBorderColor: (0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']),
58
57
  primaryGhostBackground: 'transparent',
59
- primaryGhostHoverBackground: (0, _alpha.alpha)((0, _darken.darken)(theme['ic-brand-button--primary-bgd']), 10),
58
+ primaryGhostHoverBackground: (0, _uiColorUtils.alpha)((0, _uiColorUtils.darken)(theme['ic-brand-button--primary-bgd']), 10),
60
59
  primaryGhostActiveBackground: 'transparent',
61
- primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 28)}`
60
+ primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(theme['ic-brand-button--primary-bgd'], 28)}`
62
61
  }
63
62
  };
64
63
  const componentVariables = {
@@ -103,7 +102,7 @@ const generateComponentTheme = theme => {
103
102
  primaryGhostBackground: 'transparent',
104
103
  primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
105
104
  primaryGhostActiveBackground: 'transparent',
106
- primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
105
+ primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
107
106
  primaryBoxShadow: 'none',
108
107
  primaryGhostBoxShadow: 'none',
109
108
  primaryHoverBoxShadow: 'none',
@@ -119,7 +118,7 @@ const generateComponentTheme = theme => {
119
118
  secondaryGhostBackground: 'transparent',
120
119
  secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey1111,
121
120
  secondaryGhostActiveBackground: 'transparent',
122
- secondaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
121
+ secondaryGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
123
122
  secondaryBoxShadow: 'none',
124
123
  secondaryGhostBoxShadow: 'none',
125
124
  secondaryHoverBoxShadow: 'none',
@@ -133,9 +132,9 @@ const generateComponentTheme = theme => {
133
132
  successGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts27 = colors.contrasts) === null || _colors$contrasts27 === void 0 ? void 0 : _colors$contrasts27.green4570,
134
133
  successGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts28 = colors.contrasts) === null || _colors$contrasts28 === void 0 ? void 0 : _colors$contrasts28.green4570,
135
134
  successGhostBackground: 'transparent',
136
- successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
135
+ successGhostHoverBackground: (0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
137
136
  successGhostActiveBackground: 'transparent',
138
- successGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
137
+ successGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
139
138
  successBoxShadow: 'none',
140
139
  successGhostBoxShadow: 'none',
141
140
  successHoverBoxShadow: 'none',
@@ -149,9 +148,9 @@ const generateComponentTheme = theme => {
149
148
  dangerGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts37 = colors.contrasts) === null || _colors$contrasts37 === void 0 ? void 0 : _colors$contrasts37.red4570,
150
149
  dangerGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts38 = colors.contrasts) === null || _colors$contrasts38 === void 0 ? void 0 : _colors$contrasts38.red4570,
151
150
  dangerGhostBackground: 'transparent',
152
- dangerGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
151
+ dangerGhostHoverBackground: (0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
153
152
  dangerGhostActiveBackground: 'transparent',
154
- dangerGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
153
+ dangerGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
155
154
  dangerBoxShadow: 'none',
156
155
  dangerGhostBoxShadow: 'none',
157
156
  dangerHoverBoxShadow: 'none',
@@ -165,9 +164,9 @@ const generateComponentTheme = theme => {
165
164
  primaryInverseGhostColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts47 = colors.contrasts) === null || _colors$contrasts47 === void 0 ? void 0 : _colors$contrasts47.white1010,
166
165
  primaryInverseGhostBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts48 = colors.contrasts) === null || _colors$contrasts48 === void 0 ? void 0 : _colors$contrasts48.white1010,
167
166
  primaryInverseGhostBackground: 'transparent',
168
- primaryInverseGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
167
+ primaryInverseGhostHoverBackground: (0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
169
168
  primaryInverseGhostActiveBackground: 'transparent',
170
- primaryInverseGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`,
169
+ primaryInverseGhostActiveBoxShadow: `${activeShadow} ${(0, _uiColorUtils.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`,
171
170
  primaryInverseBoxShadow: 'none',
172
171
  primaryInverseGhostBoxShadow: 'none',
173
172
  primaryInverseHoverBoxShadow: 'none',
package/lib/Button/__new-tests__/Button.test.js CHANGED
@@ -6,7 +6,7 @@ var _react2 = require("@testing-library/react");
6
6
  var _vitest = require("vitest");
7
7
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
8
8
  require("@testing-library/jest-dom");
9
- var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
9
+ var _uiAxeCheck = require("@instructure/ui-axe-check");
10
10
  var _index = require("../index");
11
11
  var _circle, _Button, _Button2, _Button3, _Button4, _Button5, _Button6, _Button7, _Button8, _Button10, _Button11, _Button12, _Button13, _Button14, _Button15, _Button16, _Button17;
12
12
  /*
@@ -427,7 +427,7 @@ describe('<Button/>', () => {
427
427
  });
428
428
  await _userEvent.default.click(button);
429
429
  await (0, _react2.waitFor)(async () => {
430
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(button);
430
+ const axeCheck = await (0, _uiAxeCheck.runAxeCheck)(button);
431
431
  expect(axeCheck).toBe(true);
432
432
  });
433
433
  });
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 _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");
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, _testable.testable)(), _dec(_class = _dec2(_class = (_Button = class Button extends _react.Component {
48
+ let Button = exports.Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_Button = 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, _getInteraction.getInteraction)({
86
+ const interaction = (0, _uiReactUtils.getInteraction)({
88
87
  props
89
88
  });
90
89
  const themeOverride = this.props.themeOverride;
91
90
  const buttonProps = {
92
- ...(0, _passthroughProps.passthroughProps)(props),
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 _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");
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, _CloseButton;
48
47
  category: components
49
48
  ---
50
49
  **/
51
- let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_CloseButton = class CloseButton extends _react.Component {
50
+ let CloseButton = exports.CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_CloseButton = 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, _getInteraction.getInteraction)({
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, _passthroughProps.passthroughProps)(props), {
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: _IconXSolid.IconXSolid,
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)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel)));
112
+ }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, screenReaderLabel)));
114
113
  }
115
114
  }, _CloseButton.displayName = "CloseButton", _CloseButton.componentId = 'CloseButton', _CloseButton.propTypes = _props.propTypes, _CloseButton.allowedProps = _props.allowedProps, _CloseButton.defaultProps = {
116
115
  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
package/lib/CondensedButton/index.js CHANGED
@@ -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 _testable = require("@instructure/ui-testable/lib/testable.js");
12
- 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");
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, _testable.testable)(), _dec(_class = _dec2(_class = (_CondensedButton = class CondensedButton extends _react.Component {
48
+ let CondensedButton = exports.CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_CondensedButton = 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, _passthroughProps.passthroughProps)(props), {
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 _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");
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, _testable.testable)(), _dec(_class = _dec2(_class = (_IconButton = class IconButton extends _react.Component {
49
+ let IconButton = exports.IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_IconButton = 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, _passthroughProps.passthroughProps)(props), {
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(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel));
107
+ }), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, screenReaderLabel));
108
108
  }
109
109
  }, _IconButton.displayName = "IconButton", _IconButton.componentId = 'IconButton', _IconButton.propTypes = _props.propTypes, _IconButton.allowedProps = _props.allowedProps, _IconButton.defaultProps = {
110
110
  type: 'button',
package/lib/ToggleButton/index.js CHANGED
@@ -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 _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");
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, _ToggleButton;
44
43
  category: components
45
44
  ---
46
45
  **/
47
- let ToggleButton = exports.ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_ToggleButton = class ToggleButton extends _react.Component {
46
+ let ToggleButton = exports.ToggleButton = (_dec = (0, _uiTestable.testable)(), _dec(_class = (_ToggleButton = 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(_Tooltip.Tooltip, {
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, _passthroughProps.passthroughProps)(props), {
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, _callRenderProp.callRenderProp)(renderIcon)));
107
+ }), (0, _uiReactUtils.callRenderProp)(renderIcon)));
109
108
  }
110
109
  }, _ToggleButton.displayName = "ToggleButton", _ToggleButton.componentId = 'ToggleButton', _ToggleButton.propTypes = _props.propTypes, _ToggleButton.allowedProps = _props.allowedProps, _ToggleButton.defaultProps = {
111
110
  size: 'medium',
package/lib/ToggleButton/props.js CHANGED
@@ -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 _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
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: _PositionPropTypes.PositionPropTypes.mountNode,
47
- placement: _PositionPropTypes.PositionPropTypes.placement,
48
- constrain: _PositionPropTypes.PositionPropTypes.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": "10.13.0",
3
+ "version": "10.13.1-pr-snapshot-1741357986437",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.13.0",
27
- "@instructure/ui-babel-preset": "10.13.0",
28
- "@instructure/ui-test-utils": "10.13.0",
29
- "@instructure/ui-themes": "10.13.0",
26
+ "@instructure/ui-axe-check": "10.13.1-pr-snapshot-1741357986437",
27
+ "@instructure/ui-babel-preset": "10.13.1-pr-snapshot-1741357986437",
28
+ "@instructure/ui-test-utils": "10.13.1-pr-snapshot-1741357986437",
29
+ "@instructure/ui-themes": "10.13.1-pr-snapshot-1741357986437",
30
30
  "@testing-library/jest-dom": "^6.6.3",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.26.0",
37
- "@instructure/console": "10.13.0",
38
- "@instructure/emotion": "10.13.0",
39
- "@instructure/shared-types": "10.13.0",
40
- "@instructure/ui-a11y-content": "10.13.0",
41
- "@instructure/ui-a11y-utils": "10.13.0",
42
- "@instructure/ui-color-utils": "10.13.0",
43
- "@instructure/ui-dom-utils": "10.13.0",
44
- "@instructure/ui-icons": "10.13.0",
45
- "@instructure/ui-position": "10.13.0",
46
- "@instructure/ui-prop-types": "10.13.0",
47
- "@instructure/ui-react-utils": "10.13.0",
48
- "@instructure/ui-testable": "10.13.0",
49
- "@instructure/ui-tooltip": "10.13.0",
50
- "@instructure/ui-utils": "10.13.0",
51
- "@instructure/ui-view": "10.13.0",
37
+ "@instructure/console": "10.13.1-pr-snapshot-1741357986437",
38
+ "@instructure/emotion": "10.13.1-pr-snapshot-1741357986437",
39
+ "@instructure/shared-types": "10.13.1-pr-snapshot-1741357986437",
40
+ "@instructure/ui-a11y-content": "10.13.1-pr-snapshot-1741357986437",
41
+ "@instructure/ui-a11y-utils": "10.13.1-pr-snapshot-1741357986437",
42
+ "@instructure/ui-color-utils": "10.13.1-pr-snapshot-1741357986437",
43
+ "@instructure/ui-dom-utils": "10.13.1-pr-snapshot-1741357986437",
44
+ "@instructure/ui-icons": "10.13.1-pr-snapshot-1741357986437",
45
+ "@instructure/ui-position": "10.13.1-pr-snapshot-1741357986437",
46
+ "@instructure/ui-prop-types": "10.13.1-pr-snapshot-1741357986437",
47
+ "@instructure/ui-react-utils": "10.13.1-pr-snapshot-1741357986437",
48
+ "@instructure/ui-testable": "10.13.1-pr-snapshot-1741357986437",
49
+ "@instructure/ui-tooltip": "10.13.1-pr-snapshot-1741357986437",
50
+ "@instructure/ui-utils": "10.13.1-pr-snapshot-1741357986437",
51
+ "@instructure/ui-view": "10.13.1-pr-snapshot-1741357986437",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },