@skbkontur/react-ui 4.5.2 → 4.5.3-theme2022.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/CHANGELOG.md +11 -0
- package/LICENSE +21 -21
- package/cjs/components/Button/Button.d.ts +10 -1
- package/cjs/components/Button/Button.js +81 -3
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.mixins.js +5 -4
- package/cjs/components/Button/Button.mixins.js.map +1 -1
- package/cjs/components/Button/Button.styles.d.ts +23 -0
- package/cjs/components/Button/Button.styles.js +331 -73
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.js +1 -1
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.d.ts +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +6 -4
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/cjs/components/Dropdown/Dropdown.d.ts +1 -0
- package/cjs/components/Dropdown/Dropdown.js +21 -3
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.md +6 -1
- package/cjs/components/Gapped/Gapped.md +43 -43
- package/cjs/components/Link/Link.d.ts +3 -0
- package/cjs/components/Link/Link.js +31 -8
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Link/Link.mixins.d.ts +1 -0
- package/cjs/components/Link/Link.mixins.js +44 -6
- package/cjs/components/Link/Link.mixins.js.map +1 -1
- package/cjs/components/Link/Link.styles.d.ts +6 -0
- package/cjs/components/Link/Link.styles.js +86 -17
- package/cjs/components/Link/Link.styles.js.map +1 -1
- package/cjs/components/MenuSeparator/MenuSeparator.styles.js +2 -2
- package/cjs/components/MenuSeparator/MenuSeparator.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +3 -0
- package/cjs/components/Modal/Modal.styles.js +32 -10
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalFooter.js +6 -2
- package/cjs/components/Modal/ModalFooter.js.map +1 -1
- package/cjs/components/Modal/ModalHeader.js +9 -3
- package/cjs/components/Modal/ModalHeader.js.map +1 -1
- package/cjs/components/Modal/ModalSeparator.d.ts +5 -0
- package/cjs/components/Modal/ModalSeparator.js +21 -0
- package/cjs/components/Modal/ModalSeparator.js.map +1 -0
- package/cjs/components/PasswordInput/PasswordInput.md +9 -9
- package/cjs/components/RadioGroup/RadioGroup.md +43 -43
- package/cjs/components/Select/selectTheme.js +2 -0
- package/cjs/components/Select/selectTheme.js.map +1 -1
- package/cjs/components/Token/Token.md +112 -112
- package/cjs/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
- package/cjs/internal/FakeUserActions/FakeUserActions.js +29 -0
- package/cjs/internal/FakeUserActions/FakeUserActions.js.map +1 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.js +216 -0
- package/cjs/internal/FakeUserActions/FakeUserActionsTable.js.map +1 -0
- package/cjs/internal/FakeUserActions/Selectors.d.ts +6 -0
- package/cjs/internal/FakeUserActions/Selectors.js +20 -0
- package/cjs/internal/FakeUserActions/Selectors.js.map +1 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.js +9 -0
- package/cjs/internal/FakeUserActions/hasFakeUserAction.js.map +1 -0
- package/cjs/internal/Menu/Menu.styles.js +1 -2
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/cjs/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/icons/16px/BaseIcon.d.ts +8 -0
- package/cjs/internal/icons/16px/BaseIcon.js +33 -0
- package/cjs/internal/icons/16px/BaseIcon.js.map +1 -0
- package/cjs/internal/icons/16px/index.d.ts +3 -0
- package/cjs/internal/icons/16px/index.js +22 -8
- package/cjs/internal/icons/16px/index.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +41 -0
- package/cjs/internal/themes/DefaultTheme.js +87 -3
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/internal/themes/Theme2022.d.ts +60 -4
- package/cjs/internal/themes/Theme2022.js +156 -63
- package/cjs/internal/themes/Theme2022.js.map +1 -1
- package/cjs/internal/themes/Theme2022Dark.d.ts +9 -0
- package/cjs/internal/themes/Theme2022Dark.js +15 -1
- package/cjs/internal/themes/Theme2022Dark.js.map +1 -1
- package/cjs/lib/theming/ThemeHelpers.d.ts +3 -0
- package/cjs/lib/theming/ThemeHelpers.js +17 -1
- package/cjs/lib/theming/ThemeHelpers.js.map +1 -1
- package/cjs/lib/theming/themes/Theme2022.js +2 -1
- package/cjs/lib/theming/themes/Theme2022.js.map +1 -1
- package/cjs/typings/utility-types.d.ts +1 -1
- package/components/Button/Button/Button.js +61 -11
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +10 -1
- package/components/Button/Button.mixins/Button.mixins.js +2 -2
- package/components/Button/Button.mixins/Button.mixins.js.map +1 -1
- package/components/Button/Button.styles/Button.styles.js +130 -62
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Button/Button.styles.d.ts +23 -0
- package/components/Checkbox/Checkbox/Checkbox.js +1 -1
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/Checkbox/Checkbox.styles.d.ts +1 -1
- package/components/CurrencyLabel/CurrencyLabel.md +23 -23
- package/components/Dropdown/Dropdown/Dropdown.js +18 -5
- package/components/Dropdown/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.d.ts +1 -0
- package/components/FileUploader/FileUploader.md +6 -1
- package/components/Gapped/Gapped.md +43 -43
- package/components/Link/Link/Link.js +26 -4
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Link/Link.d.ts +3 -0
- package/components/Link/Link.mixins/Link.mixins.js +11 -3
- package/components/Link/Link.mixins/Link.mixins.js.map +1 -1
- package/components/Link/Link.mixins.d.ts +1 -0
- package/components/Link/Link.styles/Link.styles.js +26 -14
- package/components/Link/Link.styles/Link.styles.js.map +1 -1
- package/components/Link/Link.styles.d.ts +6 -0
- package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js +1 -1
- package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map +1 -1
- package/components/Modal/Modal.styles/Modal.styles.js +14 -5
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +3 -0
- package/components/Modal/ModalFooter/ModalFooter.js +5 -2
- package/components/Modal/ModalFooter/ModalFooter.js.map +1 -1
- package/components/Modal/ModalHeader/ModalHeader.js +5 -2
- package/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/components/Modal/ModalSeparator/ModalSeparator.js +14 -0
- package/components/Modal/ModalSeparator/ModalSeparator.js.map +1 -0
- package/components/Modal/ModalSeparator/package.json +6 -0
- package/components/Modal/ModalSeparator.d.ts +5 -0
- package/components/PasswordInput/PasswordInput.md +9 -9
- package/components/RadioGroup/RadioGroup.md +43 -43
- package/components/Select/selectTheme/selectTheme.js +1 -0
- package/components/Select/selectTheme/selectTheme.js.map +1 -1
- package/components/Token/Token.md +112 -112
- package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js +33 -0
- package/internal/FakeUserActions/FakeUserActions/FakeUserActions.js.map +1 -0
- package/internal/FakeUserActions/FakeUserActions/package.json +6 -0
- package/internal/FakeUserActions/FakeUserActions.d.ts +7 -0
- package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js +171 -0
- package/internal/FakeUserActions/FakeUserActionsTable/FakeUserActionsTable.js.map +1 -0
- package/internal/FakeUserActions/FakeUserActionsTable/package.json +6 -0
- package/internal/FakeUserActions/FakeUserActionsTable.d.ts +6 -0
- package/internal/FakeUserActions/Selectors/Selectors.js +29 -0
- package/internal/FakeUserActions/Selectors/Selectors.js.map +1 -0
- package/internal/FakeUserActions/Selectors/package.json +6 -0
- package/internal/FakeUserActions/Selectors.d.ts +6 -0
- package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js +6 -0
- package/internal/FakeUserActions/hasFakeUserAction/hasFakeUserAction.js.map +1 -0
- package/internal/FakeUserActions/hasFakeUserAction/package.json +6 -0
- package/internal/FakeUserActions/hasFakeUserAction.d.ts +3 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/internal/ThemeShowcase/ThemeShowcase.md +13 -13
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/icons/16px/BaseIcon/BaseIcon.js +28 -0
- package/internal/icons/16px/BaseIcon/BaseIcon.js.map +1 -0
- package/internal/icons/16px/BaseIcon/package.json +6 -0
- package/internal/icons/16px/BaseIcon.d.ts +8 -0
- package/internal/icons/16px/index/index.js +19 -5
- package/internal/icons/16px/index/index.js.map +1 -1
- package/internal/icons/16px/index.d.ts +3 -0
- package/internal/themes/DefaultTheme/DefaultTheme.js +119 -2
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +41 -0
- package/internal/themes/Theme2022/Theme2022.js +90 -4
- package/internal/themes/Theme2022/Theme2022.js.map +1 -1
- package/internal/themes/Theme2022.d.ts +60 -4
- package/internal/themes/Theme2022Dark/Theme2022Dark.js +9 -0
- package/internal/themes/Theme2022Dark/Theme2022Dark.js.map +1 -1
- package/internal/themes/Theme2022Dark.d.ts +9 -0
- package/lib/theming/ThemeHelpers/ThemeHelpers.js +14 -0
- package/lib/theming/ThemeHelpers/ThemeHelpers.js.map +1 -1
- package/lib/theming/ThemeHelpers.d.ts +3 -0
- package/lib/theming/themes/Theme2022/Theme2022.js +2 -1
- package/lib/theming/themes/Theme2022/Theme2022.js.map +1 -1
- package/package.json +3 -5
- package/typings/utility-types.d.ts +1 -1
|
@@ -12,7 +12,11 @@ import { Spinner } from "../../Spinner";
|
|
|
12
12
|
import { CommonWrapper } from "../../../internal/CommonWrapper";
|
|
13
13
|
import { cx } from "../../../lib/theming/Emotion";
|
|
14
14
|
import { rootNode } from "../../../lib/rootNode";
|
|
15
|
+
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
|
|
15
16
|
import { createPropsGetter } from "../../../lib/createPropsGetter";
|
|
17
|
+
import { hasFakeUserAction } from "../../../internal/FakeUserActions/hasFakeUserAction";
|
|
18
|
+
import { ArrowALeftIcon, ArrowARightIcon } from "../../../internal/icons/16px";
|
|
19
|
+
import { getThemeName } from "../../../lib/theming/ThemeHelpers";
|
|
16
20
|
import { styles, activeStyles, globalClasses } from "../Button.styles";
|
|
17
21
|
export var ButtonDataTids = {
|
|
18
22
|
root: 'Button__root'
|
|
@@ -109,7 +113,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
109
113
|
var _this2 = this;
|
|
110
114
|
|
|
111
115
|
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
|
|
112
|
-
_this2.theme = theme;
|
|
116
|
+
_this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
|
|
113
117
|
return _this2.renderMain();
|
|
114
118
|
});
|
|
115
119
|
};
|
|
@@ -147,14 +151,15 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
147
151
|
type = _this$getProps.type;
|
|
148
152
|
|
|
149
153
|
var sizeClass = this.getSizeClassName();
|
|
150
|
-
var isFocused = this.state.focusedByTab || visuallyFocused;
|
|
154
|
+
var isFocused = this.state.focusedByTab || visuallyFocused || hasFakeUserAction(this, 'focus');
|
|
151
155
|
var isLink = use === 'link';
|
|
156
|
+
var isTheme2022 = getThemeName(this.theme) === 'THEME_2022';
|
|
152
157
|
var rootProps = {
|
|
153
158
|
// By default the type attribute is 'submit'. IE8 will fire a click event
|
|
154
159
|
// on this button if somewhere on the page user presses Enter while some
|
|
155
160
|
// input is focused. So we set type to 'button' by default.
|
|
156
161
|
type: type,
|
|
157
|
-
className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles[use](this.theme)] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[styles.focus(this.theme)] = isFocused, _cx[styles.checked(this.theme)] = checked, _cx[styles.checkedFocused(this.theme)] = checked && isFocused, _cx[styles.disabled(this.theme)] = disabled || loading, _cx[styles.checkedDisabled(this.theme)] = checked && disabled, _cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[styles.narrow()] = narrow, _cx[styles.noPadding()] = _noPadding, _cx[styles.noRightPadding()] = _noRightPadding, _cx)),
|
|
162
|
+
className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.simulatedPress()] = !isTheme2022, _cx[styles[use](this.theme)] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[styles.focus(this.theme)] = isFocused, _cx[styles.checked(this.theme)] = checked && !disabled, _cx[styles.checkedFocused(this.theme)] = checked && isFocused && !disabled, _cx[styles.disabled(this.theme)] = disabled || loading, _cx[styles.checkedDisabled(this.theme)] = checked && disabled, _cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[styles.narrow()] = narrow, _cx[styles.noPadding()] = _noPadding, _cx[styles.noRightPadding()] = _noRightPadding, _cx)),
|
|
158
163
|
style: _extends({
|
|
159
164
|
textAlign: align
|
|
160
165
|
}, corners),
|
|
@@ -170,7 +175,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
170
175
|
title: this.props.title
|
|
171
176
|
};
|
|
172
177
|
var wrapProps = {
|
|
173
|
-
className: cx((_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[styles.wrapArrow()] = arrow === true, _cx2[styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)),
|
|
178
|
+
className: cx((_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[styles.wrapArrow()] = arrow === true && use !== 'text' && use !== 'backless', _cx2[styles.wrapArrowLeft()] = arrow === 'left' && use !== 'text' && use !== 'backless', _cx2[this.getSizeWrapClassName()] = true, _cx2)),
|
|
174
179
|
style: {
|
|
175
180
|
width: width
|
|
176
181
|
}
|
|
@@ -208,23 +213,43 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
208
213
|
|
|
209
214
|
var arrowNode = null;
|
|
210
215
|
|
|
211
|
-
if (arrow) {
|
|
216
|
+
if (arrow && use !== 'text' && use !== 'backless') {
|
|
212
217
|
var _cx5;
|
|
213
218
|
|
|
214
219
|
arrowNode = /*#__PURE__*/React.createElement("div", {
|
|
215
|
-
className: cx((_cx5 = {}, _cx5[styles.arrow()] = true, _cx5[styles.arrowWarning(this.theme)] = !checked && warning, _cx5[styles.arrowError(this.theme)] = !checked && error, _cx5[styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[styles.arrowLeft()] = arrow === 'left', _cx5))
|
|
220
|
+
className: cx((_cx5 = {}, _cx5[styles.arrow()] = true, _cx5[styles.arrowWarning(this.theme)] = !checked && warning && !disabled, _cx5[styles.arrowError(this.theme)] = !checked && error && !disabled, _cx5[styles.arrowFocus(this.theme)] = !checked && isFocused && !disabled, _cx5[styles.arrowLeft()] = arrow === 'left', _cx5))
|
|
216
221
|
}, /*#__PURE__*/React.createElement("div", {
|
|
217
222
|
className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)
|
|
218
223
|
}), /*#__PURE__*/React.createElement("div", {
|
|
219
224
|
className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)
|
|
220
225
|
}));
|
|
226
|
+
|
|
227
|
+
if (isTheme2022) {
|
|
228
|
+
var sizeIcon = this.theme.btnIconSizeSmall;
|
|
229
|
+
|
|
230
|
+
if (this.props.size === 'medium') {
|
|
231
|
+
sizeIcon = this.theme.btnIconSizeMedium;
|
|
232
|
+
} else if (this.props.size === 'large') {
|
|
233
|
+
sizeIcon = this.theme.btnIconSizeLarge;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
rootProps.className = cx(rootProps.className, this.getRootWithArrowIconClassName());
|
|
237
|
+
var arrowIcon = arrow === 'left' ? /*#__PURE__*/React.createElement(ArrowALeftIcon, {
|
|
238
|
+
size: parseInt(sizeIcon)
|
|
239
|
+
}) : /*#__PURE__*/React.createElement(ArrowARightIcon, {
|
|
240
|
+
size: parseInt(sizeIcon)
|
|
241
|
+
});
|
|
242
|
+
arrowNode = /*#__PURE__*/React.createElement("div", {
|
|
243
|
+
className: this.getArrowIconRootClassName()
|
|
244
|
+
}, arrowIcon);
|
|
245
|
+
}
|
|
221
246
|
} // Force disable all props and features, that cannot be use with Link
|
|
222
247
|
|
|
223
248
|
|
|
224
249
|
if (isLink) {
|
|
225
250
|
var _cx6;
|
|
226
251
|
|
|
227
|
-
rootProps.className = cx((_cx6 = {}, _cx6[styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[
|
|
252
|
+
rootProps.className = cx((_cx6 = {}, _cx6[styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[this.getLinkClassName(isFocused, Boolean(disabled || loading))] = true, _cx6));
|
|
228
253
|
Object.assign(wrapProps, {
|
|
229
254
|
className: cx(styles.wrap(this.theme), styles.wrapLink()),
|
|
230
255
|
style: {
|
|
@@ -243,7 +268,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
243
268
|
}, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/React.createElement("div", {
|
|
244
269
|
className: cx(styles.caption(), globalClasses.caption, (_cx7 = {}, _cx7[styles.captionTranslated()] = active || checked, _cx7[styles.captionLink()] = isLink, _cx7[styles.captionDisabled()] = !checked && disabled, _cx7))
|
|
245
270
|
}, iconNode, /*#__PURE__*/React.createElement("span", {
|
|
246
|
-
className: cx((_cx8 = {}, _cx8[styles.visibilityHidden()] = !!loadingNode, _cx8))
|
|
271
|
+
className: cx(globalClasses.text, (_cx8 = {}, _cx8[styles.visibilityHidden()] = !!loadingNode, _cx8))
|
|
247
272
|
}, children)))));
|
|
248
273
|
};
|
|
249
274
|
|
|
@@ -260,14 +285,14 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
260
285
|
|
|
261
286
|
switch (this.getProps().size) {
|
|
262
287
|
case 'large':
|
|
263
|
-
return cx(styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx9));
|
|
288
|
+
return cx(styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx9[styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx9));
|
|
264
289
|
|
|
265
290
|
case 'medium':
|
|
266
|
-
return cx(styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx10));
|
|
291
|
+
return cx(styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx10[styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx10));
|
|
267
292
|
|
|
268
293
|
case 'small':
|
|
269
294
|
default:
|
|
270
|
-
return cx(styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx11));
|
|
295
|
+
return cx(styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx11[styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx11));
|
|
271
296
|
}
|
|
272
297
|
};
|
|
273
298
|
|
|
@@ -299,6 +324,31 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
|
|
|
299
324
|
}
|
|
300
325
|
};
|
|
301
326
|
|
|
327
|
+
_proto.getLinkClassName = function getLinkClassName(focused, disabled) {
|
|
328
|
+
var _cx12, _cx13;
|
|
329
|
+
|
|
330
|
+
var isBorderBottom = parseInt(this.theme.btnLinkLineBorderBottomWidth) > 0;
|
|
331
|
+
return !isBorderBottom ? cx(styles.link(this.theme), (_cx12 = {}, _cx12[styles.linkFocus(this.theme)] = focused, _cx12[styles.linkDisabled(this.theme)] = disabled, _cx12)) : cx(styles.link(this.theme), styles.linkLine(this.theme), (_cx13 = {}, _cx13[styles.linkLineFocus(this.theme)] = focused, _cx13[styles.linkLineDisabled(this.theme)] = disabled, _cx13));
|
|
332
|
+
};
|
|
333
|
+
|
|
334
|
+
_proto.getRootWithArrowIconClassName = function getRootWithArrowIconClassName() {
|
|
335
|
+
var _cx14;
|
|
336
|
+
|
|
337
|
+
var _this$props2 = this.props,
|
|
338
|
+
arrow = _this$props2.arrow,
|
|
339
|
+
size = _this$props2.size;
|
|
340
|
+
return cx((_cx14 = {}, _cx14[styles.withArrowIconRightSmall(this.theme)] = arrow !== 'left' && size === 'small', _cx14[styles.withArrowIconRightMedium(this.theme)] = arrow !== 'left' && size === 'medium', _cx14[styles.withArrowIconRightLarge(this.theme)] = arrow !== 'left' && size === 'large', _cx14[styles.withArrowIconLeftSmall(this.theme)] = arrow === 'left' && size === 'small', _cx14[styles.withArrowIconLeftMedium(this.theme)] = arrow === 'left' && size === 'medium', _cx14[styles.withArrowIconLeftLarge(this.theme)] = arrow === 'left' && size === 'large', _cx14));
|
|
341
|
+
};
|
|
342
|
+
|
|
343
|
+
_proto.getArrowIconRootClassName = function getArrowIconRootClassName() {
|
|
344
|
+
var _cx15;
|
|
345
|
+
|
|
346
|
+
var _this$props3 = this.props,
|
|
347
|
+
arrow = _this$props3.arrow,
|
|
348
|
+
size = _this$props3.size;
|
|
349
|
+
return cx(styles.arrowIconRoot(), (_cx15 = {}, _cx15[styles.arrowIconRootSmall(this.theme)] = size === 'small', _cx15[styles.arrowIconRootMedium(this.theme)] = size === 'medium', _cx15[styles.arrowIconRootLarge(this.theme)] = size === 'large', _cx15[styles.arrowIconLeft()] = arrow === 'left', _cx15));
|
|
350
|
+
};
|
|
351
|
+
|
|
302
352
|
return Button;
|
|
303
353
|
}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
|
|
304
354
|
use: 'default',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.tsx"],"names":["React","isReactUIComponent","isIE11","isEdge","keyListener","ThemeContext","Spinner","CommonWrapper","cx","rootNode","createPropsGetter","styles","activeStyles","globalClasses","ButtonDataTids","root","Button","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps extends CommonProps {\n /** @ignore */\n _noPadding?: boolean;\n\n /** @ignore */\n _noRightPadding?: boolean;\n\n /**\n * Применяет к кнопке стили псевдокласса `:active`.\n */\n active?: boolean;\n\n /**\n * CSS-свойство `text-align`.\n */\n align?: React.CSSProperties['textAlign'];\n\n /**\n * Превращает обычную кнопку в кнопку со стрелкой.\n */\n arrow?: boolean | 'left';\n\n /**\n * Даёт кнопке фокус после окончания загрузки страницы.\n */\n autoFocus?: boolean;\n\n /**\n * Убирает обводку у кнопки.\n */\n borderless?: boolean;\n\n /**\n * @ignore\n */\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /**\n * Отключенное состояние кнопки.\n */\n disabled?: boolean;\n\n /** @ignore */\n disableFocus?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Иконка слева от текста кнопки.\n */\n icon?: React.ReactElement<any>;\n\n /**\n * Переводит кнопку в состояние загрузки.\n */\n loading?: boolean;\n\n /**\n * Сужает кнопку.\n */\n narrow?: boolean;\n\n /**\n * HTML-событие `onblur`.\n */\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onclick`.\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onfocus`.\n */\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `keydown`.\n */\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseover`.\n */\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Задаёт размер кнопки.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: ButtonSize;\n\n /**\n * HTML-атрибут `type`.\n */\n type?: ButtonType;\n\n /**\n * HTML-атрибут `title`.\n */\n title?: string;\n\n /**\n * Стиль кнопки.\n *\n * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n */\n use?: ButtonUse;\n\n /** @ignore */\n visuallyFocused?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * CSS-свойство `width`.\n */\n width?: number | string;\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading || props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /**\n * @public\n */\n public focus() {\n this.node?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab || visuallyFocused;\n const isLink = use === 'link';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles[use](this.theme)]: true,\n [activeStyles[use](this.theme)]: active,\n [sizeClass]: true,\n [styles.focus(this.theme)]: isFocused,\n [styles.checked(this.theme)]: checked,\n [styles.checkedFocused(this.theme)]: checked && isFocused,\n [styles.disabled(this.theme)]: disabled || loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled || loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true,\n [styles.wrapArrowLeft()]: arrow === 'left',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused || isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow) {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning,\n [styles.arrowError(this.theme)]: !checked && error,\n [styles.arrowFocus(this.theme)]: !checked && isFocused,\n [styles.arrowLeft()]: arrow === 'left',\n })}\n >\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n </div>\n );\n }\n\n // Force disable all props and features, that cannot be use with Link\n if (isLink) {\n rootProps.className = cx({\n [styles.root(this.theme)]: true,\n [sizeClass]: true,\n [styles.link(this.theme)]: true,\n [styles.linkFocus(this.theme)]: isFocused,\n [styles.linkDisabled(this.theme)]: disabled || loading,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active || checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!this.props.disabled && !this.props.disableFocus) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n this.props.onFocus?.(e);\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n this.setState({ focusedByTab: false });\n if (!this.props.disabled && !this.props.disableFocus) {\n this.props.onBlur?.(e);\n }\n };\n\n private _ref = (node: HTMLButtonElement | null) => {\n this.node = node;\n };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
|
|
1
|
+
{"version":3,"sources":["Button.tsx"],"names":["React","isReactUIComponent","isIE11","isEdge","keyListener","ThemeContext","Spinner","CommonWrapper","cx","rootNode","ThemeFactory","createPropsGetter","hasFakeUserAction","ArrowALeftIcon","ArrowARightIcon","getThemeName","styles","activeStyles","globalClasses","ButtonDataTids","root","Button","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","create","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","isTheme2022","rootProps","className","simulatedPress","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","sizeIcon","btnIconSizeSmall","size","btnIconSizeMedium","btnIconSizeLarge","getRootWithArrowIconClassName","arrowIcon","parseInt","getArrowIconRootClassName","getLinkClassName","Boolean","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","text","visibilityHidden","sizeLarge","sizeLargeIE11","sizeLargeWithIcon","sizeMedium","sizeMediumIE11","sizeMediumWithIcon","sizeSmall","sizeSmallIE11","sizeSmallWithIcon","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","focused","isBorderBottom","btnLinkLineBorderBottomWidth","link","linkFocus","linkDisabled","linkLine","linkLineFocus","linkLineDisabled","withArrowIconRightSmall","withArrowIconRightMedium","withArrowIconRightLarge","withArrowIconLeftSmall","withArrowIconLeftMedium","withArrowIconLeftLarge","arrowIconRoot","arrowIconRootSmall","arrowIconRootMedium","arrowIconRootLarge","arrowIconLeft","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { hasFakeUserAction } from '../../internal/FakeUserActions/hasFakeUserAction';\nimport { ArrowALeftIcon, ArrowARightIcon } from '../../internal/icons/16px';\nimport { getThemeName } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';\n\nexport interface ButtonProps extends CommonProps {\n /** @ignore */\n _noPadding?: boolean;\n\n /** @ignore */\n _noRightPadding?: boolean;\n\n /**\n * Применяет к кнопке стили псевдокласса `:active`.\n */\n active?: boolean;\n\n /**\n * CSS-свойство `text-align`.\n */\n align?: React.CSSProperties['textAlign'];\n\n /**\n * Превращает обычную кнопку в кнопку со стрелкой.\n */\n arrow?: boolean | 'left';\n\n /**\n * Даёт кнопке фокус после окончания загрузки страницы.\n */\n autoFocus?: boolean;\n\n /**\n * Убирает обводку у кнопки.\n */\n borderless?: boolean;\n\n /**\n * Убирает фон у кнопки.\n */\n backless?: boolean;\n\n /**\n * @ignore\n */\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /** @ignore */\n corners?: React.CSSProperties;\n\n /**\n * Отключенное состояние кнопки.\n */\n disabled?: boolean;\n\n /** @ignore */\n disableFocus?: boolean;\n\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n /**\n * Иконка слева от текста кнопки.\n */\n icon?: React.ReactElement<any>;\n\n /**\n * Переводит кнопку в состояние загрузки.\n */\n loading?: boolean;\n\n /**\n * Сужает кнопку.\n */\n narrow?: boolean;\n\n /**\n * HTML-событие `onblur`.\n */\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onclick`.\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onfocus`.\n */\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `keydown`.\n */\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseenter`.\n */\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `mouseleave`.\n */\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * HTML-событие `onmouseover`.\n */\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /**\n * Задаёт размер кнопки.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: ButtonSize;\n\n /**\n * HTML-атрибут `type`.\n */\n type?: ButtonType;\n\n /**\n * HTML-атрибут `title`.\n */\n title?: string;\n\n /**\n * Стиль кнопки.\n *\n * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n */\n use?: ButtonUse;\n\n /** @ignore */\n visuallyFocused?: boolean;\n\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n /**\n * CSS-свойство `width`.\n */\n width?: number | string;\n theme?: ThemeIn;\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading || props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /**\n * @public\n */\n public focus() {\n this.node?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab || visuallyFocused || hasFakeUserAction(this, 'focus');\n const isLink = use === 'link';\n const isTheme2022 = getThemeName(this.theme) === 'THEME_2022';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles.simulatedPress()]: !isTheme2022,\n [styles[use](this.theme)]: true,\n [activeStyles[use](this.theme)]: active,\n [sizeClass]: true,\n [styles.focus(this.theme)]: isFocused,\n [styles.checked(this.theme)]: checked && !disabled,\n [styles.checkedFocused(this.theme)]: checked && isFocused && !disabled,\n [styles.disabled(this.theme)]: disabled || loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled || loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true && use !== 'text' && use !== 'backless',\n [styles.wrapArrowLeft()]: arrow === 'left' && use !== 'text' && use !== 'backless',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused || isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow && use !== 'text' && use !== 'backless') {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning && !disabled,\n [styles.arrowError(this.theme)]: !checked && error && !disabled,\n [styles.arrowFocus(this.theme)]: !checked && isFocused && !disabled,\n [styles.arrowLeft()]: arrow === 'left',\n })}\n >\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n </div>\n );\n\n if (isTheme2022) {\n let sizeIcon = this.theme.btnIconSizeSmall;\n if (this.props.size === 'medium') {\n sizeIcon = this.theme.btnIconSizeMedium;\n } else if (this.props.size === 'large') {\n sizeIcon = this.theme.btnIconSizeLarge;\n }\n rootProps.className = cx(rootProps.className, this.getRootWithArrowIconClassName());\n const arrowIcon =\n arrow === 'left' ? (\n <ArrowALeftIcon size={parseInt(sizeIcon)} />\n ) : (\n <ArrowARightIcon size={parseInt(sizeIcon)} />\n );\n arrowNode = <div className={this.getArrowIconRootClassName()}>{arrowIcon}</div>;\n }\n }\n\n // Force disable all props and features, that cannot be use with Link\n if (isLink) {\n rootProps.className = cx({\n [styles.root(this.theme)]: true,\n [sizeClass]: true,\n [this.getLinkClassName(isFocused, Boolean(disabled || loading))]: true,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active || checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span\n className={cx(globalClasses.text, {\n [styles.visibilityHidden()]: !!loadingNode,\n })}\n >\n {children}\n </span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), {\n [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge,\n [styles.sizeLargeWithIcon(this.theme)]: !!this.props.icon,\n });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), {\n [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge,\n [styles.sizeMediumWithIcon(this.theme)]: !!this.props.icon,\n });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), {\n [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge,\n [styles.sizeSmallWithIcon(this.theme)]: !!this.props.icon,\n });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private getLinkClassName(focused: boolean, disabled: boolean): string {\n const isBorderBottom = parseInt(this.theme.btnLinkLineBorderBottomWidth) > 0;\n\n return !isBorderBottom\n ? cx(styles.link(this.theme), {\n [styles.linkFocus(this.theme)]: focused,\n [styles.linkDisabled(this.theme)]: disabled,\n })\n : cx(styles.link(this.theme), styles.linkLine(this.theme), {\n [styles.linkLineFocus(this.theme)]: focused,\n [styles.linkLineDisabled(this.theme)]: disabled,\n });\n }\n\n private getRootWithArrowIconClassName() {\n const { arrow, size } = this.props;\n return cx({\n [styles.withArrowIconRightSmall(this.theme)]: arrow !== 'left' && size === 'small',\n [styles.withArrowIconRightMedium(this.theme)]: arrow !== 'left' && size === 'medium',\n [styles.withArrowIconRightLarge(this.theme)]: arrow !== 'left' && size === 'large',\n [styles.withArrowIconLeftSmall(this.theme)]: arrow === 'left' && size === 'small',\n [styles.withArrowIconLeftMedium(this.theme)]: arrow === 'left' && size === 'medium',\n [styles.withArrowIconLeftLarge(this.theme)]: arrow === 'left' && size === 'large',\n });\n }\n\n private getArrowIconRootClassName() {\n const { arrow, size } = this.props;\n return cx(styles.arrowIconRoot(), {\n [styles.arrowIconRootSmall(this.theme)]: size === 'small',\n [styles.arrowIconRootMedium(this.theme)]: size === 'medium',\n [styles.arrowIconRootLarge(this.theme)]: size === 'large',\n [styles.arrowIconLeft()]: arrow === 'left',\n });\n }\n\n private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!this.props.disabled && !this.props.disableFocus) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n this.props.onFocus?.(e);\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n this.setState({ focusedByTab: false });\n if (!this.props.disabled && !this.props.disableFocus) {\n this.props.onBlur?.(e);\n }\n };\n\n private _ref = (node: HTMLButtonElement | null) => {\n this.node = node;\n };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ThemeIn } from '../../lib/theming/Theme';
|
|
2
3
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
3
4
|
export declare type ButtonSize = 'small' | 'medium' | 'large';
|
|
4
5
|
export declare type ButtonType = 'button' | 'submit' | 'reset';
|
|
5
|
-
export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
|
|
6
|
+
export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
|
|
6
7
|
export interface ButtonProps extends CommonProps {
|
|
7
8
|
/** @ignore */
|
|
8
9
|
_noPadding?: boolean;
|
|
@@ -28,6 +29,10 @@ export interface ButtonProps extends CommonProps {
|
|
|
28
29
|
* Убирает обводку у кнопки.
|
|
29
30
|
*/
|
|
30
31
|
borderless?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Убирает фон у кнопки.
|
|
34
|
+
*/
|
|
35
|
+
backless?: boolean;
|
|
31
36
|
/**
|
|
32
37
|
* @ignore
|
|
33
38
|
*/
|
|
@@ -115,6 +120,7 @@ export interface ButtonProps extends CommonProps {
|
|
|
115
120
|
* CSS-свойство `width`.
|
|
116
121
|
*/
|
|
117
122
|
width?: number | string;
|
|
123
|
+
theme?: ThemeIn;
|
|
118
124
|
}
|
|
119
125
|
export interface ButtonState {
|
|
120
126
|
focusedByTab: boolean;
|
|
@@ -152,6 +158,9 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
|
|
|
152
158
|
private getSizeClassName;
|
|
153
159
|
private getSizeIconClassName;
|
|
154
160
|
private getSizeWrapClassName;
|
|
161
|
+
private getLinkClassName;
|
|
162
|
+
private getRootWithArrowIconClassName;
|
|
163
|
+
private getArrowIconRootClassName;
|
|
155
164
|
private handleFocus;
|
|
156
165
|
private handleBlur;
|
|
157
166
|
private _ref;
|
|
@@ -42,10 +42,10 @@ export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackground
|
|
|
42
42
|
};
|
|
43
43
|
export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth) {
|
|
44
44
|
var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
|
|
45
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n
|
|
45
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n background-image: ", ";\n box-shadow: 0 0 0 ", " ", "", ";\n\n .", " {\n box-shadow: ", " 0 0 ", ";\n }\n "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
|
|
46
46
|
};
|
|
47
47
|
export var buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage) {
|
|
48
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n background-image: none;\n
|
|
48
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n &,\n &:hover {\n background-image: none;\n background-color: ", ";\n box-shadow: 0 0 0 ", " ", "", ";\n\n .", " {\n box-shadow: ", ";\n }\n\n .", " {\n box-shadow: ", " 0 0 ", ";\n\n &.", " {\n background-image: ", ";\n }\n }\n }\n "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
|
|
49
49
|
};
|
|
50
50
|
export var buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
|
|
51
51
|
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n box-sizing: border-box;\n padding: ", ";\n line-height: ", ";\n "])), fontSize, getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation), lineHeight);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"8MAAA,SAASA,GAAT,QAAoB,2BAApB;AACA,SAASC,KAAT,QAAsB,qCAAtB;;AAEA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AACpBC,QADoB;AAEpBC,QAFoB;AAGpBC,QAHoB;AAIpBC,sBAJoB;AAKpBC,gBALoB;AAMT,KADXA,gBACW,cADXA,gBACW,GADQ,CACR;AACX,MAAIC,UAAU,GAAGJ,QAAjB;AACA,MAAIK,aAAa,GAAGL,QAApB;AACA,MAAMM,MAAM,GAAGC,QAAQ,CAACL,sBAAD,CAAR,IAAoC,CAAnD;;AAEA,MAAMM,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD,EAAcC,MAAd,EAA8BJ,MAA9B,EAAiD;AAC/D,WAAO,CAACV,KAAK,CAACa,GAAD,OAAS,CAACH,MAAV,CAAN,EAA2BV,KAAK,CAACc,MAAD,OAAYJ,MAAZ,CAAhC,CAAP;AACD,GAFD;;AAIA,MAAIP,QAAQ,KAAK,MAAb,IAAuBO,MAA3B,EAAmC;AACHE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BC,MAA5B,CADJ,CAChCF,UADgC,eACpBC,aADoB;AAElC;AACD,MAAIF,gBAAgB,IAAIG,MAAxB,EAAgC;AACAE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BF,gBAA5B,CADP,CAC7BC,UAD6B,gBACjBC,aADiB;AAE/B;;AAED,SAAUD,UAAV,SAAwBH,QAAxB,SAAoCI,aAApC;AACD,CAvBD;;AAyBA,OAAO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,kBAF4B;AAG5BC,gBAH4B;AAI5BC,KAJ4B;AAK5BC,WAL4B;AAM5BC,iBAN4B;AAO5BC,WAP4B;AAQzB;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,SAAOnB,GAAP;AACsBwB,EAAAA,WAAW,eAAeP,aADhD;AAEsBO,EAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAFjC;AAGWC,EAAAA,KAHX;AAIsBG,EAAAA,WAJtB,EAIqCF,WAJrC,EAImDC,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KAJpE;;AAMKpB,EAAAA,aAAa,CAACuB,WANnB;AAOkBF,EAAAA,WAPlB,EAOuCF,WAPvC;;;AAUD,CApBM;;AAsBP,OAAO,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC9BT,aAD8B;AAE9BC,kBAF8B;AAG9BC,gBAH8B;AAI9BE,WAJ8B;AAK9BC,iBAL8B;AAM9BC,WAN8B;AAO3B;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,SAAOnB,GAAP
|
|
1
|
+
{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n fontSize: string,\n paddingY: string,\n paddingX: string,\n fontFamilyCompensation: string,\n additionalOffset = 0,\n): string => {\n let paddingTop = paddingY;\n let paddingBottom = paddingY;\n const offset = parseInt(fontFamilyCompensation) || 0;\n\n const shiftUp = (top: string, bottom: string, offset: number) => {\n return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n };\n\n if (fontSize === '16px' && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n }\n if (additionalOffset && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n }\n\n return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n color: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n color: ${color};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n }\n `;\n};\n\nexport const buttonHoverMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n }\n `;\n};\n\nexport const buttonActiveMixin = (\n btnBackground: string,\n btnShadow: string,\n borderColor: string,\n borderTopColor: string,\n borderWidth: string,\n arrowBgImage: string,\n) => {\n return css`\n &,\n &:hover {\n background-image: none;\n background-color: ${btnBackground};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n .${globalClasses.innerShadow} {\n box-shadow: ${btnShadow};\n }\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n &.${globalClasses.arrowHelperTop} {\n background-image: ${arrowBgImage};\n }\n }\n }\n `;\n};\n\nexport const buttonSizeMixin = (\n fontSize: string,\n lineHeight: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n font-size: ${fontSize};\n box-sizing: border-box;\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n line-height: ${lineHeight};\n `;\n};\n\nexport const buttonSizeMixinIE11 = (\n fontSize: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n line-height: normal;\n `;\n};\n\nexport const arrowOutlineMixin = (\n insetWidth: string,\n outlineColor: string,\n outlineWidth: string,\n insetColor: string,\n) => {\n return css`\n .${globalClasses.arrowHelper} {\n &.${globalClasses.arrowHelperTop} {\n box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n &.${globalClasses.arrowHelperBottom} {\n box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n // don't hide inner outline\n // and keep the middle-line fix\n &:before {\n top: ${insetWidth};\n right: ${insetWidth};\n left: ${insetWidth};\n }\n &.${globalClasses.arrowHelperBottom}:before {\n bottom: ${insetWidth};\n }\n }\n `;\n};\n"]}
|