@instructure/ui-buttons 8.33.2-snapshot-0 → 8.33.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 -5
- package/es/BaseButton/BaseButtonLocator.js +3 -2
- package/es/BaseButton/index.js +44 -80
- package/es/BaseButton/locator.js +1 -0
- package/es/BaseButton/props.js +1 -0
- package/es/BaseButton/styles.js +12 -17
- package/es/BaseButton/theme.js +17 -17
- package/es/Button/ButtonLocator.js +2 -2
- package/es/Button/index.js +17 -26
- package/es/Button/props.js +1 -0
- package/es/Button/theme.js +1 -0
- package/es/CloseButton/CloseButtonLocator.js +3 -1
- package/es/CloseButton/index.js +14 -28
- package/es/CloseButton/locator.js +1 -0
- package/es/CloseButton/props.js +1 -0
- package/es/CloseButton/styles.js +3 -5
- package/es/CloseButton/theme.js +3 -3
- package/es/CondensedButton/CondensedButtonLocator.js +2 -2
- package/es/CondensedButton/index.js +13 -22
- package/es/CondensedButton/props.js +1 -0
- package/es/CondensedButton/theme.js +1 -0
- package/es/IconButton/IconButtonLocator.js +2 -2
- package/es/IconButton/index.js +18 -27
- package/es/IconButton/props.js +1 -0
- package/es/IconButton/theme.js +1 -0
- package/es/ToggleButton/ToggleButtonLocator.js +9 -8
- package/es/ToggleButton/index.js +14 -23
- package/es/ToggleButton/props.js +1 -0
- package/es/index.js +1 -0
- package/lib/BaseButton/BaseButtonLocator.js +1 -5
- package/lib/BaseButton/index.js +44 -97
- package/lib/BaseButton/locator.js +0 -2
- package/lib/BaseButton/props.js +1 -4
- package/lib/BaseButton/styles.js +12 -18
- package/lib/BaseButton/theme.js +17 -20
- package/lib/Button/ButtonLocator.js +1 -5
- package/lib/Button/index.js +16 -36
- package/lib/Button/locator.js +0 -2
- package/lib/Button/props.js +1 -4
- package/lib/Button/theme.js +0 -2
- package/lib/CloseButton/CloseButtonLocator.js +1 -3
- package/lib/CloseButton/index.js +14 -40
- package/lib/CloseButton/locator.js +0 -2
- package/lib/CloseButton/props.js +1 -4
- package/lib/CloseButton/styles.js +3 -6
- package/lib/CloseButton/theme.js +3 -4
- package/lib/CondensedButton/CondensedButtonLocator.js +1 -5
- package/lib/CondensedButton/index.js +12 -31
- package/lib/CondensedButton/locator.js +0 -2
- package/lib/CondensedButton/props.js +1 -4
- package/lib/CondensedButton/theme.js +0 -2
- package/lib/IconButton/IconButtonLocator.js +1 -5
- package/lib/IconButton/index.js +17 -37
- package/lib/IconButton/locator.js +0 -2
- package/lib/IconButton/props.js +1 -4
- package/lib/IconButton/theme.js +0 -2
- package/lib/ToggleButton/ToggleButtonLocator.js +5 -10
- package/lib/ToggleButton/index.js +13 -32
- package/lib/ToggleButton/props.js +1 -4
- package/lib/index.js +0 -6
- package/package.json +20 -20
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Button/index.d.ts +2 -2
package/es/CloseButton/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -38,7 +36,6 @@ import generateStyle from './styles';
|
|
|
38
36
|
import generateComponentTheme from './theme';
|
|
39
37
|
import { BaseButton } from '../BaseButton';
|
|
40
38
|
import { propTypes, allowedProps } from './props';
|
|
41
|
-
|
|
42
39
|
/**
|
|
43
40
|
---
|
|
44
41
|
category: components
|
|
@@ -49,56 +46,46 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
49
46
|
constructor() {
|
|
50
47
|
super(...arguments);
|
|
51
48
|
this.ref = null;
|
|
52
|
-
|
|
53
49
|
this.handleRef = el => {
|
|
54
50
|
const elementRef = this.props.elementRef;
|
|
55
|
-
|
|
56
51
|
if (typeof elementRef === 'function') {
|
|
57
52
|
elementRef(el);
|
|
58
53
|
}
|
|
59
54
|
};
|
|
60
55
|
}
|
|
61
|
-
|
|
62
56
|
componentDidMount() {
|
|
63
57
|
var _this$props$makeStyle, _this$props;
|
|
64
|
-
|
|
65
58
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
66
59
|
}
|
|
67
|
-
|
|
68
60
|
componentDidUpdate() {
|
|
69
61
|
var _this$props$makeStyle2, _this$props2;
|
|
70
|
-
|
|
71
62
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
72
63
|
}
|
|
73
|
-
|
|
74
64
|
get interaction() {
|
|
75
65
|
return getInteraction({
|
|
76
66
|
props: this.props
|
|
77
67
|
});
|
|
78
68
|
}
|
|
79
|
-
|
|
80
69
|
get color() {
|
|
81
70
|
const color = this.props.color;
|
|
82
71
|
return color === 'primary' ? 'secondary' : color;
|
|
83
72
|
}
|
|
84
|
-
|
|
85
73
|
render() {
|
|
86
74
|
const _this$props3 = this.props,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
75
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
76
|
+
elementRef = _this$props3.elementRef,
|
|
77
|
+
size = _this$props3.size,
|
|
78
|
+
onClick = _this$props3.onClick,
|
|
79
|
+
margin = _this$props3.margin,
|
|
80
|
+
placement = _this$props3.placement,
|
|
81
|
+
offset = _this$props3.offset,
|
|
82
|
+
type = _this$props3.type,
|
|
83
|
+
as = _this$props3.as,
|
|
84
|
+
href = _this$props3.href,
|
|
85
|
+
cursor = _this$props3.cursor,
|
|
86
|
+
tabIndex = _this$props3.tabIndex,
|
|
87
|
+
styles = _this$props3.styles,
|
|
88
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
102
89
|
return jsx("span", Object.assign({}, passthroughProps(props), {
|
|
103
90
|
css: styles === null || styles === void 0 ? void 0 : styles.closeButton,
|
|
104
91
|
ref: el => this.ref = el
|
|
@@ -119,7 +106,6 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
119
106
|
tabIndex: tabIndex
|
|
120
107
|
}, jsx(ScreenReaderContent, null, screenReaderLabel)));
|
|
121
108
|
}
|
|
122
|
-
|
|
123
109
|
}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
124
110
|
// Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
|
|
125
111
|
interaction: void 0,
|
package/es/CloseButton/props.js
CHANGED
package/es/CloseButton/styles.js
CHANGED
|
@@ -34,24 +34,23 @@
|
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
|
36
36
|
const placement = props.placement,
|
|
37
|
-
|
|
37
|
+
offset = props.offset;
|
|
38
38
|
const offsetValueMap = {
|
|
39
39
|
none: 0,
|
|
40
40
|
'x-small': componentTheme.offsetXSmall,
|
|
41
41
|
small: componentTheme.offsetSmall,
|
|
42
42
|
medium: componentTheme.offsetMedium
|
|
43
43
|
};
|
|
44
|
-
|
|
45
44
|
const getOffsetStyle = () => {
|
|
46
45
|
const offsetValue = offsetValueMap[offset];
|
|
47
|
-
return {
|
|
46
|
+
return {
|
|
47
|
+
...(offsetValue !== 0 && {
|
|
48
48
|
top: offsetValue
|
|
49
49
|
}),
|
|
50
50
|
insetInlineStart: placement === 'start' ? offsetValue : 'auto',
|
|
51
51
|
insetInlineEnd: placement === 'end' ? offsetValue : 'auto'
|
|
52
52
|
};
|
|
53
53
|
};
|
|
54
|
-
|
|
55
54
|
return {
|
|
56
55
|
closeButton: {
|
|
57
56
|
label: 'closeButton',
|
|
@@ -66,5 +65,4 @@ const generateStyle = (componentTheme, props) => {
|
|
|
66
65
|
}
|
|
67
66
|
};
|
|
68
67
|
};
|
|
69
|
-
|
|
70
68
|
export default generateStyle;
|
package/es/CloseButton/theme.js
CHANGED
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
*/
|
|
30
30
|
const generateComponentTheme = theme => {
|
|
31
31
|
const spacing = theme.spacing,
|
|
32
|
-
|
|
32
|
+
stacking = theme.stacking;
|
|
33
33
|
const componentVariables = {
|
|
34
34
|
offsetMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
35
35
|
offsetSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
36
36
|
offsetXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
37
37
|
zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
|
|
38
38
|
};
|
|
39
|
-
return {
|
|
39
|
+
return {
|
|
40
|
+
...componentVariables
|
|
40
41
|
};
|
|
41
42
|
};
|
|
42
|
-
|
|
43
43
|
export default generateComponentTheme;
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
25
|
import { find } from '@instructure/ui-test-queries';
|
|
26
|
-
import { CondensedButton } from './index';
|
|
26
|
+
import { CondensedButton } from './index';
|
|
27
27
|
|
|
28
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
28
29
|
export const CondensedButtonLocator = locator(CondensedButton.selector, {
|
|
29
30
|
click: async function (element) {
|
|
30
31
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
31
32
|
args[_key - 1] = arguments[_key];
|
|
32
33
|
}
|
|
33
|
-
|
|
34
34
|
return (await find(element, 'a,button,[role="button"]')).click(...args);
|
|
35
35
|
}
|
|
36
36
|
});
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -26,6 +24,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
26
24
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
25
|
* SOFTWARE.
|
|
28
26
|
*/
|
|
27
|
+
|
|
29
28
|
import React, { Component } from 'react';
|
|
30
29
|
import { testable } from '@instructure/ui-testable';
|
|
31
30
|
import { passthroughProps } from '@instructure/ui-react-utils';
|
|
@@ -33,7 +32,6 @@ import { withStyle } from '@instructure/emotion';
|
|
|
33
32
|
import generateComponentTheme from './theme';
|
|
34
33
|
import { BaseButton } from '../BaseButton';
|
|
35
34
|
import { propTypes, allowedProps } from './props';
|
|
36
|
-
|
|
37
35
|
/**
|
|
38
36
|
---
|
|
39
37
|
category: components
|
|
@@ -46,40 +44,34 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
|
|
|
46
44
|
super(...arguments);
|
|
47
45
|
this._baseButton = null;
|
|
48
46
|
this.ref = null;
|
|
49
|
-
|
|
50
47
|
this.handleRef = el => {
|
|
51
48
|
const elementRef = this.props.elementRef;
|
|
52
49
|
this.ref = el;
|
|
53
|
-
|
|
54
50
|
if (typeof elementRef === 'function') {
|
|
55
51
|
elementRef(el);
|
|
56
52
|
}
|
|
57
53
|
};
|
|
58
54
|
}
|
|
59
|
-
|
|
60
55
|
get focused() {
|
|
61
56
|
return this._baseButton && this._baseButton.focused;
|
|
62
57
|
}
|
|
63
|
-
|
|
64
58
|
focus() {
|
|
65
59
|
this._baseButton && this._baseButton.focus();
|
|
66
60
|
}
|
|
67
|
-
|
|
68
61
|
render() {
|
|
69
62
|
const _this$props = this.props,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
63
|
+
children = _this$props.children,
|
|
64
|
+
type = _this$props.type,
|
|
65
|
+
size = _this$props.size,
|
|
66
|
+
elementRef = _this$props.elementRef,
|
|
67
|
+
as = _this$props.as,
|
|
68
|
+
interaction = _this$props.interaction,
|
|
69
|
+
color = _this$props.color,
|
|
70
|
+
margin = _this$props.margin,
|
|
71
|
+
cursor = _this$props.cursor,
|
|
72
|
+
href = _this$props.href,
|
|
73
|
+
renderIcon = _this$props.renderIcon,
|
|
74
|
+
props = _objectWithoutProperties(_this$props, _excluded);
|
|
83
75
|
const themeOverride = this.props.themeOverride;
|
|
84
76
|
return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
|
|
85
77
|
isCondensed: true,
|
|
@@ -101,7 +93,6 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
|
|
|
101
93
|
}
|
|
102
94
|
}), children);
|
|
103
95
|
}
|
|
104
|
-
|
|
105
96
|
}, _class2.displayName = "CondensedButton", _class2.componentId = 'CondensedButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
106
97
|
type: 'button',
|
|
107
98
|
size: 'medium',
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
25
|
import { find } from '@instructure/ui-test-queries';
|
|
26
|
-
import { IconButton } from './index';
|
|
26
|
+
import { IconButton } from './index';
|
|
27
27
|
|
|
28
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
28
29
|
export const IconButtonLocator = locator(IconButton.selector, {
|
|
29
30
|
click: async function (element) {
|
|
30
31
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
31
32
|
args[_key - 1] = arguments[_key];
|
|
32
33
|
}
|
|
33
|
-
|
|
34
34
|
return (await find(element, 'a,button,[role="button"]')).click(...args);
|
|
35
35
|
}
|
|
36
36
|
});
|
package/es/IconButton/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -26,6 +24,7 @@ var _dec, _dec2, _class, _class2;
|
|
|
26
24
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
25
|
* SOFTWARE.
|
|
28
26
|
*/
|
|
27
|
+
|
|
29
28
|
import React, { Component } from 'react';
|
|
30
29
|
import { testable } from '@instructure/ui-testable';
|
|
31
30
|
import { passthroughProps } from '@instructure/ui-react-utils';
|
|
@@ -34,7 +33,6 @@ import { withStyle } from '@instructure/emotion';
|
|
|
34
33
|
import generateComponentTheme from './theme';
|
|
35
34
|
import { BaseButton } from '../BaseButton';
|
|
36
35
|
import { propTypes, allowedProps } from './props';
|
|
37
|
-
|
|
38
36
|
/**
|
|
39
37
|
---
|
|
40
38
|
category: components
|
|
@@ -47,45 +45,39 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
|
|
|
47
45
|
super(...arguments);
|
|
48
46
|
this._baseButton = null;
|
|
49
47
|
this.ref = null;
|
|
50
|
-
|
|
51
48
|
this.handleRef = el => {
|
|
52
49
|
const elementRef = this.props.elementRef;
|
|
53
50
|
this.ref = el;
|
|
54
|
-
|
|
55
51
|
if (typeof elementRef === 'function') {
|
|
56
52
|
elementRef(el);
|
|
57
53
|
}
|
|
58
54
|
};
|
|
59
55
|
}
|
|
60
|
-
|
|
61
56
|
get focused() {
|
|
62
57
|
return this._baseButton && this._baseButton.focused;
|
|
63
58
|
}
|
|
64
|
-
|
|
65
59
|
focus() {
|
|
66
60
|
this._baseButton && this._baseButton.focus();
|
|
67
61
|
}
|
|
68
|
-
|
|
69
62
|
render() {
|
|
70
63
|
const _this$props = this.props,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
64
|
+
children = _this$props.children,
|
|
65
|
+
renderIcon = _this$props.renderIcon,
|
|
66
|
+
screenReaderLabel = _this$props.screenReaderLabel,
|
|
67
|
+
type = _this$props.type,
|
|
68
|
+
size = _this$props.size,
|
|
69
|
+
elementRef = _this$props.elementRef,
|
|
70
|
+
as = _this$props.as,
|
|
71
|
+
interaction = _this$props.interaction,
|
|
72
|
+
color = _this$props.color,
|
|
73
|
+
focusColor = _this$props.focusColor,
|
|
74
|
+
shape = _this$props.shape,
|
|
75
|
+
withBackground = _this$props.withBackground,
|
|
76
|
+
withBorder = _this$props.withBorder,
|
|
77
|
+
margin = _this$props.margin,
|
|
78
|
+
cursor = _this$props.cursor,
|
|
79
|
+
href = _this$props.href,
|
|
80
|
+
props = _objectWithoutProperties(_this$props, _excluded);
|
|
89
81
|
const themeOverride = this.props.themeOverride;
|
|
90
82
|
return /*#__PURE__*/React.createElement(BaseButton, Object.assign({}, passthroughProps(props), {
|
|
91
83
|
type: type,
|
|
@@ -108,7 +100,6 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
|
|
|
108
100
|
}
|
|
109
101
|
}), /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderLabel));
|
|
110
102
|
}
|
|
111
|
-
|
|
112
103
|
}, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
113
104
|
type: 'button',
|
|
114
105
|
size: 'medium',
|
package/es/IconButton/props.js
CHANGED
package/es/IconButton/theme.js
CHANGED
|
@@ -21,20 +21,22 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { find, parseQueryArguments } from '@instructure/ui-test-queries';
|
|
26
|
-
// eslint-disable-next-line no-restricted-imports
|
|
26
|
+
import { find, parseQueryArguments } from '@instructure/ui-test-queries';
|
|
27
27
|
|
|
28
|
+
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
|
|
29
|
+
// eslint-disable-next-line no-restricted-imports
|
|
28
30
|
import { TooltipLocator } from '@instructure/ui-tooltip/es/Tooltip/TooltipLocator';
|
|
29
|
-
import { ToggleButton } from './index';
|
|
31
|
+
import { ToggleButton } from './index';
|
|
30
32
|
|
|
33
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
31
34
|
export const ToggleButtonLocator = locator(ToggleButton.selector, {
|
|
32
35
|
findTooltipContent: async function () {
|
|
33
36
|
const _parseQueryArguments = parseQueryArguments(...arguments),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
element = _parseQueryArguments.element,
|
|
38
|
+
selector = _parseQueryArguments.selector,
|
|
39
|
+
options = _parseQueryArguments.options;
|
|
38
40
|
const tooltip = await TooltipLocator.find(element, options);
|
|
39
41
|
return tooltip ? tooltip.findContent(selector, options) : null;
|
|
40
42
|
},
|
|
@@ -42,7 +44,6 @@ export const ToggleButtonLocator = locator(ToggleButton.selector, {
|
|
|
42
44
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
43
45
|
args[_key - 1] = arguments[_key];
|
|
44
46
|
}
|
|
45
|
-
|
|
46
47
|
return (await find(element, 'a,button,[role="button"]')).click(...args);
|
|
47
48
|
}
|
|
48
49
|
});
|
package/es/ToggleButton/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
|
|
3
|
-
|
|
4
3
|
var _dec, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -26,13 +24,13 @@ var _dec, _class, _class2;
|
|
|
26
24
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
25
|
* SOFTWARE.
|
|
28
26
|
*/
|
|
27
|
+
|
|
29
28
|
import React, { Component } from 'react';
|
|
30
29
|
import { testable } from '@instructure/ui-testable';
|
|
31
30
|
import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
|
|
32
31
|
import { Tooltip } from '@instructure/ui-tooltip';
|
|
33
32
|
import { IconButton } from '../IconButton';
|
|
34
33
|
import { propTypes, allowedProps } from './props';
|
|
35
|
-
|
|
36
34
|
/**
|
|
37
35
|
---
|
|
38
36
|
category: components
|
|
@@ -43,40 +41,34 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_class2 = class ToggleButt
|
|
|
43
41
|
constructor(props) {
|
|
44
42
|
super(props);
|
|
45
43
|
this.ref = null;
|
|
46
|
-
|
|
47
44
|
this.handleRef = el => {
|
|
48
45
|
const elementRef = this.props.elementRef;
|
|
49
|
-
|
|
50
46
|
if (typeof elementRef === 'function') {
|
|
51
47
|
elementRef(el);
|
|
52
48
|
}
|
|
53
49
|
};
|
|
54
|
-
|
|
55
50
|
this.state = {
|
|
56
51
|
isShowingTooltip: props.isShowingTooltip || false
|
|
57
52
|
};
|
|
58
53
|
}
|
|
59
|
-
|
|
60
54
|
get isShowingTooltip() {
|
|
61
55
|
return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
|
|
62
56
|
}
|
|
63
|
-
|
|
64
57
|
render() {
|
|
65
58
|
const _this$props = this.props,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
59
|
+
as = _this$props.as,
|
|
60
|
+
color = _this$props.color,
|
|
61
|
+
elementRef = _this$props.elementRef,
|
|
62
|
+
size = _this$props.size,
|
|
63
|
+
interaction = _this$props.interaction,
|
|
64
|
+
mountNode = _this$props.mountNode,
|
|
65
|
+
renderIcon = _this$props.renderIcon,
|
|
66
|
+
renderTooltipContent = _this$props.renderTooltipContent,
|
|
67
|
+
screenReaderLabel = _this$props.screenReaderLabel,
|
|
68
|
+
status = _this$props.status,
|
|
69
|
+
placement = _this$props.placement,
|
|
70
|
+
onClick = _this$props.onClick,
|
|
71
|
+
props = _objectWithoutProperties(_this$props, _excluded);
|
|
80
72
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
81
73
|
renderTip: renderTooltipContent,
|
|
82
74
|
on: ['hover', 'focus'],
|
|
@@ -108,7 +100,6 @@ let ToggleButton = (_dec = testable(), _dec(_class = (_class2 = class ToggleButt
|
|
|
108
100
|
"aria-pressed": status === 'pressed'
|
|
109
101
|
}), callRenderProp(renderIcon)));
|
|
110
102
|
}
|
|
111
|
-
|
|
112
103
|
}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
113
104
|
size: 'medium',
|
|
114
105
|
as: 'button',
|
package/es/ToggleButton/props.js
CHANGED
package/es/index.js
CHANGED
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.BaseButtonLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _uiTestQueries = require("@instructure/ui-test-queries");
|
|
11
|
-
|
|
12
9
|
var _index = require("./index");
|
|
13
|
-
|
|
14
10
|
/*
|
|
15
11
|
* The MIT License (MIT)
|
|
16
12
|
*
|
|
@@ -34,13 +30,13 @@ var _index = require("./index");
|
|
|
34
30
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
31
|
* SOFTWARE.
|
|
36
32
|
*/
|
|
33
|
+
|
|
37
34
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
38
35
|
const BaseButtonLocator = (0, _locator.locator)(_index.BaseButton.selector, {
|
|
39
36
|
click: async function (element) {
|
|
40
37
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
41
38
|
args[_key - 1] = arguments[_key];
|
|
42
39
|
}
|
|
43
|
-
|
|
44
40
|
return (await (0, _uiTestQueries.find)(element, 'a,button,[role="button"]')).click(...args);
|
|
45
41
|
}
|
|
46
42
|
});
|