@pingux/astro 1.0.0-alpha.18 → 1.0.0-alpha.21
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 +30 -0
- package/lib/cjs/components/Button/Button.js +5 -24
- package/lib/cjs/components/Button/Button.test.js +0 -24
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/Stepper/Stepper.js +1 -0
- package/lib/cjs/components/Tab/Tab.js +4 -2
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
- package/lib/cjs/index.js +48 -136
- package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
- package/lib/cjs/recipes/ArrayField.stories.js +3 -3
- package/lib/cjs/styles/theme.js +0 -3
- package/lib/cjs/styles/variants/boxes.js +2 -16
- package/lib/cjs/styles/variants/buttons.js +37 -28
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/Button/Button.js +7 -24
- package/lib/components/Button/Button.test.js +0 -20
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/Stepper/Stepper.js +1 -0
- package/lib/components/Tab/Tab.js +4 -2
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
- package/lib/index.js +0 -8
- package/lib/layouts/SchemaFormLayout.stories.js +2 -19
- package/lib/recipes/ArrayField.stories.js +3 -3
- package/lib/styles/theme.js +0 -3
- package/lib/styles/variants/boxes.js +1 -16
- package/lib/styles/variants/buttons.js +36 -28
- package/lib/styles/variants/variants.js +0 -2
- package/package.json +1 -1
- package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
- package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
- package/lib/cjs/components/Dropdown/index.js +0 -18
- package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
- package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
- package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
- package/lib/cjs/components/DropdownField/index.js +0 -18
- package/lib/cjs/components/Panel/Panel.js +0 -101
- package/lib/cjs/components/Panel/Panel.stories.js +0 -57
- package/lib/cjs/components/Panel/Panel.test.js +0 -72
- package/lib/cjs/components/Panel/index.js +0 -18
- package/lib/cjs/components/Popover/Popover.js +0 -87
- package/lib/cjs/components/Popover/Popover.stories.js +0 -80
- package/lib/cjs/components/Popover/Popover.test.js +0 -91
- package/lib/cjs/components/Popover/index.js +0 -18
- package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
- package/lib/cjs/styles/variants/popover.js +0 -86
- package/lib/components/Dropdown/Dropdown.js +0 -90
- package/lib/components/Dropdown/Dropdown.test.js +0 -62
- package/lib/components/Dropdown/index.js +0 -1
- package/lib/components/DropdownField/DropdownField.js +0 -155
- package/lib/components/DropdownField/DropdownField.stories.js +0 -222
- package/lib/components/DropdownField/DropdownField.test.js +0 -60
- package/lib/components/DropdownField/index.js +0 -1
- package/lib/components/Panel/Panel.js +0 -71
- package/lib/components/Panel/Panel.stories.js +0 -35
- package/lib/components/Panel/Panel.test.js +0 -52
- package/lib/components/Panel/index.js +0 -1
- package/lib/components/Popover/Popover.js +0 -65
- package/lib/components/Popover/Popover.stories.js +0 -52
- package/lib/components/Popover/Popover.test.js +0 -75
- package/lib/components/Popover/index.js +0 -2
- package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
- package/lib/styles/variants/popover.js +0 -76
@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
|
|
8
8
|
value: true
|
9
9
|
});
|
10
10
|
|
11
|
-
exports["default"] = void 0;
|
11
|
+
exports["default"] = exports.chip = void 0;
|
12
12
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
|
14
14
|
|
@@ -37,20 +37,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
37
37
|
var base = {
|
38
38
|
display: 'flex'
|
39
39
|
};
|
40
|
-
var panel = {
|
41
|
-
outline: 'none',
|
42
|
-
position: 'relative',
|
43
|
-
bg: 'white',
|
44
|
-
borderLeft: 'separator',
|
45
|
-
transition: 'margin 0.25s ease-in',
|
46
|
-
visibility: 'hidden',
|
47
|
-
'&.is-focused': {
|
48
|
-
boxShadow: 'focus'
|
49
|
-
},
|
50
|
-
'&.is-visible': {
|
51
|
-
visibility: 'visible'
|
52
|
-
}
|
53
|
-
};
|
54
40
|
var card = {
|
55
41
|
boxShadow: 'standard',
|
56
42
|
p: 'lg',
|
@@ -145,6 +131,7 @@ var chip = {
|
|
145
131
|
}
|
146
132
|
}
|
147
133
|
};
|
134
|
+
exports.chip = chip;
|
148
135
|
var inputInContainerSlot = {
|
149
136
|
position: 'absolute',
|
150
137
|
bg: 'transparent',
|
@@ -301,7 +288,6 @@ var _default = {
|
|
301
288
|
listItem: listItem,
|
302
289
|
listBoxSectionTitle: listBoxSectionTitle,
|
303
290
|
listViewItem: listViewItem,
|
304
|
-
panel: panel,
|
305
291
|
radioCheckedContent: radioCheckedContent,
|
306
292
|
radioContainer: radioContainer,
|
307
293
|
scrollbox: scrollbox,
|
@@ -32,6 +32,8 @@ var _text = require("./text");
|
|
32
32
|
|
33
33
|
var _colors = require("../colors");
|
34
34
|
|
35
|
+
var _boxes = require("./boxes");
|
36
|
+
|
35
37
|
function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
36
38
|
|
37
39
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
|
@@ -179,32 +181,7 @@ var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
|
|
179
181
|
color: 'accent.20'
|
180
182
|
},
|
181
183
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
182
|
-
});
|
183
|
-
|
184
|
-
|
185
|
-
var icon = {
|
186
|
-
p: '3px',
|
187
|
-
alignSelf: 'flex-start',
|
188
|
-
flexGrow: 0,
|
189
|
-
borderRadius: '100%',
|
190
|
-
cursor: 'pointer',
|
191
|
-
bg: 'transparent',
|
192
|
-
'path': {
|
193
|
-
fill: 'text.secondary'
|
194
|
-
},
|
195
|
-
outline: 'none',
|
196
|
-
color: 'white',
|
197
|
-
'&.is-hovered': {
|
198
|
-
bg: 'accent.90'
|
199
|
-
},
|
200
|
-
'&.is-pressed': {
|
201
|
-
'path': {
|
202
|
-
fill: 'white'
|
203
|
-
},
|
204
|
-
bg: 'active'
|
205
|
-
},
|
206
|
-
'&.is-focused': _objectSpread({}, defaultFocus)
|
207
|
-
};
|
184
|
+
});
|
208
185
|
|
209
186
|
var primary = _objectSpread(_objectSpread({}, base), {}, {
|
210
187
|
display: 'inline-flex',
|
@@ -492,6 +469,36 @@ var fileInputField = {
|
|
492
469
|
boxShadow: 'focus'
|
493
470
|
}
|
494
471
|
};
|
472
|
+
|
473
|
+
var tooltipChip = _objectSpread(_objectSpread({}, _boxes.chip), {}, {
|
474
|
+
cursor: 'default',
|
475
|
+
'&.is-hovered, &.is-pressed': {
|
476
|
+
cursor: 'default',
|
477
|
+
outline: 'none'
|
478
|
+
}
|
479
|
+
});
|
480
|
+
|
481
|
+
var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
|
482
|
+
cursor: 'default',
|
483
|
+
'&.is-hovered, &.is-pressed': {
|
484
|
+
backgroundColor: 'inherit',
|
485
|
+
cursor: 'default',
|
486
|
+
path: {
|
487
|
+
fill: 'neutral.20'
|
488
|
+
}
|
489
|
+
}
|
490
|
+
});
|
491
|
+
|
492
|
+
var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
|
493
|
+
cursor: 'default',
|
494
|
+
alignSelf: 'flex-start',
|
495
|
+
'&.is-hovered, &.is-pressed': {
|
496
|
+
backgroundColor: 'inherit',
|
497
|
+
cursor: 'default',
|
498
|
+
textDecoration: 'inherit'
|
499
|
+
}
|
500
|
+
});
|
501
|
+
|
495
502
|
var _default = {
|
496
503
|
accordionHeader: accordionHeader,
|
497
504
|
chipDeleteButton: chipDeleteButton,
|
@@ -512,7 +519,6 @@ var _default = {
|
|
512
519
|
expandableRow: expandableRow,
|
513
520
|
fileInputField: fileInputField,
|
514
521
|
iconButton: iconButton,
|
515
|
-
icon: icon,
|
516
522
|
imageUpload: imageUpload,
|
517
523
|
inline: inline,
|
518
524
|
inverted: inverted,
|
@@ -525,6 +531,9 @@ var _default = {
|
|
525
531
|
helpHint: helpHint,
|
526
532
|
modalCloseButton: modalCloseButton,
|
527
533
|
applicationPortalPinned: applicationPortalPinned,
|
528
|
-
applicationPortal: applicationPortal
|
534
|
+
applicationPortal: applicationPortal,
|
535
|
+
tooltipChip: tooltipChip,
|
536
|
+
tooltipIconButton: tooltipIconButton,
|
537
|
+
tooltipInline: tooltipInline
|
529
538
|
};
|
530
539
|
exports["default"] = _default;
|
@@ -54,8 +54,6 @@ var _messages = _interopRequireDefault(require("./messages"));
|
|
54
54
|
|
55
55
|
var _numberField = _interopRequireDefault(require("./numberField"));
|
56
56
|
|
57
|
-
var _popover = _interopRequireDefault(require("./popover"));
|
58
|
-
|
59
57
|
var _overlayPanel = _interopRequireDefault(require("./overlayPanel"));
|
60
58
|
|
61
59
|
var _popoverMenu = _interopRequireDefault(require("./popoverMenu"));
|
@@ -90,7 +88,6 @@ var _default = _objectSpread(_objectSpread({
|
|
90
88
|
modal: _modal["default"],
|
91
89
|
numberField: _numberField["default"],
|
92
90
|
overlayPanel: _overlayPanel["default"],
|
93
|
-
popover: _popover["default"],
|
94
91
|
popoverMenu: _popoverMenu["default"],
|
95
92
|
rockerbutton: _rockerbutton["default"],
|
96
93
|
separator: _separator["default"],
|
@@ -14,17 +14,15 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
|
|
14
14
|
|
15
15
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
16
16
|
|
17
|
-
import React, { forwardRef, useRef, useImperativeHandle
|
17
|
+
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
|
18
18
|
import PropTypes from 'prop-types';
|
19
19
|
import { Button as ThemeUIButton } from 'theme-ui';
|
20
20
|
import { useButton } from '@react-aria/button';
|
21
21
|
import { useHover } from '@react-aria/interactions';
|
22
22
|
import { useFocusRing } from '@react-aria/focus';
|
23
23
|
import { mergeProps } from '@react-aria/utils';
|
24
|
-
import {
|
25
|
-
import { useAriaLabelWarning, useStatusClasses, useDeprecationWarning, usePropWarning } from '../../hooks';
|
24
|
+
import { useAriaLabelWarning, useStatusClasses, usePropWarning } from '../../hooks';
|
26
25
|
import Loader from '../Loader';
|
27
|
-
import Box from '../Box';
|
28
26
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
29
27
|
var Button = /*#__PURE__*/forwardRef(function (props, ref) {
|
30
28
|
var className = props.className,
|
@@ -39,8 +37,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
39
37
|
onPressChange = props.onPressChange,
|
40
38
|
onPressUp = props.onPressUp,
|
41
39
|
children = props.children,
|
42
|
-
|
43
|
-
others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children", "mode"]);
|
40
|
+
others = _objectWithoutProperties(props, ["className", "isDisabled", "isLoading", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "children"]);
|
44
41
|
|
45
42
|
var buttonRef = useRef();
|
46
43
|
usePropWarning(props, 'disabled', 'isDisabled');
|
@@ -49,20 +46,13 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
49
46
|
useImperativeHandle(ref, function () {
|
50
47
|
return buttonRef.current;
|
51
48
|
});
|
52
|
-
var ButtonBase = useMemo(function () {
|
53
|
-
return mode === modes.ICON ? Box : ThemeUIButton;
|
54
|
-
}, [mode]);
|
55
|
-
var elementType = useMemo(function () {
|
56
|
-
if (mode === modes.ICON) return 'div';
|
57
|
-
return 'button';
|
58
|
-
}, [mode]);
|
59
49
|
|
60
50
|
var _useFocusRing = useFocusRing(),
|
61
51
|
isFocusVisible = _useFocusRing.isFocusVisible,
|
62
52
|
focusProps = _useFocusRing.focusProps;
|
63
53
|
|
64
54
|
var _useButton = useButton(_objectSpread({
|
65
|
-
elementType:
|
55
|
+
elementType: 'button'
|
66
56
|
}, props), buttonRef),
|
67
57
|
buttonProps = _useButton.buttonProps,
|
68
58
|
isPressed = _useButton.isPressed;
|
@@ -79,12 +69,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
79
69
|
}),
|
80
70
|
classNames = _useStatusClasses.classNames;
|
81
71
|
|
82
|
-
useDeprecationWarning('The "icon" variant for `Button` will be deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
|
83
|
-
isActive: props.variant === 'icon'
|
84
|
-
});
|
85
72
|
var ariaLabel = props['aria-label'];
|
86
73
|
useAriaLabelWarning('Button', ariaLabel);
|
87
|
-
return ___EmotionJSX(
|
74
|
+
return ___EmotionJSX(ThemeUIButton, _extends({
|
88
75
|
"aria-label": ariaLabel || 'Button',
|
89
76
|
ref: buttonRef,
|
90
77
|
className: classNames,
|
@@ -167,15 +154,11 @@ Button.propTypes = {
|
|
167
154
|
onPressUp: PropTypes.func,
|
168
155
|
|
169
156
|
/** The styling variation of the button. */
|
170
|
-
variant: PropTypes.string
|
171
|
-
|
172
|
-
/** The behavioral pattern to apply to the button. */
|
173
|
-
mode: PropTypes.oneOf(['default', 'icon'])
|
157
|
+
variant: PropTypes.string
|
174
158
|
};
|
175
159
|
Button.defaultProps = {
|
176
160
|
isDisabled: false,
|
177
|
-
variant: 'default'
|
178
|
-
mode: 'default'
|
161
|
+
variant: 'default'
|
179
162
|
};
|
180
163
|
Button.displayName = 'Button';
|
181
164
|
export default Button;
|
@@ -1,11 +1,9 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
2
|
import React from 'react';
|
3
3
|
import userEvent from '@testing-library/user-event';
|
4
|
-
import AddCircleIcon from 'mdi-react/AddCircleIcon';
|
5
4
|
import axeTest from '../../utils/testUtils/testAxe';
|
6
5
|
import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
|
7
6
|
import Button from '.';
|
8
|
-
import Icon from '../Icon';
|
9
7
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
10
8
|
var testId = 'test-button';
|
11
9
|
var defaultProps = {
|
@@ -15,15 +13,6 @@ var defaultProps = {
|
|
15
13
|
var getComponent = function getComponent() {
|
16
14
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
17
15
|
return render(___EmotionJSX(Button, _extends({}, defaultProps, props)));
|
18
|
-
};
|
19
|
-
|
20
|
-
var getIconButton = function getIconButton() {
|
21
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
22
|
-
return render(___EmotionJSX(Button, _extends({}, defaultProps, props, {
|
23
|
-
variant: "icon"
|
24
|
-
}), ___EmotionJSX(Icon, {
|
25
|
-
icon: AddCircleIcon
|
26
|
-
})));
|
27
16
|
}; // Need to be added to each test file to test accessibility using axe.
|
28
17
|
|
29
18
|
|
@@ -99,13 +88,4 @@ test('button renders children when not loading', function () {
|
|
99
88
|
expect(childWrapper).toBeInTheDocument();
|
100
89
|
expect(childWrapper).toBeVisible();
|
101
90
|
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
102
|
-
});
|
103
|
-
test('passing in an icon makes the button parent a div', function () {
|
104
|
-
getIconButton({
|
105
|
-
mode: 'icon'
|
106
|
-
});
|
107
|
-
var button = screen.getByRole('button');
|
108
|
-
expect(button).toBeInTheDocument();
|
109
|
-
expect(button).toBeVisible();
|
110
|
-
expect(button).toBeInstanceOf(HTMLDivElement);
|
111
91
|
});
|
@@ -32,7 +32,6 @@ export var Default = function Default(args) {
|
|
32
32
|
isRow: true,
|
33
33
|
alignSelf: "center"
|
34
34
|
}, ___EmotionJSX(IconButton, {
|
35
|
-
variant: "icon",
|
36
35
|
size: 26
|
37
36
|
}, ___EmotionJSX(Icon, {
|
38
37
|
icon: MoreVertIcon,
|
@@ -64,7 +63,6 @@ export var WithSubtitle = function WithSubtitle(args) {
|
|
64
63
|
isRow: true,
|
65
64
|
alignSelf: "center"
|
66
65
|
}, ___EmotionJSX(IconButton, {
|
67
|
-
variant: "icon",
|
68
66
|
size: 26
|
69
67
|
}, ___EmotionJSX(Icon, {
|
70
68
|
icon: MoreVertIcon,
|
@@ -33,7 +33,8 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
33
|
tabLabelProps = itemProps.tabLabelProps,
|
34
34
|
tabLineProps = itemProps.tabLineProps,
|
35
35
|
content = itemProps.content,
|
36
|
-
|
36
|
+
titleAttr = itemProps.titleAttr,
|
37
|
+
otherItemProps = _objectWithoutProperties(itemProps, ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"]);
|
37
38
|
|
38
39
|
var state = useContext(TabsContext);
|
39
40
|
var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
|
@@ -77,7 +78,8 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
77
78
|
className: classNames,
|
78
79
|
variant: "tab"
|
79
80
|
}, mergeProps(focusProps, hoverProps, tabProps), otherItemProps, {
|
80
|
-
ref: tabRef
|
81
|
+
ref: tabRef,
|
82
|
+
title: titleAttr || undefined
|
81
83
|
}), icon, ___EmotionJSX(Text, _extends({
|
82
84
|
variant: "tabLabel"
|
83
85
|
}, tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);
|
@@ -1,7 +1,9 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import Earth from 'mdi-react/EarthIcon';
|
3
|
-
import
|
3
|
+
import PersonIcon from 'mdi-react/PersonIcon';
|
4
|
+
import { Box, Button, Icon, Tooltip, TooltipTrigger } from '../../index';
|
4
5
|
import IconButton from '../IconButton';
|
6
|
+
import Text from '../Text';
|
5
7
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
6
8
|
export default {
|
7
9
|
title: 'TooltipTrigger',
|
@@ -44,4 +46,34 @@ Disabled.parameters = {
|
|
44
46
|
story: 'The tooltip can be disabled without disabling the button press events.'
|
45
47
|
}
|
46
48
|
}
|
49
|
+
};
|
50
|
+
export var IconWithTooltip = function IconWithTooltip() {
|
51
|
+
return ___EmotionJSX(Box, {
|
52
|
+
pl: 50
|
53
|
+
}, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(IconButton, {
|
54
|
+
variant: "tooltipIconButton"
|
55
|
+
}, ___EmotionJSX(Icon, {
|
56
|
+
icon: PersonIcon
|
57
|
+
})), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
|
58
|
+
};
|
59
|
+
export var ChipWithTooltip = function ChipWithTooltip() {
|
60
|
+
return ___EmotionJSX(Box, {
|
61
|
+
pl: 50
|
62
|
+
}, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
|
63
|
+
variant: "tooltipChip",
|
64
|
+
bg: "neutral.10"
|
65
|
+
}, ___EmotionJSX(Text, {
|
66
|
+
variant: "label",
|
67
|
+
sx: {
|
68
|
+
textTransform: 'uppercase'
|
69
|
+
},
|
70
|
+
color: "white"
|
71
|
+
}, "Some text")), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
|
72
|
+
};
|
73
|
+
export var TextWithTooltip = function TextWithTooltip() {
|
74
|
+
return ___EmotionJSX(Box, {
|
75
|
+
pl: 50
|
76
|
+
}, ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, {
|
77
|
+
variant: "tooltipInline"
|
78
|
+
}, "Some text"), ___EmotionJSX(Tooltip, null, "Useful tooltip")));
|
47
79
|
};
|
package/lib/index.js
CHANGED
@@ -30,10 +30,6 @@ export * from './components/Chip';
|
|
30
30
|
export { default as ComboBoxField } from './components/ComboBoxField';
|
31
31
|
export { default as CopyText } from './components/CopyText';
|
32
32
|
export { default as ColorField } from './components/ColorField';
|
33
|
-
export { default as Dropdown } from './components/Dropdown';
|
34
|
-
export * from './components/Dropdown';
|
35
|
-
export { default as DropdownField } from './components/DropdownField';
|
36
|
-
export * from './components/DropdownField';
|
37
33
|
export { default as FieldHelperText } from './components/FieldHelperText';
|
38
34
|
export * from './components/FieldHelperText';
|
39
35
|
export { default as FileInputField } from './components/FileInputField';
|
@@ -77,12 +73,8 @@ export { default as OverlayPanel } from './components/OverlayPanel';
|
|
77
73
|
export * from './components/OverlayPanel';
|
78
74
|
export { default as PageHeader } from './components/PageHeader';
|
79
75
|
export * from './components/PageHeader';
|
80
|
-
export { default as Panel } from './components/Panel';
|
81
|
-
export * from './components/Panel';
|
82
76
|
export { default as PasswordField } from './components/PasswordField';
|
83
77
|
export * from './components/PasswordField';
|
84
|
-
export { default as Popover } from './components/Popover';
|
85
|
-
export * from './components/Popover';
|
86
78
|
export { default as PopoverContainer } from './components/PopoverContainer';
|
87
79
|
export * from './components/PopoverContainer';
|
88
80
|
export { default as PopoverMenu } from './components/PopoverMenu';
|
@@ -3,14 +3,12 @@ import React from 'react';
|
|
3
3
|
import Earth from 'mdi-react/EarthIcon';
|
4
4
|
import Cog from 'mdi-react/CogOutlineIcon';
|
5
5
|
import Button from '../components/Button/Button';
|
6
|
-
import Panel from '../components/Panel/Panel';
|
7
6
|
import Box from '../components/Box/Box';
|
8
7
|
import Icon from '../components/Icon/Icon';
|
9
8
|
import Text from '../components/Text/Text';
|
10
9
|
import Separator from '../components/Separator/Separator';
|
11
10
|
import TextField from '../components/TextField/TextField';
|
12
11
|
import TextAreaField from '../components/TextAreaField/TextAreaField';
|
13
|
-
import DropdownField from '../components/DropdownField/DropdownField';
|
14
12
|
import RadioGroupField from '../components/RadioGroupField/RadioGroupField';
|
15
13
|
import RadioField from '../components/RadioField/RadioField';
|
16
14
|
import Tabs from '../components/Tabs/Tabs';
|
@@ -96,10 +94,7 @@ export var Default = function Default() {
|
|
96
94
|
}), ___EmotionJSX(TextAreaField, {
|
97
95
|
mb: "lg",
|
98
96
|
label: "Description"
|
99
|
-
}), ___EmotionJSX(
|
100
|
-
label: "Category",
|
101
|
-
mb: "lg"
|
102
|
-
}, ___EmotionJSX("option", null, "Option 1"), ___EmotionJSX("option", null, "Option 2"), ___EmotionJSX("option", null, "Option 3")), ___EmotionJSX(RadioGroupField, {
|
97
|
+
}), ___EmotionJSX(RadioGroupField, {
|
103
98
|
label: "Required Fields",
|
104
99
|
variant: "radioGroupBasic"
|
105
100
|
}, ___EmotionJSX(RadioField, {
|
@@ -108,17 +103,5 @@ export var Default = function Default() {
|
|
108
103
|
}), ___EmotionJSX(RadioField, {
|
109
104
|
value: "B",
|
110
105
|
label: "Option B"
|
111
|
-
}))))
|
112
|
-
isVisible: visible,
|
113
|
-
width: "70%",
|
114
|
-
bg: "accent.99"
|
115
|
-
}, ___EmotionJSX(Box, {
|
116
|
-
p: "lg",
|
117
|
-
onClick: function onClick() {
|
118
|
-
return setVisible(!visible);
|
119
|
-
}
|
120
|
-
}, ___EmotionJSX(Box, {
|
121
|
-
p: "lg",
|
122
|
-
bg: "white"
|
123
|
-
}, ___EmotionJSX(Text, null, "Your content here."))))));
|
106
|
+
}))))));
|
124
107
|
};
|
@@ -82,11 +82,11 @@ export var Default = function Default() {
|
|
82
82
|
sx: {
|
83
83
|
position: 'absolute',
|
84
84
|
right: -30,
|
85
|
-
top: 5
|
85
|
+
top: 5,
|
86
|
+
width: 'auto'
|
86
87
|
},
|
87
88
|
type: "delete",
|
88
|
-
title: "Delete Field"
|
89
|
-
variant: "icon"
|
89
|
+
title: "Delete Field"
|
90
90
|
}, ___EmotionJSX(Icon, {
|
91
91
|
icon: TrashIcon,
|
92
92
|
size: 20,
|
package/lib/styles/theme.js
CHANGED
@@ -16,20 +16,6 @@ import { text } from './text';
|
|
16
16
|
var base = {
|
17
17
|
display: 'flex'
|
18
18
|
};
|
19
|
-
var panel = {
|
20
|
-
outline: 'none',
|
21
|
-
position: 'relative',
|
22
|
-
bg: 'white',
|
23
|
-
borderLeft: 'separator',
|
24
|
-
transition: 'margin 0.25s ease-in',
|
25
|
-
visibility: 'hidden',
|
26
|
-
'&.is-focused': {
|
27
|
-
boxShadow: 'focus'
|
28
|
-
},
|
29
|
-
'&.is-visible': {
|
30
|
-
visibility: 'visible'
|
31
|
-
}
|
32
|
-
};
|
33
19
|
var card = {
|
34
20
|
boxShadow: 'standard',
|
35
21
|
p: 'lg',
|
@@ -100,7 +86,7 @@ var listBoxSectionTitle = {
|
|
100
86
|
ml: 'sm',
|
101
87
|
justifyContent: 'center'
|
102
88
|
};
|
103
|
-
var chip = {
|
89
|
+
export var chip = {
|
104
90
|
cursor: 'pointer',
|
105
91
|
p: '3px 5px 4px 5px',
|
106
92
|
alignItems: 'center',
|
@@ -280,7 +266,6 @@ export default {
|
|
280
266
|
listItem: listItem,
|
281
267
|
listBoxSectionTitle: listBoxSectionTitle,
|
282
268
|
listViewItem: listViewItem,
|
283
|
-
panel: panel,
|
284
269
|
radioCheckedContent: radioCheckedContent,
|
285
270
|
radioContainer: radioContainer,
|
286
271
|
scrollbox: scrollbox,
|
@@ -14,6 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
14
14
|
|
15
15
|
import { text as textVariants } from './text';
|
16
16
|
import { neutral } from '../colors';
|
17
|
+
import { chip } from './boxes';
|
17
18
|
|
18
19
|
var base = _objectSpread({
|
19
20
|
cursor: 'pointer',
|
@@ -158,32 +159,7 @@ var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
|
|
158
159
|
color: 'accent.20'
|
159
160
|
},
|
160
161
|
'&.is-focused': _objectSpread({}, defaultFocus)
|
161
|
-
});
|
162
|
-
|
163
|
-
|
164
|
-
var icon = {
|
165
|
-
p: '3px',
|
166
|
-
alignSelf: 'flex-start',
|
167
|
-
flexGrow: 0,
|
168
|
-
borderRadius: '100%',
|
169
|
-
cursor: 'pointer',
|
170
|
-
bg: 'transparent',
|
171
|
-
'path': {
|
172
|
-
fill: 'text.secondary'
|
173
|
-
},
|
174
|
-
outline: 'none',
|
175
|
-
color: 'white',
|
176
|
-
'&.is-hovered': {
|
177
|
-
bg: 'accent.90'
|
178
|
-
},
|
179
|
-
'&.is-pressed': {
|
180
|
-
'path': {
|
181
|
-
fill: 'white'
|
182
|
-
},
|
183
|
-
bg: 'active'
|
184
|
-
},
|
185
|
-
'&.is-focused': _objectSpread({}, defaultFocus)
|
186
|
-
};
|
162
|
+
});
|
187
163
|
|
188
164
|
var primary = _objectSpread(_objectSpread({}, base), {}, {
|
189
165
|
display: 'inline-flex',
|
@@ -471,6 +447,36 @@ var fileInputField = {
|
|
471
447
|
boxShadow: 'focus'
|
472
448
|
}
|
473
449
|
};
|
450
|
+
|
451
|
+
var tooltipChip = _objectSpread(_objectSpread({}, chip), {}, {
|
452
|
+
cursor: 'default',
|
453
|
+
'&.is-hovered, &.is-pressed': {
|
454
|
+
cursor: 'default',
|
455
|
+
outline: 'none'
|
456
|
+
}
|
457
|
+
});
|
458
|
+
|
459
|
+
var tooltipIconButton = _objectSpread(_objectSpread({}, iconButton), {}, {
|
460
|
+
cursor: 'default',
|
461
|
+
'&.is-hovered, &.is-pressed': {
|
462
|
+
backgroundColor: 'inherit',
|
463
|
+
cursor: 'default',
|
464
|
+
path: {
|
465
|
+
fill: 'neutral.20'
|
466
|
+
}
|
467
|
+
}
|
468
|
+
});
|
469
|
+
|
470
|
+
var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
|
471
|
+
cursor: 'default',
|
472
|
+
alignSelf: 'flex-start',
|
473
|
+
'&.is-hovered, &.is-pressed': {
|
474
|
+
backgroundColor: 'inherit',
|
475
|
+
cursor: 'default',
|
476
|
+
textDecoration: 'inherit'
|
477
|
+
}
|
478
|
+
});
|
479
|
+
|
474
480
|
export default {
|
475
481
|
accordionHeader: accordionHeader,
|
476
482
|
chipDeleteButton: chipDeleteButton,
|
@@ -491,7 +497,6 @@ export default {
|
|
491
497
|
expandableRow: expandableRow,
|
492
498
|
fileInputField: fileInputField,
|
493
499
|
iconButton: iconButton,
|
494
|
-
icon: icon,
|
495
500
|
imageUpload: imageUpload,
|
496
501
|
inline: inline,
|
497
502
|
inverted: inverted,
|
@@ -504,5 +509,8 @@ export default {
|
|
504
509
|
helpHint: helpHint,
|
505
510
|
modalCloseButton: modalCloseButton,
|
506
511
|
applicationPortalPinned: applicationPortalPinned,
|
507
|
-
applicationPortal: applicationPortal
|
512
|
+
applicationPortal: applicationPortal,
|
513
|
+
tooltipChip: tooltipChip,
|
514
|
+
tooltipIconButton: tooltipIconButton,
|
515
|
+
tooltipInline: tooltipInline
|
508
516
|
};
|
@@ -24,7 +24,6 @@ import menu from './menu';
|
|
24
24
|
import menuItem from './menuItem';
|
25
25
|
import messages from './messages';
|
26
26
|
import numberField from './numberField';
|
27
|
-
import popover from './popover';
|
28
27
|
import overlayPanel from './overlayPanel';
|
29
28
|
import popoverMenu from './popoverMenu';
|
30
29
|
import rockerbutton from './rockerbutton';
|
@@ -47,7 +46,6 @@ export default _objectSpread(_objectSpread({
|
|
47
46
|
modal: modal,
|
48
47
|
numberField: numberField,
|
49
48
|
overlayPanel: overlayPanel,
|
50
|
-
popover: popover,
|
51
49
|
popoverMenu: popoverMenu,
|
52
50
|
rockerbutton: rockerbutton,
|
53
51
|
separator: separator,
|