From 88c19cee3406c3903784ddd1c1b25eb6682a0457 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 17 Apr 2024 12:38:24 +0300 Subject: [PATCH 01/71] chore: add types --- packages/react-ui/typings/react-ref.d.ts | 34 ++++++++++++++++++++ packages/react-ui/typings/utility-types.d.ts | 2 ++ 2 files changed, 36 insertions(+) create mode 100644 packages/react-ui/typings/react-ref.d.ts diff --git a/packages/react-ui/typings/react-ref.d.ts b/packages/react-ui/typings/react-ref.d.ts new file mode 100644 index 00000000000..8ec1ce2acb8 --- /dev/null +++ b/packages/react-ui/typings/react-ref.d.ts @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Merge } from './utility-types'; + +type PropsWithComponent = P & { + /** + * Компонент, используемый в качестве корневого узла. + */ + component?: T; +}; + +export type PolymorphicPropsWithoutRef = Merge< + T extends keyof JSX.IntrinsicElements + ? React.PropsWithoutRef + : React.ComponentPropsWithoutRef, + PropsWithComponent +>; + +export type PolymorphicPropsWithRef = Merge< + T extends keyof JSX.IntrinsicElements ? React.PropsWithRef : React.ComponentPropsWithRef, + PropsWithComponent +>; + +type PolymorphicExoticComponent

, T extends React.ElementType = React.ElementType> = Merge< + React.ExoticComponent

, + { + (props: PolymorphicPropsWithRef): React.ReactElement | null; + } +>; + +export type PolymorphicForwardRefExoticComponent = Merge< + React.ForwardRefExoticComponent

