From 9b779b1cd8cdc4a2cfa40bd076355848288a4777 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 29 Sep 2024 18:02:13 +0800 Subject: [PATCH] refactor: remove TransButton in Table/Transfer/Typography (#51068) --- .../_util/__tests__/transButton.test.tsx | 11 - components/_util/__tests__/util.test.tsx | 29 +-- components/_util/transButton.tsx | 73 ------- .../__snapshots__/demo-extend.test.ts.snap | 8 +- .../__snapshots__/demo.test.tsx.snap | 8 +- components/style/index.tsx | 26 ++- components/style/operationUnit.ts | 21 -- components/table/style/expand.ts | 4 - components/transfer/ListItem.tsx | 10 +- .../__snapshots__/demo-extend.test.ts.snap | 48 ++--- .../__tests__/__snapshots__/demo.test.ts.snap | 48 ++--- components/transfer/style/index.ts | 18 +- components/typography/Base/CopyBtn.tsx | 8 +- components/typography/Base/index.tsx | 15 +- .../__snapshots__/demo-extend.test.ts.snap | 200 +++++++----------- .../__snapshots__/demo.test.tsx.snap | 200 +++++++----------- components/typography/__tests__/copy.test.tsx | 2 +- .../typography/__tests__/index.test.tsx | 38 ++-- components/typography/hooks/useCopyClick.ts | 2 +- components/typography/style/mixins.ts | 5 - 20 files changed, 255 insertions(+), 519 deletions(-) delete mode 100644 components/_util/__tests__/transButton.test.tsx delete mode 100644 components/_util/transButton.tsx delete mode 100644 components/style/operationUnit.ts diff --git a/components/_util/__tests__/transButton.test.tsx b/components/_util/__tests__/transButton.test.tsx deleted file mode 100644 index 41806b843d..0000000000 --- a/components/_util/__tests__/transButton.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import { render } from '../../../tests/utils'; -import TransButton from '../transButton'; - -describe('transButton component', () => { - it('disabled should update style', () => { - const { container } = render(); - expect(container.querySelector('div')?.style.pointerEvents).toBe('none'); - }); -}); diff --git a/components/_util/__tests__/util.test.tsx b/components/_util/__tests__/util.test.tsx index 247492c716..067c9aa518 100644 --- a/components/_util/__tests__/util.test.tsx +++ b/components/_util/__tests__/util.test.tsx @@ -1,10 +1,6 @@ -import React from 'react'; -import KeyCode from 'rc-util/lib/KeyCode'; - -import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; +import { waitFakeTimer } from '../../../tests/utils'; import { isStyleSupport } from '../styleChecker'; import throttleByAnimationFrame from '../throttleByAnimationFrame'; -import TransButton from '../transButton'; describe('Test utils function', () => { describe('throttle', () => { @@ -45,29 +41,6 @@ describe('Test utils function', () => { }); }); - describe('TransButton', () => { - it('can be focus/blur', () => { - const ref = React.createRef(); - render(TransButton); - expect(typeof ref.current?.focus).toBe('function'); - expect(typeof ref.current?.blur).toBe('function'); - }); - - it('should trigger onClick when press enter', () => { - const onClick = jest.fn(); - - const { container } = render(TransButton); - - // callback should trigger - fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER }); - expect(onClick).toHaveBeenCalledTimes(1); - - // callback should not trigger - fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER }); - expect(onClick).toHaveBeenCalledTimes(1); - }); - }); - describe('style', () => { it('isStyleSupport', () => { expect(isStyleSupport('color')).toBe(true); diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx deleted file mode 100644 index a62dcd038d..0000000000 --- a/components/_util/transButton.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/** - * Wrap of sub component which need use as Button capacity (like Icon component). - * - * This helps accessibility reader to tread as a interactive button to operation. - */ -import * as React from 'react'; -import KeyCode from 'rc-util/lib/KeyCode'; - -interface TransButtonProps extends React.HTMLAttributes { - onClick?: (e?: React.MouseEvent) => void; - noStyle?: boolean; - autoFocus?: boolean; - disabled?: boolean; - tabIndex?: number; -} - -const inlineStyle: React.CSSProperties = { - border: 0, - background: 'transparent', - padding: 0, - lineHeight: 'inherit', - display: 'inline-block', -}; - -const TransButton = React.forwardRef((props, ref) => { - const onKeyDown: React.KeyboardEventHandler = (event) => { - const { keyCode } = event; - if (keyCode === KeyCode.ENTER) { - event.preventDefault(); - } - }; - - const onKeyUp: React.KeyboardEventHandler = (event) => { - const { keyCode } = event; - const { onClick } = props; - if (keyCode === KeyCode.ENTER && onClick) { - onClick(); - } - }; - - const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props; - - let mergedStyle: React.CSSProperties = {}; - - if (!noStyle) { - mergedStyle = { - ...inlineStyle, - }; - } - - if (disabled) { - mergedStyle.pointerEvents = 'none'; - } - - mergedStyle = { - ...mergedStyle, - ...style, - }; - - return ( -
- ); -}); - -export default TransButton; diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index dd77b80d71..9d4341bcb7 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -721,12 +721,10 @@ Array [ class="ant-typography" > Ant Design -
-
+
Ant Design -
-
+ , ({ ...genFocusOutline(token), }, }); + +export const operationUnit = (token: AliasToken): CSSObject => ({ + // FIXME: This use link but is a operation unit. Seems should be a colorPrimary. + // And Typography use this to generate link style which should not do this. + color: token.colorLink, + textDecoration: token.linkDecoration, + outline: 'none', + cursor: 'pointer', + transition: `all ${token.motionDurationSlow}`, + border: 0, + padding: 0, + background: 'none', + userSelect: 'none', + + ...genFocusStyle(token), + + '&:focus, &:hover': { + color: token.colorLinkHover, + }, + + '&:active': { + color: token.colorLinkActive, + }, +}); diff --git a/components/style/operationUnit.ts b/components/style/operationUnit.ts deleted file mode 100644 index 0f77b62726..0000000000 --- a/components/style/operationUnit.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { CSSObject } from '@ant-design/cssinjs'; - -import type { AliasToken } from '../theme/internal'; - -export const operationUnit = (token: AliasToken): CSSObject => ({ - // FIXME: This use link but is a operation unit. Seems should be a colorPrimary. - // And Typography use this to generate link style which should not do this. - color: token.colorLink, - textDecoration: 'none', - outline: 'none', - cursor: 'pointer', - transition: `color ${token.motionDurationSlow}`, - - '&:focus, &:hover': { - color: token.colorLinkHover, - }, - - '&:active': { - color: token.colorLinkActive, - }, -}); diff --git a/components/table/style/expand.ts b/components/table/style/expand.ts index 119031ace8..09e2c40dca 100644 --- a/components/table/style/expand.ts +++ b/components/table/style/expand.ts @@ -55,18 +55,14 @@ const genExpandStyle: GenerateStyle = (token) => { ...operationUnit(token), position: 'relative', float: 'left', - boxSizing: 'border-box', width: expandIconSize, height: expandIconSize, - padding: 0, color: 'inherit', lineHeight: unit(expandIconSize), background: tableExpandIconBg, border: tableBorder, borderRadius, transform: `scale(${expandIconScale})`, - transition: `all ${motionDurationSlow}`, - userSelect: 'none', '&:focus, &:hover, &:active': { borderColor: 'currentcolor', diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx index 8b870364a0..45d7919857 100644 --- a/components/transfer/ListItem.tsx +++ b/components/transfer/ListItem.tsx @@ -3,7 +3,6 @@ import DeleteOutlined from '@ant-design/icons/DeleteOutlined'; import classNames from 'classnames'; import type { KeyWiseTransferItem } from '.'; -import TransButton from '../_util/transButton'; import Checkbox from '../checkbox'; import { useLocale } from '../locale'; import defaultLocale from '../locale/en_US'; @@ -53,16 +52,15 @@ const ListItem = (props: ListItemProps {labelNode} - { - onRemove?.(item); - }} + onClick={() => onRemove?.(item)} > - + ); } diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap index 858e7b65da..0be3b3ef63 100644 --- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8278,12 +8278,10 @@ Array [ > content3 -
-
+
  • content6 -
    -
    +
  • content9 -
    -
    +
  • content12 -
    -
    +
  • content15 -
    -
    +
  • content18 -
    -
    +
    • diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap index c940f3b242..41f4fd8323 100644 --- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap @@ -5357,12 +5357,10 @@ Array [ > content3 -
    -
    +
  • content6 -
    -
    +
  • content9 -
    -
    +
  • content12 -
    -
    +
  • content15 -
    -
    +
  • content18 -
    -
    +
    • diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index a8cb8bf655..c4c464b6ed 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -1,7 +1,7 @@ import { unit } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; -import { resetComponent, resetIcon, textEllipsis } from '../../style'; +import { resetComponent, resetIcon, textEllipsis, operationUnit } from '../../style'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; @@ -122,6 +122,7 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken itemPaddingBlock, controlItemBgActive, colorTextDisabled, + colorTextSecondary, listHeight, listWidth, listWidthLG, @@ -242,20 +243,11 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken }, '&-remove': { - position: 'relative', + ...operationUnit(token), color: colorBorder, - cursor: 'pointer', - transition: `all ${motionDurationSlow}`, - - '&:hover': { - color: token.colorLinkHover, - }, - - '&::after': { - position: 'absolute', - inset: `-${unit(itemPaddingBlock)} -50%`, - content: '""', + '&:hover, &:focus': { + color: colorTextSecondary, }, }, diff --git a/components/typography/Base/CopyBtn.tsx b/components/typography/Base/CopyBtn.tsx index 1b651e40e7..20fafbbd93 100644 --- a/components/typography/Base/CopyBtn.tsx +++ b/components/typography/Base/CopyBtn.tsx @@ -5,7 +5,6 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import classNames from 'classnames'; import type { CopyConfig } from '.'; -import TransButton from '../../_util/transButton'; import type { Locale } from '../../locale'; import Tooltip from '../../tooltip'; import { getNode, toList } from './util'; @@ -14,7 +13,7 @@ export interface CopyBtnProps extends Omit { prefixCls: string; copied: boolean; locale: Locale['Text']; - onCopy: (e?: React.MouseEvent) => void; + onCopy: React.MouseEventHandler; iconOnly: boolean; loading: boolean; } @@ -39,7 +38,8 @@ const CopyBtn: React.FC = ({ return ( - = ({ {copied ? getNode(iconNodes[1], , true) : getNode(iconNodes[0], btnLoading ? : , true)} - + ); }; diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index d628447a95..056411ba71 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -10,7 +10,6 @@ import omit from 'rc-util/lib/omit'; import { composeRef } from 'rc-util/lib/ref'; import { isStyleSupport } from '../../_util/styleChecker'; -import TransButton from '../../_util/transButton'; import { ConfigContext } from '../../config-provider'; import useLocale from '../../locale/useLocale'; import type { TooltipProps } from '../../tooltip'; @@ -31,7 +30,7 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger'; export interface CopyConfig { text?: string | (() => string | Promise); - onCopy?: (event?: React.MouseEvent) => void; + onCopy?: (event?: React.MouseEvent) => void; icon?: React.ReactNode; tooltips?: React.ReactNode; format?: 'text/plain' | 'text/html'; @@ -130,7 +129,7 @@ const Base = React.forwardRef((props, ref) => { const [textLocale] = useLocale('Text'); const typographyRef = React.useRef(null); - const editIconRef = React.useRef(null); + const editIconRef = React.useRef(null); // ============================ MISC ============================ const prefixCls = getPrefixCls('typography', customizePrefixCls); @@ -349,14 +348,15 @@ const Base = React.forwardRef((props, ref) => { const renderExpand = () => { const { expandable, symbol } = ellipsisConfig; return expandable ? ( - onExpandClick(e!, { expanded: !expanded })} aria-label={expanded ? textLocale.collapse : textLocale?.expand} > {typeof symbol === 'function' ? symbol(expanded) : symbol} - + ) : null; }; @@ -373,7 +373,8 @@ const Base = React.forwardRef((props, ref) => { return triggerType.includes('icon') ? ( - ((props, ref) => { tabIndex={tabIndex} > {icon || } - + ) : null; }; diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap index 40bb1ace3a..cb48319d35 100644 --- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -440,12 +440,10 @@ Array [ class="ant-typography" > This is a copyable text. -
    -
    +
    Replace copy text. -
    -
    +
    Custom Copy icon and replace tooltips text. -
    -
    +
    Hide Copy tooltips. -
    -
    +
    Request copy text. -
    -
    +
    -
    -
    +
    This is an editable text. -
    -
    +
    This is a loooooooooooooooooooooooooooooooong editable text with suffix. -
    -
    +
    Custom Edit icon and replace tooltip text. -
    -
    +
    Text or icon as trigger - click to start editing. -
    -
    +
    Editable text with a custom enter icon in edit field. -
    -
    +
    Editable text with no enter icon in edit field. -
    -
    +
    Hide Edit tooltip. -
    -
    +
    This is an editable text with limited length. -
    -
    +
    h1. Ant Design -
    -
    +
    h2. Ant Design -
    -
    +
    h3. Ant Design -
    -
    +
    h4. Ant Design -
    -
    +
    h5. Ant Design -
    -
    +
    Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    Ant Design is a design language for background applications, is refined by Ant UED Team. -
    -
    +
    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +
    This is a copyable text. -
    -
    +
    ,
    Replace copy text. -
    -
    +
    ,
    Custom Copy icon and replace tooltips text. -
    -
    +
    ,
    Hide Copy tooltips. -
    -
    +
    ,
    Request copy text. -
    -
    +
    , -
    -
    +     , ] `; @@ -634,12 +622,10 @@ Array [ class="ant-typography" > This is an editable text. -
    -
    +
    ,
    with suffix. -
    -
    +
    ,
    Custom Edit icon and replace tooltip text. -
    -
    +
    , Trigger edit with:, , @@ -797,12 +779,10 @@ Array [ class="ant-typography" > Text or icon as trigger - click to start editing. -
    -
    +
    ,
    Editable text with a custom enter icon in edit field. -
    -
    +
    ,
    Editable text with no enter icon in edit field. -
    -
    +
    ,
    Hide Edit tooltip. -
    -
    +
    ,
    This is an editable text with limited length. -
    -
    +
    ,

    h1. Ant Design -
    -
    +

    ,

    h2. Ant Design -
    -
    +

    ,

    h3. Ant Design -
    -
    +

    ,

    h4. Ant Design -
    -
    +

    ,
    h5. Ant Design -
    -
    +
    , ] `; @@ -1233,12 +1195,10 @@ exports[`renders components/typography/demo/ellipsis-controlled.tsx correctly 1` style="-webkit-line-clamp:2" > Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team.Ant Design, a design language for background applications, is refined by Ant UED Team. -
    -
    +
    `; @@ -1397,12 +1357,10 @@ Array [ style="max-width:400px;font-size:24px" > In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    + ,
    , In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +     ,
    , In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -
    -
    +     ,
    , Ant Design is a design language for background applications, is refined by Ant UED Team. -
    -
    +     ,

    [Before] @@ -1577,12 +1529,10 @@ Array [ style="width:100px;white-space:nowrap" > In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. -

    -
    + , ] `; diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx index 9d7559797d..b6439b76ff 100644 --- a/components/typography/__tests__/copy.test.tsx +++ b/components/typography/__tests__/copy.test.tsx @@ -224,7 +224,7 @@ describe('Typography copy', () => { }); it('the first parameter of onCopy is the click event', () => { - function onCopy(e?: React.MouseEvent) { + function onCopy(e?: React.MouseEvent) { expect(e).not.toBeUndefined(); } diff --git a/components/typography/__tests__/index.test.tsx b/components/typography/__tests__/index.test.tsx index d4ac01487d..28d74d2359 100644 --- a/components/typography/__tests__/index.test.tsx +++ b/components/typography/__tests__/index.test.tsx @@ -3,6 +3,7 @@ import { CheckOutlined, HighlightOutlined, LikeOutlined, SmileOutlined } from '@ import copy from 'copy-to-clipboard'; import KeyCode from 'rc-util/lib/KeyCode'; import { resetWarned } from 'rc-util/lib/warning'; +import userEvent from '@testing-library/user-event'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -476,33 +477,24 @@ describe('Typography', () => { expect(ref.current instanceof HTMLSpanElement).toBe(true); }); - it('Callback on enter key is triggered', () => { - const onEditStart = jest.fn(); + it('should trigger callback when press {enter}', async () => { const onCopy = jest.fn(); - + const onEditStart = jest.fn(); const { container: wrapper } = render( - + test , ); - const timer: any = 9527; - jest.spyOn(window, 'setTimeout').mockReturnValue(timer); - jest.spyOn(window, 'clearTimeout'); - // must copy first, because editing button will hide copy button - fireEvent.keyUp(wrapper.querySelectorAll('.ant-typography-copy')[0], { - keyCode: KeyCode.ENTER, - }); - fireEvent.keyUp(wrapper.querySelectorAll('.anticon-edit')[0], { keyCode: KeyCode.ENTER }); - - expect(onEditStart.mock.calls.length).toBe(1); - expect(onCopy.mock.calls.length).toBe(1); - jest.restoreAllMocks(); + const copyButton = wrapper.querySelector('.ant-typography-copy') as HTMLButtonElement; + expect(copyButton).toBeTruthy(); + // https://github.com/testing-library/user-event/issues/179#issuecomment-1125146667 + copyButton.focus(); + userEvent.keyboard('{enter}'); + await waitFor(() => expect(onCopy).toHaveBeenCalledTimes(1)); + const editButton = wrapper.querySelector('.ant-typography-edit') as HTMLButtonElement; + expect(editButton).toBeTruthy(); + editButton.focus(); + userEvent.keyboard('{enter}'); + await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1)); }); }); diff --git a/components/typography/hooks/useCopyClick.ts b/components/typography/hooks/useCopyClick.ts index 8bf361f78e..3b925ac4c4 100644 --- a/components/typography/hooks/useCopyClick.ts +++ b/components/typography/hooks/useCopyClick.ts @@ -32,7 +32,7 @@ const useCopyClick = ({ React.useEffect(() => cleanCopyId, []); // Keep copy action up to date - const onClick = useEvent(async (e?: React.MouseEvent) => { + const onClick = useEvent(async (e?: React.MouseEvent) => { e?.preventDefault(); e?.stopPropagation(); setCopyLoading(true); diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts index beaec542b8..75433d4915 100644 --- a/components/typography/style/mixins.ts +++ b/components/typography/style/mixins.ts @@ -60,11 +60,6 @@ export const getLinkStyles: GenerateStyle = (token) return { 'a&, a': { ...operationUnit(token), - textDecoration: token.linkDecoration, - - '&:active, &:hover': { - textDecoration: token.linkHoverDecoration, - }, [`&[disabled], &${componentCls}-disabled`]: { color: token.colorTextDisabled,