From 7c8f3cd10971eb946ce5b12f6957169dfd17d22a Mon Sep 17 00:00:00 2001 From: Mikhail Shatikhin Date: Wed, 23 Oct 2024 10:08:49 +0500 Subject: [PATCH] fix: after rebase --- .../StyleGuideWrapper/StyleGuideWrapper.tsx | 8 +- .../components/Autocomplete/Autocomplete.tsx | 5 +- .../components/Button/Button.mixins.ts | 73 +- .../components/Button/Button.styles.ts | 1554 +++++++++-------- .../react-ui/components/Button/Button.tsx | 54 +- .../components/Button/ButtonArrow.tsx | 14 +- .../components/Button/ButtonIcon.styles.ts | 89 +- .../react-ui/components/Button/ButtonIcon.tsx | 9 +- .../components/Button/LoadingButtonIcon.tsx | 7 +- .../components/Calendar/CalendarDay.tsx | 10 +- .../components/Calendar/DayCellView.styles.ts | 2 + .../components/Calendar/DayCellView.tsx | 8 +- .../components/Calendar/MonthView.tsx | 8 +- .../react-ui/components/Checkbox/Checkbox.tsx | 4 +- .../components/DatePicker/DatePicker.tsx | 1 - .../DatePicker/MobilePicker.styles.ts | 15 +- .../components/DatePicker/MobilePicker.tsx | 6 +- .../components/FileUploader/FileUploader.tsx | 10 +- .../components/FxInput/FxInputRestoreBtn.tsx | 6 +- .../GlobalLoader/GlobalLoaderView.tsx | 10 +- packages/react-ui/components/Group/Group.tsx | 14 +- packages/react-ui/components/Hint/Hint.tsx | 47 +- packages/react-ui/components/Input/Input.tsx | 6 - .../Input/InputLayout/InputLayout.tsx | 6 +- .../Input/InputLayout/InputLayoutAside.tsx | 6 +- .../InputLayout/InputLayoutAsideIcon.tsx | 13 +- .../InputLayout/InputLayoutAsideText.tsx | 16 +- .../Input/InputLayout/PolyfillPlaceholder.tsx | 10 +- packages/react-ui/components/Kebab/Kebab.tsx | 1 - .../react-ui/components/Link/Link.styles.ts | 27 +- packages/react-ui/components/Link/Link.tsx | 35 +- .../react-ui/components/Link/LinkIcon.tsx | 10 +- .../ColorableInputElement.tsx | 5 +- .../components/MaskedInput/MaskedInput.tsx | 7 +- .../MenuFooter/MenuFooter.mixins.ts | 2 +- .../components/MenuFooter/MenuFooter.tsx | 10 +- .../MenuHeader/MenuHeader.mixins.ts | 2 +- .../components/MenuHeader/MenuHeader.tsx | 8 +- .../components/MenuItem/MenuItem.mixins.ts | 12 +- .../components/MenuItem/MenuItem.styles.ts | 8 +- .../react-ui/components/MenuItem/MenuItem.tsx | 42 +- .../MenuSeparator/MenuSeparator.tsx | 10 +- .../components/MiniModal/MiniModal.tsx | 5 +- .../components/MiniModal/MiniModalFooter.tsx | 10 +- .../components/MiniModal/MiniModalHeader.tsx | 10 +- .../components/MiniModal/MiniModalIndent.tsx | 10 +- .../react-ui/components/Modal/Modal.styles.ts | 2 +- .../react-ui/components/Modal/ModalClose.tsx | 10 +- .../react-ui/components/Modal/ModalFooter.tsx | 8 +- .../react-ui/components/Modal/ModalHeader.tsx | 8 +- .../components/Modal/ModalSeparator.tsx | 10 +- .../Modal/__stories__/Modal.stories.tsx | 5 +- .../components/RadioGroup/RadioGroup.tsx | 14 +- .../react-ui/components/Select/Select.tsx | 39 +- .../react-ui/components/SidePage/SidePage.tsx | 23 +- .../SidePage/SidePageCloseButton.tsx | 8 +- .../react-ui/components/Spinner/Spinner.tsx | 24 +- .../react-ui/components/Textarea/Textarea.tsx | 27 +- .../components/Textarea/TextareaCounter.tsx | 10 +- .../components/Toggle/Toggle.mixins.ts | 1 - .../components/Toggle/Toggle.styles.ts | 25 +- .../react-ui/components/Toggle/Toggle.tsx | 6 +- .../react-ui/components/Token/Token.styles.ts | 8 +- packages/react-ui/components/Token/Token.tsx | 3 +- .../react-ui/components/Token/TokenView.tsx | 10 +- .../components/TokenInput/TokenInput.tsx | 24 +- .../__stories__/sandbox.stories.tsx | 4 +- .../CloseButtonIcon/CloseButtonIcon.tsx | 10 +- .../internal/CustomComboBox/ComboBoxView.tsx | 1 - .../internal/DateSelect/DateSelect.tsx | 3 - .../FileUploaderFile/FileUploaderFile.tsx | 8 +- .../FileUploaderFileStatusIcon.tsx | 10 +- .../FileUploaderFileList.tsx | 8 +- .../HideBodyVerticalScroll.tsx | 6 +- .../internal/InputLikeText/InputLikeText.tsx | 14 - .../MaskCharLowLine/MaskCharLowLine.tsx | 6 +- .../react-ui/internal/Menu/Menu.styles.ts | 6 +- packages/react-ui/internal/Menu/Menu.tsx | 23 +- .../internal/MenuMessage/MenuMessage.tsx | 10 +- .../MobilePopupFooter.styles.ts | 17 +- .../MobilePopupFooter/MobilePopupFooter.tsx | 24 +- .../react-ui/internal/Popup/Popup.styles.ts | 18 +- packages/react-ui/internal/Popup/Popup.tsx | 4 +- .../RenderContainer/RenderContainer.tsx | 2 +- .../internal/RenderLayer/RenderLayer.tsx | 18 +- .../internal/SpinnerIcon/SpinnerIcon.tsx | 10 +- .../ThemePlayground/ComponentsGroup.tsx | 6 +- .../ThemePlayground/ShowcaseGroup.tsx | 6 +- .../internal/ThemePlayground/ThemeEditor.tsx | 6 +- .../internal/ThemeShowcase/ThemeShowcase.tsx | 21 +- .../react-ui/internal/icons2022/BaseIcon.tsx | 6 +- .../internal/icons2022/LoadingIcon.tsx | 10 +- packages/react-ui/lib/styles/Mixins.ts | 4 +- packages/react-ui/lib/theming/Emotion.ts | 5 +- packages/react-ui/lib/theming/useTheme.ts | 5 - .../__tests__/WidgetContainer-test.tsx | 3 +- 96 files changed, 1375 insertions(+), 1389 deletions(-) delete mode 100644 packages/react-ui/lib/theming/useTheme.ts diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx index 1674f452531..c38be3b8b78 100644 --- a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx +++ b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx @@ -1,15 +1,13 @@ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import Context from 'react-styleguidist/lib/client/rsg-components/Context'; import { useStyleGuideContext } from 'react-styleguidist/lib/client/rsg-components/Context/Context'; -import { useEmotion } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { getStyles } from './StyleGuideWrapper.styles'; import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher'; import { DARK_THEME } from '../../../lib/theming/themes/DarkTheme'; import { DEFAULT_THEME_WRAPPER } from '../ThemeSwitcher/constants'; -import { styles } from './StyleGuideWrapper.styles'; - interface StyleGuideRendererProps { children: React.ReactNode; hasSidebar: boolean; @@ -19,7 +17,7 @@ interface StyleGuideRendererProps { } function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: StyleGuideRendererProps) { - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const { codeRevision, config, slots, displayMode, cssRevision } = useStyleGuideContext(); const [theme, setTheme] = useState(DEFAULT_THEME_WRAPPER); document.body.style.fontFamily = 'Lab Grotesque, Roboto, Helvetica Neue, Arial, sans-serif'; diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx index 9f108202431..84d66e83449 100644 --- a/packages/react-ui/components/Autocomplete/Autocomplete.tsx +++ b/packages/react-ui/components/Autocomplete/Autocomplete.tsx @@ -6,7 +6,7 @@ import { MenuMessage } from '../../internal/MenuMessage'; import { locale } from '../../lib/locale/decorators'; import { getRandomID, isNullable } from '../../lib/utils'; import { Theme } from '../../lib/theming/Theme'; -import { cx } from '../../lib/theming/Emotion'; +import { EmotionConsumer } from '../../lib/theming/Emotion'; import { isKeyArrowDown, isKeyArrowUp, isKeyEnter, isKeyEscape } from '../../lib/events/keyboard/identifiers'; import { Input, InputProps } from '../Input'; import { Menu } from '../../internal/Menu'; @@ -23,7 +23,6 @@ import { getDOMRect } from '../../lib/dom/getDOMRect'; import { SizeProp } from '../../lib/types/props'; import { Popup } from '../../internal/Popup'; import { getMenuPositions } from '../../lib/getMenuPositions'; -import { EmotionConsumer } from '../../lib/theming/Emotion'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { ZIndex } from '../../internal/ZIndex'; @@ -264,7 +263,7 @@ export class Autocomplete extends React.Component { return `${paddingY} ${paddingX} ${paddingY}`; }; -export const buttonUseMixin = ( - btnBackground: string, - btnBackgroundStart: string, - btnBackgroundEnd: string, - color: string, - borderColor: string, - borderWidth: string, -) => { - const hasGradient = btnBackgroundStart !== btnBackgroundEnd; - return css` +export const buttonUseMixin = + (emotion: Emotion) => + ( + btnBackground: string, + btnBackgroundStart: string, + btnBackgroundEnd: string, + color: string, + borderColor: string, + borderWidth: string, + ) => { + const hasGradient = btnBackgroundStart !== btnBackgroundEnd; + return emotion.css` background-color: ${hasGradient ? `initial` : btnBackground}; background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`}; color: ${color}; @@ -28,32 +30,30 @@ export const buttonUseMixin = ( } } `; -}; + }; -export const buttonHoverMixin = ( - btnBackground: string, - btnBackgroundStart: string, - btnBackgroundEnd: string, - color: string, - borderColor: string, - borderWidth: string, -) => { - const hasGradient = btnBackgroundStart !== btnBackgroundEnd; - return css` +export const buttonHoverMixin = + (emotion: Emotion) => + ( + btnBackground: string, + btnBackgroundStart: string, + btnBackgroundEnd: string, + color: string, + borderColor: string, + borderWidth: string, + ) => { + const hasGradient = btnBackgroundStart !== btnBackgroundEnd; + return emotion.css` background-color: ${hasGradient ? `initial` : btnBackground}; background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`}; box-shadow: 0 0 0 ${borderWidth} ${borderColor}; color: ${color}; `; -}; + }; -export const buttonActiveMixin = ( - btnBackground: string, - btnShadow: string, - borderColor: string, - borderWidth: string, -) => { - return css` +export const buttonActiveMixin = + (emotion: Emotion) => (btnBackground: string, btnShadow: string, borderColor: string, borderWidth: string) => { + return emotion.css` &, &:hover { background-image: none !important; // override :hover styles @@ -65,19 +65,20 @@ export const buttonActiveMixin = ( } } `; -}; + }; -export const buttonSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => { - return css` +export const buttonSizeMixin = + (emotion: Emotion) => (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => { + return emotion.css` font-size: ${fontSize}; box-sizing: border-box; padding: ${getBtnPadding(paddingY, paddingX)}; line-height: ${lineHeight}; `; -}; + }; -export const buttonSizeMixinIE11 = (paddingX: string, paddingY: string) => { - return css` +export const buttonSizeMixinIE11 = (emotion: Emotion) => (paddingX: string, paddingY: string) => { + return emotion.css` padding: ${getBtnPadding(paddingY, paddingX)}; line-height: normal; `; diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index f6b86d0b383..8706644e7e8 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -1,4 +1,6 @@ -import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion'; +import type { Emotion } from '@emotion/css/create-instance'; + +import { memoizeStyle, prefix } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; import { resetButton, resetText, disableTextSelect } from '../../lib/styles/Mixins'; @@ -19,561 +21,566 @@ export const globalClasses = prefix('button')({ disabled: 'disabled', }); -export const styles = memoizeStyle({ - root(t: Theme) { - return css` - ${resetButton()}; - ${resetText()}; - ${disableTextSelect()}; - - transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction} - ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''}; - - background-clip: ${t.btnBackgroundClip}; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - cursor: pointer; - display: inline-block; - position: relative; - text-align: center; - width: 100%; - height: 100%; // fix height in ie11 - - .${globalClasses.innerShadow} { - content: ''; +export const getStyles = (emotion: Emotion) => + memoizeStyle({ + root(t: Theme) { + return emotion.css` + ${resetButton(emotion)}; + ${resetText(emotion)}; + ${disableTextSelect(emotion)}; + + transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction} + ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''}; + + background-clip: ${t.btnBackgroundClip}; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + display: inline-block; + position: relative; + text-align: center; + width: 100%; + height: 100%; // fix height in ie11 + + .${globalClasses.innerShadow} { + content: ''; + border-radius: inherit; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + &::-moz-focus-inner { + border: 0; + padding: 0; + } + &::after { + content: ''; + display: inline-block; + vertical-align: baseline; + width: 0; + } + + &:hover svg { + color: ${t.btnIconHoverColor}; + } + &.${globalClasses.disabled} svg { + color: ${t.btnIconDisabledColor}; + } + & svg { + color: ${t.btnIconColor}; + } + `; + }, + + withArrowIconRightSmall(t: Theme) { + return emotion.css` + padding-right: calc( + ${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall} + ); + `; + }, + + withArrowIconRightMedium(t: Theme) { + return emotion.css` + padding-right: calc( + ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium} + ); + `; + }, + + withArrowIconRightLarge(t: Theme) { + return emotion.css` + padding-right: calc( + ${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge} + ); + `; + }, + + withArrowIconLeftSmall(t: Theme) { + return emotion.css` + padding-left: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall}); + `; + }, + + withArrowIconLeftMedium(t: Theme) { + return emotion.css` + padding-left: calc( + ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium} + ); + `; + }, + + withArrowIconLeftLarge(t: Theme) { + return emotion.css` + padding-left: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge}); + `; + }, + + simulatedPress() { + return emotion.css` + &:active .${globalClasses.caption} { + transform: translateY(1px); + } + `; + }, + + outline() { + return emotion.css` border-radius: inherit; position: absolute; top: 0; bottom: 0; left: 0; right: 0; - } - - &::-moz-focus-inner { - border: 0; - padding: 0; - } - &::after { - content: ''; - display: inline-block; - vertical-align: baseline; - width: 0; - } - - &:hover svg { - color: ${t.btnIconHoverColor}; - } - &.${globalClasses.disabled} svg { - color: ${t.btnIconDisabledColor}; - } - & svg { - color: ${t.btnIconColor}; - } - `; - }, - - withArrowIconRightSmall(t: Theme) { - return css` - padding-right: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall}); - `; - }, - - withArrowIconRightMedium(t: Theme) { - return css` - padding-right: calc( - ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium} - ); - `; - }, - - withArrowIconRightLarge(t: Theme) { - return css` - padding-right: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge}); - `; - }, - - withArrowIconLeftSmall(t: Theme) { - return css` - padding-left: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall}); - `; - }, - - withArrowIconLeftMedium(t: Theme) { - return css` - padding-left: calc( - ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium} - ); - `; - }, - - withArrowIconLeftLarge(t: Theme) { - return css` - padding-left: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge}); - `; - }, - - simulatedPress() { - return css` - &:active .${globalClasses.caption} { - transform: translateY(1px); - } - `; - }, - - outline() { - return css` - border-radius: inherit; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - `; - }, - - outlineWarning(t: Theme) { - return css` - box-shadow: - 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorWarning}, - inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor}; - `; - }, - - outlineError(t: Theme) { - return css` - box-shadow: - 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorError}, - inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor}; - `; - }, - - outlineLink() { - return css` - box-shadow: none; - left: -2px; - right: -2px; - bottom: -2px; - top: -2px; - `; - }, - - outlineLinkWarning(t: Theme) { - return css` - background-color: ${t.btnWarningSecondary}; - `; - }, - - outlineLinkError(t: Theme) { - return css` - background-color: ${t.btnErrorSecondary}; - `; - }, - - sizeSmall(t: Theme) { - return css` - border-radius: ${t.btnBorderRadiusSmall}; - - ${buttonSizeMixin(t.btnFontSizeSmall, t.btnLineHeightSmall, t.btnPaddingXSmall, t.btnPaddingYSmall)}; - `; - }, - - sizeSmallIE11(t: Theme) { - return css` - ${buttonSizeMixinIE11(t.btnPaddingXSmall, t.btnPaddingYSmall)}; - `; - }, - - sizeMedium(t: Theme) { - return css` - border-radius: ${t.btnBorderRadiusMedium}; - - ${buttonSizeMixin(t.btnFontSizeMedium, t.btnLineHeightMedium, t.btnPaddingXMedium, t.btnPaddingYMedium)}; - `; - }, - - sizeMediumIE11(t: Theme) { - return css` - ${buttonSizeMixinIE11(t.btnPaddingXMedium, t.btnPaddingYMedium)}; - `; - }, - - sizeLarge(t: Theme) { - return css` - border-radius: ${t.btnBorderRadiusLarge}; - - ${buttonSizeMixin(t.btnFontSizeLarge, t.btnLineHeightLarge, t.btnPaddingXLarge, t.btnPaddingYLarge)}; - `; - }, - - sizeLargeIE11(t: Theme) { - return css` - ${buttonSizeMixinIE11(t.btnPaddingXLarge, t.btnPaddingYLarge)}; - `; - }, - - sizeSmallWithIcon(t: Theme) { - return css` - padding-left: ${t.btnWithIconPaddingLeftSmall}; - `; - }, + `; + }, - sizeMediumWithIcon(t: Theme) { - return css` - padding-left: ${t.btnWithIconPaddingLeftMedium}; - `; - }, - - sizeLargeWithIcon(t: Theme) { - return css` - padding-left: ${t.btnWithIconPaddingLeftLarge}; - `; - }, - - sizeSmallWithIconWithoutText(t: Theme) { - return css` - padding-right: ${t.btnWithIconPaddingLeftSmall}; - `; - }, - - sizeMediumWithIconWithoutText(t: Theme) { - return css` - padding-right: ${t.btnWithIconPaddingLeftMedium}; - `; - }, - - sizeLargeWithIconWithoutText(t: Theme) { - return css` - padding-right: ${t.btnWithIconPaddingLeftLarge}; - `; - }, - - link(t: Theme) { - return css` - background: none; - border-radius: ${t.btnLinkBorderRadius}; - border: none; - box-shadow: none; - white-space: nowrap; - color: ${t.btnLinkColor}; - display: inline; - margin: 0; - padding: 0 !important; // override size mixin - height: auto !important; // override size mixin - - &:hover:enabled, - &:active:enabled { - color: ${t.btnLinkHoverColor}; - text-decoration: ${t.btnLinkHoverTextDecoration}; - } - - &:active:enabled { - ${activeStyles.link(t)} - } - `; - }, - - linkLineHeight() { - return css` - line-height: inherit !important; // override size mixin - `; - }, - - linkLineHeightSafariFallback() { - return css` - /* Safari overrides 'underline' and 'border' if 'line-height' is used */ - margin: -1px 0 -2px; - `; - }, - - linkFocus(t: Theme) { - return css` - & { - color: ${t.btnLinkColor}; - text-decoration: ${t.btnLinkHoverTextDecoration}; - } - `; - }, - - linkDisabled(t: Theme) { - return css` - cursor: default; - - &, - &:hover:enabled, - &:active:enabled { - color: ${t.btnLinkDisabledColor}; - } - `; - }, - - focus(t: Theme) { - return css` - position: relative; - z-index: 2; - - &, - &:hover:enabled, - &:active:enabled, - &:active:hover:enabled { + outlineWarning(t: Theme) { + return emotion.css` box-shadow: - inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus}, - 0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; // override root:hover style - } - `; - }, - - disabled(t: Theme) { - return css` - cursor: default; - pointer-events: none; - box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor}; - - background-image: none; - background-color: ${t.btnDisabledBg}; - color: ${t.btnDisabledTextColor}; - `; - }, - - disabledWithoutOutline(t: Theme) { - return css` - box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBg}; - `; - }, - - arrowIconRoot() { - return css` - position: absolute; - height: 100%; - top: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; - box-sizing: content-box; - `; - }, - - arrowIconRootSmall(t: Theme) { - return css` - padding: 0 ${t.btnWithIconPaddingLeftSmall} 0 ${t.btnWithIconPaddingLeftSmall}; - width: ${t.btnIconSizeSmall}; - `; - }, - - arrowIconRootMedium(t: Theme) { - return css` - padding: 0 ${t.btnWithIconPaddingLeftMedium} 0 ${t.btnWithIconPaddingLeftMedium}; - width: ${t.btnIconSizeMedium}; - `; - }, - - arrowIconRootLarge(t: Theme) { - return css` - padding: 0 ${t.btnWithIconPaddingLeftLarge} 0 ${t.btnWithIconPaddingLeftLarge}; - width: ${t.btnIconSizeLarge}; - `; - }, + 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorWarning}, + inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor}; + `; + }, - arrowIconLeft() { - return css` - left: 0; - `; - }, - - default(t: Theme) { - return css` - ${buttonUseMixin( - t.btnDefaultBg, - t.btnDefaultBgStart, - t.btnDefaultBgEnd, - t.btnDefaultTextColor, - t.btnDefaultBorderColor, - t.btnBorderWidth, - )}; - - &:hover { - ${buttonHoverMixin( - t.btnDefaultHoverBg, - t.btnDefaultHoverBgStart, - t.btnDefaultHoverBgEnd, - t.btnDefaultHoverTextColor, - t.btnDefaultHoverBorderColor, - t.btnBorderWidth, - )}; - } - - &:active { - ${activeStyles.default(t)}; - } - `; - }, - - primary(t: Theme) { - return css` - ${buttonUseMixin( - t.btnPrimaryBg, - t.btnPrimaryBgStart, - t.btnPrimaryBgEnd, - t.btnPrimaryTextColor, - t.btnPrimaryBorderColor, - t.btnBorderWidth, - )}; - - &:hover { - ${buttonHoverMixin( - t.btnPrimaryHoverBg, - t.btnPrimaryHoverBgStart, - t.btnPrimaryHoverBgEnd, - t.btnPrimaryHoverTextColor, - t.btnPrimaryHoverBorderColor, - t.btnBorderWidth, - )}; - } + outlineError(t: Theme) { + return emotion.css` + box-shadow: + 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorError}, + inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor}; + `; + }, - &:active { - ${activeStyles.primary(t)} - } - `; - }, - - success(t: Theme) { - return css` - ${buttonUseMixin( - t.btnSuccessBg, - t.btnSuccessBgStart, - t.btnSuccessBgEnd, - t.btnSuccessTextColor, - t.btnSuccessBorderColor, - t.btnBorderWidth, - )}; - - &:hover { - ${buttonHoverMixin( - t.btnSuccessHoverBg, - t.btnSuccessHoverBgStart, - t.btnSuccessHoverBgEnd, - t.btnSuccessHoverTextColor, - t.btnSuccessHoverBorderColor, + outlineLink() { + return emotion.css` + box-shadow: none; + left: -2px; + right: -2px; + bottom: -2px; + top: -2px; + `; + }, + + outlineLinkWarning(t: Theme) { + return emotion.css` + background-color: ${t.btnWarningSecondary}; + `; + }, + + outlineLinkError(t: Theme) { + return emotion.css` + background-color: ${t.btnErrorSecondary}; + `; + }, + + sizeSmall(t: Theme) { + return emotion.css` + border-radius: ${t.btnBorderRadiusSmall}; + + ${buttonSizeMixin(emotion)(t.btnFontSizeSmall, t.btnLineHeightSmall, t.btnPaddingXSmall, t.btnPaddingYSmall)}; + `; + }, + + sizeSmallIE11(t: Theme) { + return emotion.css` + ${buttonSizeMixinIE11(emotion)(t.btnPaddingXSmall, t.btnPaddingYSmall)}; + `; + }, + + sizeMedium(t: Theme) { + return emotion.css` + border-radius: ${t.btnBorderRadiusMedium}; + + ${buttonSizeMixin(emotion)(t.btnFontSizeMedium, t.btnLineHeightMedium, t.btnPaddingXMedium, t.btnPaddingYMedium)}; + `; + }, + + sizeMediumIE11(t: Theme) { + return emotion.css` + ${buttonSizeMixinIE11(emotion)(t.btnPaddingXMedium, t.btnPaddingYMedium)}; + `; + }, + + sizeLarge(t: Theme) { + return emotion.css` + border-radius: ${t.btnBorderRadiusLarge}; + + ${buttonSizeMixin(emotion)(t.btnFontSizeLarge, t.btnLineHeightLarge, t.btnPaddingXLarge, t.btnPaddingYLarge)}; + `; + }, + + sizeLargeIE11(t: Theme) { + return emotion.css` + ${buttonSizeMixinIE11(emotion)(t.btnPaddingXLarge, t.btnPaddingYLarge)}; + `; + }, + + sizeSmallWithIcon(t: Theme) { + return emotion.css` + padding-left: ${t.btnWithIconPaddingLeftSmall}; + `; + }, + + sizeMediumWithIcon(t: Theme) { + return emotion.css` + padding-left: ${t.btnWithIconPaddingLeftMedium}; + `; + }, + + sizeLargeWithIcon(t: Theme) { + return emotion.css` + padding-left: ${t.btnWithIconPaddingLeftLarge}; + `; + }, + + sizeSmallWithIconWithoutText(t: Theme) { + return emotion.css` + padding-right: ${t.btnWithIconPaddingLeftSmall}; + `; + }, + + sizeMediumWithIconWithoutText(t: Theme) { + return emotion.css` + padding-right: ${t.btnWithIconPaddingLeftMedium}; + `; + }, + + sizeLargeWithIconWithoutText(t: Theme) { + return emotion.css` + padding-right: ${t.btnWithIconPaddingLeftLarge}; + `; + }, + + link(t: Theme) { + return emotion.css` + background: none; + border-radius: ${t.btnLinkBorderRadius}; + border: none; + box-shadow: none; + white-space: nowrap; + color: ${t.btnLinkColor}; + display: inline; + margin: 0; + padding: 0 !important; // override size mixin + height: auto !important; // override size mixin + + &:hover:enabled, + &:active:enabled { + color: ${t.btnLinkHoverColor}; + text-decoration: ${t.btnLinkHoverTextDecoration}; + } + + &:active:enabled { + ${getActiveStyles(emotion).link(t)} + } + `; + }, + + linkLineHeight() { + return emotion.css` + line-height: inherit !important; // override size mixin + `; + }, + + linkLineHeightSafariFallback() { + return emotion.css` + /* Safari overrides 'underline' and 'border' if 'line-height' is used */ + margin: -1px 0 -2px; + `; + }, + + linkFocus(t: Theme) { + return emotion.css` + & { + color: ${t.btnLinkColor}; + text-decoration: ${t.btnLinkHoverTextDecoration}; + } + `; + }, + + linkDisabled(t: Theme) { + return emotion.css` + cursor: default; + + &, + &:hover:enabled, + &:active:enabled { + color: ${t.btnLinkDisabledColor}; + } + `; + }, + + focus(t: Theme) { + return emotion.css` + position: relative; + z-index: 2; + + &, + &:hover:enabled, + &:active:enabled, + &:active:hover:enabled { + box-shadow: + inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus}, + 0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; // override root:hover style + } + `; + }, + + disabled(t: Theme) { + return emotion.css` + cursor: default; + pointer-events: none; + box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor}; + + background-image: none; + background-color: ${t.btnDisabledBg}; + color: ${t.btnDisabledTextColor}; + `; + }, + + disabledWithoutOutline(t: Theme) { + return emotion.css` + box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBg}; + `; + }, + + arrowIconRoot() { + return emotion.css` + position: absolute; + height: 100%; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + box-sizing: content-box; + `; + }, + + arrowIconRootSmall(t: Theme) { + return emotion.css` + padding: 0 ${t.btnWithIconPaddingLeftSmall} 0 ${t.btnWithIconPaddingLeftSmall}; + width: ${t.btnIconSizeSmall}; + `; + }, + + arrowIconRootMedium(t: Theme) { + return emotion.css` + padding: 0 ${t.btnWithIconPaddingLeftMedium} 0 ${t.btnWithIconPaddingLeftMedium}; + width: ${t.btnIconSizeMedium}; + `; + }, + + arrowIconRootLarge(t: Theme) { + return emotion.css` + padding: 0 ${t.btnWithIconPaddingLeftLarge} 0 ${t.btnWithIconPaddingLeftLarge}; + width: ${t.btnIconSizeLarge}; + `; + }, + + arrowIconLeft() { + return emotion.css` + left: 0; + `; + }, + + default(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)( + t.btnDefaultBg, + t.btnDefaultBgStart, + t.btnDefaultBgEnd, + t.btnDefaultTextColor, + t.btnDefaultBorderColor, t.btnBorderWidth, )}; - } - &:active { - ${activeStyles.success(t)} - } - `; - }, - - danger(t: Theme) { - return css` - ${buttonUseMixin( - t.btnDangerBg, - t.btnDangerBgStart, - t.btnDangerBgEnd, - t.btnDangerTextColor, - t.btnDangerBorderColor, - t.btnBorderWidth, - )}; - - &:hover { - ${buttonHoverMixin( - t.btnDangerHoverBg, - t.btnDangerHoverBgStart, - t.btnDangerHoverBgEnd, - t.btnDangerHoverTextColor, - t.btnDangerHoverBorderColor, + &:hover { + ${buttonHoverMixin(emotion)( + t.btnDefaultHoverBg, + t.btnDefaultHoverBgStart, + t.btnDefaultHoverBgEnd, + t.btnDefaultHoverTextColor, + t.btnDefaultHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).default(t)}; + } + `; + }, + + primary(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)( + t.btnPrimaryBg, + t.btnPrimaryBgStart, + t.btnPrimaryBgEnd, + t.btnPrimaryTextColor, + t.btnPrimaryBorderColor, t.btnBorderWidth, )}; - } - &:active { - ${activeStyles.danger(t)} - } - `; - }, - - pay(t: Theme) { - return css` - ${buttonUseMixin( - t.btnPayBg, - t.btnPayBgStart, - t.btnPayBgEnd, - t.btnPayTextColor, - t.btnPayBorderColor, - t.btnBorderWidth, - )}; - - &:hover { - ${buttonHoverMixin( - t.btnPayHoverBg, - t.btnPayHoverBgStart, - t.btnPayHoverBgEnd, - t.btnPayHoverTextColor, - t.btnPayHoverBorderColor, + &:hover { + ${buttonHoverMixin(emotion)( + t.btnPrimaryHoverBg, + t.btnPrimaryHoverBgStart, + t.btnPrimaryHoverBgEnd, + t.btnPrimaryHoverTextColor, + t.btnPrimaryHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).primary(t)} + } + `; + }, + + success(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)( + t.btnSuccessBg, + t.btnSuccessBgStart, + t.btnSuccessBgEnd, + t.btnSuccessTextColor, + t.btnSuccessBorderColor, t.btnBorderWidth, )}; - } - &:active { - ${activeStyles.pay(t)} - } - `; - }, - - text(t: Theme) { - return css` - &, - &:enabled, - &:hover { - box-shadow: none; - } - - ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, t.btnBorderWidth)}; - - &:hover { - ${buttonHoverMixin( - t.btnTextHoverBg, - '', - '', - t.btnTextHoverTextColor, - t.btnTextHoverBorderColor, + &:hover { + ${buttonHoverMixin(emotion)( + t.btnSuccessHoverBg, + t.btnSuccessHoverBgStart, + t.btnSuccessHoverBgEnd, + t.btnSuccessHoverTextColor, + t.btnSuccessHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).success(t)} + } + `; + }, + + danger(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)( + t.btnDangerBg, + t.btnDangerBgStart, + t.btnDangerBgEnd, + t.btnDangerTextColor, + t.btnDangerBorderColor, t.btnBorderWidth, )}; - } - &:active { - ${activeStyles.text(t)} - } - `; - }, - - backless(t: Theme) { - return css` - ${buttonUseMixin(t.btnBacklessBg, '', '', t.btnBacklessTextColor, t.btnBacklessBorderColor, t.btnBorderWidth)}; - - color: ${t.btnDefaultTextColor}; - background: transparent; - - &:hover { - ${buttonHoverMixin( - t.btnBacklessHoverBg, - '', - '', - t.btnBacklessHoverTextColor, - t.btnBacklessHoverBorderColor, + &:hover { + ${buttonHoverMixin(emotion)( + t.btnDangerHoverBg, + t.btnDangerHoverBgStart, + t.btnDangerHoverBgEnd, + t.btnDangerHoverTextColor, + t.btnDangerHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).danger(t)} + } + `; + }, + + pay(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)( + t.btnPayBg, + t.btnPayBgStart, + t.btnPayBgEnd, + t.btnPayTextColor, + t.btnPayBorderColor, t.btnBorderWidth, )}; - } - &:active { - ${activeStyles.backless(t)} - } - `; - }, - - checked(t: Theme) { - const checkedStyles = ` + &:hover { + ${buttonHoverMixin(emotion)( + t.btnPayHoverBg, + t.btnPayHoverBgStart, + t.btnPayHoverBgEnd, + t.btnPayHoverTextColor, + t.btnPayHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).pay(t)} + } + `; + }, + + text(t: Theme) { + return emotion.css` + &, + &:enabled, + &:hover { + box-shadow: none; + } + + ${buttonUseMixin(emotion)(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, t.btnBorderWidth)}; + + &:hover { + ${buttonHoverMixin(emotion)( + t.btnTextHoverBg, + '', + '', + t.btnTextHoverTextColor, + t.btnTextHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).text(t)} + } + `; + }, + + backless(t: Theme) { + return emotion.css` + ${buttonUseMixin(emotion)(t.btnBacklessBg, '', '', t.btnBacklessTextColor, t.btnBacklessBorderColor, t.btnBorderWidth)}; + + color: ${t.btnDefaultTextColor}; + background: transparent; + + &:hover { + ${buttonHoverMixin(emotion)( + t.btnBacklessHoverBg, + '', + '', + t.btnBacklessHoverTextColor, + t.btnBacklessHoverBorderColor, + t.btnBorderWidth, + )}; + } + + &:active { + ${getActiveStyles(emotion).backless(t)} + } + `; + }, + + checked(t: Theme) { + const checkedStyles = ` background-image: none; box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDefaultCheckedBorderColor} !important; background-color: ${t.btnCheckedBg} !important; @@ -591,248 +598,249 @@ export const styles = memoizeStyle({ } `; - return css` - ${checkedStyles} - - &:hover:enabled, - &:active:enabled, - &:hover:active:enabled { + return emotion.css` ${checkedStyles} - } - `; - }, - checkedFocused(t: Theme) { - return css` - &:hover:enabled, + &:hover:enabled, + &:active:enabled, &:hover:active:enabled { - box-shadow: - inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus}, - 0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; - border-color: ${t.btnBorderColorFocus} !important; - } - `; - }, - - checkedDisabled(t: Theme) { - return css` - box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnCheckedDisabledBorderColor}; - background-color: ${t.btnCheckedDisabledBg}; - color: ${t.btnCheckedDisabledColor}; - - .${globalClasses.innerShadow} { - box-shadow: ${t.btnCheckedDisabledShadow}; - } - - svg { - color: ${t.btnCheckedDisabledColor} !important; - } - `; - }, - - caption() { - return css` - position: relative; - white-space: nowrap; - display: inline-block; - width: 100%; - vertical-align: top; - `; - }, - - captionLink() { - return css` - display: inline; - transform: none !important; // override root:active style - `; - }, - - captionDisabled() { - return css` - transform: none !important; // override root:active style - `; - }, - - wrap(t: Theme) { - return css` - box-sizing: border-box; - display: inline-block; - line-height: normal; - padding: ${t.btnBorderWidth}; - `; - }, - - wrapSmall(t: Theme) { - return css` - height: ${t.btnHeightSmall}; - `; - }, - - wrapMedium(t: Theme) { - return css` - height: ${t.btnHeightMedium}; - `; - }, - - wrapLarge(t: Theme) { - return css` - height: ${t.btnHeightLarge}; - `; - }, - - narrow() { - return css` - padding-left: 5px; - padding-right: 5px; - `; - }, - - noPadding() { - return css` - padding-left: 0; - padding-right: 0; - `; - }, - - noRightPadding() { - return css` - padding-right: 0; - `; - }, - - wrapLink() { - return css` - padding: 0; - `; - }, - - borderless() { - return css` - &, - &:active:hover, - &:hover { - box-shadow: none !important; // override root:hover style - } - `; - }, - - backlessDisabled(t: Theme) { - return css` - box-shadow: 0 0 0 1px ${t.btnBacklessDisabledBorderColor}; - background-color: transparent; - `; - }, - - textDisabled() { - return css` - background-color: transparent; - `; - }, - - loading() { - return css` - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: inherit; - display: flex; - align-items: center; - justify-content: center; - z-index: 10; - `; - }, - - visibilityHidden() { - return css` - visibility: hidden; - `; - }, -}); - -export const activeStyles = memoizeStyle({ - default(t: Theme) { - return css` - & { - ${buttonActiveMixin( - t.btnDefaultActiveBg, - t.btnDefaultActiveShadow, - t.btnDefaultActiveBorderColor, - t.btnBorderWidth, - )}; - } - `; - }, - - primary(t: Theme) { - return css` - & { - ${buttonActiveMixin( - t.btnPrimaryActiveBg, - t.btnPrimaryActiveShadow, - t.btnPrimaryActiveBorderColor, - t.btnBorderWidth, - )}; - } - `; - }, - - success(t: Theme) { - return css` - & { - ${buttonActiveMixin( - t.btnSuccessActiveBg, - t.btnSuccessActiveShadow, - t.btnSuccessActiveBorderColor, - t.btnBorderWidth, - )}; - } - `; - }, - - danger(t: Theme) { - return css` - & { - ${buttonActiveMixin( - t.btnDangerActiveBg, - t.btnDangerActiveShadow, - t.btnDangerActiveBorderColor, - t.btnBorderWidth, - )}; - } - `; - }, - - pay(t: Theme) { - return css` - & { - ${buttonActiveMixin(t.btnPayActiveBg, t.btnPayActiveShadow, t.btnPayActiveBorderColor, t.btnBorderWidth)}; - } - `; - }, - - link(t: Theme) { - return css` - & { - color: ${t.btnLinkActiveColor}; - } - `; - }, - - text(t: Theme) { - return css` - & { - ${buttonActiveMixin(t.btnTextActiveBg, '', t.btnTextActiveBg, t.btnBorderWidth)}; - } - `; - }, - - backless(t: Theme) { - return css` - & { - ${buttonActiveMixin(t.btnBacklessActiveBg, '', t.btnBacklessActiveBorderColor, t.btnBorderWidth)} - } - `; - }, -}); + ${checkedStyles} + } + `; + }, + + checkedFocused(t: Theme) { + return emotion.css` + &:hover:enabled, + &:hover:active:enabled { + box-shadow: + inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus}, + 0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; + border-color: ${t.btnBorderColorFocus} !important; + } + `; + }, + + checkedDisabled(t: Theme) { + return emotion.css` + box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnCheckedDisabledBorderColor}; + background-color: ${t.btnCheckedDisabledBg}; + color: ${t.btnCheckedDisabledColor}; + + .${globalClasses.innerShadow} { + box-shadow: ${t.btnCheckedDisabledShadow}; + } + + svg { + color: ${t.btnCheckedDisabledColor} !important; + } + `; + }, + + caption() { + return emotion.css` + position: relative; + white-space: nowrap; + display: inline-block; + width: 100%; + vertical-align: top; + `; + }, + + captionLink() { + return emotion.css` + display: inline; + transform: none !important; // override root:active style + `; + }, + + captionDisabled() { + return emotion.css` + transform: none !important; // override root:active style + `; + }, + + wrap(t: Theme) { + return emotion.css` + box-sizing: border-box; + display: inline-block; + line-height: normal; + padding: ${t.btnBorderWidth}; + `; + }, + + wrapSmall(t: Theme) { + return emotion.css` + height: ${t.btnHeightSmall}; + `; + }, + + wrapMedium(t: Theme) { + return emotion.css` + height: ${t.btnHeightMedium}; + `; + }, + + wrapLarge(t: Theme) { + return emotion.css` + height: ${t.btnHeightLarge}; + `; + }, + + narrow() { + return emotion.css` + padding-left: 5px; + padding-right: 5px; + `; + }, + + noPadding() { + return emotion.css` + padding-left: 0; + padding-right: 0; + `; + }, + + noRightPadding() { + return emotion.css` + padding-right: 0; + `; + }, + + wrapLink() { + return emotion.css` + padding: 0; + `; + }, + + borderless() { + return emotion.css` + &, + &:active:hover, + &:hover { + box-shadow: none !important; // override root:hover style + } + `; + }, + + backlessDisabled(t: Theme) { + return emotion.css` + box-shadow: 0 0 0 1px ${t.btnBacklessDisabledBorderColor}; + background-color: transparent; + `; + }, + + textDisabled() { + return emotion.css` + background-color: transparent; + `; + }, + + loading() { + return emotion.css` + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: inherit; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + `; + }, + + visibilityHidden() { + return emotion.css` + visibility: hidden; + `; + }, + }); + +export const getActiveStyles = (emotion: Emotion) => + memoizeStyle({ + default(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)( + t.btnDefaultActiveBg, + t.btnDefaultActiveShadow, + t.btnDefaultActiveBorderColor, + t.btnBorderWidth, + )}; + } + `; + }, + + primary(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)( + t.btnPrimaryActiveBg, + t.btnPrimaryActiveShadow, + t.btnPrimaryActiveBorderColor, + t.btnBorderWidth, + )}; + } + `; + }, + + success(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)( + t.btnSuccessActiveBg, + t.btnSuccessActiveShadow, + t.btnSuccessActiveBorderColor, + t.btnBorderWidth, + )}; + } + `; + }, + + danger(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)( + t.btnDangerActiveBg, + t.btnDangerActiveShadow, + t.btnDangerActiveBorderColor, + t.btnBorderWidth, + )}; + } + `; + }, + + pay(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)(t.btnPayActiveBg, t.btnPayActiveShadow, t.btnPayActiveBorderColor, t.btnBorderWidth)}; + } + `; + }, + + link(t: Theme) { + return emotion.css` + & { + color: ${t.btnLinkActiveColor}; + } + `; + }, + + text(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)(t.btnTextActiveBg, '', t.btnTextActiveBg, t.btnBorderWidth)}; + } + `; + }, + + backless(t: Theme) { + return emotion.css` + & { + ${buttonActiveMixin(emotion)(t.btnBacklessActiveBg, '', t.btnBacklessActiveBorderColor, t.btnBorderWidth)} + } + `; + }, + }); diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 4722b68777d..3b996df6d38 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,5 +1,6 @@ import React, { HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; +import type { Emotion } from '@emotion/css/create-instance'; import { ButtonLinkAllowedValues } from '../../lib/types/button-link'; import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; @@ -8,7 +9,7 @@ import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; -import { cx } from '../../lib/theming/Emotion'; +import { EmotionConsumer } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { createPropsGetter } from '../../lib/createPropsGetter'; @@ -16,7 +17,7 @@ import { Link } from '../Link'; import { SizeProp } from '../../lib/types/props'; import { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component'; -import { styles, activeStyles, globalClasses } from './Button.styles'; +import { getStyles, getActiveStyles, globalClasses } from './Button.styles'; import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; import { useButtonArrow } from './ButtonArrow'; import { getInnerLinkTheme } from './getInnerLinkTheme'; @@ -194,6 +195,7 @@ export class Button - {(theme) => { - this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; + + {(emotion) => { + this.emotion = emotion; return ( - - {this.renderMain} - + + {(theme) => { + this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; + return ( + + {this.renderMain} + + ); + }} + ); }} - + ); } @@ -290,15 +299,16 @@ export class Button @@ -460,22 +470,23 @@ export class Button = ({ arrow, size = Button.defaultProps.size }) => { const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); + const styles = getStyles(emotion); const getArrowIconRootClassName = () => { - return cx(styles.arrowIconRoot(), globalClasses.arrow, { + return emotion.cx(styles.arrowIconRoot(), globalClasses.arrow, { [styles.arrowIconRootSmall(theme)]: size === 'small', [styles.arrowIconRootMedium(theme)]: size === 'medium', [styles.arrowIconRootLarge(theme)]: size === 'large', @@ -43,13 +46,14 @@ const ButtonArrow: React.FunctionComponent = ({ arrow, size = return arrowNode; }; -export function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode] { +export function useButtonArrow(props: ButtonArrowProps, theme: Theme, emotion: Emotion): [string, React.ReactNode] { const { arrow, size, use } = props; + const styles = getStyles(emotion); const canRender = use !== 'link' && (arrow === true || arrow === 'left'); const rootClassName = canRender - ? cx( + ? emotion.cx( arrow === true && size === 'small' && styles.withArrowIconRightSmall(theme), arrow === true && size === 'medium' && styles.withArrowIconRightMedium(theme), arrow === true && size === 'large' && styles.withArrowIconRightLarge(theme), diff --git a/packages/react-ui/components/Button/ButtonIcon.styles.ts b/packages/react-ui/components/Button/ButtonIcon.styles.ts index 02ff3873115..ab79485a3e3 100644 --- a/packages/react-ui/components/Button/ButtonIcon.styles.ts +++ b/packages/react-ui/components/Button/ButtonIcon.styles.ts @@ -1,89 +1,92 @@ +import type { Emotion } from '@emotion/css/create-instance'; + import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars'; -import { css, memoizeStyle } from '../../lib/theming/Emotion'; +import { memoizeStyle } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; -export const styles = memoizeStyle({ - icon() { - const space = `'${ZERO_WIDTH_SPACE_CSS}'`; - return css` +export const getStyles = (emotion: Emotion) => + memoizeStyle({ + icon() { + const space = `'${ZERO_WIDTH_SPACE_CSS}'`; + return emotion.css` display: inline-block; &::before { content: ${space}; } `; - }, + }, - iconSmall(t: Theme) { - return css` + iconSmall(t: Theme) { + return emotion.css` width: ${t.btnIconSizeSmall}; `; - }, + }, - iconSmallLeft(t: Theme) { - return css` + iconSmallLeft(t: Theme) { + return emotion.css` margin-right: ${t.btnIconGapSmallLeft}; `; - }, + }, - iconSmallRight(t: Theme) { - return css` + iconSmallRight(t: Theme) { + return emotion.css` margin-left: ${t.btnIconGapSmallRight}; `; - }, + }, - iconMedium(t: Theme) { - return css` + iconMedium(t: Theme) { + return emotion.css` width: ${t.btnIconSizeMedium}; `; - }, + }, - iconMediumLeft(t: Theme) { - return css` + iconMediumLeft(t: Theme) { + return emotion.css` margin-right: ${t.btnIconGapMediumRight}; `; - }, + }, - iconMediumRight(t: Theme) { - return css` + iconMediumRight(t: Theme) { + return emotion.css` margin-left: ${t.btnIconGapMediumRight}; `; - }, + }, - iconLarge(t: Theme) { - return css` + iconLarge(t: Theme) { + return emotion.css` width: ${t.btnIconSizeLarge}; `; - }, + }, - iconLargeLeft(t: Theme) { - return css` + iconLargeLeft(t: Theme) { + return emotion.css` margin-right: ${t.btnIconGapLargeLeft}; `; - }, + }, - iconLargeRight(t: Theme) { - return css` + iconLargeRight(t: Theme) { + return emotion.css` margin-left: ${t.btnIconGapLargeRight}; `; - }, + }, - iconLeftLink(t: Theme) { - return css` + iconLeftLink(t: Theme) { + return emotion.css` margin-right: ${t.btnLinkIconMarginRight}; `; - }, + }, - iconRightLink(t: Theme) { - return css` + iconRightLink(t: Theme) { + return emotion.css` margin-left: ${t.btnLinkIconMarginLeft}; `; - }, + }, - iconNoMargin() { - return css` + iconNoMargin() { + return emotion.css` margin-right: 0; margin-left: 0; `; - }, -}); + }, + }); diff --git a/packages/react-ui/components/Button/ButtonIcon.tsx b/packages/react-ui/components/Button/ButtonIcon.tsx index 71b1267cacb..64a03ab57a8 100644 --- a/packages/react-ui/components/Button/ButtonIcon.tsx +++ b/packages/react-ui/components/Button/ButtonIcon.tsx @@ -2,12 +2,12 @@ import React, { useContext } from 'react'; import { Theme } from '../../lib/theming/Theme'; import { isKonturIcon } from '../../lib/utils'; -import { cx } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { SizeProp } from '../../lib/types/props'; import { ButtonInnerProps } from './Button'; -import { styles } from './ButtonIcon.styles'; +import { getStyles } from './ButtonIcon.styles'; import { LoadingButtonIcon } from './LoadingButtonIcon'; export interface ButtonIconProps extends Pick { @@ -44,7 +44,10 @@ export const ButtonIcon: React.FunctionComponent = ({ size = 'small', }) => { const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); + const isLink = use === 'link'; + const styles = getStyles(emotion); const getSizeIconClassName = () => { switch (size) { @@ -77,7 +80,7 @@ export const ButtonIcon: React.FunctionComponent = ({ return ( { + const emotion = useContext(EmotionContext); + const styles = getStyles(emotion); return (
{} diff --git a/packages/react-ui/components/Calendar/CalendarDay.tsx b/packages/react-ui/components/Calendar/CalendarDay.tsx index 8a470f8404c..dd3c01887d8 100644 --- a/packages/react-ui/components/Calendar/CalendarDay.tsx +++ b/packages/react-ui/components/Calendar/CalendarDay.tsx @@ -1,8 +1,8 @@ -import React, { PropsWithChildren, useContext, memo } from 'react'; +import React, { memo, PropsWithChildren, useContext } from 'react'; import { useLocaleForControl } from '../../lib/locale/useLocaleForControl'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { cx, useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { DatePickerLocaleHelper } from '../DatePicker/locale'; import { InternalDate } from '../../lib/date/InternalDate'; import { LocaleContext } from '../../lib/locale'; @@ -40,7 +40,7 @@ export const CalendarDay = memo( ref: React.Ref, ) { const theme = useContext(ThemeContext); - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const { langCode } = useContext(LocaleContext); const internalDate = new InternalDate({ langCode, value: date }); @@ -59,7 +59,7 @@ export const CalendarDay = memo( aria-label={ariaLabel} tabIndex={-1} disabled={isDisabled} - className={cx( + className={emotion.cx( { [styles.day(theme)]: true, [styles.selected(theme)]: isSelected, @@ -70,7 +70,7 @@ export const CalendarDay = memo( {...getVisualStateDataAttributes({ selected: isSelected })} {...rest} > - {caption} + {caption} ); }, diff --git a/packages/react-ui/components/Calendar/DayCellView.styles.ts b/packages/react-ui/components/Calendar/DayCellView.styles.ts index f1135b53974..1a4139f92f4 100644 --- a/packages/react-ui/components/Calendar/DayCellView.styles.ts +++ b/packages/react-ui/components/Calendar/DayCellView.styles.ts @@ -2,6 +2,7 @@ import type { Emotion } from '@emotion/css/create-instance'; import { memoizeStyle } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; +import { resetButton } from '../../lib/styles/Mixins'; export const getStyles = (emotion: Emotion) => { return memoizeStyle({ @@ -14,6 +15,7 @@ export const getStyles = (emotion: Emotion) => { day(t: Theme) { return emotion.css` + ${resetButton(emotion)}; width: 100%; height: 100%; diff --git a/packages/react-ui/components/Calendar/DayCellView.tsx b/packages/react-ui/components/Calendar/DayCellView.tsx index 280cb416f01..07f506dcd46 100644 --- a/packages/react-ui/components/Calendar/DayCellView.tsx +++ b/packages/react-ui/components/Calendar/DayCellView.tsx @@ -1,8 +1,8 @@ import React, { useContext } from 'react'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { InternalDateTransformer } from '../../lib/date/InternalDateTransformer'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './DayCellView.styles'; import { CalendarContext } from './CalendarContext'; @@ -17,8 +17,8 @@ export interface DayCellViewProps { export const DayCellView = (props: DayCellViewProps) => { const { date } = props; const { value, minDate, maxDate, isHoliday, renderDay, today, onDateClick } = useContext(CalendarContext); - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const handleClick = () => { onDateClick?.(date); diff --git a/packages/react-ui/components/Calendar/MonthView.tsx b/packages/react-ui/components/Calendar/MonthView.tsx index 0c4450a4bfc..d01e249a698 100644 --- a/packages/react-ui/components/Calendar/MonthView.tsx +++ b/packages/react-ui/components/Calendar/MonthView.tsx @@ -1,11 +1,11 @@ import React, { useContext } from 'react'; import * as ColorFunctions from '../../lib/styles/ColorFunctions'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { useResponsiveLayout } from '../../components/ResponsiveLayout'; -import { useTheme } from '../../lib/theming/useTheme'; import { Nullable } from '../..//typings/utility-types'; import { DateSelect } from '../../internal/DateSelect'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MonthView.styles'; import { themeConfig } from './config'; @@ -51,8 +51,8 @@ interface MonthViewProps { } export function MonthView(props: MonthViewProps) { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const { minDate, maxDate } = useContext(CalendarContext); const { isMobile } = useResponsiveLayout(); diff --git a/packages/react-ui/components/Checkbox/Checkbox.tsx b/packages/react-ui/components/Checkbox/Checkbox.tsx index 685da336620..16b55b62170 100644 --- a/packages/react-ui/components/Checkbox/Checkbox.tsx +++ b/packages/react-ui/components/Checkbox/Checkbox.tsx @@ -269,8 +269,8 @@ export class Checkbox extends React.PureComponent ...rest } = props; const isIndeterminate = this.state.indeterminate; - - const iconClass = cx(styles.icon(), !props.checked && !isIndeterminate && styles.iconUnchecked()); + const styles = getStyles(this.emotion); + const iconClass = this.emotion.cx(styles.icon(), !props.checked && !isIndeterminate && styles.iconUnchecked()); const iconSize = parseInt(this.getCheckboxBoxSize()); const IconCheck = ( diff --git a/packages/react-ui/components/DatePicker/DatePicker.tsx b/packages/react-ui/components/DatePicker/DatePicker.tsx index 69081e47298..5044306fc46 100644 --- a/packages/react-ui/components/DatePicker/DatePicker.tsx +++ b/packages/react-ui/components/DatePicker/DatePicker.tsx @@ -428,7 +428,6 @@ export class DatePicker extends React.PureComponent ); } - const styles = getStyles(this.emotion); private handleSelectToday = (today: string) => () => { this.handleSelect(today); diff --git a/packages/react-ui/components/DatePicker/MobilePicker.styles.ts b/packages/react-ui/components/DatePicker/MobilePicker.styles.ts index 10fb3955731..f1a14387c72 100644 --- a/packages/react-ui/components/DatePicker/MobilePicker.styles.ts +++ b/packages/react-ui/components/DatePicker/MobilePicker.styles.ts @@ -1,9 +1,12 @@ -import { css, memoizeStyle } from '../../lib/theming/Emotion'; +import type { Emotion } from '@emotion/css/create-instance'; -export const styles = memoizeStyle({ - calendarRoot() { - return css` +import { memoizeStyle } from '../../lib/theming/Emotion'; + +export const getStyles = (emotion: Emotion) => + memoizeStyle({ + calendarRoot() { + return emotion.css` width: auto; `; - }, -}); + }, + }); diff --git a/packages/react-ui/components/DatePicker/MobilePicker.tsx b/packages/react-ui/components/DatePicker/MobilePicker.tsx index 347c3bd25ae..2796733f3ac 100644 --- a/packages/react-ui/components/DatePicker/MobilePicker.tsx +++ b/packages/react-ui/components/DatePicker/MobilePicker.tsx @@ -8,10 +8,11 @@ import { DateInput } from '../DateInput'; import { Button } from '../Button'; import { useLocaleForControl } from '../../lib/locale/useLocaleForControl'; import { useEffectWithoutInitCall } from '../../hooks/useEffectWithoutInitCall'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { DatePickerProps } from './DatePicker'; import { DatePickerLocaleHelper } from './locale'; -import { styles } from './MobilePicker.styles'; +import { getStyles } from './MobilePicker.styles'; import { getMobilePickerTheme } from './getMobilePickerTheme'; export const MobilePickerDataTids = { @@ -40,6 +41,7 @@ export const MobilePicker: React.FC = (props) => { const locale = useLocaleForControl('DatePicker', DatePickerLocaleHelper); const theme = getMobilePickerTheme(useContext(ThemeContext)); + const emotion = useContext(EmotionContext); const onValueChange = (date: string) => { if (props.onValueChange) { @@ -106,7 +108,7 @@ export const MobilePicker: React.FC = (props) => { fileNode; const _FileUploader = forwardRefAndName('FileUploader', (props, ref) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const { initialFiles, @@ -275,7 +275,7 @@ const _FileUploader = forwardRefAndName('Fi ); const canDrop = isWindowDraggable && !disabled; - const uploadButtonWrapperClassNames = emotion.cx(canDrop && jsStyles.windowDragOver(theme)); + const uploadButtonWrapperClassNames = emotion.cx(canDrop && styles.windowDragOver(theme)); const uploadButtonIconClassNames = emotion.cx( styles.icon(theme), diff --git a/packages/react-ui/components/FxInput/FxInputRestoreBtn.tsx b/packages/react-ui/components/FxInput/FxInputRestoreBtn.tsx index bddf97b78c7..37026d2dacb 100644 --- a/packages/react-ui/components/FxInput/FxInputRestoreBtn.tsx +++ b/packages/react-ui/components/FxInput/FxInputRestoreBtn.tsx @@ -1,9 +1,9 @@ -import React, { AriaAttributes } from 'react'; +import React, { AriaAttributes, useContext } from 'react'; import { Input } from '../Input'; import { Button } from '../Button'; import { SizeProp } from '../../lib/types/props'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { UndoIcon } from './UndoIcon'; import { FxInputProps } from './FxInput'; @@ -13,7 +13,7 @@ interface FxInputRestoreBtnProps Pick {} export const FxInputRestoreBtn: React.FunctionComponent = (props) => { - const theme = useTheme(); + const theme = useContext(ThemeContext); const size = props.size || Input.defaultProps.size; diff --git a/packages/react-ui/components/GlobalLoader/GlobalLoaderView.tsx b/packages/react-ui/components/GlobalLoader/GlobalLoaderView.tsx index 9a810a0cbf0..e447997e4c9 100644 --- a/packages/react-ui/components/GlobalLoader/GlobalLoaderView.tsx +++ b/packages/react-ui/components/GlobalLoader/GlobalLoaderView.tsx @@ -1,9 +1,9 @@ -import React, { useRef } from 'react'; +import React, { useContext, useRef } from 'react'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { ZIndex } from '../../internal/ZIndex'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getAnimations, getStyles } from './GlobalLoaderView.styles'; import { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams'; @@ -28,8 +28,8 @@ export const GlobalLoaderView = ({ ...rest }: GlobalLoaderViewProps) => { const ref = useRef(null); - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref); const { left } = useGlobalLoaderPosition(ref); diff --git a/packages/react-ui/components/Group/Group.tsx b/packages/react-ui/components/Group/Group.tsx index a24d1851e7e..56cab26af53 100644 --- a/packages/react-ui/components/Group/Group.tsx +++ b/packages/react-ui/components/Group/Group.tsx @@ -8,7 +8,6 @@ import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; import { EmotionConsumer } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { isInputLike } from '../../lib/utils'; -import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './Group.styles'; @@ -92,20 +91,17 @@ export class Group extends React.Component { }; public render() { + return ( {(emotion) => { this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + return this.renderMain(); }} ); + } + + public renderMain() { const style: React.CSSProperties = { width: this.props.width, }; diff --git a/packages/react-ui/components/Hint/Hint.tsx b/packages/react-ui/components/Hint/Hint.tsx index 194b0182e84..ad63f0a7cfc 100644 --- a/packages/react-ui/components/Hint/Hint.tsx +++ b/packages/react-ui/components/Hint/Hint.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { globalObject, SafeTimer } from '@skbkontur/global-object'; import type { Emotion } from '@emotion/css/create-instance'; - getFullReactUIFlagsContext, import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { Theme } from '../../lib/theming/Theme'; import { DUMMY_LOCATION, Popup, PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup'; @@ -137,33 +136,33 @@ export class Hint extends React.PureComponent implements I public render() { return ( - - {(emotion) => { - this.emotion = emotion; + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; return ( - - {(theme) => { - this.theme = theme; - return ( - - {this.renderMain()} - - ); - }} - + + {this.renderMain()} + ); - + }} + ); }} + + ); } public renderMain() { diff --git a/packages/react-ui/components/Input/Input.tsx b/packages/react-ui/components/Input/Input.tsx index e67abba722f..cf7346b0904 100644 --- a/packages/react-ui/components/Input/Input.tsx +++ b/packages/react-ui/components/Input/Input.tsx @@ -492,8 +492,6 @@ export class Input extends React.Component { ); } - const styles = getStyles(this.emotion); - const styles = getStyles(this.emotion); private getSizeClassName() { const styles = getStyles(this.emotion); switch (this.getProps().size) { @@ -597,8 +595,4 @@ export class Input extends React.Component { this.resetFocus(); this.props.onBlur?.(event); }; - {prefix} - - {suffix} - } diff --git a/packages/react-ui/components/Input/InputLayout/InputLayout.tsx b/packages/react-ui/components/Input/InputLayout/InputLayout.tsx index 222c14aa7d5..ecb1680874f 100644 --- a/packages/react-ui/components/Input/InputLayout/InputLayout.tsx +++ b/packages/react-ui/components/Input/InputLayout/InputLayout.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { forwardRefAndName } from '../../../lib/forwardRefAndName'; import { InputDataTids, InputProps } from '../Input'; import { CommonProps, CommonWrapper } from '../../../internal/CommonWrapper'; -import { useEmotion } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { InputLayoutAside } from './InputLayoutAside'; import { InputLayoutContext, InputLayoutContextDefault, InputLayoutContextProps } from './InputLayoutContext'; @@ -19,7 +19,7 @@ export interface InputLayoutRootProps extends InputLayoutRootFromInputProps, Com export const InputLayout = forwardRefAndName('InputLayout', (props, ref) => { const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children } = props; const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context }; - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const stylesLayout = getStylesLayout(emotion); return ( diff --git a/packages/react-ui/components/Input/InputLayout/InputLayoutAside.tsx b/packages/react-ui/components/Input/InputLayout/InputLayoutAside.tsx index 885068b072f..5196de5c96b 100644 --- a/packages/react-ui/components/Input/InputLayout/InputLayoutAside.tsx +++ b/packages/react-ui/components/Input/InputLayout/InputLayoutAside.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { InputProps } from '../Input'; -import { useEmotion } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { getStylesLayout } from './InputLayout.styles'; import { InputLayoutAsideIcon } from './InputLayoutAsideIcon'; @@ -14,7 +14,7 @@ export interface InputLayoutAsideProps { } export const InputLayoutAside: React.FunctionComponent = ({ icon, text, side }) => { - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const asideClassName = getStylesLayout(emotion).aside(); const _icon = ; diff --git a/packages/react-ui/components/Input/InputLayout/InputLayoutAsideIcon.tsx b/packages/react-ui/components/Input/InputLayout/InputLayoutAsideIcon.tsx index dde3694a7e7..afbfc17e388 100644 --- a/packages/react-ui/components/Input/InputLayout/InputLayoutAsideIcon.tsx +++ b/packages/react-ui/components/Input/InputLayout/InputLayoutAsideIcon.tsx @@ -1,11 +1,11 @@ -import React, { ReactElement } from 'react'; +import React, { ReactElement, useContext } from 'react'; import { isElement } from 'react-is'; import { isKonturIcon } from '../../../lib/utils'; import { InputProps } from '../Input'; -import { useEmotion } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { SizeProp } from '../../../lib/types/props'; -import { useTheme } from '../../../lib/theming/useTheme'; +import { ThemeContext } from '../../../lib/theming/ThemeContext'; import { InputLayoutContext } from './InputLayoutContext'; import { getStylesLayout } from './InputLayout.styles'; @@ -16,8 +16,8 @@ export interface InputLayoutAsideIconProps { } export const InputLayoutAsideIcon: React.FunctionComponent = ({ icon = null, side }) => { - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const { focused, disabled, size } = React.useContext(InputLayoutContext); const sizes: Record = { @@ -45,9 +45,8 @@ export const InputLayoutAsideIcon: React.FunctionComponent = ({ text = null }) => { - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const { disabled } = React.useContext(InputLayoutContext); const stylesLayout = getStylesLayout(emotion); const asideClassName = stylesLayout.aside(); return text ? ( - + {text} ) : null; diff --git a/packages/react-ui/components/Input/InputLayout/PolyfillPlaceholder.tsx b/packages/react-ui/components/Input/InputLayout/PolyfillPlaceholder.tsx index 8541c4f8648..57d95b7f5f6 100644 --- a/packages/react-ui/components/Input/InputLayout/PolyfillPlaceholder.tsx +++ b/packages/react-ui/components/Input/InputLayout/PolyfillPlaceholder.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { InputProps } from '../Input'; -import { useEmotion } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { getStyles } from '../Input.styles'; import { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder'; -import { useTheme } from '../../../lib/theming/useTheme'; +import { ThemeContext } from '../../../lib/theming/ThemeContext'; import { InputLayoutContext } from './InputLayoutContext'; @@ -23,8 +23,8 @@ export const PolyfillPlaceholder: React.FunctionComponent { - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const { focused, disabled } = React.useContext(InputLayoutContext); let _placeholder = null; diff --git a/packages/react-ui/components/Kebab/Kebab.tsx b/packages/react-ui/components/Kebab/Kebab.tsx index 07a4aba6e37..84e4e63d3bd 100644 --- a/packages/react-ui/components/Kebab/Kebab.tsx +++ b/packages/react-ui/components/Kebab/Kebab.tsx @@ -237,7 +237,6 @@ export class Kebab extends React.Component { }; private renderIcon() { - const styles = getStyles(this.emotion); const { size, icon = } = this.getProps(); if (isElement(icon) && isKonturIcon(icon as ReactElement)) { diff --git a/packages/react-ui/components/Link/Link.styles.ts b/packages/react-ui/components/Link/Link.styles.ts index d9f23d225db..c9c24e2f81e 100644 --- a/packages/react-ui/components/Link/Link.styles.ts +++ b/packages/react-ui/components/Link/Link.styles.ts @@ -1,10 +1,9 @@ -import { css, keyframes, memoizeStyle } from '../../lib/theming/Emotion'; import type { Emotion } from '@emotion/css/create-instance'; -import { memoizeStyle, prefix } from '../../lib/theming/Emotion'; +import { memoizeStyle } from '../../lib/theming/Emotion'; import { Theme } from '../../lib/theming/Theme'; -import { linkDisabledMixin, linkMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins'; +import { linkDisabledMixin, linkUseColorsMixin } from './Link.mixins'; const oldLineText = (t: Theme, emotion: Emotion) => { const line = emotion.keyframes` @@ -170,19 +169,19 @@ export const getStyles = (emotion: Emotion) => return emotion.css` margin-left: ${t.linkIconMarginLeft}; `; - }, + }, - warning(t: Theme) { - return css` - background-color: ${t.btnWarningSecondary}; - box-shadow: 0 0 0 2px ${t.btnWarningSecondary}; - `; - }, + warning(t: Theme) { + return emotion.css` + background-color: ${t.btnWarningSecondary}; + box-shadow: 0 0 0 2px ${t.btnWarningSecondary}; + `; + }, - error(t: Theme) { - return css` - background-color: ${t.btnErrorSecondary}; - box-shadow: 0 0 0 2px ${t.btnErrorSecondary}; + error(t: Theme) { + return emotion.css` + background-color: ${t.btnErrorSecondary}; + box-shadow: 0 0 0 2px ${t.btnErrorSecondary}; `; }, }); diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 1a74c694caa..3c2d4124256 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -16,7 +16,7 @@ import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { getStyles, globalClasses } from './Link.styles'; +import { getStyles } from './Link.styles'; import { LinkIcon } from './LinkIcon'; export interface LinkInnerProps extends CommonProps { @@ -116,25 +116,24 @@ export class Link - {(emotion) => { - this.emotion = emotion; + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; return ( - - {(theme) => { - this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; - return ( - - {this.renderMain} - - ); - }} - + + {this.renderMain} + ); }} - + ); }} + + ); } private getTabIndex = ({ @@ -195,8 +194,8 @@ export class Link): props is LinkProps<'a'> => { diff --git a/packages/react-ui/components/Link/LinkIcon.tsx b/packages/react-ui/components/Link/LinkIcon.tsx index b00cadc206a..6c2360c1a9a 100644 --- a/packages/react-ui/components/Link/LinkIcon.tsx +++ b/packages/react-ui/components/Link/LinkIcon.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { useContext } from 'react'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { Spinner } from '../Spinner'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { LinkProps } from './Link'; import { getStyles } from './Link.styles'; @@ -13,8 +13,8 @@ export interface LinkIconProps extends Pick { } export const LinkIcon = ({ icon, loading, hasBothIcons, position }: LinkIconProps) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); return ( diff --git a/packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.tsx b/packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.tsx index 3f86c3f5a73..6f12b332aac 100644 --- a/packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.tsx +++ b/packages/react-ui/components/MaskedInput/ColorableInputElement/ColorableInputElement.tsx @@ -5,7 +5,7 @@ import debounce from 'lodash.debounce'; import { ThemeContext } from '../../../lib/theming/ThemeContext'; import { InputElement, InputElementProps } from '../../Input'; import { forwardRefAndName } from '../../../lib/forwardRefAndName'; -import { cx } from '../../../lib/theming/Emotion'; +import { EmotionContext } from '../../../lib/theming/Emotion'; import { globalClasses } from './ColorableInputElement.styles'; @@ -27,6 +27,7 @@ export const ColorableInputElement = forwardRefAndName( const focused = useRef(false); const inputStyle = React.useRef(); const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const debouncedPaintText = useCallback(debounce(paintText), []); const [active, setActive] = useState(true); @@ -62,7 +63,7 @@ export const ColorableInputElement = forwardRefAndName( onFocus: handleFocus, onBlur: handleBlur, inputRef, - className: cx(props.className, active && globalClasses.input), + className: emotion.cx(props.className, active && globalClasses.input), })} {active && } diff --git a/packages/react-ui/components/MaskedInput/MaskedInput.tsx b/packages/react-ui/components/MaskedInput/MaskedInput.tsx index b0e8d8d8267..c6f707ed911 100644 --- a/packages/react-ui/components/MaskedInput/MaskedInput.tsx +++ b/packages/react-ui/components/MaskedInput/MaskedInput.tsx @@ -1,11 +1,11 @@ -import React, { Ref, useImperativeHandle, useRef, useState, useEffect } from 'react'; +import React, { Ref, useImperativeHandle, useRef, useState, useEffect, useContext } from 'react'; import { IMaskInputProps } from 'react-imask'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; -import { cx } from '../../lib/theming/Emotion'; import { uiFontGlobalClasses } from '../../lib/styles/UiFont'; import { Input, InputProps, InputType } from '../Input'; import { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { globalClasses } from './MaskedInput.styles'; import { getDefinitions, getMaskChar } from './MaskedInput.helpers'; @@ -95,6 +95,7 @@ export const MaskedInput = forwardRefAndName( ...inputProps } = props; + const emotion = useContext(EmotionContext); const inputRef = useRef(null); const [focused, setFocused] = useState(false); @@ -134,7 +135,7 @@ export const MaskedInput = forwardRefAndName( onBlur={handleBlur} onInput={handleInput} onKeyDown={handleKeyDown} - className={cx(globalClasses.root, uiFontGlobalClasses.root, className)} + className={emotion.cx(globalClasses.root, uiFontGlobalClasses.root, className)} element={ colored ? ( diff --git a/packages/react-ui/components/MenuFooter/MenuFooter.mixins.ts b/packages/react-ui/components/MenuFooter/MenuFooter.mixins.ts index f7f1acf1596..512402f7cc8 100644 --- a/packages/react-ui/components/MenuFooter/MenuFooter.mixins.ts +++ b/packages/react-ui/components/MenuFooter/MenuFooter.mixins.ts @@ -9,7 +9,7 @@ export const menuFooterSizeMixin = menuFooterPaddingTop: string, menuFooterPaddingBottom: string, ) => { - const paddingRight = menuFooterPaddingX; + const paddingRight = menuFooterPaddingX; return emotion.css` font-size: ${menuFooterFontSize}; diff --git a/packages/react-ui/components/MenuFooter/MenuFooter.tsx b/packages/react-ui/components/MenuFooter/MenuFooter.tsx index 7e877490e79..36771fc6d35 100644 --- a/packages/react-ui/components/MenuFooter/MenuFooter.tsx +++ b/packages/react-ui/components/MenuFooter/MenuFooter.tsx @@ -1,9 +1,9 @@ -import React, { HTMLAttributes, ReactNode } from 'react'; +import React, { HTMLAttributes, ReactNode, useContext } from 'react'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { SizeProp } from '../../lib/types/props'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MenuFooter.styles'; @@ -26,8 +26,8 @@ export const MenuFooterDataTids = { * Сущности в которых может быть использован `MenuFooter`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select). */ function MenuFooter({ id, _enableIconPadding = false, children, size = 'small', ...rest }: MenuFooterProps) { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); function getRootSizeClassName() { diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.mixins.ts b/packages/react-ui/components/MenuHeader/MenuHeader.mixins.ts index bf43612f6b6..a4546801d83 100644 --- a/packages/react-ui/components/MenuHeader/MenuHeader.mixins.ts +++ b/packages/react-ui/components/MenuHeader/MenuHeader.mixins.ts @@ -9,7 +9,7 @@ export const menuHeaderSizeMixin = menuHeaderPaddingTop: string, menuHeaderPaddingBottom: string, ) => { - const paddingRight = menuHeaderPaddingX; + const paddingRight = menuHeaderPaddingX; return emotion.css` font-size: ${menuHeaderFontSize}; diff --git a/packages/react-ui/components/MenuHeader/MenuHeader.tsx b/packages/react-ui/components/MenuHeader/MenuHeader.tsx index 1ddfd18a5cd..cc25f52ab49 100644 --- a/packages/react-ui/components/MenuHeader/MenuHeader.tsx +++ b/packages/react-ui/components/MenuHeader/MenuHeader.tsx @@ -3,8 +3,8 @@ import React, { HTMLAttributes, ReactNode, useContext } from 'react'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; import { SizeProp } from '../../lib/types/props'; import { MenuContext } from '../../internal/Menu/MenuContext'; -import { useTheme } from '../../lib/theming/useTheme'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MenuHeader.styles'; @@ -27,8 +27,8 @@ export const MenuHeaderDataTids = { * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select). */ function MenuHeader({ id, _enableIconPadding = false, children, size = 'small', ...rest }: MenuHeaderProps) { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); const menuContext = useContext(MenuContext); diff --git a/packages/react-ui/components/MenuItem/MenuItem.mixins.ts b/packages/react-ui/components/MenuItem/MenuItem.mixins.ts index cf52ad77c04..72a91422a79 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.mixins.ts +++ b/packages/react-ui/components/MenuItem/MenuItem.mixins.ts @@ -4,12 +4,7 @@ import { getMenuItemPaddings } from './MenuItem.styles'; export const menuItemSizeMixin = (emotion: Emotion) => - ( - menuItemPaddingX: string, - menuItemPaddingY: string, - menuItemLineHeight: string, - menuItemFontSize: string, - ) => { + (menuItemPaddingX: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string) => { const { paddingX, paddingY } = getMenuItemPaddings({ menuItemPaddingX, menuItemPaddingY, @@ -22,11 +17,12 @@ export const menuItemSizeMixin = `; }; -export const iconSizeMixin = (menuItemIconWidth: string, menuItemPaddingX: string) => { +export const iconSizeMixin = (emotion: Emotion) => (menuItemIconWidth: string, menuItemPaddingX: string) => { + return emotion.css` width: ${menuItemIconWidth}; left: ${parseInt(menuItemPaddingX)}px; `; - }; +}; export const withIconSizeMixin = (emotion: Emotion) => (menuItemPaddingForIcon: string) => { return emotion.css` diff --git a/packages/react-ui/components/MenuItem/MenuItem.styles.ts b/packages/react-ui/components/MenuItem/MenuItem.styles.ts index 50efd1dcdff..23a6dcd589a 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.styles.ts +++ b/packages/react-ui/components/MenuItem/MenuItem.styles.ts @@ -136,7 +136,7 @@ export const getStyles = (emotion: Emotion) => { opacity: 0.6; `; }, - icon() { + icon() { return emotion.css` display: inline-block; position: absolute; @@ -145,17 +145,17 @@ export const getStyles = (emotion: Emotion) => { }, iconSmall(t: Theme) { return emotion.css` - ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall)}; + ${iconSizeMixin(emotion)(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall)}; `; }, iconMedium(t: Theme) { return emotion.css` - ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium)}; + ${iconSizeMixin(emotion)(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium)}; `; }, iconLarge(t: Theme) { return emotion.css` - ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge)}; + ${iconSizeMixin(emotion)(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge)}; `; }, mobileContentWithIcon() { diff --git a/packages/react-ui/components/MenuItem/MenuItem.tsx b/packages/react-ui/components/MenuItem/MenuItem.tsx index 607ae826c66..05177658c5b 100644 --- a/packages/react-ui/components/MenuItem/MenuItem.tsx +++ b/packages/react-ui/components/MenuItem/MenuItem.tsx @@ -156,31 +156,31 @@ export class MenuItem extends React.Component { public render() { return ( - - {(emotion) => { - this.emotion = emotion; + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; return ( - - {(theme) => { - this.theme = theme; - return ( - - {this.renderMain(this.props)} - - ); - }} - + + {this.renderMain(this.props)} + ); - + }} + ); }} + + ); } public componentDidMount() { diff --git a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx index 480b472fe2a..50f97a5582f 100644 --- a/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx +++ b/packages/react-ui/components/MenuSeparator/MenuSeparator.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; import { ResponsiveLayout } from '../ResponsiveLayout'; -import { useTheme } from '../../lib/theming/useTheme'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MenuSeparator.styles'; @@ -18,8 +18,8 @@ export const MenuSeparatorDataTids = { * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select). */ function MenuSeparator(props: MenuSeparatorProps) { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); return ( diff --git a/packages/react-ui/components/MiniModal/MiniModal.tsx b/packages/react-ui/components/MiniModal/MiniModal.tsx index 031d0e32d1f..4d0096df7f8 100644 --- a/packages/react-ui/components/MiniModal/MiniModal.tsx +++ b/packages/react-ui/components/MiniModal/MiniModal.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Modal, ModalProps } from '../Modal'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; -import { useTheme } from '../../lib/theming/useTheme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getMiniModalTheme } from './getMiniModalTheme'; @@ -29,7 +28,7 @@ export const MiniModal = forwardRefAndName< Body: typeof MiniModalBody; } >('MiniModal', ({ children, theme: propsTheme, ...rest }, ref) => { - const contextTheme = useTheme(); + const contextTheme = useContext(ThemeContext); return ( diff --git a/packages/react-ui/components/MiniModal/MiniModalFooter.tsx b/packages/react-ui/components/MiniModal/MiniModalFooter.tsx index 818abe6f511..f82dd4c6617 100644 --- a/packages/react-ui/components/MiniModal/MiniModalFooter.tsx +++ b/packages/react-ui/components/MiniModal/MiniModalFooter.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { Modal, ModalFooterProps } from '../Modal'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; import { isIE11 } from '../../lib/client'; -import { useEmotion } from '../../lib/theming/Emotion'; -import { useTheme } from '../../lib/theming/useTheme'; +import { EmotionContext } from '../../lib/theming/Emotion'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MiniModal.styles'; import { MiniModalDataTids } from './MiniModal'; @@ -28,8 +28,8 @@ interface MiniModalFooterProps extends ModalFooterProps { export const MiniModalFooter = forwardRefAndName( 'MiniModalFooter', ({ direction = 'row', children, ...rest }, ref) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); const childrenCount = React.Children.count(children); diff --git a/packages/react-ui/components/MiniModal/MiniModalHeader.tsx b/packages/react-ui/components/MiniModal/MiniModalHeader.tsx index 38670fc13ac..33f11087404 100644 --- a/packages/react-ui/components/MiniModal/MiniModalHeader.tsx +++ b/packages/react-ui/components/MiniModal/MiniModalHeader.tsx @@ -1,10 +1,10 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, useContext } from 'react'; import { Modal, ModalHeaderProps } from '../Modal'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; import { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular'; -import { useTheme } from '../../lib/theming/useTheme'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MiniModal.styles'; import { MiniModalDataTids } from './MiniModal'; @@ -26,8 +26,8 @@ interface MiniModalHeaderProps extends ModalHeaderProps { export const MiniModalHeader = forwardRefAndName( 'MiniModalHeader', ({ icon = , children, ...rest }, ref) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); return ( diff --git a/packages/react-ui/components/MiniModal/MiniModalIndent.tsx b/packages/react-ui/components/MiniModal/MiniModalIndent.tsx index 9beb2fd97be..a77faa51198 100644 --- a/packages/react-ui/components/MiniModal/MiniModalIndent.tsx +++ b/packages/react-ui/components/MiniModal/MiniModalIndent.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { isIE11 } from '../../lib/client'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './MiniModal.styles'; import { MiniModalDataTids } from './MiniModal'; @@ -16,8 +16,8 @@ import { MiniModalDataTids } from './MiniModal'; export const MiniModalIndent = forwardRefAndName>( 'MiniModalIndent', ({ children, ...rest }, ref) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); return ( diff --git a/packages/react-ui/components/Modal/Modal.styles.ts b/packages/react-ui/components/Modal/Modal.styles.ts index 5a9846267de..635abed26f8 100644 --- a/packages/react-ui/components/Modal/Modal.styles.ts +++ b/packages/react-ui/components/Modal/Modal.styles.ts @@ -246,7 +246,7 @@ export const getStyles = (emotion: Emotion) => }, headerWithClose(t: Theme) { - const rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize); + const rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize); return emotion.css` padding-right: ${rightPadding}px; diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx index a8aae0d25f5..9ad296f959e 100644 --- a/packages/react-ui/components/Modal/ModalClose.tsx +++ b/packages/react-ui/components/Modal/ModalClose.tsx @@ -1,13 +1,13 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { globalObject } from '@skbkontur/global-object'; import { useLocaleForControl } from '../../lib/locale/useLocaleForControl'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { keyListener } from '../../lib/events/keyListener'; import { ResponsiveLayout } from '../ResponsiveLayout'; import { CommonWrapper } from '../../internal/CommonWrapper'; import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { CloseProps } from './ModalContext'; import { getStyles } from './Modal.styles'; @@ -15,9 +15,9 @@ import { ModalDataTids } from './Modal'; import { ModalLocaleHelper } from './locale'; export function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) { - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const locale = useLocaleForControl('Modal', ModalLocaleHelper); - const theme = useTheme(); + const theme = useContext(ThemeContext); const [focusedByTab, setFocusedByTab] = React.useState(false); const handleFocus = () => { diff --git a/packages/react-ui/components/Modal/ModalFooter.tsx b/packages/react-ui/components/Modal/ModalFooter.tsx index 526f38cdc51..cc91fb01e1a 100644 --- a/packages/react-ui/components/Modal/ModalFooter.tsx +++ b/packages/react-ui/components/Modal/ModalFooter.tsx @@ -3,11 +3,11 @@ import React, { ReactNode, useContext, useLayoutEffect } from 'react'; import { getScrollWidth } from '../../lib/dom/getScrollWidth'; import { Sticky } from '../Sticky'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { useResponsiveLayout } from '../ResponsiveLayout'; import { Gapped, GappedProps } from '../Gapped'; import { isNonNullable } from '../../lib/utils'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './Modal.styles'; import { ModalContext } from './ModalContext'; @@ -45,8 +45,8 @@ export const ModalFooterDataTids = { * @visibleName Modal.Footer */ function ModalFooter(props: ModalFooterProps) { - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const modal = useContext(ModalContext); const layout = useResponsiveLayout(); diff --git a/packages/react-ui/components/Modal/ModalHeader.tsx b/packages/react-ui/components/Modal/ModalHeader.tsx index cbcfcb54ce6..2b5402df378 100644 --- a/packages/react-ui/components/Modal/ModalHeader.tsx +++ b/packages/react-ui/components/Modal/ModalHeader.tsx @@ -2,9 +2,9 @@ import React, { ReactNode, useContext, useLayoutEffect } from 'react'; import { Sticky } from '../Sticky'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { useResponsiveLayout } from '../ResponsiveLayout'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './Modal.styles'; import { ModalClose } from './ModalClose'; @@ -26,8 +26,8 @@ export const ModalHeaderDataTids = { * @visibleName Modal.Header */ function ModalHeader(props: ModalHeaderProps) { - const emotion = useEmotion(); - const theme = useTheme(); + const emotion = useContext(EmotionContext); + const theme = useContext(ThemeContext); const modal = useContext(ModalContext); const layout = useResponsiveLayout(); diff --git a/packages/react-ui/components/Modal/ModalSeparator.tsx b/packages/react-ui/components/Modal/ModalSeparator.tsx index 43c2829e4b4..c3b099e0aa9 100644 --- a/packages/react-ui/components/Modal/ModalSeparator.tsx +++ b/packages/react-ui/components/Modal/ModalSeparator.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { useContext } from 'react'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { CommonProps } from '../../internal/CommonWrapper'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './Modal.styles'; @@ -16,8 +16,8 @@ export interface ModalSeparatorProps extends CommonProps { * @visibleName Modal.Separator */ export function ModalSeparator({ fixed }: ModalSeparatorProps) { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); return ( diff --git a/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx b/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx index 011cde02a82..26392bf7a50 100644 --- a/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx +++ b/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx @@ -1,6 +1,6 @@ // TODO: Rewrite stories and enable rule (in process of functional refactoring). /* eslint-disable react/no-unstable-nested-components */ -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; import BorderAllIcon from '@skbkontur/react-icons/BorderAll'; import { ThemeFactory } from '../../../lib/theming/ThemeFactory'; @@ -10,7 +10,6 @@ import { Button } from '../../Button'; import { Input } from '../../Input'; import { Toggle } from '../../Toggle'; import { ResponsiveLayout } from '../../ResponsiveLayout'; -import { useTheme } from '../../../lib/theming/useTheme'; import { ThemeContext } from '../../../lib/theming/ThemeContext'; const basicFontStyle = { @@ -452,7 +451,7 @@ ModalWithoutHeader.storyName = 'Modal without header'; ModalWithoutHeader.parameters = { creevey: { captureElement: null } }; export const ModalMobileView: Story = () => { - const theme = useTheme(); + const theme = useContext(ThemeContext); return ( extends React.Component, RadioGrou }; public render() { + return ( {(emotion) => { this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + return this.renderMain(); }} ); - + } + public renderMain() { const { width, diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx index d6be746f105..1a8255056de 100644 --- a/packages/react-ui/components/Select/Select.tsx +++ b/packages/react-ui/components/Select/Select.tsx @@ -33,7 +33,7 @@ import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { MenuHeaderProps } from '../MenuHeader'; import { SizeProp } from '../../lib/types/props'; -import { styles as linkStyles } from '../Link/Link.styles'; +import { getStyles as linkStyles } from '../Link/Link.styles'; import { Popup } from '../../internal/Popup'; import { ZIndex } from '../../internal/ZIndex'; import { getMenuPositions } from '../../lib/getMenuPositions'; @@ -251,26 +251,25 @@ export class Select extends React.Component - {(emotion) => { - this.emotion = emotion; - return ( - - {(theme) => { - this.theme = ThemeFactory.create( - { - menuOffsetY: theme.selectMenuOffsetY, - }, - theme, - ); - return {this.renderMain()}; - }} - + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = ThemeFactory.create( + { + menuOffsetY: theme.selectMenuOffsetY, + }, + theme, ); + return {this.renderMain()}; }} - + ); }} + + ); } /** @@ -450,7 +449,11 @@ export class Select extends React.Component -
+
{this.props._icon &&
{this.props._icon}
} {params.label} diff --git a/packages/react-ui/components/SidePage/SidePage.tsx b/packages/react-ui/components/SidePage/SidePage.tsx index 73442e75d3c..1bdd8487b3f 100644 --- a/packages/react-ui/components/SidePage/SidePage.tsx +++ b/packages/react-ui/components/SidePage/SidePage.tsx @@ -168,21 +168,20 @@ export class SidePage extends React.Component { public render(): JSX.Element { return ( - - {(emotion) => { - this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; + return this.renderMain(); }} - + ); }} + + ); } private renderMain() { diff --git a/packages/react-ui/components/SidePage/SidePageCloseButton.tsx b/packages/react-ui/components/SidePage/SidePageCloseButton.tsx index d2986af8bf9..e560b92e453 100644 --- a/packages/react-ui/components/SidePage/SidePageCloseButton.tsx +++ b/packages/react-ui/components/SidePage/SidePageCloseButton.tsx @@ -3,9 +3,9 @@ import { globalObject } from '@skbkontur/global-object'; import { useLocaleForControl } from '../../lib/locale/useLocaleForControl'; import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { keyListener } from '../../lib/events/keyListener'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './SidePage.styles'; import { SidePageLocaleHelper } from './locale'; @@ -13,11 +13,11 @@ import { SidePageHeaderDataTids } from './SidePageHeader'; import { SidePageContext } from './SidePageContext'; export const SidePageCloseButton = () => { - const emotion = useEmotion(); + const emotion = useContext(EmotionContext); const [isFocusedByTab, setIsFocusedByTab] = useState(false); const locale = useLocaleForControl('SidePage', SidePageLocaleHelper); - const theme = useTheme(); + const theme = useContext(ThemeContext); const sidePageContext = useContext(SidePageContext); const handleFocus = () => { diff --git a/packages/react-ui/components/Spinner/Spinner.tsx b/packages/react-ui/components/Spinner/Spinner.tsx index 9331172c28e..86eeb0fbce6 100644 --- a/packages/react-ui/components/Spinner/Spinner.tsx +++ b/packages/react-ui/components/Spinner/Spinner.tsx @@ -8,7 +8,6 @@ import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; import { EmotionConsumer } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { createPropsGetter } from '../../lib/createPropsGetter'; - getFullReactUIFlagsContext, import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './Spinner.styles'; @@ -93,21 +92,20 @@ export class Spinner extends React.Component { public render() { return ( - - {(emotion) => { - this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; + return this.renderMain(); }} - + ); }} + + ); } private renderMain() { diff --git a/packages/react-ui/components/Textarea/Textarea.tsx b/packages/react-ui/components/Textarea/Textarea.tsx index 1f39479970f..5447bbd674b 100644 --- a/packages/react-ui/components/Textarea/Textarea.tsx +++ b/packages/react-ui/components/Textarea/Textarea.tsx @@ -294,25 +294,24 @@ export class Textarea extends React.Component { public render() { return ( - - {(emotion) => { - this.emotion = emotion; + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; return ( - - {(theme) => { - this.theme = theme; - return ( - - {this.renderMain} - - ); - }} - + + {this.renderMain} + ); }} - + ); }} + + ); } /** diff --git a/packages/react-ui/components/Textarea/TextareaCounter.tsx b/packages/react-ui/components/Textarea/TextareaCounter.tsx index 1f2c6675dae..85471403544 100644 --- a/packages/react-ui/components/Textarea/TextareaCounter.tsx +++ b/packages/react-ui/components/Textarea/TextareaCounter.tsx @@ -1,4 +1,4 @@ -import React, { SyntheticEvent, useCallback, useImperativeHandle, useState } from 'react'; +import React, { SyntheticEvent, useCallback, useContext, useImperativeHandle, useState } from 'react'; import propTypes from 'prop-types'; import { globalObject } from '@skbkontur/global-object'; @@ -6,10 +6,10 @@ import { safePropTypesInstanceOf } from '../../lib/SSRSafe'; import { forwardRefAndName } from '../../lib/forwardRefAndName'; import { isFunction } from '../../lib/utils'; import { Tooltip } from '../Tooltip'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid'; import { SizeProp } from '../../lib/types/props'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { TextareaDataTids, TextareaProps } from './Textarea'; import { getStyles } from './Textarea.styles'; @@ -32,8 +32,8 @@ const handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault(); export const TextareaCounter = forwardRefAndName( 'TextareaCounter', ({ length, value, help, onCloseHelp, textarea, size }, ref) => { - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const [width, setWidth] = useState(textarea.clientWidth); const [height, setHeight] = useState(textarea.clientHeight); diff --git a/packages/react-ui/components/Toggle/Toggle.mixins.ts b/packages/react-ui/components/Toggle/Toggle.mixins.ts index 620c36d6584..afc4a8222ec 100644 --- a/packages/react-ui/components/Toggle/Toggle.mixins.ts +++ b/packages/react-ui/components/Toggle/Toggle.mixins.ts @@ -73,4 +73,3 @@ export const inputSizeMixin = (emotion: Emotion) => (toggleHeight: string, toggl } `; }; - diff --git a/packages/react-ui/components/Toggle/Toggle.styles.ts b/packages/react-ui/components/Toggle/Toggle.styles.ts index ed2cb23c571..fc016bcc60a 100644 --- a/packages/react-ui/components/Toggle/Toggle.styles.ts +++ b/packages/react-ui/components/Toggle/Toggle.styles.ts @@ -175,21 +175,22 @@ export const getStyles = (emotion: Emotion) => } `; }, - inputSmall(t: Theme) { - return css` - ${inputSizeMixin(t.toggleHeightSmall, t.toggleWidthSmall)}; + + inputSmall(t: Theme) { + return emotion.css` + ${inputSizeMixin(emotion)(t.toggleHeightSmall, t.toggleWidthSmall)}; `; - }, - inputMedium(t: Theme) { - return css` - ${inputSizeMixin(t.toggleHeightMedium, t.toggleWidthMedium)}; + }, + inputMedium(t: Theme) { + return emotion.css` + ${inputSizeMixin(emotion)(t.toggleHeightMedium, t.toggleWidthMedium)}; `; - }, - inputLarge(t: Theme) { - return css` - ${inputSizeMixin(t.toggleHeightLarge, t.toggleWidthLarge)}; + }, + inputLarge(t: Theme) { + return emotion.css` + ${inputSizeMixin(emotion)(t.toggleHeightLarge, t.toggleWidthLarge)}; `; - }, + }, container(t: Theme) { return emotion.css` diff --git a/packages/react-ui/components/Toggle/Toggle.tsx b/packages/react-ui/components/Toggle/Toggle.tsx index 205c8b61c1f..cafe349c3bf 100644 --- a/packages/react-ui/components/Toggle/Toggle.tsx +++ b/packages/react-ui/components/Toggle/Toggle.tsx @@ -236,7 +236,7 @@ export class Toggle extends React.Component { } } - const styles = getStyles(this.emotion); + styles = getStyles(this.emotion); private getCaptionSizeClassName() { const styles = getStyles(this.emotion); switch (this.getProps().size) { @@ -300,10 +300,6 @@ export class Toggle extends React.Component { checked={checked} onChange={this.handleChange} className={this.emotion.cx(this.getInputSizeClassName(), styles.input(this.theme))} - this.getInputSizeClassName(), - isTheme2022(this.theme) && styles.input2022(this.theme), - { - )} onFocus={this.handleFocus} onBlur={this.handleBlur} ref={this.inputRef} diff --git a/packages/react-ui/components/Token/Token.styles.ts b/packages/react-ui/components/Token/Token.styles.ts index 9db72801880..6adfee04ed3 100644 --- a/packages/react-ui/components/Token/Token.styles.ts +++ b/packages/react-ui/components/Token/Token.styles.ts @@ -66,7 +66,7 @@ export const getStyles = (emotion: Emotion) => `; }, - tokenIdle(t: Theme) { + tokenIdle(t: Theme) { return emotion.css` color: ${t.tokenColor}; background: ${t.tokenBg}; @@ -121,7 +121,7 @@ export const getStyles = (emotion: Emotion) => `; }, - text() { + text() { return emotion.css` display: inline-block; `; @@ -183,7 +183,3 @@ export const getStyles = (emotion: Emotion) => `; }, }); - - const tokenColors = [ - return tokenColors; -}; \ No newline at end of file diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx index 8659d461d6a..2ba175687cf 100644 --- a/packages/react-ui/components/Token/Token.tsx +++ b/packages/react-ui/components/Token/Token.tsx @@ -13,7 +13,7 @@ import { reactGetTextContent } from '../../lib/reactGetTextContent'; import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { getColorStyles, getStyles } from './Token.styles'; +import { getStyles } from './Token.styles'; import { TokenLocale, TokenLocaleHelper } from './locale'; import { TokenView } from './TokenView'; @@ -109,7 +109,6 @@ export class Token extends React.Component { ); const styles = getStyles(this.emotion); - const colorStyles = getColorStyles(this.emotion); const classNames = this.emotion.cx( styles.tokenIdle(theme), !isActive && !warning && !error && !disabled && styles.tokenHover(theme), diff --git a/packages/react-ui/components/Token/TokenView.tsx b/packages/react-ui/components/Token/TokenView.tsx index 8323da8b8d5..256fd269d62 100644 --- a/packages/react-ui/components/Token/TokenView.tsx +++ b/packages/react-ui/components/Token/TokenView.tsx @@ -1,8 +1,8 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, useContext } from 'react'; import { CommonWrapper } from '../../internal/CommonWrapper'; -import { useEmotion } from '../../lib/theming/Emotion'; -import { useTheme } from '../../lib/theming/useTheme'; +import { EmotionContext } from '../../lib/theming/Emotion'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { TokenSize } from './Token'; import { getStyles, globalClasses } from './Token.styles'; @@ -15,8 +15,8 @@ export interface TokenViewProps extends React.HTMLAttributes { export function TokenView(props: TokenViewProps) { const { size = 'small', children, closeButton, hideCloseButton, className, ...rest } = props; - const theme = useTheme(); - const emotion = useEmotion(); + const theme = useContext(ThemeContext); + const emotion = useContext(EmotionContext); const styles = getStyles(emotion); const getSizeClassName = (size: TokenSize) => { diff --git a/packages/react-ui/components/TokenInput/TokenInput.tsx b/packages/react-ui/components/TokenInput/TokenInput.tsx index 01cdb91af29..4e526b5edb3 100644 --- a/packages/react-ui/components/TokenInput/TokenInput.tsx +++ b/packages/react-ui/components/TokenInput/TokenInput.tsx @@ -39,7 +39,6 @@ import { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { getUid } from '../../lib/uidUtils'; import { TokenView } from '../Token/TokenView'; - getFullReactUIFlagsContext, import { ThemeContext } from '../../lib/theming/ThemeContext'; import { TokenInputLocale, TokenInputLocaleHelper } from './locale'; @@ -378,21 +377,20 @@ export class TokenInput extends React.PureComponent - {(emotion) => { - this.emotion = emotion; - return ( - - {(theme) => { - this.theme = theme; - return this.renderMain(); - }} - - ); + + {(emotion) => { + this.emotion = emotion; + return ( + + {(theme) => { + this.theme = theme; + return this.renderMain(); }} - + ); }} + + ); } private getLabelSizeClassName() { diff --git a/packages/react-ui/components/__stories__/sandbox.stories.tsx b/packages/react-ui/components/__stories__/sandbox.stories.tsx index 97b9f4b0b9d..5d1f6756a18 100644 --- a/packages/react-ui/components/__stories__/sandbox.stories.tsx +++ b/packages/react-ui/components/__stories__/sandbox.stories.tsx @@ -12,7 +12,7 @@ export default { export const Default = () => { const root = useRef(null); - const [_, forceUpdate] = useState(); + const [, forceUpdate] = useState(); useEffect(() => forceUpdate(Date.now), [root.current]); @@ -20,7 +20,7 @@ export const Default = () => {
{root.current && ( - +
Tooltip
}> diff --git a/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.tsx b/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.tsx index 4622e1d24dd..95caa5c4601 100644 --- a/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.tsx +++ b/packages/react-ui/internal/CloseButtonIcon/CloseButtonIcon.tsx @@ -1,12 +1,12 @@ -import React, { AriaAttributes, CSSProperties } from 'react'; +import React, { AriaAttributes, CSSProperties, useContext } from 'react'; import { globalObject } from '@skbkontur/global-object'; -import { useEmotion } from '../../lib/theming/Emotion'; +import { EmotionContext } from '../../lib/theming/Emotion'; import { keyListener } from '../../lib/events/keyListener'; import { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { CommonProps, CommonWrapper } from '../CommonWrapper'; -import { useTheme } from '../../lib/theming/useTheme'; +import { ThemeContext } from '../../lib/theming/ThemeContext'; import { getStyles } from './CloseButtonIcon.styles'; import { CrossIcon } from './CrossIcon'; @@ -56,8 +56,8 @@ export const CloseButtonIcon: React.FunctionComponent = ({ style, ...rest }) => { - const emotion = useEmotion(); - const _theme = useTheme(); + const emotion = useContext(EmotionContext); + const _theme = useContext(ThemeContext); const theme = ThemeFactory.create( { closeBtnIconColor: color ?? _theme.closeBtnIconColor, diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx index 4e26e19ad39..91621141370 100644 --- a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx +++ b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx @@ -453,7 +453,6 @@ export class ComboBoxView extends React.Component, Combo if (rightIcon || drawArrow) { return rightIcon || ; } - const styles = getStyles(this.emotion); return null; }; diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx index ad839afcdcf..6ebfe0c6ada 100644 --- a/packages/react-ui/internal/DateSelect/DateSelect.tsx +++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx @@ -7,7 +7,6 @@ import { getRandomID, isNonNullable } from '../../lib/utils'; import { DatePickerLocale, DatePickerLocaleHelper } from '../../components/DatePicker/locale'; import { locale } from '../../lib/locale/decorators'; import { Theme } from '../../lib/theming/Theme'; -import { ArrowChevronDownIcon, ArrowChevronUpIcon, ArrowTriangleUpDownIcon } from '../icons/16px'; import { EmotionConsumer } from '../../lib/theming/Emotion'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { ButtonParams, Select } from '../../components/Select'; @@ -129,7 +128,6 @@ export class DateSelect extends React.PureComponent {
{this.getItem(value)} - const styles = getStyles(this.emotion);
{isInteractiveElement && ( @@ -151,7 +149,6 @@ export class DateSelect extends React.PureComponent { return (