, + PolymorphicExoticComponent +>; diff --git a/packages/react-ui/typings/utility-types.d.ts b/packages/react-ui/typings/utility-types.d.ts index e57553f4e13..5b76a7dc3cc 100644 --- a/packages/react-ui/typings/utility-types.d.ts +++ b/packages/react-ui/typings/utility-types.d.ts @@ -18,3 +18,5 @@ type Enumerate = Acc['length'] exte : Enumerate; export type Range = Exclude, Enumerate>; + +export type Merge = Omit & U; From 583a0ed417e50f3b52dd3949944aa7bac00aa154 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 17 Apr 2024 12:39:36 +0300 Subject: [PATCH 02/71] refactor(Link): add new component prop --- packages/react-ui/components/Link/Link.tsx | 44 ++++++++++++---------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 18fec0d86df..944a0a01417 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,7 +1,8 @@ import React, { AriaAttributes } from 'react'; -import PropTypes from 'prop-types'; import { globalObject } from '@skbkontur/global-object'; +import { resetButton } from '../../lib/styles/Mixins'; +import { PolymorphicPropsWithRef } from '../../typings/react-ref'; import { Override } from '../../typings/utility-types'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; @@ -83,6 +84,13 @@ export interface LinkProps } > {} +const DEFAULT_LINK_ELEMENT = 'a'; + +type LinkPropsWithComponent = PolymorphicPropsWithRef< + LinkProps, + C +>; + export interface LinkState { focusedByTab: boolean; } @@ -91,27 +99,20 @@ export const LinkDataTids = { root: 'Link__root', } as const; -type DefaultProps = Required>; -type DefaultizedLinkProps = DefaultizedProps; +type DefaultProps = Required>; +type DefaultizedLinkProps = DefaultizedProps, DefaultProps>; /** * Элемент ссылки из HTML. */ @rootNode -export class Link extends React.Component { +export class Link extends React.Component< + LinkPropsWithComponent, + LinkState +> { public static __KONTUR_REACT_UI__ = 'Link'; - public static propTypes = { - disabled: PropTypes.bool, - - href: PropTypes.string, - - icon: PropTypes.node, - - use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']), - }; - - public static defaultProps: DefaultProps = { + public static defaultProps = { href: '', use: 'default', as: 'a', @@ -149,7 +150,7 @@ export class Link extends React.Component { ); } - private renderMain = (props: CommonWrapperRestProps) => { + private renderMain = (props: CommonWrapperRestProps>) => { const { disabled, href, @@ -160,11 +161,13 @@ export class Link extends React.Component { _button, _buttonOpened, rel: relOrigin, - as: Component, + as, + component, focused = false, ...rest } = props; const _isTheme2022 = isTheme2022(this.theme); + const Root = component || as; let arrow = null; if (_button) { @@ -193,6 +196,7 @@ export class Link extends React.Component { !!_button && styles.button(this.theme), !!_buttonOpened && styles.buttonOpened(this.theme), this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022), + Root === 'button' && resetButton(), ), href, rel, @@ -224,12 +228,12 @@ export class Link extends React.Component { } return ( - + {leftIconElement} {child} {rightIconElement} {arrow} - + ); }; @@ -251,7 +255,7 @@ export class Link extends React.Component { private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading } = this.props; - const href = this.getProps().href; + const href = this.getProps().href || this.getProps().to; if (!href) { event.preventDefault(); } From 95d9bdb12cedfeba31324ea2e83c63f4183af54b Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 17 Apr 2024 12:40:51 +0300 Subject: [PATCH 03/71] refactor(Button): add new component prop --- .../components/Button/Button.styles.ts | 40 +++++---- .../react-ui/components/Button/Button.tsx | 81 ++++++++++++++----- 2 files changed, 86 insertions(+), 35 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 1dc6f3cbc54..1efa2eeba0d 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -523,7 +523,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -535,7 +535,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.default(t)}; } `; @@ -553,7 +553,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -565,7 +565,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.primary(t)} } `; @@ -583,7 +583,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -595,7 +595,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.success(t)} } `; @@ -613,7 +613,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -625,7 +625,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.danger(t)} } `; @@ -643,7 +643,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -655,7 +655,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.pay(t)} } `; @@ -665,7 +665,7 @@ export const styles = memoizeStyle({ return css` &, &:enabled, - &:hover:enabled { + &:hover { box-shadow: none; .${globalClasses.arrowHelperTop}, .${globalClasses.arrowHelperBottom} { box-shadow: none !important; @@ -674,7 +674,7 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -707,7 +707,7 @@ export const styles = memoizeStyle({ color: ${t.btnDefaultTextColor}; background: transparent; - &:hover:enabled { + &:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -719,7 +719,7 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active { ${activeStyles.backless(t)} } `; @@ -977,6 +977,18 @@ export const styles = memoizeStyle({ visibility: hidden; `; }, + + userSelect() { + return css` + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ + `; + }, }); export const activeStyles = memoizeStyle({ diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index c1c16586d62..290d1224df7 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -2,7 +2,7 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; import { HTMLProps } from '../../typings/html'; -import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; +import { isExternalLink, isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; @@ -15,6 +15,7 @@ import { createPropsGetter } from '../../lib/createPropsGetter'; import { isTheme2022 } from '../../lib/theming/ThemeHelpers'; import { Link, LinkProps } from '../Link'; import { SizeProp } from '../../lib/types/props'; +import { PolymorphicPropsWithRef } from '../../typings/react-ref'; import { styles, activeStyles, globalClasses } from './Button.styles'; import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; @@ -190,6 +191,13 @@ export interface ButtonProps theme?: ThemeIn; } +const DEFAULT_BUTTON_ELEMENT = 'button'; + +type ButtonPropsWithComponent = PolymorphicPropsWithRef< + ButtonProps, + C +>; + export interface ButtonState { focusedByTab: boolean; } @@ -199,10 +207,19 @@ export const ButtonDataTids = { spinner: 'Button__spinner', } as const; -type DefaultProps = Required>; +type DefaultProps = Required>; + +const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children }: LinkProps) => ( + + {children} + +); @rootNode -export class Button extends React.Component { +export class Button extends React.Component< + ButtonPropsWithComponent, + ButtonState +> { public static __KONTUR_REACT_UI__ = 'Button'; public static __BUTTON__ = true; @@ -210,6 +227,7 @@ export class Button extends React.Component { use: 'default', size: 'small', type: 'button', + component: 'button', }; private getProps = createPropsGetter(Button.defaultProps); @@ -301,10 +319,30 @@ export class Button extends React.Component { 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, role, + href, + rel: relOrigin, + target, } = this.props; - const { use, type, size } = this.getProps(); + + const { use, type, size, component: Root } = this.getProps(); const sizeClass = this.getSizeClassName(); + const buttonOnlyProps = { + // By default the type attribute is 'submit'. IE8 will fire a click event + // on this button if somewhere on the page user presses Enter while some + // input is focused. So we set type to 'button' by default. + type, + }; + + let rel = relOrigin; + rel = typeof rel === 'undefined' && !!href && `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; + + const linkOnlyProps = { + href, + rel, + target, + }; + const isFocused = this.state.focusedByTab || visuallyFocused; const isLink = use === 'link'; const _isTheme2022 = isTheme2022(this.theme); @@ -326,6 +364,7 @@ export class Button extends React.Component { _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow, + Root === 'a' && styles.userSelect(), ...(trueDisabled ? [ styles.disabled(this.theme), @@ -363,10 +402,6 @@ export class Button extends React.Component { } const rootProps = { - // By default the type attribute is 'submit'. IE8 will fire a click event - // on this button if somewhere on the page user presses Enter while some - // input is focused. So we set type to 'button' by default. - type, role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, @@ -392,6 +427,8 @@ export class Button extends React.Component { onClickCapture, tabIndex: disableFocus ? -1 : 0, title: this.props.title, + ...(Root === 'a' ? linkOnlyProps : {}), + ...(Root === 'button' ? buttonOnlyProps : {}), }; const wrapProps = { @@ -479,29 +516,31 @@ export class Button extends React.Component { if (_isTheme2022 && isLink && !loading) { captionNode = ( - - {children} - + { + + {children} + + } ); } - + console.log(this.props); return ( - + ); From 51af3f68e440ae7750607a959c8968d23db98e48 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 17 Apr 2024 17:22:17 +0300 Subject: [PATCH 04/71] chore: remove console.log --- packages/react-ui/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 290d1224df7..b01c36ac9de 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -531,7 +531,7 @@ export class Button ); } - console.log(this.props); + return ( From 47478d41b27d7ad0e08636a2cd06d19038c6d5f7 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 17 Apr 2024 17:23:27 +0300 Subject: [PATCH 05/71] chore: fix style --- packages/react-ui/components/Link/Link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 944a0a01417..9ad077ad91a 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -189,6 +189,7 @@ export class Link ext const linkProps = { className: cx( styles.useRoot(), + Root === 'button' && resetButton(), use === 'default' && styles.useDefault(this.theme), use === 'success' && styles.useSuccess(this.theme), use === 'danger' && styles.useDanger(this.theme), @@ -196,7 +197,6 @@ export class Link ext !!_button && styles.button(this.theme), !!_buttonOpened && styles.buttonOpened(this.theme), this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022), - Root === 'button' && resetButton(), ), href, rel, From 217e7d9bc08d0f05ee5638ba0fd53ee99b213fec Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 24 Apr 2024 17:39:03 +0300 Subject: [PATCH 06/71] refactor(Button): fix types --- .../react-ui/components/Button/Button.tsx | 45 +++++++------------ 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index b01c36ac9de..f7cf4a8753b 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -2,7 +2,7 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; import { HTMLProps } from '../../typings/html'; -import { isExternalLink, isKonturIcon, isReactUIComponent } from '../../lib/utils'; +import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; @@ -15,7 +15,7 @@ import { createPropsGetter } from '../../lib/createPropsGetter'; import { isTheme2022 } from '../../lib/theming/ThemeHelpers'; import { Link, LinkProps } from '../Link'; import { SizeProp } from '../../lib/types/props'; -import { PolymorphicPropsWithRef } from '../../typings/react-ref'; +import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; import { styles, activeStyles, globalClasses } from './Button.styles'; import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; @@ -30,7 +30,7 @@ export type ButtonSize = SizeProp; export type ButtonType = 'button' | 'submit' | 'reset'; export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless'; -export interface ButtonProps +interface ButtonOwnProps extends CommonProps, Pick< AriaAttributes, @@ -191,10 +191,10 @@ export interface ButtonProps theme?: ThemeIn; } -const DEFAULT_BUTTON_ELEMENT = 'button'; +const BUTTON_DEFAULT_ELEMENT = 'button'; -type ButtonPropsWithComponent = PolymorphicPropsWithRef< - ButtonProps, +export type ButtonProps = PolymorphicPropsWithoutRef< + ButtonOwnProps, C >; @@ -207,7 +207,7 @@ export const ButtonDataTids = { spinner: 'Button__spinner', } as const; -type DefaultProps = Required>; +type DefaultProps = Required>; const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children }: LinkProps) => ( @@ -216,18 +216,15 @@ const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children ); @rootNode -export class Button extends React.Component< - ButtonPropsWithComponent, - ButtonState -> { +export class Button extends React.Component, ButtonState> { public static __KONTUR_REACT_UI__ = 'Button'; public static __BUTTON__ = true; public static defaultProps: DefaultProps = { use: 'default', size: 'small', - type: 'button', - component: 'button', + type: BUTTON_DEFAULT_ELEMENT, + component: BUTTON_DEFAULT_ELEMENT, }; private getProps = createPropsGetter(Button.defaultProps); @@ -319,14 +316,14 @@ export class Button 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, role, - href, - rel: relOrigin, - target, + ...rest } = this.props; + const { use, type, size, component } = this.getProps(); - const { use, type, size, component: Root } = this.getProps(); const sizeClass = this.getSizeClassName(); + const Root = component as React.ElementType; + const buttonOnlyProps = { // By default the type attribute is 'submit'. IE8 will fire a click event // on this button if somewhere on the page user presses Enter while some @@ -334,15 +331,6 @@ export class Button type, }; - let rel = relOrigin; - rel = typeof rel === 'undefined' && !!href && `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; - - const linkOnlyProps = { - href, - rel, - target, - }; - const isFocused = this.state.focusedByTab || visuallyFocused; const isLink = use === 'link'; const _isTheme2022 = isTheme2022(this.theme); @@ -427,8 +415,7 @@ export class Button onClickCapture, tabIndex: disableFocus ? -1 : 0, title: this.props.title, - ...(Root === 'a' ? linkOnlyProps : {}), - ...(Root === 'button' ? buttonOnlyProps : {}), + ...(Root === BUTTON_DEFAULT_ELEMENT ? buttonOnlyProps : {}), }; const wrapProps = { @@ -535,7 +522,7 @@ export class Button return ( - + {innerShadowNode} {outlineNode} {arrowNode} From 10ae5b21eb25b2da6fd2653a16cc02f88db97693 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 24 Apr 2024 17:40:00 +0300 Subject: [PATCH 07/71] refactor(Button): fix visuals when component=a --- packages/react-ui/components/Button/Button.styles.ts | 8 +++++++- packages/react-ui/components/Button/Button.tsx | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 1efa2eeba0d..e1f230681da 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -978,7 +978,7 @@ export const styles = memoizeStyle({ `; }, - userSelect() { + disableTextSelect() { return css` -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ @@ -989,6 +989,12 @@ export const styles = memoizeStyle({ supported by Chrome, Edge, Opera and Firefox */ `; }, + anchorDisabled() { + return css` + cursor: default; + pointer-events: none; + `; + }, }); export const activeStyles = memoizeStyle({ diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index f7cf4a8753b..7aa89199790 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -352,7 +352,7 @@ export class Button extends React.Component extends React.Component Date: Wed, 24 Apr 2024 17:42:51 +0300 Subject: [PATCH 08/71] refactor(Link): fix types --- packages/react-ui/components/Link/Link.tsx | 162 +++++++++++---------- 1 file changed, 82 insertions(+), 80 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 9ad077ad91a..232fa25714b 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -2,8 +2,7 @@ import React, { AriaAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; import { resetButton } from '../../lib/styles/Mixins'; -import { PolymorphicPropsWithRef } from '../../typings/react-ref'; -import { Override } from '../../typings/utility-types'; +import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; @@ -23,74 +22,66 @@ import { LinkIcon } from './LinkIcon'; export interface LinkProps extends Pick, CommonProps, - Override< - React.AnchorHTMLAttributes, - { - /** - * Отключенное состояние. - */ - disabled?: boolean; - /** - * HTML-атрибут `href`. - */ - href?: string; - /** - * Добавляет ссылке иконку слева. - */ - icon?: React.ReactElement; - /** - * Добавляет ссылке иконку справа. - */ - rightIcon?: React.ReactElement; - /** - * Тема ссылки. - */ - use?: 'default' | 'success' | 'danger' | 'grayed'; - /** - * @ignore - */ - _button?: boolean; - /** - * @ignore - */ - _buttonOpened?: boolean; - /** - * HTML-атрибут `tabindex`. - */ - tabIndex?: number; - /** - * Переводит ссылку в состояние загрузки. - */ - loading?: boolean; - /** - * HTML-событие `onclick`. - */ - onClick?: (event: React.MouseEvent) => void; + Pick, 'onBlur' | 'onFocus'> { + /** + * Отключенное состояние. + */ + disabled?: boolean; + /** + * Добавляет ссылке иконку слева. + */ + icon?: React.ReactElement; + /** + * Добавляет ссылке иконку справа. + */ + rightIcon?: React.ReactElement; + /** + * Тема ссылки. + */ + use?: 'default' | 'success' | 'danger' | 'grayed'; + /** + * @ignore + */ + _button?: boolean; + /** + * @ignore + */ + _buttonOpened?: boolean; + /** + * HTML-атрибут `tabindex`. + */ + tabIndex?: number; + /** + * Переводит ссылку в состояние загрузки. + */ + loading?: boolean; + /** + * HTML-событие `onclick`. + */ + onClick?: (event: React.MouseEvent) => void; - /** - * Обычный объект с переменными темы. - * Он будет объединён с темой из контекста. - */ - theme?: ThemeIn; - /** - * Компонент, используемый в качестве корневого узла. - * @ignore - */ - as?: React.ElementType | keyof React.ReactHTML; - /** - * @ignore - */ - focused?: boolean; - } - > {} + /** + * Обычный объект с переменными темы. + * Он будет объединён с темой из контекста. + */ + theme?: ThemeIn; + /** + * Компонент, используемый в качестве корневого узла. + * @ignore + */ + as?: React.ElementType | keyof React.ReactHTML; + /** + * @ignore + */ + focused?: boolean; +} -const DEFAULT_LINK_ELEMENT = 'a'; +const LINK_DEFAULT_ELEMENT = 'a'; -type LinkPropsWithComponent = PolymorphicPropsWithRef< +type LinkPropsWithComponent = PolymorphicPropsWithoutRef< LinkProps, C >; - export interface LinkState { focusedByTab: boolean; } @@ -99,23 +90,25 @@ export const LinkDataTids = { root: 'Link__root', } as const; -type DefaultProps = Required>; -type DefaultizedLinkProps = DefaultizedProps, DefaultProps>; +type DefaultProps = Required>; +type DefaultizedLinkProps = DefaultizedProps< + LinkPropsWithComponent, + DefaultProps +>; /** * Элемент ссылки из HTML. */ @rootNode -export class Link extends React.Component< +export class Link extends React.Component< LinkPropsWithComponent, LinkState > { public static __KONTUR_REACT_UI__ = 'Link'; public static defaultProps = { - href: '', use: 'default', - as: 'a', + as: LINK_DEFAULT_ELEMENT, }; private getProps = createPropsGetter(Link.defaultProps); @@ -151,6 +144,16 @@ export class Link ext } private renderMain = (props: CommonWrapperRestProps>) => { + + private getSecureRel = ({ href, rel }: Pick) => { + if (typeof rel === 'undefined' && href) { + return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; + } + + return rel; + }; + + private renderMain = (props: CommonWrapperRestProps) => { const { disabled, href, @@ -160,25 +163,20 @@ export class Link ext loading, _button, _buttonOpened, - rel: relOrigin, + rel, as, component, focused = false, ...rest } = props; const _isTheme2022 = isTheme2022(this.theme); - const Root = component || as; + const Root = (component || as) as React.ElementType; let arrow = null; if (_button) { arrow = ; } - let rel = relOrigin; - if (typeof rel === 'undefined' && href) { - rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; - } - const isFocused = !disabled && (this.state.focusedByTab || focused); const leftIconElement = icon && ; @@ -186,6 +184,11 @@ export class Link ext ); + const linkOnlyProps = { + href, + rel: this.getSecureRel({ href, rel }), + }; + const linkProps = { className: cx( styles.useRoot(), @@ -198,12 +201,11 @@ export class Link ext !!_buttonOpened && styles.buttonOpened(this.theme), this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022), ), - href, - rel, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: disabled || loading ? -1 : this.props.tabIndex, + ...(Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {}), }; let child = this.props.children; @@ -254,8 +256,8 @@ export class Link ext }; private handleClick = (event: React.MouseEvent) => { - const { onClick, disabled, loading } = this.props; - const href = this.getProps().href || this.getProps().to; + const { onClick, disabled, loading, href } = this.props as LinkPropsWithComponent<'a'>; + if (!href) { event.preventDefault(); } From 67a1641af8e0d9030787a264c9f594d21af0d323 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 24 Apr 2024 17:43:40 +0300 Subject: [PATCH 09/71] refactor(Link): fix visuals when href isn't set --- packages/react-ui/components/Link/Link.styles.ts | 1 + packages/react-ui/components/Link/Link.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/components/Link/Link.styles.ts b/packages/react-ui/components/Link/Link.styles.ts index 12ea1b84c65..fa07df093a5 100644 --- a/packages/react-ui/components/Link/Link.styles.ts +++ b/packages/react-ui/components/Link/Link.styles.ts @@ -163,6 +163,7 @@ export const styles = memoizeStyle({ useRoot() { return css` border-bottom-color: currentColor; + cursor: pointer; `; }, diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 232fa25714b..16f3a711b5f 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -143,7 +143,13 @@ export class Link ext ); } - private renderMain = (props: CommonWrapperRestProps>) => { + private getTabIndex = ({ + disabled, + loading, + tabIndex = 0, + }: Pick) => { + return disabled || loading ? -1 : tabIndex; + }; private getSecureRel = ({ href, rel }: Pick) => { if (typeof rel === 'undefined' && href) { @@ -204,7 +210,7 @@ export class Link ext onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, - tabIndex: disabled || loading ? -1 : this.props.tabIndex, + tabIndex: this.getTabIndex({ disabled, loading, tabIndex: this.props.tabIndex }), ...(Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {}), }; From d65f850b1dcde2bf33600c663c19fcc70ed45669 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 25 Apr 2024 10:55:02 +0300 Subject: [PATCH 10/71] refactor(Button): fix failed screenshot tests --- packages/react-ui/components/Button/Button.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 7aa89199790..2b0992150bb 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -207,7 +207,7 @@ export const ButtonDataTids = { spinner: 'Button__spinner', } as const; -type DefaultProps = Required>; +type DefaultProps = Required>; const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children }: LinkProps) => ( @@ -224,7 +224,6 @@ export class Button extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component Date: Thu, 25 Apr 2024 13:09:52 +0300 Subject: [PATCH 11/71] refactor(Button): fix styles --- .../components/Button/Button.styles.ts | 35 ++++++++++++------- .../react-ui/components/Button/Button.tsx | 1 + 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index e1f230681da..d04155cebab 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -21,6 +21,7 @@ export const globalClasses = prefix('button')({ caption: 'caption', text: 'text', innerShadow: 'inner-shadow', + anchor: 'anchor', }); export const styles = memoizeStyle({ @@ -523,7 +524,8 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -535,7 +537,7 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:active:enabled { ${activeStyles.default(t)}; } `; @@ -553,7 +555,8 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -565,7 +568,7 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:active:enabled { ${activeStyles.primary(t)} } `; @@ -583,7 +586,8 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -595,7 +599,7 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:active:enabled { ${activeStyles.success(t)} } `; @@ -613,7 +617,8 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -625,7 +630,7 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:active:enabled { ${activeStyles.danger(t)} } `; @@ -643,7 +648,8 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -655,7 +661,7 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:active:enabled { ${activeStyles.pay(t)} } `; @@ -674,7 +680,8 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -707,7 +714,8 @@ export const styles = memoizeStyle({ color: ${t.btnDefaultTextColor}; background: transparent; - &:hover { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -719,7 +727,8 @@ export const styles = memoizeStyle({ )}; } - &:active { + &:hover:enabled, + &.${globalClasses.anchor}:hover { ${activeStyles.backless(t)} } `; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 2b0992150bb..d32ce8ac39e 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -356,6 +356,7 @@ export class Button extends React.Component Date: Thu, 25 Apr 2024 13:37:58 +0300 Subject: [PATCH 12/71] test: update screenshots --- .../Select/with search/search/firefox2022/emptySearch.png | 4 ++-- .../Select/with search/search/firefox2022/fullFieldSearch.png | 4 ++-- .../Select/with search/search/firefox2022/plainSearch.png | 4 ++-- .../Select/with search/search/firefox2022/pressKeyDown.png | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png index 6bdf2ba81f1..37ee3a2e986 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1a48fe66ef4320d4a4df78c3663a5bc6ab9980e1893321739e8d20860fea8b8a -size 13220 +oid sha256:c4a1b0c0a3576bd95a047b911596e4865e6e5fa25cf2a038202b50668f11f57e +size 13140 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png index ffe0c61fe0e..2524c132448 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b26afbd9c927f4a328753c308801618a41fe6b25de2a49448e36000faf0679bb -size 11208 +oid sha256:6ab56a2d65d691035354d58250184753020f39682df0012ac31a96dadc70fb6d +size 11157 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png index 6bdf2ba81f1..37ee3a2e986 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1a48fe66ef4320d4a4df78c3663a5bc6ab9980e1893321739e8d20860fea8b8a -size 13220 +oid sha256:c4a1b0c0a3576bd95a047b911596e4865e6e5fa25cf2a038202b50668f11f57e +size 13140 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png index 1714747ee67..e9379aa72a6 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2f7e668c6dd3acd153de2860813e75c6b4b87498ebf86ed917a4c40abacc3b1c -size 13373 +oid sha256:a9b97a6c152e94e159e477ca5075eefd88797ed32f4d1e258b457d9e417e9e10 +size 13294 From dd783ac4d19b91c5530b006b42b519754b8d1e6b Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 25 Apr 2024 15:44:56 +0300 Subject: [PATCH 13/71] refactor(Button): filter out link props --- .../react-ui/components/Button/Button.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index d32ce8ac39e..92bdcaf042a 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,5 +1,6 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; +import pick from 'lodash/pick'; import { HTMLProps } from '../../typings/html'; import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; @@ -191,7 +192,7 @@ interface ButtonOwnProps theme?: ThemeIn; } -const BUTTON_DEFAULT_ELEMENT = 'button'; +export const BUTTON_DEFAULT_ELEMENT = 'button'; export type ButtonProps = PolymorphicPropsWithoutRef< ButtonOwnProps, @@ -223,6 +224,9 @@ export class Button extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component; let outlineNode = null; - const isDisabled2022 = _isTheme2022 && (disabled || loading); + const isDisabled2022 = _isTheme2022 && trueDisabled; if ((!isFocused || isLink) && !isDisabled2022) { outlineNode = (

extends React.Component extends React.Component - + {innerShadowNode} {outlineNode} {arrowNode} From 3001b7bfc49e4102a2e9e3e80141046e6aef37d2 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 25 Apr 2024 16:08:34 +0300 Subject: [PATCH 14/71] refactor: export correct types --- .../react-ui/components/Button/Button.tsx | 5 +++- packages/react-ui/components/Link/Link.tsx | 23 ++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 92bdcaf042a..283b29a2adb 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -217,7 +217,10 @@ const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children ); @rootNode -export class Button extends React.Component, ButtonState> { +export class Button extends React.Component< + ButtonProps, + ButtonState +> { public static __KONTUR_REACT_UI__ = 'Button'; public static __BUTTON__ = true; diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 16f3a711b5f..05f4dc8871b 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -19,7 +19,7 @@ import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from '../../li import { globalClasses, styles } from './Link.styles'; import { LinkIcon } from './LinkIcon'; -export interface LinkProps +export interface LinkInnerProps extends Pick, CommonProps, Pick, 'onBlur' | 'onFocus'> { @@ -78,8 +78,8 @@ export interface LinkProps const LINK_DEFAULT_ELEMENT = 'a'; -type LinkPropsWithComponent = PolymorphicPropsWithoutRef< - LinkProps, +export type LinkProps = PolymorphicPropsWithoutRef< + LinkInnerProps, C >; export interface LinkState { @@ -90,9 +90,9 @@ export const LinkDataTids = { root: 'Link__root', } as const; -type DefaultProps = Required>; +type DefaultProps = Required>; type DefaultizedLinkProps = DefaultizedProps< - LinkPropsWithComponent, + LinkProps, DefaultProps >; @@ -101,7 +101,7 @@ type DefaultizedLinkProps extends React.Component< - LinkPropsWithComponent, + LinkProps, LinkState > { public static __KONTUR_REACT_UI__ = 'Link'; @@ -143,15 +143,11 @@ export class Link ext ); } - private getTabIndex = ({ - disabled, - loading, - tabIndex = 0, - }: Pick) => { + private getTabIndex = ({ disabled, loading, tabIndex = 0 }: Pick) => { return disabled || loading ? -1 : tabIndex; }; - private getSecureRel = ({ href, rel }: Pick) => { + private getSecureRel = ({ href, rel }: Pick) => { if (typeof rel === 'undefined' && href) { return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; } @@ -194,7 +190,6 @@ export class Link ext href, rel: this.getSecureRel({ href, rel }), }; - const linkProps = { className: cx( styles.useRoot(), @@ -262,7 +257,7 @@ export class Link ext }; private handleClick = (event: React.MouseEvent) => { - const { onClick, disabled, loading, href } = this.props as LinkPropsWithComponent<'a'>; + const { onClick, disabled, loading, href } = this.props as LinkProps<'a'>; if (!href) { event.preventDefault(); From d3b9a6feec6a1bd88481a387e0504d9ecc86151d Mon Sep 17 00:00:00 2001 From: Funkicide Date: Fri, 26 Apr 2024 10:15:41 +0300 Subject: [PATCH 15/71] refactor(Button): add active styles for link --- .../components/Button/Button.styles.ts | 38 +++++++++++-------- .../react-ui/components/Button/Button.tsx | 2 +- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index d04155cebab..53e3e7022c8 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -21,7 +21,7 @@ export const globalClasses = prefix('button')({ caption: 'caption', text: 'text', innerShadow: 'inner-shadow', - anchor: 'anchor', + link: 'link', }); export const styles = memoizeStyle({ @@ -525,7 +525,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -537,7 +537,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.default(t)}; } `; @@ -556,7 +557,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -568,7 +569,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.primary(t)} } `; @@ -587,7 +589,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -599,7 +601,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.success(t)} } `; @@ -618,7 +621,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -630,7 +633,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.danger(t)} } `; @@ -649,7 +653,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -661,7 +665,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.pay(t)} } `; @@ -681,7 +686,7 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -693,7 +698,8 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.text(t)} } `; @@ -715,7 +721,7 @@ export const styles = memoizeStyle({ background: transparent; &:hover:enabled, - &.${globalClasses.anchor}:hover { + &.${globalClasses.link}:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -727,8 +733,8 @@ export const styles = memoizeStyle({ )}; } - &:hover:enabled, - &.${globalClasses.anchor}:hover { + &:active:enabled, + &.${globalClasses.link}:active { ${activeStyles.backless(t)} } `; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 283b29a2adb..1ce5e019a21 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -357,7 +357,7 @@ export class Button _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow, - Root === 'a' && globalClasses.anchor, + Root === 'a' && globalClasses.link, Root === 'a' && styles.disableTextSelect(), ...(trueDisabled ? [ From 95280f4e7b798d2e93a6bb0d39356785f74bba62 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Fri, 26 Apr 2024 10:23:22 +0300 Subject: [PATCH 16/71] chore(Autocomplete): import single method instead of whole object --- .../Autocomplete/__stories__/Autocomplete.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx b/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx index 942e0c22cd8..9f55c7ec58d 100644 --- a/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx +++ b/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { flatten } from 'lodash'; +import flatten from 'lodash/flatten'; import { Gapped } from '../../Gapped'; import { Autocomplete } from '../Autocomplete'; From 66dd70427de9a399eab10306cb71a034d6186ded Mon Sep 17 00:00:00 2001 From: Funkicide Date: Fri, 26 Apr 2024 10:27:10 +0300 Subject: [PATCH 17/71] test(Link): add story for link as button --- .../Link/__stories__/Link.stories.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/react-ui/components/Link/__stories__/Link.stories.tsx b/packages/react-ui/components/Link/__stories__/Link.stories.tsx index 2c1fd4279c6..3afdf15db42 100644 --- a/packages/react-ui/components/Link/__stories__/Link.stories.tsx +++ b/packages/react-ui/components/Link/__stories__/Link.stories.tsx @@ -2,6 +2,7 @@ import React from 'react'; import OkIcon from '@skbkontur/react-icons/Ok'; import { CheckAIcon16Light } from '@skbkontur/icons/icons/CheckAIcon'; +import { ComponentTable } from '../../../internal/ComponentTable'; import { Story, CreeveyTests } from '../../../typings/stories'; import { Link } from '../Link'; import { Toast } from '../../Toast'; @@ -10,6 +11,8 @@ import { delay } from '../../../lib/utils'; import { ThemeContext } from '../../../lib/theming/ThemeContext'; import { ThemeFactory } from '../../../lib/theming/ThemeFactory'; import { ReactUIFeatureFlagsContext } from '../../../lib/featureFlagsContext'; +import { Button } from '../../Button'; +import { LinkProps } from '..'; const linkTests: CreeveyTests = { async idle() { @@ -247,3 +250,28 @@ WithLinkFocusOutlineFeatureFlag.parameters = { }, }, }; + +type LinkState = Partial>; + +const linkUseStates: LinkState[] = [{ use: 'default' }, { use: 'danger' }, { use: 'success' }, { use: 'grayed' }]; +const componentPropStates: LinkState[] = [ + { children: 'Button' }, + { disabled: true }, + { icon: }, + { icon: , loading: true }, + { rightIcon: }, + { rightIcon: , loading: true }, + { icon: , rightIcon: }, + { icon: , rightIcon: , loading: true }, +]; + +export const LinkAsButton: Story = () => { + return ( + ({ props: state }))} + rows={componentPropStates.map((x) => ({ props: x }))} + presetProps={{ children: 'Button', component: 'button' }} + /> + ); +}; From dc48d33d7b76072b5ef1a4ace4236f60a54555ec Mon Sep 17 00:00:00 2001 From: Funkicide Date: Fri, 26 Apr 2024 17:43:03 +0300 Subject: [PATCH 18/71] refactor(Link): add validation states to link --- .../react-ui/components/Button/Button.tsx | 2 +- .../react-ui/components/Link/Link.styles.ts | 25 +++++++++++++++++++ packages/react-ui/components/Link/Link.tsx | 23 +++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 1ce5e019a21..d0847762b7a 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -330,7 +330,7 @@ export class Button const sizeClass = this.getSizeClassName(); const Root = component as React.ElementType; - // TODO настроить таб индекс в кнопке ссылке + const buttonOnlyProps = { type, }; diff --git a/packages/react-ui/components/Link/Link.styles.ts b/packages/react-ui/components/Link/Link.styles.ts index fa07df093a5..fd4bec30fa0 100644 --- a/packages/react-ui/components/Link/Link.styles.ts +++ b/packages/react-ui/components/Link/Link.styles.ts @@ -164,6 +164,7 @@ export const styles = memoizeStyle({ return css` border-bottom-color: currentColor; cursor: pointer; + position: relative; `; }, @@ -277,4 +278,28 @@ export const styles = memoizeStyle({ margin-left: ${t.linkIconMarginLeft}; `; }, + + outline(t: Theme) { + return css` + border-radius: ${t.btnLinkBorderRadius}; + position: absolute; + box-shadow: none; + left: -2px; + right: -2px; + bottom: -2px; + top: -2px; + `; + }, + + outlineWarning(t: Theme) { + return css` + background-color: ${t.btnWarningSecondary}; + `; + }, + + outlineError(t: Theme) { + return css` + background-color: ${t.btnErrorSecondary}; + `; + }, }); diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 05f4dc8871b..9582c57e246 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -74,6 +74,14 @@ export interface LinkInnerProps * @ignore */ focused?: boolean; + /** + * Состояние валидации при ошибке. + */ + error?: boolean; + /** + * Состояние валидации при предупреждении. + */ + warning?: boolean; } const LINK_DEFAULT_ELEMENT = 'a'; @@ -169,6 +177,8 @@ export class Link ext as, component, focused = false, + error, + warning, ...rest } = props; const _isTheme2022 = isTheme2022(this.theme); @@ -190,6 +200,18 @@ export class Link ext href, rel: this.getSecureRel({ href, rel }), }; + + const outlineNode = ( +
+ ); + const linkProps = { className: cx( styles.useRoot(), @@ -233,6 +255,7 @@ export class Link ext return ( {leftIconElement} + {outlineNode} {child} {rightIconElement} {arrow} From a902dc747629cc267bb312a7bac8c2c2ff84684d Mon Sep 17 00:00:00 2001 From: Funkicide Date: Sat, 27 Apr 2024 13:34:59 +0300 Subject: [PATCH 19/71] refactor(Button): update styles * Reworked disabled styles for component=a * Added support for icon color customization in component= a --- .../react-ui/components/Button/Button.styles.ts | 17 ++++++++--------- packages/react-ui/components/Button/Button.tsx | 6 ++---- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 53e3e7022c8..88812a8e5bd 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -22,6 +22,7 @@ export const globalClasses = prefix('button')({ text: 'text', innerShadow: 'inner-shadow', link: 'link', + disabled: 'disabled', }); export const styles = memoizeStyle({ @@ -65,13 +66,16 @@ export const styles = memoizeStyle({ width: 0; } - &:hover:enabled svg { + &:hover:enabled svg, + &.${globalClasses.link}:hover svg { color: ${t.btnIconHoverColor}; } - &:disabled svg { + &:disabled svg, + &.${globalClasses.link}.${globalClasses.disabled} svg { color: ${t.btnIconDisabledColor}; } - &:enabled svg { + &:enabled svg, + &.${globalClasses.link} svg { color: ${t.btnIconColor}; } `; @@ -359,6 +363,7 @@ export const styles = memoizeStyle({ disabled(t: Theme) { return css` cursor: default; + pointer-events: none; box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor}; background-image: none; @@ -1004,12 +1009,6 @@ export const styles = memoizeStyle({ supported by Chrome, Edge, Opera and Firefox */ `; }, - anchorDisabled() { - return css` - cursor: default; - pointer-events: none; - `; - }, }); export const activeStyles = memoizeStyle({ diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index d0847762b7a..584987a48e2 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -353,12 +353,12 @@ export class Button styles.root(this.theme), styles[use](this.theme), sizeClass, + styles.disableTextSelect(), narrow && styles.narrow(), _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow, Root === 'a' && globalClasses.link, - Root === 'a' && styles.disableTextSelect(), ...(trueDisabled ? [ styles.disabled(this.theme), @@ -367,7 +367,7 @@ export class Button checked && styles.checkedDisabled2022(this.theme), borderless && styles.borderless2022(), use === 'backless' && !checked && styles.backlessDisabled2022(this.theme), - Root === 'a' && styles.anchorDisabled(), + Root === 'a' && globalClasses.disabled, ] : [ active && !checked && activeStyles[use](this.theme), @@ -393,8 +393,6 @@ export class Button [styles.narrow()]: narrow, [styles.noPadding()]: _noPadding, [styles.noRightPadding()]: _noRightPadding, - [styles.disableTextSelect()]: Root === 'a', - [styles.anchorDisabled()]: Root === 'a' && trueDisabled, }); } From 3564345bccd1dbcf4e142344a9db77cb72767ea0 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Sat, 27 Apr 2024 14:20:19 +0300 Subject: [PATCH 20/71] refactor(Button): add negative tabIndex to Button as link --- packages/react-ui/components/Button/Button.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 584987a48e2..371a47a6077 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -287,6 +287,18 @@ export class Button return {children}; } + private getTabIndex({ + disableFocus, + disabled, + tabIndex = 0, + }: Pick) { + if (disableFocus || disabled) { + return -1; + } + + return tabIndex; + } + private renderMain() { const { corners, @@ -315,6 +327,7 @@ export class Button onClickCapture, width, children, + tabIndex, component = BUTTON_DEFAULT_ELEMENT, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, @@ -420,7 +433,7 @@ export class Button onMouseDown, onMouseUp, onClickCapture, - tabIndex: disableFocus ? -1 : 0, + tabIndex: this.getTabIndex({ disableFocus, disabled, tabIndex }), title: this.props.title, ...(Root === BUTTON_DEFAULT_ELEMENT ? buttonOnlyProps : {}), ...(Root === 'a' ? linkOnlyProps : {}), From 5f79e054e736bc2d42ffc7a37682bf0885216fe4 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 1 May 2024 17:47:21 +0300 Subject: [PATCH 21/71] refactor(Button): make disabled button only prop --- packages/react-ui/components/Button/Button.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 371a47a6077..9d74e372226 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -344,11 +344,6 @@ export class Button const Root = component as React.ElementType; - const buttonOnlyProps = { - type, - }; - const linkOnlyProps = pick(rest, ['href', 'hrefTo', 'rel', 'target']); - const isFocused = this.state.focusedByTab || visuallyFocused; const isLink = use === 'link'; const _isTheme2022 = isTheme2022(this.theme); @@ -409,6 +404,13 @@ export class Button }); } + const buttonOnlyProps = { + type, + disabled: trueDisabled, + }; + + const linkOnlyProps = pick(rest, ['href', 'hrefTo', 'rel', 'target']); + const rootProps = { role, 'aria-describedby': ariaDescribedby, @@ -422,7 +424,6 @@ export class Button textAlign: align, ...corners, }, - disabled: trueDisabled, onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, From ad496716feb8c41fe1f20112faa315dc29e9d9b1 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 2 May 2024 10:50:13 +0300 Subject: [PATCH 22/71] refactor(Link): update getRel method --- packages/react-ui/components/Link/Link.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 9582c57e246..56ed16f5547 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -155,8 +155,8 @@ export class Link ext return disabled || loading ? -1 : tabIndex; }; - private getSecureRel = ({ href, rel }: Pick) => { - if (typeof rel === 'undefined' && href) { + private getRel = ({ href, rel }: Pick) => { + if (!rel && href) { return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; } @@ -198,7 +198,7 @@ export class Link ext const linkOnlyProps = { href, - rel: this.getSecureRel({ href, rel }), + rel: this.getRel({ href, rel }), }; const outlineNode = ( From f5213259a05cc69f3fd7d060604cd138ec71cfa6 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 2 May 2024 11:47:49 +0300 Subject: [PATCH 23/71] refactor(Button): add hrefLang to linkonly props --- packages/react-ui/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 9d74e372226..d9e270902ff 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -409,7 +409,7 @@ export class Button disabled: trueDisabled, }; - const linkOnlyProps = pick(rest, ['href', 'hrefTo', 'rel', 'target']); + const linkOnlyProps = pick(rest, ['href', 'hrefLang', 'rel', 'target']); const rootProps = { role, From 5b3bf7640781afecc6e5d520266a9ff6b4ede35e Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 2 May 2024 13:01:45 +0300 Subject: [PATCH 24/71] refactor(Button): disable focus on loading when component=a --- packages/react-ui/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index d9e270902ff..5ab76353b71 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -434,7 +434,7 @@ export class Button onMouseDown, onMouseUp, onClickCapture, - tabIndex: this.getTabIndex({ disableFocus, disabled, tabIndex }), + tabIndex: this.getTabIndex({ disableFocus, disabled: trueDisabled, tabIndex }), title: this.props.title, ...(Root === BUTTON_DEFAULT_ELEMENT ? buttonOnlyProps : {}), ...(Root === 'a' ? linkOnlyProps : {}), From eb982782d5b55ddd276f0f078d2f6959e48a21b0 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 2 May 2024 13:11:23 +0300 Subject: [PATCH 25/71] test(Button): add test for Button component=a --- .../Button/__tests__/Button-test.tsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/packages/react-ui/components/Button/__tests__/Button-test.tsx b/packages/react-ui/components/Button/__tests__/Button-test.tsx index 0c326352206..e8b63ec8d14 100644 --- a/packages/react-ui/components/Button/__tests__/Button-test.tsx +++ b/packages/react-ui/components/Button/__tests__/Button-test.tsx @@ -235,4 +235,79 @@ describe('Button', () => { expect(handleReset).toHaveBeenCalled(); }); }); + + describe('with component=a prop', () => { + const linkProps = { href: '/', hrefLang: 'ru', rel: 'noopener', target: '_blank' }; + const buttonProps = { type: 'button' as const, disabled: true }; + it('should render tag by default', () => { + render( + , + ); + + expect(screen.getByRole('link')).toBeInTheDocument(); + }); + + it('should render ); + + expect(screen.getByRole('button')).toBeInTheDocument(); + }); + + test('should only have link props', () => { + render( + , + ); + + const buttonLink = screen.getByRole('link'); + + Object.entries(linkProps).forEach(([prop]) => { + expect(buttonLink).toHaveAttribute(prop); + }); + Object.entries(buttonProps).forEach(([prop]) => { + expect(buttonLink).not.toHaveAttribute(prop); + }); + }); + + test('should only have button props when ommited', () => { + render( + , + ); + const button = screen.getByRole('button'); + + Object.entries(linkProps).forEach(([prop]) => { + expect(button).not.toHaveAttribute(prop); + }); + Object.entries(buttonProps).forEach(([prop]) => { + expect(button).toHaveAttribute(prop); + }); + }); + + it.each([{ disabled: true }, { loading: true }])(`shouldn't be focusable when %p`, (prop) => { + render( + , + ); + + userEvent.tab(); + expect(screen.getByRole('link')).not.toHaveFocus(); + }); + + it(`should have correct tabIndex`, () => { + render( + // eslint-disable-next-line jsx-a11y/tabindex-no-positive + , + ); + + expect(screen.getByRole('link')).toHaveAttribute('tabindex', '1'); + }); + }); }); From 08cdaff4ab6853637bd4f4a71a81ed308dd9530e Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 2 May 2024 13:40:50 +0300 Subject: [PATCH 26/71] refactor(Link): restore href default value --- packages/react-ui/components/Link/Link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 56ed16f5547..5a58c3eedd5 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -197,7 +197,7 @@ export class Link ext ); const linkOnlyProps = { - href, + href: '', rel: this.getRel({ href, rel }), }; From 6f46399060e14697cca13c569766919a61b91033 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 6 May 2024 16:59:21 +0300 Subject: [PATCH 27/71] refactor: fix typos --- .../react-ui/components/Button/__tests__/Button-test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Button/__tests__/Button-test.tsx b/packages/react-ui/components/Button/__tests__/Button-test.tsx index e8b63ec8d14..ac4e4867e53 100644 --- a/packages/react-ui/components/Button/__tests__/Button-test.tsx +++ b/packages/react-ui/components/Button/__tests__/Button-test.tsx @@ -239,7 +239,7 @@ describe('Button', () => { describe('with component=a prop', () => { const linkProps = { href: '/', hrefLang: 'ru', rel: 'noopener', target: '_blank' }; const buttonProps = { type: 'button' as const, disabled: true }; - it('should render tag by default', () => { + it('should render tag', () => { render( ); expect(screen.getByRole('button')).toBeInTheDocument(); @@ -272,7 +272,7 @@ describe('Button', () => { }); }); - test('should only have button props when ommited', () => { + test('should only have button props when omitted', () => { render( + ); +}; + +export const ButtonAsLinkIconDisabledColor = () => { + return ( + + ); +}; diff --git a/packages/react-ui/components/Link/__stories__/Link.stories.tsx b/packages/react-ui/components/Link/__stories__/Link.stories.tsx index 3afdf15db42..39c56cf1b2b 100644 --- a/packages/react-ui/components/Link/__stories__/Link.stories.tsx +++ b/packages/react-ui/components/Link/__stories__/Link.stories.tsx @@ -263,6 +263,8 @@ const componentPropStates: LinkState[] = [ { rightIcon: , loading: true }, { icon: , rightIcon: }, { icon: , rightIcon: , loading: true }, + { warning: true }, + { error: true }, ]; export const LinkAsButton: Story = () => { @@ -275,3 +277,17 @@ export const LinkAsButton: Story = () => { /> ); }; +export const Validation = () => { + return ( + + + Warning + + Error + + ); +}; From 9741a0eda001fa2c7a5c30a50a684ff4e00f847b Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 13 May 2024 16:47:39 +0300 Subject: [PATCH 34/71] test(Button): update stories --- .../Button/__stories__/Button.stories.tsx | 67 ++++++++++++++++++- 1 file changed, 64 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Button/__stories__/Button.stories.tsx b/packages/react-ui/components/Button/__stories__/Button.stories.tsx index a16cddb3693..6bafa27dd57 100644 --- a/packages/react-ui/components/Button/__stories__/Button.stories.tsx +++ b/packages/react-ui/components/Button/__stories__/Button.stories.tsx @@ -725,18 +725,79 @@ export const ButtonAsLink: Story = () => { ); }; -export const ButtonAsLinkIconColor = () => { +ButtonAsLink.parameters = { + creevey: { + skip: { + 'changes don`t affect old themes': { + in: /^(?!\bfirefox(2022)|chrome(2022)?\b)/, + }, + }, + tests: { + async idle() { + await this.expect(await this.takeScreenshot()).to.matchImage('idle'); + }, + }, + }, +}; + +export const ButtonAsLinkIconColor: Story = () => { return ( - ); }; -export const ButtonAsLinkIconDisabledColor = () => { +ButtonAsLinkIconColor.parameters = { + creevey: { + skip: { + 'hover does not work in chrome': { + in: /^(?!\bfirefox(2022)?\b)/, + }, + }, + tests: { + async idle() { + await this.expect(await this.takeScreenshot()).to.matchImage('idle'); + }, + async hover() { + await this.browser + .actions({ + bridge: true, + }) + .move({ + origin: this.browser.findElement({ css: '[data-tid~="test-button"]' }), + }) + .perform(); + await this.expect(await this.takeScreenshot()).to.matchImage('hover'); + }, + }, + }, +}; + +export const ButtonAsLinkIconDisabledColor: Story = () => { return ( ); }; + +ButtonAsLinkIconDisabledColor.parameters = { + creevey: { + skip: { + 'changes don`t affect old theme': { + in: /^(?!\bfirefox(2022)|chrome(2022)?\b)/, + }, + }, + tests: { + async idle() { + await this.expect(await this.takeScreenshot()).to.matchImage('idle'); + }, + }, + }, +}; From 9ee4e3a564e8c0895087985b2f9656240dc92509 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 13 May 2024 16:55:16 +0300 Subject: [PATCH 35/71] test(Link): update stories --- .../Link/__stories__/Link.stories.tsx | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/components/Link/__stories__/Link.stories.tsx b/packages/react-ui/components/Link/__stories__/Link.stories.tsx index 39c56cf1b2b..da56bb34057 100644 --- a/packages/react-ui/components/Link/__stories__/Link.stories.tsx +++ b/packages/react-ui/components/Link/__stories__/Link.stories.tsx @@ -277,7 +277,18 @@ export const LinkAsButton: Story = () => { /> ); }; -export const Validation = () => { + +LinkAsButton.parameters = { + creevey: { + tests: { + async idle() { + await this.expect(await this.takeScreenshot()).to.matchImage('idle'); + }, + }, + }, +}; + +export const LinkAsButtonValidation: Story = () => { return ( +``` diff --git a/packages/react-ui/components/Link/Link.md b/packages/react-ui/components/Link/Link.md index 17669670e48..15789fdd158 100644 --- a/packages/react-ui/components/Link/Link.md +++ b/packages/react-ui/components/Link/Link.md @@ -159,4 +159,25 @@ const renderExampleRow = (title, styles, index) => { {renderExampleRow('Изменение цвета ссылки', differentColorStyles)} ``` +Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. +Cсылка принимает все пропы переданного в `component` компонента. + +Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки. + +```jsx harmony +import { Link } from '@skbkontur/react-ui'; + +Кнопка, но выглядит как ссылка +``` + +Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента. + +```jsx harmony +import { Link } from '@skbkontur/react-ui'; +import { Link as RouterLink, BrowserRouter } from 'react-router-dom'; + + + react-router-dom link + +``` From a95ca456c53cb2479fca2a96eb8d5b86944ea9fb Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 13 May 2024 18:16:09 +0300 Subject: [PATCH 37/71] refactor(Link): fix RouterLink click --- packages/react-ui/components/Link/Link.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 8bed31d9041..e487d076bac 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,5 +1,6 @@ import React, { AriaAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; +import { pick } from 'lodash'; import { resetButton } from '../../lib/styles/Mixins'; import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; @@ -208,7 +209,7 @@ export class Link ext const nonInteractive = disabled || loading; const linkOnlyProps = { - href: '', + href: href || '', hrefLang, rel: this.getRel({ href, rel }), target, @@ -298,8 +299,10 @@ export class Link ext private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading, href } = this.props as LinkProps<'a'>; + const to = pick(this.props, 'to'); + const destination = href || to; - if (!href) { + if (!destination) { event.preventDefault(); } if (onClick && !disabled && !loading) { From 9461ae58368ba3bbb334caf8bde25d045646c009 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Tue, 14 May 2024 13:14:39 +0300 Subject: [PATCH 38/71] refactor(Button): small fixes for old themes --- packages/react-ui/components/Button/Button.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 0f9c91ea450..e5c4b7c120a 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -390,12 +390,15 @@ export class Button [styles.root(this.theme)]: true, [styles.simulatedPress()]: true, [styles[use](this.theme)]: true, + [styles.disableTextSelect()]: true, [activeStyles[use](this.theme)]: active, [sizeClass]: true, + [globalClasses.link]: Root === 'a', [styles.focus(this.theme)]: isFocused, [styles.checked(this.theme)]: checked, [styles.checkedFocused(this.theme)]: checked && isFocused, [styles.disabled(this.theme)]: trueDisabled, + [globalClasses.disabled]: trueDisabled && Root === 'a', [styles.checkedDisabled(this.theme)]: checked && disabled, [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active, [styles.narrow()]: narrow, From a5163d140362d14e8992d650628626bd7f29a5f1 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Tue, 14 May 2024 16:41:16 +0300 Subject: [PATCH 39/71] test(Button): update story --- .../Button/__stories__/Button.stories.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/components/Button/__stories__/Button.stories.tsx b/packages/react-ui/components/Button/__stories__/Button.stories.tsx index 6bafa27dd57..f69c4b87550 100644 --- a/packages/react-ui/components/Button/__stories__/Button.stories.tsx +++ b/packages/react-ui/components/Button/__stories__/Button.stories.tsx @@ -727,11 +727,6 @@ export const ButtonAsLink: Story = () => { ButtonAsLink.parameters = { creevey: { - skip: { - 'changes don`t affect old themes': { - in: /^(?!\bfirefox(2022)|chrome(2022)?\b)/, - }, - }, tests: { async idle() { await this.expect(await this.takeScreenshot()).to.matchImage('idle'); @@ -757,7 +752,8 @@ ButtonAsLinkIconColor.parameters = { creevey: { skip: { 'hover does not work in chrome': { - in: /^(?!\bfirefox(2022)?\b)/, + in: /^(?!\b(firefox.*)\b)/, + tests: ['hover'], }, }, tests: { @@ -789,11 +785,6 @@ export const ButtonAsLinkIconDisabledColor: Story = () => { ButtonAsLinkIconDisabledColor.parameters = { creevey: { - skip: { - 'changes don`t affect old theme': { - in: /^(?!\bfirefox(2022)|chrome(2022)?\b)/, - }, - }, tests: { async idle() { await this.expect(await this.takeScreenshot()).to.matchImage('idle'); From a2923c8d5b0f17d1f5dfcb6ed37200ce192a56a6 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Tue, 14 May 2024 17:09:55 +0300 Subject: [PATCH 40/71] test: add screenshots --- .../Button/Button As Link Icon Color/hover/firefox/hover.png | 3 +++ .../Button As Link Icon Color/hover/firefox2022/hover.png | 3 +++ .../Button As Link Icon Color/hover/firefox2022Dark/hover.png | 3 +++ .../Button As Link Icon Color/hover/firefox8px/hover.png | 3 +++ .../Button As Link Icon Color/hover/firefoxDark/hover.png | 3 +++ .../Button As Link Icon Color/hover/firefoxFlat8px/hover.png | 3 +++ .../Button/Button As Link Icon Color/idle/chrome/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/chrome2022/idle.png | 3 +++ .../Button As Link Icon Color/idle/chrome2022Dark/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/chrome8px/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/chromeDark/idle.png | 3 +++ .../Button As Link Icon Color/idle/chromeFlat8px/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/firefox/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/firefox2022/idle.png | 3 +++ .../Button As Link Icon Color/idle/firefox2022Dark/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/firefox8px/idle.png | 3 +++ .../Button/Button As Link Icon Color/idle/firefoxDark/idle.png | 3 +++ .../Button As Link Icon Color/idle/firefoxFlat8px/idle.png | 3 +++ .../Button As Link Icon Disabled Color/idle/chrome/idle.png | 3 +++ .../idle/chrome2022/idle.png | 3 +++ .../idle/chrome2022Dark/idle.png | 3 +++ .../Button As Link Icon Disabled Color/idle/chrome8px/idle.png | 3 +++ .../idle/chromeDark/idle.png | 3 +++ .../idle/chromeFlat8px/idle.png | 3 +++ .../Button As Link Icon Disabled Color/idle/firefox/idle.png | 3 +++ .../idle/firefox2022/idle.png | 3 +++ .../idle/firefox2022Dark/idle.png | 3 +++ .../idle/firefox8px/idle.png | 3 +++ .../idle/firefoxDark/idle.png | 3 +++ .../idle/firefoxFlat8px/idle.png | 3 +++ .../.creevey/images/Button/Button As Link/idle/chrome/idle.png | 3 +++ .../images/Button/Button As Link/idle/chrome2022/idle.png | 3 +++ .../images/Button/Button As Link/idle/chrome2022Dark/idle.png | 3 +++ .../images/Button/Button As Link/idle/chrome8px/idle.png | 3 +++ .../images/Button/Button As Link/idle/chromeDark/idle.png | 3 +++ .../images/Button/Button As Link/idle/chromeFlat8px/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefox/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefox2022/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefox2022Dark/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefox8px/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefoxDark/idle.png | 3 +++ .../images/Button/Button As Link/idle/firefoxFlat8px/idle.png | 3 +++ .../images/Link/Link As Button Validation/idle/chrome/idle.png | 3 +++ .../Link/Link As Button Validation/idle/chrome2022/idle.png | 3 +++ .../Link As Button Validation/idle/chrome2022Dark/idle.png | 3 +++ .../Link/Link As Button Validation/idle/chrome8px/idle.png | 3 +++ .../Link/Link As Button Validation/idle/chromeDark/idle.png | 3 +++ .../Link/Link As Button Validation/idle/firefox/idle.png | 3 +++ .../Link/Link As Button Validation/idle/firefox2022/idle.png | 3 +++ .../Link As Button Validation/idle/firefox2022Dark/idle.png | 3 +++ .../Link/Link As Button Validation/idle/firefox8px/idle.png | 3 +++ .../Link/Link As Button Validation/idle/firefoxDark/idle.png | 3 +++ .../.creevey/images/Link/Link As Button/idle/chrome/idle.png | 3 +++ .../images/Link/Link As Button/idle/chrome2022/idle.png | 3 +++ .../images/Link/Link As Button/idle/chrome2022Dark/idle.png | 3 +++ .../images/Link/Link As Button/idle/chrome8px/idle.png | 3 +++ .../images/Link/Link As Button/idle/chromeDark/idle.png | 3 +++ .../.creevey/images/Link/Link As Button/idle/firefox/idle.png | 3 +++ .../images/Link/Link As Button/idle/firefox2022/idle.png | 3 +++ .../images/Link/Link As Button/idle/firefox2022Dark/idle.png | 3 +++ .../images/Link/Link As Button/idle/firefox8px/idle.png | 3 +++ .../images/Link/Link As Button/idle/firefoxDark/idle.png | 3 +++ 62 files changed, 186 insertions(+) create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox8px/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxDark/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxFlat8px/hover.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxFlat8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chromeDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefoxDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/chromeDark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022Dark/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox8px/idle.png create mode 100644 packages/react-ui/.creevey/images/Link/Link As Button/idle/firefoxDark/idle.png diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox/hover.png new file mode 100644 index 00000000000..951b3e416b6 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:088f722f18aa990b22dc9b391b494957c38f9f596c75d4d329f382768489e9c0 +size 1774 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png new file mode 100644 index 00000000000..7ce2481f0b1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:941a54965451987d524dae2a678b78af0d30bf5284798fa8c2be63c4d022cfa6 +size 1961 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png new file mode 100644 index 00000000000..9f8d828c5a9 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox2022Dark/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:12ec4e01e502d01cec02b70a679bf2d8ab00462a714c67697268d0efe05dd037 +size 1937 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox8px/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox8px/hover.png new file mode 100644 index 00000000000..cd1b79e7316 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefox8px/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:058e613fd88da37b6dfc8df072bfd118035e4c5388a550fc99bbc47b653314c7 +size 2098 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxDark/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxDark/hover.png new file mode 100644 index 00000000000..6f033090bc1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxDark/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:95e63273318a2872b3ec83ac4f10cf14572fa9f377b1f7e56bd692c8299a6ba4 +size 1769 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxFlat8px/hover.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxFlat8px/hover.png new file mode 100644 index 00000000000..a18298d9043 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/hover/firefoxFlat8px/hover.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:35923a4c0ad0935dd737169c93ca25725e9e5269a678b7a15862cd6878a04a51 +size 1771 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome/idle.png new file mode 100644 index 00000000000..2e8e060c40f --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f72b2d324f826eb6cc5889b70ae2d40726081677d51e1ac641c0455b8276245e +size 1672 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png new file mode 100644 index 00000000000..b1d7b5f7d77 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4ef057723203d9c5330c4b60d3ad40b81d6c51d3228eb2130513a32fb27f10ea +size 1961 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..5a69ef17869 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:197f5dccf1076e1f5e62a1627314a5894e124f6fe14ac367eca8111233f2a339 +size 2016 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome8px/idle.png new file mode 100644 index 00000000000..37efb623473 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chrome8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a30e1e89e14cd82b0519ed1a353efbfff2d48e72d0f35b2ddefd68e603bf1442 +size 1891 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeDark/idle.png new file mode 100644 index 00000000000..73d6f8ebeb3 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:13887d4a12d9965476d0d56a12fb8da7c85d43577ffae21ff752611cea1ef0c2 +size 1733 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeFlat8px/idle.png new file mode 100644 index 00000000000..c8a3b73b8ba --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/chromeFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1f4041ff37ac6a0cfce0319e27f882dbe6d8069366f3fce5390097bb145a0f80 +size 1677 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox/idle.png new file mode 100644 index 00000000000..38826afd2e3 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f9ae9ef8b0d9ac19b8ffab3c98feab66dced7e8a192a0dd71db0c2b73048bd0f +size 1758 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png new file mode 100644 index 00000000000..32c5464a91e --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:96c32f534c0c290a82fcd14983730ec0fe2b313be9fc851c2bcc550035b50713 +size 1940 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..1061e7e039f --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:40b5881b8540db333db50207cee6cb4bd8e622162ec80d7ea41b02363227d23a +size 1966 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox8px/idle.png new file mode 100644 index 00000000000..e5c5c70e567 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefox8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:69b8bd018286369a981050016a5777031ee6993da98d93f191060209a0aaddf4 +size 2093 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxDark/idle.png new file mode 100644 index 00000000000..1357e1fdf8a --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:db811c5175cae23e85ec2d1ffec633b2833028b58df1c789060205f51e4d56df +size 1776 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxFlat8px/idle.png new file mode 100644 index 00000000000..3e531707e0a --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Color/idle/firefoxFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0fecd275b962ba80e0531297cdfaa718ecf1206d2518a7e09560a0746f83562b +size 1749 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome/idle.png new file mode 100644 index 00000000000..4d83b5778b4 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aa5ed5f1f493431984fdb3a2f13634c286e4c53d88f947eaa34a836b04938813 +size 1668 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022/idle.png new file mode 100644 index 00000000000..0054e57b1e5 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:71f9e46ceff365775731ecc9157a67464ac8518e50f90b132d14d34113dc4721 +size 1878 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..7e409a01993 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7455bac9a637752caa2cf18e99aba88e3a99baac135cdd22d052d44f408cd0eb +size 1668 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome8px/idle.png new file mode 100644 index 00000000000..37f02b7b757 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chrome8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:27427ea134bdcbd2a831ba63a3cc4a5665f28ae71dbff1576afceb863ae10d8d +size 1675 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeDark/idle.png new file mode 100644 index 00000000000..f378c26dcea --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aca50642cccba29fbaf9cace0dc1d903f1bec263c48f9c4a60c4d45b6cd56e86 +size 1633 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeFlat8px/idle.png new file mode 100644 index 00000000000..1eac2eba631 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/chromeFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0c0b7edeef02df082a79c6a8e17871af64e42c7cb90db29f45f2bff89f866c9d +size 1649 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox/idle.png new file mode 100644 index 00000000000..2dd14b3cf49 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b1f530466d1fc3a3e32d1dc7030b3aee10ff18dfa2c7d9f38653ef82c0b9b52c +size 1689 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022/idle.png new file mode 100644 index 00000000000..3061d88193e --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:93958733094a094138a9acd33f7fbc0c8f3d5914a1058fd720f91b45d3423289 +size 1854 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..e3d9f94ecb0 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8cd1db2e9d0e1ed5c1dcab127540a67be550be09f54287f879df31ddc6d1f137 +size 1599 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox8px/idle.png new file mode 100644 index 00000000000..d8e1f96d490 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefox8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:86f50574078e9e1681e01c55adbe46ffe901b9eb16b2dfa8312257d4bfe0706a +size 1718 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxDark/idle.png new file mode 100644 index 00000000000..77c61fbc495 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:98071145c39b480c3d6bae29b2de1f1b7488c92b57f333e4753efa972f541873 +size 1595 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxFlat8px/idle.png new file mode 100644 index 00000000000..b969b5a0bf1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link Icon Disabled Color/idle/firefoxFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:72ce089c38293f01f18f8e947a54067a9670e58cb50ef991632a65403c087c58 +size 1702 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome/idle.png new file mode 100644 index 00000000000..e4604278f56 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b644ffe956f510a4505f776b342cb786937d4874a7c028b294e40182f632933d +size 56047 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022/idle.png new file mode 100644 index 00000000000..f7c03840042 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b451b00d2b7c444a57e2ec4a77faa7e743354c8feb4540912ca60c6fc814c6ba +size 74045 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..56edd6c085a --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:47389bb141898d656fab6b7e49ecd8823c4de21449906daca822f77c91c922c8 +size 76608 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome8px/idle.png new file mode 100644 index 00000000000..faf9d437534 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chrome8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f50bd3bd28492e328bede6674f2708547348c026c7c7711fca2aeee09c7c7566 +size 63764 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeDark/idle.png new file mode 100644 index 00000000000..16ef8cc965b --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:96ece2929c61292b081793d1e9498b9912bd8875363695712cc4795e6c11e558 +size 56065 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeFlat8px/idle.png new file mode 100644 index 00000000000..e6c893323aa --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/chromeFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fa1d90ceee8b6fd9a05841bdd9a50ccc63f45e2ae7c60c0bfbdc67b51521015a +size 57073 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox/idle.png new file mode 100644 index 00000000000..143ae0cccda --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3e20adb805b3170d0c1f6767f23808a8602fbcb08665ec953fad506ac9d1c01f +size 74426 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022/idle.png new file mode 100644 index 00000000000..f8a0973089d --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:11e36b77f53d1f3b6f9097d5e32dcf47f70b3514212ad49c543b4e32097445d0 +size 86738 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..925bd1d5f67 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d95a385e240449cb6a116e4c146b9f2f3bdd02bf0799046559c2bdb87fd83d8b +size 87856 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox8px/idle.png new file mode 100644 index 00000000000..1f9e39629c1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefox8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:70616b109b0c5ba1da48654fa98d29648b62dc7f44d7e887d99bace54488b57f +size 87373 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxDark/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxDark/idle.png new file mode 100644 index 00000000000..ae5965a8bee --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6fd77b1c3f9f5dab4c2a173a14c8f3393307dfc5ed9c8f7cd8b1948a2024bd56 +size 73174 diff --git a/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxFlat8px/idle.png b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxFlat8px/idle.png new file mode 100644 index 00000000000..0fc07affda2 --- /dev/null +++ b/packages/react-ui/.creevey/images/Button/Button As Link/idle/firefoxFlat8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:39b10e4a48e5a1ac3beb4c63a850a9582c4ffffa69248ed239940e76ec87b6a2 +size 75068 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome/idle.png new file mode 100644 index 00000000000..2f22aa14a6e --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c2b0cbb44c8703afcf4adae902631324e455ebb33755d1d7fb9d6be5ea6cefcf +size 1831 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022/idle.png new file mode 100644 index 00000000000..c7b6e4d9dd6 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:854dddcfb4ededa326df49c2bb3cba0a42135c555e8e6dfd4db181562011b047 +size 1961 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..bde0331f1b1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:114ae20719a314ab56bfcad1caaebf0d9b04fb8e66c38d5d2a8b52cac2a8b342 +size 1964 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome8px/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome8px/idle.png new file mode 100644 index 00000000000..ef8497df568 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chrome8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e676ec607557e525f666ca7f7d6972a8fae0278114258344a8b695cf992d31c1 +size 1764 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chromeDark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chromeDark/idle.png new file mode 100644 index 00000000000..9c04dc0ec95 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/chromeDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7da3f3b838cb653d5b06f05a88308a6d0a289ad1a8663fb92d2a7bbba9db8ce9 +size 1903 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox/idle.png new file mode 100644 index 00000000000..8fe614d9648 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5c2b3021f21bc2ffe0cf74b7cd4d674e782bff9022e57cc513afa299fc5c917a +size 2030 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022/idle.png new file mode 100644 index 00000000000..631d3e1a562 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:924295540c99be4cbefa6c8115f1e33c5e5337fbbd4280959ee2cfa7c9351b5d +size 2104 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..5716871f4c2 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ef026214445669e31aaac137173c8d25721885e44aba8535d2b6b3642aea8b90 +size 2116 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox8px/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox8px/idle.png new file mode 100644 index 00000000000..4b9f92c5568 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefox8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d59ce20fa1dce02ad9235b9cb549541da777edccc50864d5a8d459828df01867 +size 1952 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefoxDark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefoxDark/idle.png new file mode 100644 index 00000000000..f68a551600e --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button Validation/idle/firefoxDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2df9fc1e057f02fb2858472127f536eb96d9fe21f96a355bd0e7bd5d4d3a5603 +size 2101 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome/idle.png new file mode 100644 index 00000000000..e2750a08b75 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5065bd8eccaff4679897b3d32f357fd2cc2bfcb7aad04a4092212e6378742452 +size 47729 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022/idle.png new file mode 100644 index 00000000000..ce6f99fb362 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a5ef41b00959992a129cae54041cc1cc3349f5b7829bc4417abd979868c5003a +size 48018 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022Dark/idle.png new file mode 100644 index 00000000000..4fd2eab729c --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5d4cb08c989c52060d7226273683fcc6fc4bd11fd2b73fd150ee30a688e13af4 +size 47925 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome8px/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome8px/idle.png new file mode 100644 index 00000000000..b35f8fb5d6a --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chrome8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dade7ecd56cee9abb5d4499ac5a109e8e8c10c4aa31f48774c009bb1fb2a2db2 +size 47687 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/chromeDark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chromeDark/idle.png new file mode 100644 index 00000000000..092c5c64736 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/chromeDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c9969198246cc6527ea9f27c56da8e384226757dffcba209ab43a302902741f4 +size 46558 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox/idle.png new file mode 100644 index 00000000000..bed633771cb --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8865aebaf7b8dc9f4a382ce370f6e6a536a9a150f2540b4dffb28df178a49cc1 +size 49536 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022/idle.png new file mode 100644 index 00000000000..38b6b9f33d1 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:314a99134d6c208bcde54cfdbbbd427ebc752cfe714aadf7dbb7f980392b6d0c +size 49147 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022Dark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022Dark/idle.png new file mode 100644 index 00000000000..bbacd478d4c --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox2022Dark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:018f698045c3fdc35fa0788c5e3c0e19f4b90813d98e8fdfa6a98cb98e5bbcab +size 48721 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox8px/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox8px/idle.png new file mode 100644 index 00000000000..98a0bfb97a0 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefox8px/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b685bc734593a4d20a9b35087cfcd96876ad5dd1d346a07151f3b826f0187104 +size 49690 diff --git a/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefoxDark/idle.png b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefoxDark/idle.png new file mode 100644 index 00000000000..10430212d08 --- /dev/null +++ b/packages/react-ui/.creevey/images/Link/Link As Button/idle/firefoxDark/idle.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d203435c4bb98478f37c217f48bb2e30efaeb88e68935853146758c3a1556237 +size 48473 From 3038cb39fd02d4b1f00bfefa5f0c5040ab6ed596 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Tue, 14 May 2024 17:48:24 +0300 Subject: [PATCH 41/71] refactor(Link): remove disabled from root --- packages/react-ui/components/Link/Link.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index aab892bda3e..9caa2c53ea0 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -217,7 +217,7 @@ export class Link ext target, }; - const buttonOnlyProps = { type }; + const buttonOnlyProps = { disabled: nonInteractive, type }; const outlineNode = (
ext onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.getTabIndex({ nonInteractive, tabIndex }), - disabled: nonInteractive, ...(Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {}), ...(Root === 'button' ? buttonOnlyProps : {}), }; From 912aee717d8ad432c9b19e3c13feef03400460b2 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Tue, 14 May 2024 18:34:21 +0300 Subject: [PATCH 42/71] refactor(Link): fix RouterLink click again --- packages/react-ui/components/Link/Link.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 9caa2c53ea0..f3f71315898 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,6 +1,5 @@ import React, { AriaAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; -import { pick } from 'lodash'; import { resetButton } from '../../lib/styles/Mixins'; import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; @@ -300,7 +299,8 @@ export class Link ext private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading, href } = this.props as LinkProps<'a'>; - const to = pick(this.props, 'to'); + // we have to check for 'to' prop in case Root is react-router link + const to = Object.prototype.hasOwnProperty.call(this.props, 'to'); const destination = href || to; if (!destination) { From 045718b0d3eedc11f72db355ef21f8ed230837d7 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 15 May 2024 13:18:21 +0300 Subject: [PATCH 43/71] refactor(Button, Link): rename props --- packages/react-ui/components/Button/Button.tsx | 4 ++-- packages/react-ui/components/Link/Link.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 73fa3f28b0d..47909139531 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -31,7 +31,7 @@ export type ButtonSize = SizeProp; export type ButtonType = 'button' | 'submit' | 'reset'; export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless'; -interface ButtonOwnProps +interface ButtonInnerProps extends CommonProps, Pick< AriaAttributes, @@ -195,7 +195,7 @@ interface ButtonOwnProps export const BUTTON_DEFAULT_ELEMENT = 'button'; export type ButtonProps = PolymorphicPropsWithoutRef< - ButtonOwnProps, + ButtonInnerProps, C >; diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index f3f71315898..17a47cf18b1 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -20,7 +20,7 @@ import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils import { globalClasses, styles } from './Link.styles'; import { LinkIcon } from './LinkIcon'; -export interface LinkInnerProps +interface LinkInnerProps extends Pick, CommonProps, Pick, 'onBlur' | 'onFocus'> { From 9cd4422b72c084c5e38dca2595a97d4fd24303b2 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 15 May 2024 13:23:58 +0300 Subject: [PATCH 44/71] docs(Button): add deprecate message for use link --- packages/react-ui/components/Button/Button.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 47909139531..538d49dea70 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -169,6 +169,9 @@ interface ButtonInnerProps * Стиль кнопки. * * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`. + * + * **Вариант `link` устарел.** + * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`. */ use?: ButtonUse; From 787fea932d3936f930c14ae43fed33a151f58740 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Wed, 15 May 2024 15:37:59 +0300 Subject: [PATCH 45/71] refactor(Button): replace lodash pick with custom version --- .../Autocomplete/__stories__/Autocomplete.stories.tsx | 2 +- packages/react-ui/components/Button/Button.tsx | 5 ++--- packages/react-ui/lib/utils.ts | 10 ++++++++++ 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx b/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx index 9f55c7ec58d..942e0c22cd8 100644 --- a/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx +++ b/packages/react-ui/components/Autocomplete/__stories__/Autocomplete.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import flatten from 'lodash/flatten'; +import { flatten } from 'lodash'; import { Gapped } from '../../Gapped'; import { Autocomplete } from '../Autocomplete'; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 538d49dea70..34efb40e858 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,9 +1,8 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; -import pick from 'lodash/pick'; import { HTMLProps } from '../../typings/html'; -import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; +import { pick, isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; @@ -505,7 +504,7 @@ export class Button className: cx(styles.wrap(this.theme), styles.wrapLink()), style: { width: wrapProps.style.width }, }); - //@ts-expect-error textAlign doesn't exist on link + rootProps.style.textAlign = undefined; } diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts index 19dd58c5885..62df7074ae7 100644 --- a/packages/react-ui/lib/utils.ts +++ b/packages/react-ui/lib/utils.ts @@ -230,3 +230,13 @@ export function clickOutside() { document.body.dispatchEvent(event); } + +export function pick(object: Record, keys: string[]) { + const result: Record = {}; + return keys.reduce((acc, key) => { + if (object && Object.prototype.hasOwnProperty.call(object, key)) { + acc[key] = object[key]; + } + return acc; + }, result); +} From b1923637885b42dcf77bbeb911be7f5265249de4 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 11 Jul 2024 13:35:36 +0300 Subject: [PATCH 46/71] refactor(Button): remove unnecessary type cast --- packages/react-ui/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 34efb40e858..e4872905839 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -346,7 +346,7 @@ export class Button const sizeClass = this.getSizeClassName(); - const Root = component as React.ElementType; + const Root = component; const isFocused = this.state.focusedByTab || visuallyFocused; const isLink = use === 'link'; From a35f1fe36dc706d13c8a894d16c582ae24604e31 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 11 Jul 2024 13:50:56 +0300 Subject: [PATCH 47/71] chore(Button): add deprecation warning --- packages/react-ui/components/Button/Button.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index e4872905839..0c62d16e6f0 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,5 +1,6 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; +import warning from 'warning'; import { HTMLProps } from '../../typings/html'; import { pick, isKonturIcon, isReactUIComponent } from '../../lib/utils'; @@ -252,6 +253,10 @@ export class Button keyListener.isTabPressed = true; this.focus(); } + warning( + this.props.use !== 'link', + `[Button]: Use 'Link' has been deprecated. Please, use Link with 'component=button' prop instead.`, + ); } public static getDerivedStateFromProps(props: ButtonProps) { From 5d3e536c2ee22c0e16af975053bc7a07db0ae4ec Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 11 Jul 2024 13:51:54 +0300 Subject: [PATCH 48/71] refactor(Button): don't use variable for type --- packages/react-ui/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 0c62d16e6f0..f9efeb2c600 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -235,7 +235,7 @@ export class Button // By default the type attribute is 'submit'. IE8 will fire a click event // on this button if somewhere on the page user presses Enter while some // input is focused. So we set type to 'button' by default. - type: BUTTON_DEFAULT_ELEMENT, + type: 'button', }; private getProps = createPropsGetter(Button.defaultProps); From d55a0ddd926dd7030d974f562a978b1cf9afd048 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Thu, 18 Jul 2024 15:47:39 +0300 Subject: [PATCH 49/71] refactor(Button, Link): restrict component prop values --- packages/react-ui/components/Button/Button.tsx | 5 +++-- packages/react-ui/components/Link/Link.tsx | 13 +++++++------ packages/react-ui/typings/button-link.d.ts | 1 + 3 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 packages/react-ui/typings/button-link.d.ts diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index f9efeb2c600..7d218496858 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -2,6 +2,7 @@ import React, { AriaAttributes, HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; import warning from 'warning'; +import { ButtonLinkAllowedValues } from '../../typings/button-link'; import { HTMLProps } from '../../typings/html'; import { pick, isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; @@ -197,7 +198,7 @@ interface ButtonInnerProps export const BUTTON_DEFAULT_ELEMENT = 'button'; -export type ButtonProps = PolymorphicPropsWithoutRef< +export type ButtonProps = PolymorphicPropsWithoutRef< ButtonInnerProps, C >; @@ -221,7 +222,7 @@ const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children ); @rootNode -export class Button extends React.Component< +export class Button extends React.Component< ButtonProps, ButtonState > { diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 17a47cf18b1..8b9edbff1d5 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,6 +1,7 @@ import React, { AriaAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; +import { ButtonLinkAllowedValues } from '../../typings/button-link'; import { resetButton } from '../../lib/styles/Mixins'; import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; import { keyListener } from '../../lib/events/keyListener'; @@ -59,7 +60,7 @@ interface LinkInnerProps /** * HTML-событие `onclick`. */ - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: React.MouseEvent) => void; /** * Обычный объект с переменными темы. @@ -87,7 +88,7 @@ interface LinkInnerProps const LINK_DEFAULT_ELEMENT = 'a'; -export type LinkProps = PolymorphicPropsWithoutRef< +export type LinkProps = PolymorphicPropsWithoutRef< LinkInnerProps, C >; @@ -100,7 +101,7 @@ export const LinkDataTids = { } as const; type DefaultProps = Required>; -type DefaultizedLinkProps = DefaultizedProps< +type DefaultizedLinkProps = DefaultizedProps< LinkProps, DefaultProps >; @@ -109,7 +110,7 @@ type DefaultizedLinkProps extends React.Component< +export class Link extends React.Component< LinkProps, LinkState > { @@ -194,7 +195,7 @@ export class Link ext ...rest } = props; const _isTheme2022 = isTheme2022(this.theme); - const Root = (component || as) as React.ElementType; + const Root = component || as; let arrow = null; if (_button) { @@ -297,7 +298,7 @@ export class Link ext this.setState({ focusedByTab: false }); }; - private handleClick = (event: React.MouseEvent) => { + private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading, href } = this.props as LinkProps<'a'>; // we have to check for 'to' prop in case Root is react-router link const to = Object.prototype.hasOwnProperty.call(this.props, 'to'); diff --git a/packages/react-ui/typings/button-link.d.ts b/packages/react-ui/typings/button-link.d.ts new file mode 100644 index 00000000000..f359595da10 --- /dev/null +++ b/packages/react-ui/typings/button-link.d.ts @@ -0,0 +1 @@ +export type ButtonLinkAllowedValues = Extract; From 04e3df8d68a4d56843adcaaa93423cacc0a27db6 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Fri, 19 Jul 2024 11:48:15 +0300 Subject: [PATCH 50/71] refactor(Button): update styles to work for any component value --- .../components/Button/Button.styles.ts | 36 +++++++++---------- .../react-ui/components/Button/Button.tsx | 8 ++--- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index bb560f426cf..ed6b4c07d1e 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -21,7 +21,7 @@ export const globalClasses = prefix('button')({ caption: 'caption', text: 'text', innerShadow: 'inner-shadow', - link: 'link', + customComponent: 'custom-component', disabled: 'disabled', }); @@ -67,15 +67,15 @@ export const styles = memoizeStyle({ } &:hover:enabled svg, - &.${globalClasses.link}:hover svg { + &.${globalClasses.customComponent}:hover svg { color: ${t.btnIconHoverColor}; } &:disabled svg, - &.${globalClasses.link}.${globalClasses.disabled} svg { + &.${globalClasses.customComponent}.${globalClasses.disabled} svg { color: ${t.btnIconDisabledColor}; } &:enabled svg, - &.${globalClasses.link} svg { + &.${globalClasses.customComponent} svg { color: ${t.btnIconColor}; } `; @@ -530,7 +530,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -543,7 +543,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.default(t)}; } `; @@ -562,7 +562,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -575,7 +575,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.primary(t)} } `; @@ -594,7 +594,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -607,7 +607,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.success(t)} } `; @@ -626,7 +626,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -639,7 +639,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.danger(t)} } `; @@ -658,7 +658,7 @@ export const styles = memoizeStyle({ )}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -671,7 +671,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.pay(t)} } `; @@ -691,7 +691,7 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -704,7 +704,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.text(t)} } `; @@ -726,7 +726,7 @@ export const styles = memoizeStyle({ background: transparent; &:hover:enabled, - &.${globalClasses.link}:hover { + &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -739,7 +739,7 @@ export const styles = memoizeStyle({ } &:active:enabled, - &.${globalClasses.link}:active { + &.${globalClasses.customComponent}:active { ${activeStyles.backless(t)} } `; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 7d218496858..37fd35f3681 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -376,7 +376,7 @@ export class Button Date: Mon, 22 Jul 2024 12:47:43 +0300 Subject: [PATCH 51/71] refactor(Button): remove redundant props from proptype --- .../react-ui/components/Button/Button.tsx | 47 +------------------ 1 file changed, 2 insertions(+), 45 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 37fd35f3681..4b4e8738162 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,9 +1,8 @@ -import React, { AriaAttributes, HTMLAttributes } from 'react'; +import React from 'react'; import { globalObject } from '@skbkontur/global-object'; import warning from 'warning'; import { ButtonLinkAllowedValues } from '../../typings/button-link'; -import { HTMLProps } from '../../typings/html'; import { pick, isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; @@ -32,14 +31,7 @@ export type ButtonSize = SizeProp; export type ButtonType = 'button' | 'submit' | 'reset'; export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless'; -interface ButtonInnerProps - extends CommonProps, - Pick< - AriaAttributes, - 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded' - >, - Pick, 'role'>, - Pick { +interface ButtonInnerProps extends CommonProps { /** @ignore */ _noPadding?: boolean; @@ -114,41 +106,6 @@ interface ButtonInnerProps */ narrow?: boolean; - /** - * HTML-событие `onblur`. - */ - onBlur?: React.FocusEventHandler; - - /** - * HTML-событие `onclick`. - */ - onClick?: React.MouseEventHandler; - - /** - * HTML-событие `onfocus`. - */ - onFocus?: React.FocusEventHandler; - - /** - * HTML-событие `keydown`. - */ - onKeyDown?: React.KeyboardEventHandler; - - /** - * HTML-событие `onmouseenter`. - */ - onMouseEnter?: React.MouseEventHandler; - - /** - * HTML-событие `mouseleave`. - */ - onMouseLeave?: React.MouseEventHandler; - - /** - * HTML-событие `onmouseover`. - */ - onMouseOver?: React.MouseEventHandler; - /** * Задаёт размер кнопки. * From 3a1a07cd0e1ae075884560bcfa9fc61b76d22458 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 22 Jul 2024 12:48:12 +0300 Subject: [PATCH 52/71] refactor(Link): remove redundant props from proptype --- packages/react-ui/components/Link/Link.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 8b9edbff1d5..0fc1001b4d0 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -1,4 +1,4 @@ -import React, { AriaAttributes } from 'react'; +import React from 'react'; import { globalObject } from '@skbkontur/global-object'; import { ButtonLinkAllowedValues } from '../../typings/button-link'; @@ -21,10 +21,7 @@ import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils import { globalClasses, styles } from './Link.styles'; import { LinkIcon } from './LinkIcon'; -interface LinkInnerProps - extends Pick, - CommonProps, - Pick, 'onBlur' | 'onFocus'> { +interface LinkInnerProps extends CommonProps { /** * Отключенное состояние. */ @@ -57,11 +54,6 @@ interface LinkInnerProps * Переводит ссылку в состояние загрузки. */ loading?: boolean; - /** - * HTML-событие `onclick`. - */ - onClick?: (event: React.MouseEvent) => void; - /** * Обычный объект с переменными темы. * Он будет объединён с темой из контекста. @@ -298,7 +290,7 @@ export class Link) => { + private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading, href } = this.props as LinkProps<'a'>; // we have to check for 'to' prop in case Root is react-router link const to = Object.prototype.hasOwnProperty.call(this.props, 'to'); From 202b772fc9c8a2392b2c42d414297c4f161df655 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 22 Jul 2024 17:19:55 +0300 Subject: [PATCH 53/71] refactor(Button): remove redundant selectors --- .../react-ui/components/Button/Button.styles.ts | 17 ----------------- packages/react-ui/components/Button/Button.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 21 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index ed6b4c07d1e..331439e4e66 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -66,15 +66,12 @@ export const styles = memoizeStyle({ width: 0; } - &:hover:enabled svg, &.${globalClasses.customComponent}:hover svg { color: ${t.btnIconHoverColor}; } - &:disabled svg, &.${globalClasses.customComponent}.${globalClasses.disabled} svg { color: ${t.btnIconDisabledColor}; } - &:enabled svg, &.${globalClasses.customComponent} svg { color: ${t.btnIconColor}; } @@ -529,7 +526,6 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, @@ -542,7 +538,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.default(t)}; } @@ -561,7 +556,6 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, @@ -574,7 +568,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.primary(t)} } @@ -593,7 +586,6 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, @@ -606,7 +598,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.success(t)} } @@ -625,7 +616,6 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnDangerHoverBg, @@ -638,7 +628,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.danger(t)} } @@ -657,7 +646,6 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnPayHoverBg, @@ -670,7 +658,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.pay(t)} } @@ -690,7 +677,6 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnTextHoverBg, @@ -703,7 +689,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.text(t)} } @@ -725,7 +710,6 @@ export const styles = memoizeStyle({ color: ${t.btnDefaultTextColor}; background: transparent; - &:hover:enabled, &.${globalClasses.customComponent}:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, @@ -738,7 +722,6 @@ export const styles = memoizeStyle({ )}; } - &:active:enabled, &.${globalClasses.customComponent}:active { ${activeStyles.backless(t)} } diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 4b4e8738162..066e8642a4e 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -333,7 +333,7 @@ export class Button Date: Mon, 22 Jul 2024 17:25:45 +0300 Subject: [PATCH 54/71] refactor(Button): don't filter out root specific props --- packages/react-ui/components/Button/Button.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 066e8642a4e..370fcdd6954 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -3,7 +3,7 @@ import { globalObject } from '@skbkontur/global-object'; import warning from 'warning'; import { ButtonLinkAllowedValues } from '../../typings/button-link'; -import { pick, isKonturIcon, isReactUIComponent } from '../../lib/utils'; +import { isKonturIcon, isReactUIComponent } from '../../lib/utils'; import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; @@ -305,7 +305,7 @@ export class Button - + {innerShadowNode} {outlineNode} {arrowNode} From a1d48981a2601e5ae1c2396556d5c1e8accb6b98 Mon Sep 17 00:00:00 2001 From: Funkicide Date: Mon, 22 Jul 2024 17:50:58 +0300 Subject: [PATCH 55/71] refactor(Link): don't filter out root specific props except href and rel --- packages/react-ui/components/Link/Link.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 0fc1001b4d0..b2bc2f01e75 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -168,8 +168,6 @@ export class Link Date: Mon, 22 Jul 2024 18:09:47 +0300 Subject: [PATCH 56/71] refactor(Link): add back empty href for accessible role --- packages/react-ui/components/Link/Link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index b2bc2f01e75..99585ae0902 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -201,7 +201,7 @@ export class Link Date: Mon, 22 Jul 2024 18:34:09 +0300 Subject: [PATCH 57/71] test(Button, Link): remove prop filter tests --- .../Button/__tests__/Button-test.tsx | 35 ------------------- .../components/Link/__tests__/Link-test.tsx | 19 ---------- 2 files changed, 54 deletions(-) diff --git a/packages/react-ui/components/Button/__tests__/Button-test.tsx b/packages/react-ui/components/Button/__tests__/Button-test.tsx index 5e2465790f7..715c450e784 100644 --- a/packages/react-ui/components/Button/__tests__/Button-test.tsx +++ b/packages/react-ui/components/Button/__tests__/Button-test.tsx @@ -237,8 +237,6 @@ describe('Button', () => { }); describe('with component=a prop', () => { - const linkProps = { href: '/', hrefLang: 'ru', rel: 'noopener', target: '_blank' }; - const buttonProps = { type: 'button' as const }; it('should render tag', () => { render( , - ); - - const buttonLink = screen.getByRole('link'); - - Object.entries(linkProps).forEach(([prop]) => { - expect(buttonLink).toHaveAttribute(prop); - }); - Object.entries(buttonProps).forEach(([prop]) => { - expect(buttonLink).not.toHaveAttribute(prop); - }); - }); - - test('should only have button props when omitted', () => { - render( - , - ); - const button = screen.getByRole('button'); - - Object.entries(linkProps).forEach(([prop]) => { - expect(button).not.toHaveAttribute(prop); - }); - Object.entries(buttonProps).forEach(([prop]) => { - expect(button).toHaveAttribute(prop); - }); - }); - it.each([{ disabled: true }, { loading: true }])(`shouldn't be focusable when %p`, (prop) => { render( ); + + const button = screen.getByRole('button'); + expect(button).not.toHaveClass('', { exact: true }); + }); + + it(`data-tid prop shouldn't override value on root`, () => { + const props = { 'data-tid': 'foo' }; + + render(); + const button = screen.getByRole('button'); + + expect(button).toHaveAttribute('data-tid', ButtonDataTids.root); + }); + describe('with use=link prop', () => { const handleSubmit = jest.fn(); const handleReset = jest.fn(); From 799819c75dc1d87451876cd2b1c8ee45a22adb18 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Wed, 25 Sep 2024 12:15:09 +0300 Subject: [PATCH 67/71] chore: wip --- .../react-ui/components/Button/Button.tsx | 55 ++++++++-------- .../components/Button/ButtonArrow.tsx | 7 ++- .../react-ui/components/Button/ButtonIcon.tsx | 4 +- .../react-ui/components/Button/ButtonLink.tsx | 8 +++ packages/react-ui/components/Link/Link.tsx | 63 ++++++------------- .../components/Link/__tests__/Link-test.tsx | 4 +- 6 files changed, 61 insertions(+), 80 deletions(-) create mode 100644 packages/react-ui/components/Button/ButtonLink.tsx diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 260b3928b37..b7147325546 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -14,7 +14,7 @@ import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; import { createPropsGetter } from '../../lib/createPropsGetter'; import { isTheme2022 } from '../../lib/theming/ThemeHelpers'; -import { Link, LinkProps } from '../Link'; +import { Link } from '../Link'; import { SizeProp } from '../../lib/types/props'; import { PolymorphicPropsWithoutRef } from '../../typings/react-ref'; @@ -23,6 +23,7 @@ import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; import { useButtonArrow } from './ButtonArrow'; import { getInnerLinkTheme } from './getInnerLinkTheme'; import { LoadingButtonIcon } from './LoadingButtonIcon'; +import { ButtonLink } from './ButtonLink'; /** * @deprecated use SizeProp @@ -31,7 +32,7 @@ export type ButtonSize = SizeProp; export type ButtonType = 'button' | 'submit' | 'reset'; export type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless'; -interface ButtonInnerProps extends CommonProps { +export interface ButtonInnerProps extends CommonProps { /** @ignore */ _noPadding?: boolean; @@ -151,14 +152,13 @@ interface ButtonInnerProps extends CommonProps { * Он будет объединён с темой из контекста. */ theme?: ThemeIn; + tabIndex?: number; } -export const BUTTON_DEFAULT_ELEMENT = 'button'; +export const BUTTON_DEFAULT_COMPONENT = 'button'; -export type ButtonProps = PolymorphicPropsWithoutRef< - ButtonInnerProps, - C ->; +export type ButtonProps = + PolymorphicPropsWithoutRef; export interface ButtonState { focusedByTab: boolean; @@ -170,16 +170,10 @@ export const ButtonDataTids = { spinner: 'Button__spinner', } as const; -type DefaultProps = Required>; - -const ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children }: LinkProps) => ( - - {children} - -); +type DefaultProps = Required, 'use' | 'size' | 'type' | 'component'>>; @rootNode -export class Button extends React.Component< +export class Button extends React.Component< ButtonProps, ButtonState > { @@ -194,6 +188,7 @@ export class Button{children}; - } - private getTabIndex({ disableFocus, disabled, tabIndex = 0, - }: Pick) { + }: { + disableFocus?: boolean; + disabled?: boolean; + tabIndex?: number; + }): ButtonProps['tabIndex'] { if (disableFocus || disabled) { return -1; } @@ -295,7 +289,7 @@ export class Button ); if (_isTheme2022 && isLink && !loading) { + // eslint-disable-next-line react/no-unstable-nested-components captionNode = ( { - {children} - + } ); } + const Root: React.ElementType = component; + return ( @@ -594,4 +589,4 @@ export class Button('Button'); +export const isButton = isReactUIComponent>('Button'); diff --git a/packages/react-ui/components/Button/ButtonArrow.tsx b/packages/react-ui/components/Button/ButtonArrow.tsx index 8326f70b38c..cfbe7185e2d 100644 --- a/packages/react-ui/components/Button/ButtonArrow.tsx +++ b/packages/react-ui/components/Button/ButtonArrow.tsx @@ -7,10 +7,13 @@ import { Theme } from '../../lib/theming/Theme'; import { ArrowRightIcon } from './ArrowRightIcon'; import { ArrowLeftIcon } from './ArrowLeftIcon'; -import { Button, ButtonProps } from './Button'; +import { Button, ButtonInnerProps } from './Button'; import { globalClasses, styles } from './Button.styles'; -type ButtonArrowProps = Pick & { +type ButtonArrowProps = Pick< + ButtonInnerProps, + 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning' +> & { isFocused: boolean; }; diff --git a/packages/react-ui/components/Button/ButtonIcon.tsx b/packages/react-ui/components/Button/ButtonIcon.tsx index cecec34485c..1cca115f8f1 100644 --- a/packages/react-ui/components/Button/ButtonIcon.tsx +++ b/packages/react-ui/components/Button/ButtonIcon.tsx @@ -7,11 +7,11 @@ import { ThemeContext } from '../../lib/theming/ThemeContext'; import { isTheme2022 } from '../../lib/theming/ThemeHelpers'; import { SizeProp } from '../../lib/types/props'; -import { ButtonProps } from './Button'; +import { ButtonInnerProps } from './Button'; import { styles } from './ButtonIcon.styles'; import { LoadingButtonIcon } from './LoadingButtonIcon'; -export interface ButtonIconProps extends Pick { +export interface ButtonIconProps extends Pick { position: 'right' | 'left'; hasChildren: boolean; hasBothIcons?: boolean; diff --git a/packages/react-ui/components/Button/ButtonLink.tsx b/packages/react-ui/components/Button/ButtonLink.tsx new file mode 100644 index 00000000000..4f8fb03dec9 --- /dev/null +++ b/packages/react-ui/components/Button/ButtonLink.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +import { LinkProps } from '../Link'; + +export const ButtonLink: React.FC> = (props) => { + const { children, ...rest } = props; + return {children}; +}; diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index 01fb44ae25b..cd887cb836a 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -59,11 +59,6 @@ interface LinkInnerProps extends CommonProps { * Он будет объединён с темой из контекста. */ theme?: ThemeIn; - /** - * Компонент, используемый в качестве корневого узла. - * @ignore - */ - as?: React.ElementType | keyof React.ReactHTML; /** * @ignore */ @@ -92,11 +87,8 @@ export const LinkDataTids = { root: 'Link__root', } as const; -type DefaultProps = Required>; -type DefaultizedLinkProps = DefaultizedProps< - LinkProps, - DefaultProps ->; +type DefaultProps = Required, 'use' | 'component'>>; +type DefaultizedLinkProps = DefaultizedProps, DefaultProps>; /** * Элемент ссылки из HTML. @@ -109,9 +101,9 @@ export class Link) => { - if (!rel && href) { - return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; + private getRel = () => { + if (isAnchorProps(this.props)) { + const { rel, href } = this.props; + if (!rel && href) { + return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`; + } + return rel; } - return rel; + return undefined; }; private renderMain = (props: CommonWrapperRestProps) => { const { disabled, - href, icon, rightIcon, use, loading, _button, _buttonOpened, - rel, - as, component, focused = false, error, @@ -184,7 +177,8 @@ export class Link { - // we have to check for 'href' and 'to' props in case Root is anchor or react-router link - return Boolean( - Object.prototype.hasOwnProperty.call(this.props, 'href') || - Object.prototype.hasOwnProperty.call(this.props, 'to'), - ); - }; - - private isRootElementAnchor = () => { - const { component, as } = this.props; - const Root = component || as; - return Root === 'a'; - }; - private handleClick = (event: React.MouseEvent) => { const { onClick, disabled, loading } = this.props; - const location = this.hasLocationProps(); - if (!location) { - this.isRootElementAnchor() && event.preventDefault(); - } if (onClick && !disabled && !loading) { onClick(event); } @@ -332,3 +303,7 @@ export class Link): props is LinkProps<'a'> => { + return props.component === 'a'; +}; diff --git a/packages/react-ui/components/Link/__tests__/Link-test.tsx b/packages/react-ui/components/Link/__tests__/Link-test.tsx index 4bc2e09a8c7..4e2ebfa5887 100644 --- a/packages/react-ui/components/Link/__tests__/Link-test.tsx +++ b/packages/react-ui/components/Link/__tests__/Link-test.tsx @@ -79,7 +79,7 @@ describe('Link', () => { describe('a11y', () => { it('sets value for aria-label attribute', () => { const ariaLabel = 'aria-label'; - render(); + render(); expect(screen.getByRole('link')).toHaveAttribute('aria-label', ariaLabel); }); @@ -93,7 +93,7 @@ describe('Link', () => { }); it('should render tag when omitted', () => { - renderRTL(); + renderRTL({ href: '' }); expect(screen.getByRole('link')).toBeInTheDocument(); }); From 68c0de3e6676e2b4d19bb86561466e68071f5c14 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Thu, 26 Sep 2024 09:03:04 +0300 Subject: [PATCH 68/71] chore: wip --- .../components/Button/Button.styles.ts | 35 +++++++++---------- .../react-ui/components/Button/Button.tsx | 6 ++-- packages/react-ui/components/Link/Link.tsx | 12 +++---- 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/packages/react-ui/components/Button/Button.styles.ts b/packages/react-ui/components/Button/Button.styles.ts index 331439e4e66..72f8e34aff9 100644 --- a/packages/react-ui/components/Button/Button.styles.ts +++ b/packages/react-ui/components/Button/Button.styles.ts @@ -21,7 +21,6 @@ export const globalClasses = prefix('button')({ caption: 'caption', text: 'text', innerShadow: 'inner-shadow', - customComponent: 'custom-component', disabled: 'disabled', }); @@ -66,13 +65,13 @@ export const styles = memoizeStyle({ width: 0; } - &.${globalClasses.customComponent}:hover svg { + &:hover svg { color: ${t.btnIconHoverColor}; } - &.${globalClasses.customComponent}.${globalClasses.disabled} svg { + &.${globalClasses.disabled} svg { color: ${t.btnIconDisabledColor}; } - &.${globalClasses.customComponent} svg { + & svg { color: ${t.btnIconColor}; } `; @@ -526,7 +525,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, @@ -538,7 +537,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.default(t)}; } `; @@ -556,7 +555,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, @@ -568,7 +567,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.primary(t)} } `; @@ -586,7 +585,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, @@ -598,7 +597,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.success(t)} } `; @@ -616,7 +615,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnDangerHoverBg, t.btnDangerHoverBgStart, @@ -628,7 +627,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.danger(t)} } `; @@ -646,7 +645,7 @@ export const styles = memoizeStyle({ t.btnBorderWidth, )}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnPayHoverBg, t.btnPayHoverBgStart, @@ -658,7 +657,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.pay(t)} } `; @@ -677,7 +676,7 @@ export const styles = memoizeStyle({ ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth)}; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnTextHoverBg, '', @@ -689,7 +688,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.text(t)} } `; @@ -710,7 +709,7 @@ export const styles = memoizeStyle({ color: ${t.btnDefaultTextColor}; background: transparent; - &.${globalClasses.customComponent}:hover { + &:hover { ${buttonHoverMixin( t.btnBacklessHoverBg, '', @@ -722,7 +721,7 @@ export const styles = memoizeStyle({ )}; } - &.${globalClasses.customComponent}:active { + &:active { ${activeStyles.backless(t)} } `; diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index b7147325546..604be43f795 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -155,7 +155,7 @@ export interface ButtonInnerProps extends CommonProps { tabIndex?: number; } -export const BUTTON_DEFAULT_COMPONENT = 'button'; +export const BUTTON_DEFAULT_COMPONENT: ButtonLinkAllowedValues = 'button'; export type ButtonProps = PolymorphicPropsWithoutRef; @@ -188,7 +188,7 @@ export class Button = PolymorphicPropsWithoutRef< +export type LinkProps = PolymorphicPropsWithoutRef< LinkInnerProps, C >; @@ -94,7 +94,7 @@ type DefaultizedLinkProps = DefaultizedProps, * Элемент ссылки из HTML. */ @rootNode -export class Link extends React.Component< +export class Link extends React.Component< LinkProps, LinkState > { @@ -103,7 +103,7 @@ export class Link; From 194f7a8d9564d1b6f2a610716bc379797bfba6fa Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Thu, 26 Sep 2024 13:44:57 +0300 Subject: [PATCH 69/71] chore: small fixes --- .../Select/Simple/clicked/firefox2022/clicked.png | 4 ++-- .../with search/search/firefox2022/emptySearch.png | 4 ++-- .../search/firefox2022/fullFieldSearch.png | 4 ++-- .../with search/search/firefox2022/plainSearch.png | 4 ++-- .../with search/search/firefox2022/pressKeyDown.png | 4 ++-- .../clicked/firefox2022/clicked.png | 4 ++-- .../Open Dropdown while Loader is inactive.png | 4 ++-- .../Open Dropdown while Loader is inactive.png | 4 ++-- .../SidePage covers Select and Tooltip.png | 4 ++-- ...y covers outside Popup and DropdownContainer.png | 4 ++-- ...y covers outside Popup and DropdownContainer.png | 4 ++-- .../firefox2022/Modal covers hint.png | 4 ++-- packages/react-ui/components/Button/Button.tsx | 13 ++++++++----- packages/react-ui/components/Button/ButtonLink.tsx | 8 -------- 14 files changed, 32 insertions(+), 37 deletions(-) delete mode 100644 packages/react-ui/components/Button/ButtonLink.tsx diff --git a/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png b/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png index cca7be0abbc..b4bde78d34e 100644 --- a/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/Simple/clicked/firefox2022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b66c514654abf6738ced1724f56105e4587ffc29150147ea9ee10d7ad10bf079 -size 6357 +oid sha256:13b45dc500e14cec129fa220274d42c553b9afe1a07b297b8a77f4106844d054 +size 6343 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png index 37ee3a2e986..4016d0c0130 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/emptySearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4a1b0c0a3576bd95a047b911596e4865e6e5fa25cf2a038202b50668f11f57e -size 13140 +oid sha256:39f983a0828bad4da5620a6cf95e49ec4324a5aebc95e87ec41891134118f0d3 +size 13194 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png index 2524c132448..ffe0c61fe0e 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/fullFieldSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ab56a2d65d691035354d58250184753020f39682df0012ac31a96dadc70fb6d -size 11157 +oid sha256:b26afbd9c927f4a328753c308801618a41fe6b25de2a49448e36000faf0679bb +size 11208 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png index 37ee3a2e986..4016d0c0130 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/plainSearch.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4a1b0c0a3576bd95a047b911596e4865e6e5fa25cf2a038202b50668f11f57e -size 13140 +oid sha256:39f983a0828bad4da5620a6cf95e49ec4324a5aebc95e87ec41891134118f0d3 +size 13194 diff --git a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png index e9379aa72a6..d01e6b779d0 100644 --- a/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png +++ b/packages/react-ui/.creevey/images/Select/with search/search/firefox2022/pressKeyDown.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a9b97a6c152e94e159e477ca5075eefd88797ed32f4d1e258b457d9e417e9e10 -size 13294 +oid sha256:ffec7dde40f6def14a8f5271de9d5a4beb7012cc012e222d7417d9608a8223ae +size 13346 diff --git a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png index e906ba84b85..fb68abaa58b 100644 --- a/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png +++ b/packages/react-ui/.creevey/images/Select/with text overflow/clicked/firefox2022/clicked.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f6bff45aaecf6e5b22a034a63a22f87ffa1762962c1b92cc28355b00123faa8 -size 5800 +oid sha256:fa923776507600759e15f149521d3c0ed3ddefb978fe2d1391f1a2d8505d7ea9 +size 5767 diff --git a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png index 3d739974b5c..e998a3626b5 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png +++ b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/chrome2022/Open Dropdown while Loader is inactive.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e8a8f108440c1d7d460ee8b2f80d6100ffc8574bdf4f2d3b724d97e9158f0c2a -size 19709 +oid sha256:304ffee6e4e9e0e5f8793e5e7933d2717b76511b529d3f6c32c4944ec6e8e453 +size 19691 diff --git a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png index 6f48d1f8bb0..b9f4fcc6f8e 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png +++ b/packages/react-ui/.creevey/images/ZIndex/Elements in Loader in Modal/Open Dropdown while Loader is inactive/firefox2022/Open Dropdown while Loader is inactive.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c6249e530429ab31fe07bf71ffb2e4b5a1f6712680ba6ddd3c158bd001ff0e67 -size 36009 +oid sha256:978ef95bded6cd318c13625e1b472957aec31c606ae35feee1534a97e76ef0f7 +size 35934 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png index f1844ef4a36..c5390e9b368 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sidepage and Select/SidePage covers Select and Tooltip/firefox2022/SidePage covers Select and Tooltip.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ff8d7327bfe976c7500d6b45247e69526512e7010db4444369c4a15f20875f5 -size 60174 +oid sha256:4de51af4b0f3f252891b395f92f2b39da01dc04b3b93dff363043f237fc228c8 +size 60132 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png index 8170048ced3..e0f4b1bdd5a 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/chrome2022/Sticky covers outside Popup and DropdownContainer.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:de84b73851b58827e064375052aa01a031a103c8a586e6e9f8f98c9c8782105a -size 19573 +oid sha256:8beeb7b55f46ccb91b4a22ee6a6a5446b7eee2ff8b82677fe8b93b390cb73a84 +size 19554 diff --git a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png index 8bcb81ffd72..2aabe1842ec 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png +++ b/packages/react-ui/.creevey/images/ZIndex/Sticky and Tooltips/Sticky covers outside Popup and DropdownContainer/firefox2022/Sticky covers outside Popup and DropdownContainer.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c82bbfcfbea9956f3b03ccd836d703a500f66afd2c648c4141a1dc9235701842 -size 33000 +oid sha256:0e1700a344329de5d00eba29d57ce3c5f9b8763fd903a8a0eae83c2ffd0fe901 +size 32931 diff --git a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png index f6fb5561df8..5d51d08da5f 100644 --- a/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png +++ b/packages/react-ui/.creevey/images/ZIndex/Tooltip and Select/Menu covers tooltip/firefox2022/Modal covers hint.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a26416f1b5dcf12b217c883f18c0c4aa0e5982600be8cbcde2f860c382c4c0cd -size 19918 +oid sha256:002bb84f753e1bb2c9e827215087c63c45f5633fcbd9c595a72c4ebcb1850c45 +size 19921 diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index 604be43f795..d40a896f8b0 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { HTMLAttributes } from 'react'; import { globalObject } from '@skbkontur/global-object'; import warning from 'warning'; @@ -23,7 +23,6 @@ import { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon'; import { useButtonArrow } from './ButtonArrow'; import { getInnerLinkTheme } from './getInnerLinkTheme'; import { LoadingButtonIcon } from './LoadingButtonIcon'; -import { ButtonLink } from './ButtonLink'; /** * @deprecated use SizeProp @@ -172,6 +171,10 @@ export const ButtonDataTids = { type DefaultProps = Required, 'use' | 'size' | 'type' | 'component'>>; +const SpanComponent: React.FunctionComponent> = ({ children, ...rest }) => { + return {children}; +}; + @rootNode export class Button extends React.Component< ButtonProps, @@ -485,13 +488,13 @@ export class Button { - focused={isFocused} - disabled={Boolean(disabled)} + disabled={disabled} icon={this.renderIcon2022(icon)} rightIcon={this.renderIcon2022(rightIcon)} tabIndex={-1} - component={ButtonLink} + component={SpanComponent} > {children} diff --git a/packages/react-ui/components/Button/ButtonLink.tsx b/packages/react-ui/components/Button/ButtonLink.tsx deleted file mode 100644 index 4f8fb03dec9..00000000000 --- a/packages/react-ui/components/Button/ButtonLink.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -import { LinkProps } from '../Link'; - -export const ButtonLink: React.FC> = (props) => { - const { children, ...rest } = props; - return {children}; -}; From 86c67fcc8594cf6f1bd7e929fc2d142a88491dfa Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Thu, 26 Sep 2024 13:53:13 +0300 Subject: [PATCH 70/71] docs(Button,Link)): improve examples --- packages/react-ui/components/Button/Button.md | 2 +- packages/react-ui/components/Link/Link.md | 52 ++++++++++--------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/react-ui/components/Button/Button.md b/packages/react-ui/components/Button/Button.md index f131a0237fa..e55d6ada9af 100644 --- a/packages/react-ui/components/Button/Button.md +++ b/packages/react-ui/components/Button/Button.md @@ -220,7 +220,7 @@ const renderExampleRow = (title, styles, index) => { ```jsx harmony import { Button } from '@skbkontur/react-ui'; - + ``` diff --git a/packages/react-ui/components/Link/Link.md b/packages/react-ui/components/Link/Link.md index 15789fdd158..3630c31942b 100644 --- a/packages/react-ui/components/Link/Link.md +++ b/packages/react-ui/components/Link/Link.md @@ -1,9 +1,33 @@ -Базовый пример ссылки. +По умолчанию, ссылка принимает все пропы `HTMLAnchorElement`. ```jsx harmony -Обычная ссылка +Обычная ссылка ``` +Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. + +Cсылка принимает все пропы переданного в `component` компонента. + +Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки. + +```jsx harmony +import { Link } from '@skbkontur/react-ui'; + +Кнопка, но выглядит как ссылка +``` + +Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента. + +```jsx static +import { Link } from '@skbkontur/react-ui'; +import { Link as RouterLink, BrowserRouter } from 'react-router-dom'; + + + react-router-dom link + +``` + + Ссылка может иметь различные стили, а также быть отключенной. ```jsx harmony @@ -158,26 +182,4 @@ const renderExampleRow = (title, styles, index) => { {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)} {renderExampleRow('Изменение цвета ссылки', differentColorStyles)} -``` -Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. - -Cсылка принимает все пропы переданного в `component` компонента. - -Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки. - -```jsx harmony -import { Link } from '@skbkontur/react-ui'; - -Кнопка, но выглядит как ссылка -``` - -Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента. - -```jsx harmony -import { Link } from '@skbkontur/react-ui'; -import { Link as RouterLink, BrowserRouter } from 'react-router-dom'; - - - react-router-dom link - -``` +``` \ No newline at end of file From d9095be007d543886ac6d4a0cba500d08c61d4a4 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Thu, 26 Sep 2024 22:56:38 +0500 Subject: [PATCH 71/71] chore: fix props --- .../react-ui/components/Button/Button.tsx | 79 ++++++------------- packages/react-ui/components/Link/Link.tsx | 4 +- 2 files changed, 25 insertions(+), 58 deletions(-) diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx index d40a896f8b0..47812e82cb6 100644 --- a/packages/react-ui/components/Button/Button.tsx +++ b/packages/react-ui/components/Button/Button.tsx @@ -8,7 +8,7 @@ import { isIE11, isEdge, isSafari } from '../../lib/client'; import { keyListener } from '../../lib/events/keyListener'; import { Theme, ThemeIn } from '../../lib/theming/Theme'; import { ThemeContext } from '../../lib/theming/ThemeContext'; -import { CommonWrapper, CommonProps } from '../../internal/CommonWrapper'; +import { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; import { ThemeFactory } from '../../lib/theming/ThemeFactory'; @@ -151,7 +151,6 @@ export interface ButtonInnerProps extends CommonProps { * Он будет объединён с темой из контекста. */ theme?: ThemeIn; - tabIndex?: number; } export const BUTTON_DEFAULT_COMPONENT: ButtonLinkAllowedValues = 'button'; @@ -241,7 +240,11 @@ export class Button {(theme) => { this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme; - return this.renderMain(); + return ( + + {this.renderMain} + + ); }} ); @@ -251,11 +254,7 @@ export class Button['tabIndex'] { + }: Pick) { if (disableFocus || disabled) { return -1; } @@ -263,7 +262,7 @@ export class Button) => { const { corners, active, @@ -274,6 +273,7 @@ export class Button ); if (_isTheme2022 && isLink && !loading) { - // eslint-disable-next-line react/no-unstable-nested-components captionNode = ( { @@ -506,18 +473,16 @@ export class Button - - - {innerShadowNode} - {outlineNode} - {arrowNode} - {captionNode} - - - + + + {innerShadowNode} + {outlineNode} + {arrowNode} + {captionNode} + + ); - } + }; private renderIcon2022(icon: React.ReactElement | undefined) { if (icon && isKonturIcon(icon)) { diff --git a/packages/react-ui/components/Link/Link.tsx b/packages/react-ui/components/Link/Link.tsx index ec84f50fff4..b3b5be5e3ab 100644 --- a/packages/react-ui/components/Link/Link.tsx +++ b/packages/react-ui/components/Link/Link.tsx @@ -174,6 +174,7 @@ export class Link + {leftIconElement} {outlineNode} {child}