@ringcentral/juno 2.21.2 → 2.22.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.
- package/components/Buttons/Button/Button.d.ts +8 -2
- package/components/Buttons/Button/Button.js +4 -2
- package/components/Buttons/Button/styles/StyledButton.js +11 -5
- package/components/Buttons/IconButton/IconButton.d.ts +11 -3
- package/components/Buttons/IconButton/IconButton.js +4 -1
- package/components/Buttons/IconButton/styles/StyledIconButton.js +19 -7
- package/components/Buttons/IconButton/utils/IconButtonUtils.d.ts +1 -1
- package/components/Buttons/IconButton/utils/IconButtonUtils.js +8 -7
- package/components/Dialer/DialPad/DialPad.d.ts +2 -2
- package/components/Downshift/styles/DownshiftStyle.d.ts +1 -1
- package/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.d.ts +1 -1
- package/components/Forms/Picker/DatePicker/styles/StyledYear.d.ts +1 -1
- package/components/Forms/Picker/TimePicker/styles/StyledSelectionItem.d.ts +1 -1
- package/components/Forms/Picker/TimePicker/styles/StyledTimeIconButton.d.ts +1 -1
- package/components/Forms/Picker/styles/PickerBaseIconButton.d.ts +1 -1
- package/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/components/Forms/TextField/styles/ClearIconButton.d.ts +2 -2
- package/components/List/ListItem/ListItem.d.ts +8 -2
- package/components/List/ListItem/ListItem.js +2 -1
- package/components/List/ListItem/styles/ListItemStyle.d.ts +2 -1
- package/components/List/ListItem/styles/ListItemStyle.js +16 -6
- package/components/Menu/MenuItem/MenuItem.d.ts +21 -3
- package/components/Menu/MenuItem/MenuItem.js +2 -1
- package/components/Menu/MenuItem/styles/MenuItemStyle.js +2 -2
- package/components/Menu/MenuOption/styles/StyledMenuOption.d.ts +1 -1
- package/components/Menu/SubMenu/SubMenu.d.ts +1 -1
- package/components/TablePagination/styles/TablePaginationStyle.d.ts +4 -2
- package/components/Text/Text.d.ts +1 -1
- package/es6/components/Buttons/Button/Button.js +4 -2
- package/es6/components/Buttons/Button/styles/StyledButton.js +12 -6
- package/es6/components/Buttons/IconButton/IconButton.js +4 -1
- package/es6/components/Buttons/IconButton/styles/StyledIconButton.js +20 -8
- package/es6/components/Buttons/IconButton/utils/IconButtonUtils.js +8 -7
- package/es6/components/Forms/Switch/styles/SwitchStyle.js +2 -2
- package/es6/components/List/ListItem/ListItem.js +2 -1
- package/es6/components/List/ListItem/styles/ListItemStyle.js +17 -7
- package/es6/components/Menu/MenuItem/MenuItem.js +2 -1
- package/es6/components/Menu/MenuItem/styles/MenuItemStyle.js +2 -2
- package/es6/foundation/styles/focusRing.js +11 -0
- package/es6/foundation/styles/index.js +1 -0
- package/es6/foundation/typings/BaseFocusVariant.js +0 -0
- package/foundation/styles/focusRing.d.ts +2 -0
- package/foundation/styles/focusRing.js +13 -0
- package/foundation/styles/index.d.ts +1 -0
- package/foundation/styles/index.js +1 -0
- package/foundation/typings/BaseFocusVariant.d.ts +7 -0
- package/foundation/typings/BaseFocusVariant.js +2 -0
- package/foundation/typings/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css,
|
|
2
|
+
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, spacing, typography, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcButtonClasses, RcButtonColors, RcButtonHeights, RcButtonIconSpace, RcButtonMinWidths, RcButtonPadding, RcButtonTextColors, RcButtonTypographies, } from '../utils';
|
|
4
4
|
export var buttonColor = function (_a) {
|
|
5
5
|
var color = _a.color;
|
|
@@ -17,22 +17,28 @@ export var buttonTextColor = function (props) {
|
|
|
17
17
|
export var buttonHoverColor = function (props) {
|
|
18
18
|
return setOpacity(buttonColor(props), '08');
|
|
19
19
|
};
|
|
20
|
+
var textButtonFocusVisibleColor = function (props) {
|
|
21
|
+
return setOpacity(buttonColor(props), '08');
|
|
22
|
+
};
|
|
20
23
|
var containedButtonHoverColor = function (props) {
|
|
21
24
|
return setOpacity(buttonColor(props), '08', true);
|
|
22
25
|
};
|
|
23
26
|
export var buttonStyle = function (props) {
|
|
24
|
-
var variant = props.variant, size = props.size, radiusProp = props.radius, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant;
|
|
27
|
+
var variant = props.variant, size = props.size, radiusProp = props.radius, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant, focusVariant = props.focusVariant;
|
|
25
28
|
var isMask = loading || (disabled && disabledVariant === 'mask');
|
|
26
29
|
var textDisabledColor = !isMask ? palette2('disabled', 'f02') : undefined;
|
|
27
30
|
var plainTextColor = plainButtonTextColor(props);
|
|
28
31
|
var iconSpace = spacing(RcButtonIconSpace[size]);
|
|
29
32
|
var isPlain = variant === 'plain';
|
|
30
|
-
return css(
|
|
33
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ", ";\n\n ", ";\n\n .", " {\n margin-right: ", ";\n\n ", ";\n }\n\n .", " {\n margin-left: ", ";\n\n ", ";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ", "\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ", "\n\n ", "\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n padding: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n }\n\n ", "\n\n &:after {\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n border: 1px solid transparent;\n }\n }\n "], ["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ",
|
|
31
34
|
";\n\n ",
|
|
32
35
|
";\n\n .", " {\n margin-right: ", ";\n\n ",
|
|
33
36
|
";\n }\n\n .", " {\n margin-left: ", ";\n\n ",
|
|
34
|
-
";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ",
|
|
37
|
+
";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ",
|
|
38
|
+
"\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
35
39
|
";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
36
|
-
"\n
|
|
40
|
+
"\n\n ",
|
|
41
|
+
"\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n padding: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n }\n\n ",
|
|
42
|
+
"\n\n &:after {\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n border: 1px solid transparent;\n }\n }\n "])), typography(RcButtonTypographies[size], true), !keepElevation && 'unset', radiusProp && radius(radiusProp), isMask && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n display: block;\n background: ", ";\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n "], ["\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n display: block;\n background: ", ";\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n "])), setOpacity(palette2('neutral', 'b01'), '32'), radius(radiusProp !== null && radiusProp !== void 0 ? radiusProp : 'lg')), !isPlain && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "], ["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "])), px(RcButtonMinWidths[size]), px(RcButtonHeights[size]), spacing(0, RcButtonPadding[size])), RcButtonClasses.startIcon, iconSpace, isPlain && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: 0;\n "], ["\n margin-left: 0;\n "]))), RcButtonClasses.endIcon, iconSpace, isPlain && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-right: 0;\n "], ["\n margin-right: 0;\n "]))), RcButtonClasses.text, plainButtonTextColor, RcButtonClasses.disabled, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", " {\n ", "\n background-color: ", ";\n }\n "], ["\n ", " {\n ", "\n background-color: ", ";\n }\n "])), focusVisible, focusRing('normal'), textButtonFocusVisibleColor), nonTouchHoverMedia, buttonHoverColor, isPlain && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: ", ";\n min-width: unset;\n line-height: 1;\n\n ", " {\n &:hover {\n color: ", ";\n background-color: transparent;\n }\n }\n\n ", " {\n ", "\n background-color: transparent;\n }\n\n &:active {\n &.", " {\n color: ", ";\n }\n }\n "], ["\n padding: ", ";\n min-width: unset;\n line-height: 1;\n\n ", " {\n &:hover {\n color: ", ";\n background-color: transparent;\n }\n }\n\n ", " {\n ", "\n background-color: transparent;\n }\n\n &:active {\n &.", " {\n color: ", ";\n }\n }\n "])), spacing(1), nonTouchHoverMedia, setOpacity(plainTextColor, '80'), focusVisible, focusRing('inset'), RcButtonClasses.text, setOpacity(plainTextColor, '64')), RcButtonClasses.contained, buttonTextColor, buttonColor, nonTouchHoverMedia, containedButtonHoverColor, focusVariant === 'focusRing' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", " {\n ", "\n box-shadow: unset;\n }\n "], ["\n ", " {\n ", "\n box-shadow: unset;\n }\n "])), focusVisible, focusRing('normal')), !isMask && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "])), RcButtonClasses.disabled, palette2('disabled', 'b01'), palette2('disabled', 'f01')), RcButtonClasses.outlined, plainButtonTextColor, plainButtonTextColor, spacing(0, RcButtonPadding[size] - 0.25), nonTouchHoverMedia, buttonHoverColor, RcButtonClasses.disabled, textDisabledColor, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), focusVisible, focusRing('normal')));
|
|
37
43
|
};
|
|
38
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -15,12 +15,13 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
|
|
|
15
15
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
16
16
|
useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
|
|
17
17
|
}
|
|
18
|
-
var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href"]);
|
|
18
|
+
var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, focusVariant = props.focusVariant, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusVariant"]);
|
|
19
19
|
var theme = useTheme();
|
|
20
20
|
var isOutline = variant === 'outline';
|
|
21
21
|
var isContained = variant === 'contained';
|
|
22
22
|
var isInverse = variant === 'inverse';
|
|
23
23
|
var isPlain = variant === 'plain';
|
|
24
|
+
var isRound = variant === 'round';
|
|
24
25
|
var classes = useMemo(function () { return combineClasses(RcIconButtonClasses, classesProp); }, [classesProp]);
|
|
25
26
|
var IconClassName = clsx(className, classes.root, (_a = {},
|
|
26
27
|
_a[classes.disabled] = disabled,
|
|
@@ -28,6 +29,7 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
|
|
|
28
29
|
_a[classes.outline] = isOutline,
|
|
29
30
|
_a[classes.contained] = isContained,
|
|
30
31
|
_a[classes.inverse] = isInverse,
|
|
32
|
+
_a[classes.round] = isRound,
|
|
31
33
|
_a));
|
|
32
34
|
var iconButton = (function () {
|
|
33
35
|
var _a, _b;
|
|
@@ -63,6 +65,7 @@ RcIconButton.defaultProps = {
|
|
|
63
65
|
disableTouchRipple: true,
|
|
64
66
|
classes: {},
|
|
65
67
|
useRcTooltip: true,
|
|
68
|
+
focusVariant: 'highlight',
|
|
66
69
|
};
|
|
67
70
|
export { RcIconButton };
|
|
68
71
|
var templateObject_1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, opacity, } from '../../../../foundation';
|
|
2
|
+
import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, opacity, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
|
|
4
4
|
export var getFocusVisibleInsetSize = function (_a) {
|
|
5
5
|
var size = _a.size;
|
|
@@ -14,17 +14,19 @@ var containedVariantTransitions = function (_a) {
|
|
|
14
14
|
};
|
|
15
15
|
export var plainIconButtonFocusStyle = function (_a) {
|
|
16
16
|
var _b = (_a === void 0 ? {} : _a).radius, radiusProp = _b === void 0 ? 'circle' : _b;
|
|
17
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0
|
|
17
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n pointer-events: none;\n z-index: 1;\n }\n"], ["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n pointer-events: none;\n z-index: 1;\n }\n"])), getFocusVisibleInsetSize, focusVisibleColor, radius(radiusProp));
|
|
18
18
|
};
|
|
19
19
|
export var iconButtonStyle = function (_a) {
|
|
20
|
-
var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation, _b = _a.IconProps, IconProps = _b === void 0 ? {} : _b;
|
|
20
|
+
var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation, _b = _a.IconProps, IconProps = _b === void 0 ? {} : _b, focusVariant = _a.focusVariant;
|
|
21
21
|
var iconColor = IconProps.color;
|
|
22
|
+
var useFocusRing = focusVariant === 'focusRing';
|
|
22
23
|
var iconSize = RcIconButtonSizes[size];
|
|
23
24
|
var isCircle = ['plain', 'round', 'inverse', 'contained'].includes(variant);
|
|
24
25
|
var isPlain = variant === 'plain';
|
|
25
26
|
var isInverse = variant === 'inverse';
|
|
26
27
|
var isOutline = variant === 'outline';
|
|
27
28
|
var isContained = variant === 'contained';
|
|
29
|
+
var isRound = variant === 'round';
|
|
28
30
|
var containerSize = px(isPlain ? iconSize : iconSize * 2);
|
|
29
31
|
var mainColor = getParsePaletteColor(color);
|
|
30
32
|
var containedColor = iconColor
|
|
@@ -41,11 +43,11 @@ export var iconButtonStyle = function (_a) {
|
|
|
41
43
|
radius: currRadius,
|
|
42
44
|
pseudo: true,
|
|
43
45
|
});
|
|
44
|
-
return css(templateObject_8 || (templateObject_8 = __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 &.", " {\n ", "\n }\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 ",
|
|
46
|
+
return css(templateObject_8 || (templateObject_8 = __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 ", "\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 &.", " {\n ", "\n }\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 ",
|
|
45
47
|
";\n\n font-size: ",
|
|
46
48
|
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
47
49
|
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
48
|
-
";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
50
|
+
";\n\n ", "\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
49
51
|
";\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 &.", " {\n ",
|
|
50
52
|
"\n }\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 ",
|
|
51
53
|
"\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 "
|
|
@@ -62,9 +64,19 @@ export var iconButtonStyle = function (_a) {
|
|
|
62
64
|
? iconSize * 1.2 // keep size same as before
|
|
63
65
|
: iconSize), nonTouchHoverMedia, isPlain
|
|
64
66
|
? 'transparent'
|
|
65
|
-
: setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible,
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
: setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible, function () {
|
|
68
|
+
if (useFocusRing) {
|
|
69
|
+
if (isRound)
|
|
70
|
+
return 'transparent';
|
|
71
|
+
if (isInverse)
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (isPlain)
|
|
75
|
+
return 'transparent';
|
|
76
|
+
if (isInverse)
|
|
77
|
+
return setOpacity(mainColor, '32');
|
|
78
|
+
return setOpacity(mainColor, '16');
|
|
79
|
+
}, useFocusRing && (isRound || isInverse) && focusRing('inset'), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
68
80
|
? setOpacity(mainColor, '32')
|
|
69
81
|
: palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, containedColor, mainColor, RcIconButtonClasses.disabled, function () {
|
|
70
82
|
if (useColorWhenDisabled)
|
|
@@ -7,16 +7,17 @@ export var RcIconButtonClasses = RcClasses([
|
|
|
7
7
|
'outline',
|
|
8
8
|
'contained',
|
|
9
9
|
'inverse',
|
|
10
|
+
'round',
|
|
10
11
|
'persistBg',
|
|
11
12
|
], 'RcIconButton');
|
|
12
13
|
export var RcIconButtonTouchRippleClasses = RcClasses(['ripplePulsate', 'child'], 'RcIconButtonTouchRipple');
|
|
13
14
|
export var RcIconButtonSizes = omit(RcIconSizes, ['inherit']);
|
|
14
15
|
export var RcIconButtonFocusVisibleInsetSize = {
|
|
15
|
-
xxxlarge:
|
|
16
|
-
xxlarge:
|
|
17
|
-
xlarge:
|
|
18
|
-
large:
|
|
19
|
-
medium:
|
|
20
|
-
small:
|
|
21
|
-
xsmall:
|
|
16
|
+
xxxlarge: 6,
|
|
17
|
+
xxlarge: 5,
|
|
18
|
+
xlarge: 5,
|
|
19
|
+
large: 4,
|
|
20
|
+
medium: 3,
|
|
21
|
+
small: 2,
|
|
22
|
+
xsmall: 2,
|
|
22
23
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css,
|
|
2
|
+
import { css, getParsePaletteColor, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcSwitchClasses } from '../utils';
|
|
4
4
|
var thumbColor = palette2('neutral', 'f01');
|
|
5
5
|
var disabledColor = palette2('disabled', 'f02');
|
|
@@ -12,6 +12,6 @@ export var SwitchStyle = function (_a) {
|
|
|
12
12
|
var colorProp = _a.color, trackColorProp = _a.trackColor;
|
|
13
13
|
var checkedColor = getParsePaletteColor(colorProp);
|
|
14
14
|
var trackColor = getParsePaletteColor(trackColorProp, defaultTrackColorArray);
|
|
15
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n
|
|
15
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n /* make sure focus ring can show correctly */\n overflow: visible;\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n ", "\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n /* make sure focus ring can show correctly */\n overflow: visible;\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n ", "\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), RcSwitchClasses.root, widthCss, heightCss, RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, RcSwitchClasses.focusVisible, RcSwitchClasses.track, focusRing('normal'), nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
16
16
|
};
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -23,7 +23,7 @@ var _RcListItem = forwardRef(function (inProps, ref) {
|
|
|
23
23
|
},
|
|
24
24
|
]);
|
|
25
25
|
}
|
|
26
|
-
var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, focused = props.focused, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth", "focused"]);
|
|
26
|
+
var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, focused = props.focused, focusVariant = props.focusVariant, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth", "focused", "focusVariant"]);
|
|
27
27
|
var classes = useMemo(function () { return combineClasses(RcListItemClasses, classesProp); }, [classesProp]);
|
|
28
28
|
var ListItemClassName = useMemo(function () {
|
|
29
29
|
var _a;
|
|
@@ -48,6 +48,7 @@ RcListItem.defaultProps = {
|
|
|
48
48
|
button: true,
|
|
49
49
|
canHover: true,
|
|
50
50
|
size: 'medium',
|
|
51
|
+
focusVariant: 'highlight',
|
|
51
52
|
};
|
|
52
53
|
RcListItem.displayName = 'RcListItem';
|
|
53
54
|
export { RcListItem };
|
|
@@ -1,26 +1,36 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, } from '../../../../foundation';
|
|
2
|
+
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcFormControlLabel } from '../../../Forms/FormControlLabel';
|
|
4
4
|
import { RcSwitch } from '../../../Forms/Switch';
|
|
5
5
|
import { colorMap, RcListItemClasses, RcListItemRippleClasses, RcListItemTopAndBottomPaddings, } from '../utils';
|
|
6
6
|
export var ListItemFormControlStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", " {\n margin-right: 0;\n\n > ", " {\n /** The DOM structure of Switch is special,\n should remove this after fix Switch as common control */\n margin-left: ", ";\n margin-right: ", ";\n }\n }\n"], ["\n ", " {\n margin-right: 0;\n\n > ", " {\n /** The DOM structure of Switch is special,\n should remove this after fix Switch as common control */\n margin-left: ", ";\n margin-right: ", ";\n }\n }\n"])), RcFormControlLabel, RcSwitch, spacing(1), spacing(1));
|
|
7
7
|
export var sharedListItemStyle = function (_a) {
|
|
8
|
-
var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses;
|
|
8
|
+
var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses, focusVariant = _a.focusVariant;
|
|
9
9
|
var baseColor = getParsePaletteColor(color !== null && color !== void 0 ? color : colorMap[baseColorProp]);
|
|
10
|
-
|
|
10
|
+
var useFocusRing = focusVariant === 'focusRing';
|
|
11
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n color: ", ";\n\n ", ";\n\n ", ",\n &.", " {\n background-color: ", ";\n ", "\n }\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n &,\n &:hover {\n background-color: ", ";\n }\n }\n\n .", " {\n color: ", ";\n }\n\n ", ";\n "], ["\n ", ";\n color: ", ";\n\n ",
|
|
11
12
|
";\n\n "
|
|
12
13
|
// that for menuItem, because in current version of menuItem that not support focused classes
|
|
13
14
|
// TODO: that can be remove after upgrade to V5
|
|
14
15
|
,
|
|
15
|
-
",\n &.", " {\n background-color: ",
|
|
16
|
+
",\n &.", " {\n background-color: ",
|
|
17
|
+
";\n ", "\n }\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n &,\n &:hover {\n background-color: ", ";\n }\n }\n\n .", " {\n color: ", ";\n }\n\n ", ";\n "])), typography('body1'), palette2('neutral', 'f06'), highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), setAlpha(baseColor, 0.05)),
|
|
16
18
|
// that for menuItem, because in current version of menuItem that not support focused classes
|
|
17
19
|
// TODO: that can be remove after upgrade to V5
|
|
18
|
-
focusVisible, mainClasses.focusVisible,
|
|
20
|
+
focusVisible, mainClasses.focusVisible, function () {
|
|
21
|
+
// to override mui focus visible style when item is highlighted
|
|
22
|
+
if (useFocusRing && highlighted) {
|
|
23
|
+
return setAlpha(baseColor, 0.05);
|
|
24
|
+
}
|
|
25
|
+
if (!useFocusRing)
|
|
26
|
+
return setOpacity(baseColor, '16');
|
|
27
|
+
return 'unset';
|
|
28
|
+
}, useFocusRing && focusRing('inset'), nonTouchHoverMedia, canHover ? setOpacity(baseColor, '08') : 'unset', mainClasses.selected, setOpacity(baseColor, '12'), rippleClasses.rippleVisible, baseColor, ListItemFormControlStyle);
|
|
19
29
|
};
|
|
20
30
|
export var ListItemStyle = function (props) {
|
|
21
|
-
var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick;
|
|
31
|
+
var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick, focusVariant = props.focusVariant;
|
|
22
32
|
var defaultPadding = RcListItemTopAndBottomPaddings[size];
|
|
23
33
|
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n display: ", ";\n cursor: ", ";\n\n ", ";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "], ["\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n display: ", ";\n cursor: ", ";\n\n ",
|
|
24
|
-
";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
|
|
34
|
+
";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses, focusVariant: focusVariant })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
|
|
25
35
|
};
|
|
26
36
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -17,7 +17,7 @@ import { RcMenuItemClasses, RcMenuItemRippleClasses } from './utils';
|
|
|
17
17
|
var _RcMenuItem = forwardRef(function (inProps, ref) {
|
|
18
18
|
var _a;
|
|
19
19
|
var props = useThemeProps({ props: inProps, name: 'RcMenuItem' });
|
|
20
|
-
var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused"]);
|
|
20
|
+
var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, focusVariant = props.focusVariant, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused", "focusVariant"]);
|
|
21
21
|
var isCheckedType = type === 'checked';
|
|
22
22
|
var menuItemId = useId('menu-item', true);
|
|
23
23
|
var menuContext = useContext(RcMenuContext);
|
|
@@ -109,6 +109,7 @@ var RcMenuItem = styled(withTooltip(_RcMenuItem))(templateObject_1 || (templateO
|
|
|
109
109
|
RcMenuItem.defaultProps = {
|
|
110
110
|
size: 'medium',
|
|
111
111
|
button: true,
|
|
112
|
+
focusVariant: 'highlight',
|
|
112
113
|
};
|
|
113
114
|
RcMenuItem.displayName = 'RcMenuItem';
|
|
114
115
|
export { RcMenuItem };
|
|
@@ -5,11 +5,11 @@ import { sharedListItemStyle } from '../../../List/ListItem/styles';
|
|
|
5
5
|
import { RcMenuItemClasses, RcMenuItemLeftAndRightPaddings, RcMenuItemRippleClasses, RcMenuItemTopAndBottomPaddings, } from '../utils';
|
|
6
6
|
export var StyledCheckIcon = styled(RcIcon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 22px;\n"], ["\n height: 22px;\n"])));
|
|
7
7
|
export var MenuItemStyle = function (props) {
|
|
8
|
-
var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a;
|
|
8
|
+
var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a, focusVariant = props.focusVariant;
|
|
9
9
|
var topAndBottomPadding = RcMenuItemTopAndBottomPaddings[size];
|
|
10
10
|
var leftAndRightPadding = RcMenuItemLeftAndRightPaddings[size];
|
|
11
11
|
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n outline: none;\n box-sizing: border-box;\n height: auto;\n min-height: 32px;\n min-width: 112px;\n padding-top: ", ";\n padding-bottom: ", ";\n\n ", ";\n\n .", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n min-height: auto;\n line-height: 22px;\n font-weight: 700;\n }\n "], ["\n outline: none;\n box-sizing: border-box;\n height: auto;\n min-height: 32px;\n min-width: 112px;\n padding-top: ", ";\n padding-bottom: ", ";\n\n ",
|
|
12
|
-
";\n\n .", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n min-height: auto;\n line-height: 22px;\n font-weight: 700;\n }\n "])), topAndBottomPadding, topAndBottomPadding, sharedListItemStyle(__assign(__assign({}, props), { color: color,
|
|
12
|
+
";\n\n .", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n min-height: auto;\n line-height: 22px;\n font-weight: 700;\n }\n "])), topAndBottomPadding, topAndBottomPadding, sharedListItemStyle(__assign(__assign({}, props), { focusVariant: focusVariant, color: color,
|
|
13
13
|
// in menuItem always be can hover
|
|
14
14
|
canHover: true, mainClasses: RcMenuItemClasses, rippleClasses: RcMenuItemRippleClasses })), RcMenuItemClasses.gutters, leftAndRightPadding, leftAndRightPadding, RcMenuItemClasses.dense, spacing(1), spacing(1));
|
|
15
15
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import { css } from '../styled-components';
|
|
3
|
+
import { palette2 } from './newPalette';
|
|
4
|
+
var focusRingOffsetMap = {
|
|
5
|
+
normal: '2px',
|
|
6
|
+
inset: '-2px',
|
|
7
|
+
};
|
|
8
|
+
export var focusRing = function (variant) {
|
|
9
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n outline-color: ", ";\n outline-width: 2px;\n outline-style: solid;\n outline-offset: ", ";\n "], ["\n outline-color: ", ";\n outline-width: 2px;\n outline-style: solid;\n outline-offset: ", ";\n "])), palette2('interactive', 'b02'), focusRingOffsetMap[variant]);
|
|
10
|
+
};
|
|
11
|
+
var templateObject_1;
|
|
File without changes
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var styled_components_1 = require("../styled-components");
|
|
5
|
+
var newPalette_1 = require("./newPalette");
|
|
6
|
+
var focusRingOffsetMap = {
|
|
7
|
+
normal: '2px',
|
|
8
|
+
inset: '-2px',
|
|
9
|
+
};
|
|
10
|
+
exports.focusRing = function (variant) {
|
|
11
|
+
return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n outline-color: ", ";\n outline-width: 2px;\n outline-style: solid;\n outline-offset: ", ";\n "], ["\n outline-color: ", ";\n outline-width: 2px;\n outline-style: solid;\n outline-offset: ", ";\n "])), newPalette_1.palette2('interactive', 'b02'), focusRingOffsetMap[variant]);
|
|
12
|
+
};
|
|
13
|
+
var templateObject_1;
|
|
@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./ellipsis"), exports);
|
|
|
7
7
|
tslib_1.__exportStar(require("./fakeBorder"), exports);
|
|
8
8
|
tslib_1.__exportStar(require("./flexCenter"), exports);
|
|
9
9
|
tslib_1.__exportStar(require("./flexWidth"), exports);
|
|
10
|
+
tslib_1.__exportStar(require("./focusRing"), exports);
|
|
10
11
|
tslib_1.__exportStar(require("./focusVisible"), exports);
|
|
11
12
|
tslib_1.__exportStar(require("./lineClamp"), exports);
|
|
12
13
|
tslib_1.__exportStar(require("./newPalette"), exports);
|