@ringcentral/juno 2.7.0 → 2.8.0
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.
|
@@ -2,15 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var foundation_1 = require("../../../../foundation");
|
|
5
|
-
var Icon_1 = require("../../../Icon");
|
|
6
5
|
var utils_1 = require("../utils");
|
|
7
6
|
exports.getFocusVisibleInsetSize = function (_a) {
|
|
8
7
|
var size = _a.size;
|
|
9
8
|
var inset = utils_1.RcIconButtonFocusVisibleInsetSize[size];
|
|
10
9
|
return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n top: -", "px;\n right: -", "px;\n bottom: -", "px;\n left: -", "px;\n "], ["\n top: -", "px;\n right: -", "px;\n bottom: -", "px;\n left: -", "px;\n "])), inset, inset, inset, inset);
|
|
11
10
|
};
|
|
12
|
-
// * text inside button should also set style
|
|
13
|
-
var childrenClass = "&," + Icon_1.RcIcon;
|
|
14
11
|
var containedVariantTransitions = function (_a) {
|
|
15
12
|
var theme = _a.theme;
|
|
16
13
|
return theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
|
@@ -43,12 +40,12 @@ exports.iconButtonStyle = function (_a) {
|
|
|
43
40
|
radius: currRadius,
|
|
44
41
|
pseudo: true,
|
|
45
42
|
});
|
|
46
|
-
return foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n
|
|
47
|
-
";\n\n
|
|
48
|
-
";\n
|
|
49
|
-
";\n\n
|
|
50
|
-
";\n\n &:active {\n
|
|
51
|
-
";\n
|
|
43
|
+
return foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n font-size: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ", "\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n ", "\n "], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ",
|
|
44
|
+
";\n\n font-size: ",
|
|
45
|
+
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
46
|
+
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
47
|
+
";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
48
|
+
";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ",
|
|
52
49
|
"\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n "
|
|
53
50
|
/**
|
|
54
51
|
* that is equilateral triangle, the third Side length is
|
|
@@ -57,15 +54,15 @@ exports.iconButtonStyle = function (_a) {
|
|
|
57
54
|
*/
|
|
58
55
|
,
|
|
59
56
|
"\n "])), containerSize, containerSize, mainColor, radiusValue, foundation_1.backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n transition: ", ";\n\n &:active {\n box-shadow: ", ";\n }\n "], ["\n transition: ", ";\n\n &:active {\n box-shadow: ",
|
|
60
|
-
";\n }\n "])), containedVariantTransitions, foundation_1.shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))),
|
|
57
|
+
";\n }\n "])), containedVariantTransitions, foundation_1.shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), stretchIcon
|
|
61
58
|
? containerSize
|
|
62
59
|
: foundation_1.px(isOutline
|
|
63
60
|
? iconSize * 1.2 // keep size same as before
|
|
64
61
|
: iconSize), foundation_1.nonTouchHoverMedia, isPlain
|
|
65
62
|
? 'transparent'
|
|
66
|
-
: foundation_1.setOpacity(mainColor, isInverse ? '24' : '08'),
|
|
63
|
+
: foundation_1.setOpacity(mainColor, isInverse ? '24' : '08'), foundation_1.setOpacity(mainColor, '88'), mainColor, foundation_1.focusVisible, isPlain
|
|
67
64
|
? 'transparent'
|
|
68
|
-
: foundation_1.setOpacity(mainColor, isInverse ? '32' : '16'),
|
|
65
|
+
: foundation_1.setOpacity(mainColor, isInverse ? '32' : '16'), foundation_1.setOpacity(mainColor, '88'), isPlain && exports.plainIconButtonFocusStyle({ radius: currRadius }), utils_1.RcIconButtonClasses.persistBg, persistBgColor, utils_1.RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
69
66
|
? foundation_1.setOpacity(mainColor, '32')
|
|
70
67
|
: foundation_1.palette2('disabled', 'f02'), isInverse && foundation_1.setOpacity(mainColor, '12'), utils_1.RcIconButtonClasses.invisible, utils_1.RcIconButtonClasses.outline, foundation_1.palette2('neutral', 'l03'), utils_1.RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, foundation_1.nonTouchHoverMedia, foundation_1.setOpacity(mainColorContrast, '08'), mainColorContrast, foundation_1.focusVisible, foundation_1.setOpacity(mainColorContrast, '16'), mainColorContrast, disableRipple && foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n &:before {\n background-color: ", ";\n }\n "], ["\n &:before {\n background-color: ", ";\n }\n "])), foundation_1.setOpacity(mainColorContrast, '24')), mainColorContrast, utils_1.RcIconButtonClasses.inverse, contrastColorBorder, utils_1.RcIconButtonTouchRippleClasses.ripplePulsate,
|
|
71
68
|
/**
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, } from '../../../../foundation';
|
|
3
|
-
import { RcIcon } from '../../../Icon';
|
|
4
3
|
import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
|
|
5
4
|
export var getFocusVisibleInsetSize = function (_a) {
|
|
6
5
|
var size = _a.size;
|
|
7
6
|
var inset = RcIconButtonFocusVisibleInsetSize[size];
|
|
8
7
|
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n top: -", "px;\n right: -", "px;\n bottom: -", "px;\n left: -", "px;\n "], ["\n top: -", "px;\n right: -", "px;\n bottom: -", "px;\n left: -", "px;\n "])), inset, inset, inset, inset);
|
|
9
8
|
};
|
|
10
|
-
// * text inside button should also set style
|
|
11
|
-
var childrenClass = "&," + RcIcon;
|
|
12
9
|
var containedVariantTransitions = function (_a) {
|
|
13
10
|
var theme = _a.theme;
|
|
14
11
|
return theme.transitions.create(['background-color', 'box-shadow', 'border'], {
|
|
@@ -41,12 +38,12 @@ export var iconButtonStyle = function (_a) {
|
|
|
41
38
|
radius: currRadius,
|
|
42
39
|
pseudo: true,
|
|
43
40
|
});
|
|
44
|
-
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n
|
|
45
|
-
";\n\n
|
|
46
|
-
";\n
|
|
47
|
-
";\n\n
|
|
48
|
-
";\n\n &:active {\n
|
|
49
|
-
";\n
|
|
41
|
+
return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n font-size: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ", "\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n ", "\n "], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ",
|
|
42
|
+
";\n\n font-size: ",
|
|
43
|
+
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
44
|
+
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
45
|
+
";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
46
|
+
";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ",
|
|
50
47
|
"\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n "
|
|
51
48
|
/**
|
|
52
49
|
* that is equilateral triangle, the third Side length is
|
|
@@ -55,15 +52,15 @@ export var iconButtonStyle = function (_a) {
|
|
|
55
52
|
*/
|
|
56
53
|
,
|
|
57
54
|
"\n "])), containerSize, containerSize, mainColor, radiusValue, backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transition: ", ";\n\n &:active {\n box-shadow: ", ";\n }\n "], ["\n transition: ", ";\n\n &:active {\n box-shadow: ",
|
|
58
|
-
";\n }\n "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))),
|
|
55
|
+
";\n }\n "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), stretchIcon
|
|
59
56
|
? containerSize
|
|
60
57
|
: px(isOutline
|
|
61
58
|
? iconSize * 1.2 // keep size same as before
|
|
62
59
|
: iconSize), nonTouchHoverMedia, isPlain
|
|
63
60
|
? 'transparent'
|
|
64
|
-
: setOpacity(mainColor, isInverse ? '24' : '08'),
|
|
61
|
+
: setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible, isPlain
|
|
65
62
|
? 'transparent'
|
|
66
|
-
: setOpacity(mainColor, isInverse ? '32' : '16'),
|
|
63
|
+
: setOpacity(mainColor, isInverse ? '32' : '16'), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
67
64
|
? setOpacity(mainColor, '32')
|
|
68
65
|
: palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, mainColorContrast, mainColor, radiusValue, contrastColorBorder, nonTouchHoverMedia, setOpacity(mainColorContrast, '08'), mainColorContrast, focusVisible, setOpacity(mainColorContrast, '16'), mainColorContrast, disableRipple && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n background-color: ", ";\n }\n "], ["\n &:before {\n background-color: ", ";\n }\n "])), setOpacity(mainColorContrast, '24')), mainColorContrast, RcIconButtonClasses.inverse, contrastColorBorder, RcIconButtonTouchRippleClasses.ripplePulsate,
|
|
69
66
|
/**
|