Skip to content

Commit a28b912

Browse files
dengfupingdengfuping
authored
fix(design): Tag ellipsis and closable style and upgrade deps (#1394)
1 parent e01f11d commit a28b912

File tree

10 files changed

+5429
-14577
lines changed

10 files changed

+5429
-14577
lines changed

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,16 @@
5858
"@stackblitz/sdk": "^1.11.0",
5959
"@testing-library/dom": "^10.4.1",
6060
"@testing-library/jest-dom": "^6.9.1",
61-
"@testing-library/react": "^16.3.0",
61+
"@testing-library/react": "^16.3.1",
6262
"@testing-library/react-hooks": "^8.0.1",
6363
"@testing-library/user-event": "^14.6.1",
6464
"@types/lodash": "^4.17.21",
65-
"@types/node": "^20.19.25",
65+
"@types/node": "^20.19.27",
6666
"@types/react": "^18.3.27",
6767
"@umijs/fabric": "^4.0.1",
68-
"@umijs/test": "^4.6.0",
69-
"@vercel/analytics": "^1.5.0",
70-
"antd": "^5.29.1",
68+
"@umijs/test": "^4.6.18",
69+
"@vercel/analytics": "^1.6.1",
70+
"antd": "^5.29.3",
7171
"antd-style": "^3.7.1",
7272
"antd-token-previewer": "^2.0.8",
7373
"babel-jest": "^29.7.0",
@@ -79,8 +79,8 @@
7979
"dumi": "^2.4.21",
8080
"eslint-plugin-jest": "^28.14.0",
8181
"execa": "^5.1.1",
82-
"father": "^4.6.7",
83-
"fs-extra": "^11.3.2",
82+
"father": "^4.6.13",
83+
"fs-extra": "^11.3.3",
8484
"gh-pages": "^6.3.0",
8585
"glob": "^11.1.0",
8686
"html2sketch": "^1.0.2",
@@ -94,14 +94,14 @@
9494
"lint-staged": "^15.5.2",
9595
"lodash": "^4.17.21",
9696
"mockdate": "^3.0.5",
97-
"prettier": "^3.6.2",
97+
"prettier": "^3.7.4",
9898
"prismjs": "^1.30.0",
9999
"query-string": "^9.3.1",
100100
"rc-checkbox": "^3.5.0",
101101
"rc-drawer": "^7.3.0",
102102
"rc-footer": "^0.6.8",
103103
"rc-resize-observer": "^1.4.3",
104-
"rc-segmented": "^2.7.0",
104+
"rc-segmented": "^2.7.1",
105105
"rc-tabs": "^15.7.0",
106106
"rc-util": "^5.44.4",
107107
"react": "^18.3.1",

‎packages/codemod/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"lodash": "^4.17.21",
3636
"postcss": "^8.5.6",
3737
"postcss-less": "^6.0.0",
38-
"prettier": "^3.6.2",
38+
"prettier": "^3.7.4",
3939
"read-pkg-up": "^10.1.0",
4040
"semver": "^7.7.3",
4141
"update-check": "^1.5.4",

‎packages/design/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"@oceanbase/icons": "workspace:^",
4646
"@oceanbase/util": "workspace:^",
4747
"ahooks": "^2.10.14",
48-
"antd": "^5.29.1",
48+
"antd": "^5.29.3",
4949
"classnames": "^2.5.1",
5050
"lodash": "^4.17.21",
5151
"lottie-web": "^5.13.0",

‎packages/design/src/_util/getEllipsisConfig.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { isValidElement } from 'react';
22
import type { ReactElement, ReactNode } from 'react';
33
import type { EllipsisConfig } from '../typography';
4-
import type { TooltipPlacement } from '../tooltip';
54

65
export type Ellipsis = boolean | EllipsisConfig;
76

‎packages/design/src/popover/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ nav:
1414
<code src="./demo/basic.tsx" title="基本"></code>
1515
<code src="./demo/trigger.tsx" title="触发方式"></code>
1616
<code src="./demo/over-length.tsx" title="超长内容" description="浮层大小默认由内容区决定，最大宽度为 100vw。如果不想浮层被内容无限撑开，可以通过 `overlayInnerStyle` 设置最大宽高。"></code>
17-
<code src="./demo/with-table.tsx" title="和表格搭配使用" description="1、浮层设置最大宽度，避免被表格内容无限拉伸。<br/>2、表格设置横向滚动 `scroll={{ x: 'max-content' }}`，避免折行。<br/>3、表格尺寸设为 `middle`，分页器尺寸设为 `small`，减小空间占用。"></code>
17+
<code src="./demo/with-table.tsx" title="和表格搭配使用" description="1、浮层设置最大宽度，避免被表格内容无限拉伸。<br>2、表格设置横向滚动 `scroll={{ x: 'max-content' }}`，避免折行。<br>3、表格尺寸设为 `middle`，分页器尺寸设为 `small`，减小空间占用。"></code>
1818

1919
## API
2020

‎packages/design/src/tag/demo/ellipsis.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
11
import { CheckCircleOutlined } from '@oceanbase/icons';
2-
import { Tag } from '@oceanbase/design';
2+
import { Space, Tag } from '@oceanbase/design';
33
import React from 'react';
44

55
const App: React.FC = () => (
6-
<>
6+
<Space direction="vertical" style={{ width: '100%' }}>
77
<Tag>
88
Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
99
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
1010
ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
1111
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
1212
</Tag>
13+
<Tag icon={<CheckCircleOutlined />} closable>
14+
Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
15+
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
16+
ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
17+
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
18+
</Tag>
1319
<Tag
1420
icon={<CheckCircleOutlined />}
21+
closable
1522
ellipsis={{
1623
tooltip: {
1724
placement: 'topLeft',
1825
title: 'Custom Title',
1926
},
2027
}}
2128
style={{
22-
width: 200,
23-
marginTop: 16,
29+
width: 400,
2430
}}
2531
>
2632
Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
2733
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
2834
ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
2935
excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
3036
</Tag>
31-
</>
37+
</Space>
3238
);
3339

3440
export default App;

‎packages/design/src/tag/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
2020
children,
2121
prefixCls: customizePrefixCls,
2222
icon,
23-
className,
23+
closable,
2424
ellipsis = {
2525
tooltip: {
2626
title: children,
2727
},
2828
},
29+
className,
2930
...restProps
3031
},
3132
ref
@@ -37,6 +38,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
3738
const ellipsisConfig = getEllipsisConfig(ellipsis, children);
3839
const tagCls = classNames(
3940
{
41+
[`${prefixCls}-closable`]: !!closable,
4042
[`${prefixCls}-ellipsis`]: !!ellipsisConfig,
4143
},
4244
className
@@ -50,6 +52,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
5052
prefixCls={customizePrefixCls}
5153
className={tagCls}
5254
icon={ellipsisConfig ? null : icon}
55+
closable={closable}
5356
{...restProps}
5457
>
5558
{ellipsisConfig ? (

‎packages/design/src/tag/style/index.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { mergeToken, type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
1+
import { mergeToken, type FullToken } from 'antd/es/theme/internal';
22
import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
33
import { genPresetColor } from 'antd/lib/theme/internal';
44
import { getWeakenBorderColor } from '../../_util/getWeakenBorderColor';
5-
import type { CSSObject } from '@ant-design/cssinjs';
5+
import { unit, type CSSObject } from '@ant-design/cssinjs';
66

77
export type TagToken = FullToken<'Tag'> & {
88
tagPaddingHorizontal: number;
@@ -40,6 +40,7 @@ const genPresetStyle = (token: TagToken) =>
4040

4141
export const genTagStyle = (token: TagToken): CSSObject => {
4242
const { antCls, componentCls, tagPaddingHorizontal, lineWidth, calc } = token;
43+
const typographyComponentCls = `${antCls}-typography`;
4344

4445
const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
4546
return {
@@ -54,10 +55,14 @@ export const genTagStyle = (token: TagToken): CSSObject => {
5455
},
5556
['&-ellipsis']: {
5657
maxWidth: '100%',
57-
textOverflow: 'ellipsis',
58-
overflow: 'hidden',
5958
verticalAlign: 'bottom',
6059
},
60+
['&-closable&-ellipsis']: {
61+
verticalAlign: 'bottom',
62+
[`${typographyComponentCls}`]: {
63+
maxWidth: `calc(100% - ${unit(token.margin)})`,
64+
},
65+
},
6166
['&-checkable']: {
6267
borderColor: 'transparent',
6368
},

‎packages/design/src/tooltip/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ nav:
1616

1717
<!-- prettier-ignore -->
1818
<code src="./demo/basic.tsx" title="基本"></code>
19-
<code src="./demo/over-length.tsx" title="超长内容" description="1、浮层默认的最大宽度为 300px、最大高度为 250px，内容超出时横向折行、纵向滚动。<br/>2、可以通过 `overlayStyle={{ maxWidth: 'xxx' }}` 设置最大宽度，`overlayInnerStyle={{ maxHeight: 'xxx' }}` 设置最大高度。"></code>
19+
<code src="./demo/over-length.tsx" title="超长内容" description="1、浮层默认的最大宽度为 300px、最大高度为 250px，内容超出时横向折行、纵向滚动。<br>2、可以通过 `overlayStyle={{ maxWidth: 'xxx' }}` 设置最大宽度，`overlayInnerStyle={{ maxHeight: 'xxx' }}` 设置最大高度。"></code>
2020
<code src="./demo/close-icon.tsx" title="关闭按钮" description="Tooltip 可以通过设置 closeIcon 变为可关闭 Tooltip, 并支持自定义关闭按钮，设置为 true 时将使用默认关闭按钮。可关闭 Tooltip 具有 onClose 事件。"></code>
2121
<code src="./demo/type.tsx" title="Tooltip 类型" description="Tooltip 有五种类型：default、info、success、warning 和 error，以满足不同场景的提示需求。"></code>
2222
<code src="./demo/mouse-follow.tsx" title="鼠标跟随" description="设置 `mouseFollow: true` 可开启鼠标跟随，此时会去掉箭头，并且 `placement`、`open` 和 `trigger` 等属性也将失效。"></code>

0 commit comments

Comments
 (0)