docs: add semantic usage demo

components/steps/index.tsx

@@ -17,18 +17,21 @@ import { BlockContext } from './context';
 import PanelArrow from './PanelArrow';
 import ProgressIcon from './ProgressIcon';
 import useStyle from './style';
+import type { GetProp } from '../_util/type';
+
+type RcIconRenderTypeInfo = Parameters<NonNullable<RcStepsProps['iconRender']>>[1];
 
 export type IconRenderType = (
   oriNode: React.ReactNode,
-  info: {
-    index: number;
-    active: boolean;
-    item: StepItem;
-  },
+  info: Pick<RcIconRenderTypeInfo, 'index' | 'active' | 'item' | 'components'>,
 ) => React.ReactNode;
 
 interface StepItem {
   className?: string;
+  style?: React.CSSProperties;
+  classNames?: GetProp<RcStepsProps, 'items'>[number]['classNames'];
+  styles?: GetProp<RcStepsProps, 'items'>[number]['styles'];
+
   /** @deprecated Please use `content` instead */
   description?: React.ReactNode;
   content?: React.ReactNode;
@@ -38,7 +41,6 @@ interface StepItem {
   disabled?: boolean;
   title?: React.ReactNode;
   subTitle?: React.ReactNode;
-  style?: React.CSSProperties;
 }
 
 export type ProgressDotRender = (
@@ -218,26 +220,27 @@ const Steps = (props: StepsProps) => {
   const mergedPercent = isInline ? undefined : percent;
 
   // ============================= Icon =============================
-  const internalIconRender: RcStepsProps['iconRender'] = (info) => {
-    const { item, index, active } = info;
+  const internalIconRender: RcStepsProps['iconRender'] = (_, info) => {
+    const {
+      item,
+      index,
+      active,
+      components: { Icon: StepIcon },
+    } = info;
 
     const { status, icon } = item;
 
-    let iconNode: React.ReactNode = null;
+    let iconContent: React.ReactNode = null;
 
-    if (isDot) {
-      // const dotCls = `${itemIconCls}-dot`;
-      // iconNode = <span className={cls(dotCls, { [`${dotCls}-custom`]: icon })}>{icon}</span>;
-      iconNode = icon;
-    } else if (icon) {
-      iconNode = icon;
+    if (isDot || icon) {
+      iconContent = icon;
     } else {
       switch (status) {
         case 'finish':
-          iconNode = <CheckOutlined className={`${itemIconCls}-finish`} />;
+          iconContent = <CheckOutlined className={`${itemIconCls}-finish`} />;
           break;
         case 'error':
-          iconNode = <CloseOutlined className={`${itemIconCls}-error`} />;
+          iconContent = <CloseOutlined className={`${itemIconCls}-error`} />;
           break;
         default: {
           let numNode = <span className={`${itemIconCls}-number`}>{info.index + 1}</span>;
@@ -250,17 +253,20 @@ const Steps = (props: StepsProps) => {
             );
           }
 
-          iconNode = numNode;
+          iconContent = numNode;
         }
       }
     }
 
+    let iconNode: React.ReactNode = <StepIcon>{iconContent}</StepIcon>;
+
     // Custom Render Props
     if (iconRender) {
       iconNode = iconRender(iconNode, {
         index,
         active,
         item,
+        components: { Icon: StepIcon },
       });
     } else if (typeof legacyProgressDotRender === 'function') {
       iconNode = legacyProgressDotRender(iconNode, {

components/steps/style/inline.ts

@@ -28,8 +28,7 @@ const genInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
 
         // Icon
         '--steps-icon-size': inlineDotSize,
-        '--ant-steps-dot-size': inlineDotSize,
-        '--ant-steps-dot-current-size': inlineDotSize,
+        '--steps-icon-size-active': inlineDotSize,
 
         // Title
         '--steps-title-font-size': token.fontSizeSM,

components/timeline/Timeline.tsx

@@ -3,7 +3,7 @@ import { UnstableContext } from '@rc-component/steps';
 import cls from 'classnames';
 
 import useMergeSemantic from '../_util/hooks/useMergeSemantic';
-import { GetProps, LiteralUnion } from '../_util/type';
+import type { GetProp, GetProps, LiteralUnion } from '../_util/type';
 import { devUseWarning } from '../_util/warning';
 import { useComponentConfig } from '../config-provider/context';
 import Steps from '../steps';
@@ -21,8 +21,10 @@ type Color = 'blue' | 'red' | 'green' | 'gray';
 export interface TimelineItemType {
   // Style
   color?: LiteralUnion<Color>;
-  style?: React.CSSProperties;
   className?: string;
+  style?: React.CSSProperties;
+  classNames?: GetProp<StepsProps, 'items'>[number]['classNames'];
+  styles?: GetProp<StepsProps, 'items'>[number]['styles'];
 
   // Design
   position?: ItemPosition;

components/timeline/demo/semantic.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+通过语义化结构，可以实现更丰富的定制样式。
+
+## en-US
+
+Achieve richer custom styles by using semantic structure.

components/timeline/demo/semantic.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Timeline } from 'antd';
+
+const App: React.FC = () => (
+  <Timeline
+    items={[
+      {
+        content: 'Create a services site 2015-09-01',
+      },
+      {
+        content: 'Solve initial network problems 2015-09-01',
+        styles: {
+          root: {
+            height: 100,
+          },
+          rail: {
+            borderStyle: 'dashed',
+          },
+        },
+      },
+      {
+        content: '...for a long time...',
+        styles: {
+          root: {
+            height: 100,
+          },
+          rail: {
+            borderStyle: 'dashed',
+          },
+          content: {
+            opacity: 0.45,
+          },
+        },
+      },
+      {
+        content: 'Technical testing 2015-09-01',
+      },
+
+      {
+        content: 'Network problems being solved 2015-09-01',
+      },
+    ]}
+  />
+);
+
+export default App;

components/timeline/index.en-US.md

@@ -25,6 +25,7 @@ demo:
 <code src="./demo/custom.tsx">Custom</code>
 <code src="./demo/end.tsx">End alternate</code>
 <code src="./demo/label.tsx">Label</code>
+<code src="./demo/semantic.tsx">Semantic Sample</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
@@ -37,8 +38,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | items | Each node of timeline | [Items](#Items)[] | - |  |
 | mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `start` \| `alternate` \| `end` | `start` |  |
-| ~~pending~~ | Set the last ghost node's existence or its content | ReactNode | false |  |
-| ~~pendingDot~~ | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /&gt; |  |
+| ~~pending~~ | Set the last ghost node's existence or its content. Use `item.loading` instead | ReactNode | false |  |
+| ~~pendingDot~~ | Set the dot of the last ghost node when pending is true. Use `item.icon` instead | ReactNode | &lt;LoadingOutlined /&gt; |  |
 | reverse | Whether reverse nodes or not | boolean | false |  |
 | variant | Config style variant | `filled` \| `outlined` | `outlined` |  |
 
@@ -49,10 +50,10 @@ Node of timeline.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |
+| ~~dot~~ | Customize timeline dot. Use `icon` instead | ReactNode | - |
 | icon | Customize node icon | ReactNode | - |
-| ~~dot~~ | Customize timeline dot | ReactNode | - |
-| ~~label~~ | Set the label | ReactNode | - |
-| ~~children~~ | Set the content | ReactNode | - |
+| ~~label~~ | Set the label. Use `title` instead | ReactNode | - |
+| ~~children~~ | Set the content. Use `content` instead | ReactNode | - |
 | loading | Set loading state | boolean | false |
 | title | Set the title | ReactNode | - |
 | content | Set the content | ReactNode | - |

components/timeline/index.zh-CN.md

@@ -25,6 +25,7 @@ demo:
 <code src="./demo/custom.tsx">自定义时间轴点</code>
 <code src="./demo/end.tsx">另一侧时间轴点</code>
 <code src="./demo/label.tsx">标签</code>
+<code src="./demo/semantic.tsx">语义化自定义</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
@@ -37,8 +38,8 @@ demo:
 | --- | --- | --- | --- | --- |
 | items | 选项配置 | [Items](#Items)[] | - |  |
 | mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `start` \| `alternate` \| `end` | `start` |  |
-| ~~pending~~ | 指定最后一个幽灵节点是否存在或内容 | ReactNode | false |  |
-| ~~pendingDot~~ | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /&gt; |  |
+| ~~pending~~ | 指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替 | ReactNode | false |  |
+| ~~pendingDot~~ | 当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替 | ReactNode | &lt;LoadingOutlined /&gt; |  |
 | reverse | 节点排序 | boolean | false |  |
 | variant | 设置样式变体 | `filled` \| `outlined` | `outlined` |  |
 
@@ -49,10 +50,10 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | color | 指定圆圈颜色 `blue`、`red`、`green`、`gray`，或自定义的色值 | string | `blue` |
-| ~~dot~~ | 自定义时间轴点 | ReactNode | - |
+| ~~dot~~ | 自定义时间轴点，请用 `icon` 代替 | ReactNode | - |
 | icon | 自定义节点图标 | ReactNode | - |
-| ~~label~~ | 设置标签 | ReactNode | - |
-| ~~children~~ | 设置内容 | ReactNode | - |
+| ~~label~~ | 设置标签，请用 `title` 代替 | ReactNode | - |
+| ~~children~~ | 设置内容，请用 `content` 代替 | ReactNode | - |
 | loading | 设置加载状态 | boolean | false |
 | title | 设置标题 | ReactNode | - |
 | content | 设置内容 | ReactNode | - |

package.json

@@ -135,7 +135,7 @@
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/segmented": "~1.1.0",
     "@rc-component/select": "~1.0.3",
-    "@rc-component/steps": "~1.2.0-alpha.1",
+    "@rc-component/steps": "~1.2.0-alpha.4",
     "@rc-component/switch": "~1.0.0",
     "@rc-component/table": "~1.3.0",
     "@rc-component/tabs": "~1.5.0",