docs: update sidebar style of website (#48224)

* docs: update GetRef/GetProp/GetProps docs * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix
2024-11-29 18:50:00 +08:00 · 2024-04-02 14:05:03 +08:00 · 2024-04-02 14:05:03 +08:00 · 0a79a79bc7
commit 0a79a79bc7
parent e6542abb60
17 changed files with 66 additions and 36 deletions
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@ -1,12 +1,25 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
 import { Tag, version } from 'antd';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
 import { useFullSidebarData, useSidebarData } from 'dumi';

 import Link from '../theme/common/Link';
 import useLocation from './useLocation';

-const MenuItemLabelWithTag: React.FC<{
+const useStyle = createStyles(({ css }) => ({
+  link: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `,
+  tag: css`
+    margin-inline-end: 0;
+  `,
+}));
+
+interface MenuItemLabelProps {
  before?: React.ReactNode;
  after?: React.ReactNode;
  link: string;
@ -15,18 +28,14 @@ const MenuItemLabelWithTag: React.FC<{
  search?: string;
  tag?: string;
  className?: string;
-}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => {
+}
+
+const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
+  const { styles } = useStyle();
+  const { before, after, link, title, subtitle, search, tag, className } = props;
  if (!before && !after) {
    return (
-      <Link
-        to={`${link}${search}`}
-        style={
-          tag
-            ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }
-            : undefined
-        }
-        className={className}
-      >
+      <Link to={`${link}${search}`} className={classnames(className, { [styles.link]: tag })}>
        <span>
          {title}
          {subtitle && <span className="chinese">{subtitle}</span>}
@ -34,8 +43,8 @@ const MenuItemLabelWithTag: React.FC<{
        {tag && (
          <Tag
            bordered={false}
-            color={tag === 'New' ? 'success' : 'processing'}
-            style={{ marginBlockEnd: 0 }}
+            className={classnames(styles.tag)}
+            color={tag.startsWith('5.') || tag === 'New' ? 'success' : 'processing'}
          >
            {tag.replace('VERSION', version)}
          </Tag>
--- a/components/_util/index.en-US.md
+++ b/components/_util/index.en-US.md
@ -5,6 +5,7 @@ description: Utilities are used to assist development and provide some common ut
 showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
+tag: 5.13.0
 demo:
  cols: 2
 group:
@ -12,12 +13,15 @@ group:
  order: 99
 ---

+Available since `5.13.0`.
+
 ## GetRef

 Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.

 ```tsx
-import type { GetRef, Select } from 'antd';
+import { Select } from 'antd';
+import type { GetRef } from 'antd';

 type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 ```
@ -27,7 +31,8 @@ type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 Get the `props` property definition of the component:

 ```tsx
-import type { Checkbox, GetProps } from 'antd';
+import { Checkbox } from 'antd';
+import type { GetProps } from 'antd';

 type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 ```
@ -37,7 +42,8 @@ type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 Get the single `props` property definition of the component. It has encapsulated `NonNullable`, so you don't have to worry about being empty:

 ```tsx
-import type { GetProp, Select, SelectProps } from 'antd';
+import { Select } from 'antd';
+import type { GetProp, SelectProps } from 'antd';

 // Both of this can work
 type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
--- a/components/_util/index.zh-CN.md
+++ b/components/_util/index.zh-CN.md
@ -6,6 +6,7 @@ description: 辅助开发，提供一些常用的工具方法。
 showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
+tag: 5.13.0
 demo:
  cols: 2
 group:
@ -13,12 +14,15 @@ group:
  order: 99
 ---

+自 `5.13.0` 版本开始提供这些方法。
+
 ## GetRef

 获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。

 ```tsx
-import type { GetRef, Select } from 'antd';
+import { Select } from 'antd';
+import type { GetRef } from 'antd';

 type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 ```
@ -28,7 +32,8 @@ type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
 获取组件的 `props` 属性定义：

 ```tsx
-import type { Checkbox, GetProps } from 'antd';
+import { Checkbox } from 'antd';
+import type { GetProps } from 'antd';

 type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 ```
@ -38,7 +43,8 @@ type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
 获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装，所以不用在考虑为空的情况：

 ```tsx
-import type { GetProp, Select, SelectProps } from 'antd';
+import { Select } from 'antd';
+import type { GetProp, SelectProps } from 'antd';

 // 以下两种都可以生效
 type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@ -7,9 +7,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.1.0
 ---

+Available since `5.1.0`.
+
 ## When To Use

 - Provide reset styles based on `.ant-app` element.
@ -125,6 +127,8 @@ export default () => {

 Common props ref：[Common props](/docs/react/common-props)

+> This component is available since `antd@5.1.0`.
+
 ### App

 | Property | Description | Type | Default | Version |
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@ -8,9 +8,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.1.0
 ---

+自 `5.1.0` 版本开始提供该组件。
+
 ## 何时使用

 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
@ -126,6 +128,8 @@ export default () => {

 通用属性参考：[通用属性](/docs/react/common-props)

+> 自 `antd@5.1.0` 版本开始提供该组件。
+
 ### App

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@ -4,7 +4,7 @@ title: ColorPicker
 description: Used for color selection.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.5.0
 demo:
  cols: 2
 group:
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@ -5,7 +5,7 @@ subtitle: 颜色选择器
 description: 用于选择颜色。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.5.0
 demo:
  cols: 2
 group:
--- a/components/flex/index.en-US.md
+++ b/components/flex/index.en-US.md
@ -5,7 +5,7 @@ title: Flex
 description: A flex layout container for alignment.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.10.0
 ---

 Available since `5.10.0`.
--- a/components/flex/index.zh-CN.md
+++ b/components/flex/index.zh-CN.md
@ -6,7 +6,7 @@ subtitle: 弹性布局
 description: 用于对齐的弹性布局容器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
-tag: New
+tag: 5.10.0
 ---

 自 `5.10.0` 版本开始提供该组件。
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.0.0
 ---

 Available since `5.0.0`.
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.0.0
 ---

 自 `5.0.0` 版本开始提供该组件。
--- a/components/qr-code/index.en-US.md
+++ b/components/qr-code/index.en-US.md
@ -9,7 +9,7 @@ demo:
 group:
  title: Data Display
  order: 5
-tag: New
+tag: 5.1.0
 ---

 Available since `antd@5.1.0`.
--- a/components/qr-code/index.zh-CN.md
+++ b/components/qr-code/index.zh-CN.md
@ -10,7 +10,7 @@ demo:
 group:
  title: 数据展示
  order: 5
-tag: New
+tag: 5.1.0
 ---

 自 `antd@5.1.0` 版本开始提供该组件。
--- a/components/tour/index.en-US.md
+++ b/components/tour/index.en-US.md
@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.0.0
 ---

 Available since `5.0.0`.
--- a/components/tour/index.zh-CN.md
+++ b/components/tour/index.zh-CN.md
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
-tag: New
+tag: 5.0.0
 ---

 自 `5.0.0` 版本开始提供该组件。
--- a/components/watermark/index.en-US.md
+++ b/components/watermark/index.en-US.md
@ -7,9 +7,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 1
+tag: 5.1.0
 ---

-Available since `5.0.0`.
+Available since `5.1.0`.

 ## When To Use

@ -29,7 +30,7 @@ Available since `5.0.0`.

 Common props ref：[Common props](/docs/react/common-props)

-> This component is available since `antd@5.0.0`.
+> This component is available since `antd@5.1.0`.

 ### Watermark

--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@ -8,10 +8,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 1
-tag: New
+tag: 5.1.0
 ---

-自 `5.0.0` 版本开始提供该组件。
+自 `5.1.0` 版本开始提供该组件。

 ## 何时使用

@ -31,7 +31,7 @@ tag: New

 通用属性参考：[通用属性](/docs/react/common-props)

-> 自 `antd@5.0.0` 版本开始提供该组件。
+> 自 `antd@5.1.0` 版本开始提供该组件。

 ### Watermark