From 60d8e91bd26d64277150ae52dd70234636491122 Mon Sep 17 00:00:00 2001 From: JarvisArt <38420763+JarvisArt@users.noreply.github.com> Date: Tue, 8 Nov 2022 15:57:28 +0800 Subject: [PATCH] feat: Steps support inline (#38311) * test: update snapshot * docs: add inline demo * chore: upgrage rc-steps --- .../__snapshots__/demo-extend.test.ts.snap | 909 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 621 ++++++++++++ components/steps/demo/inline.md | 81 ++ components/steps/index.en-US.md | 13 +- components/steps/index.tsx | 18 +- components/steps/index.zh-CN.md | 13 +- components/steps/style/index.tsx | 13 + components/steps/style/inline.ts | 124 +++ package.json | 2 +- 9 files changed, 1787 insertions(+), 7 deletions(-) create mode 100644 components/steps/demo/inline.md create mode 100644 components/steps/style/inline.ts diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap index 73345d4236..50939220bd 100644 --- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1001,6 +1001,915 @@ exports[`renders ./components/steps/demo/icon.md extend context correctly 1`] = `; +exports[`renders ./components/steps/demo/inline.md extend context correctly 1`] = ` +
+
+
+
+
    +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 1 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 2 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 3 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 4 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +
    • +
+
+
+
+
+`; + exports[`renders ./components/steps/demo/label-placement.md extend context correctly 1`] = ` Array [
`; +exports[`renders ./components/steps/demo/inline.md correctly 1`] = ` +
+
+
+
+
    +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 1 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 2 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 3 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    • +
  • +
    +
    + + + +
    +
    +

    + + Ant Design Title 4 + +

    +
    + Ant Design, a design language for background applications, is refined by Ant UED Team +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 1 +
    +
    + This is a Step 1. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 2 +
    +
    + This is a Step 2. +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    + Step 3 +
    +
    + This is a Step 3. +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+`; + exports[`renders ./components/steps/demo/label-placement.md correctly 1`] = ` Array [
( +
+ ( + + } + title={{item.title}} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> + + + )} + /> +
+); + +export default App; +``` diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index 8a89614846..0f035650bd 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -50,10 +50,21 @@ The whole of the step bar. | responsive | Change to vertical direction when screen width smaller than `532px` | boolean | true | | | size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | -| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | | +| type | Type of steps, can be set to one of the following values: `default` `navigation` `inline` | string | `default` | inline: 5.0 | | onChange | Trigger when Step is changed | (current) => void | - | | | items | StepItem content | [StepItem](#StepItem) | [] | 4.24.0 | +### `type="inline"` + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| className | Additional class to Steps | string | - | | +| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | +| initial | Set the initial step, counting from 0 | number | 0 | | +| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | +| onChange | Trigger when Step is changed | (current) => void | - | | +| items | StepItem content. not supported: `icon` `subtitle` | [StepItem](#StepItem) | [] | 4.24.0 | + ### StepItem A single step in the step bar. diff --git a/components/steps/index.tsx b/components/steps/index.tsx index ce108d75a1..e9ecc66482 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import RcSteps from 'rc-steps'; import type { ProgressDotRender } from 'rc-steps/lib/Steps'; import * as React from 'react'; +import Tooltip from '../tooltip'; import { ConfigContext } from '../config-provider'; import useBreakpoint from '../grid/hooks/useBreakpoint'; import Progress from '../progress'; @@ -23,7 +24,7 @@ export interface StepProps { } export interface StepsProps { - type?: 'default' | 'navigation'; + type?: 'default' | 'navigation' | 'inline'; className?: string; current?: number; direction?: 'horizontal' | 'vertical'; @@ -70,13 +71,15 @@ const Steps: StepsType = props => { const [wrapSSR, hashId] = useStyle(prefixCls); + const isInline = props.type === 'inline'; const iconPrefix = getPrefixCls('', props.iconPrefix); const mergedItems = useLegacyItems(items, children); + const mergedPercent = isInline ? undefined : percent; const stepsClassName = classNames( { [`${prefixCls}-rtl`]: rtlDirection === 'rtl', - [`${prefixCls}-with-progress`]: percent !== undefined, + [`${prefixCls}-with-progress`]: mergedPercent !== undefined, }, className, hashId, @@ -96,7 +99,7 @@ const Steps: StepsType = props => { title: string | React.ReactNode; description: string | React.ReactNode; }) => { - if (status === 'process' && percent !== undefined) { + if (status === 'process' && mergedPercent !== undefined) { // currently it's hard-coded, since we can't easily read the actually width of icon const progressWidth = size === 'small' ? 32 : 40; // iconWithProgress @@ -104,7 +107,7 @@ const Steps: StepsType = props => {
null} @@ -116,6 +119,12 @@ const Steps: StepsType = props => { return node; }; + let itemRender; + if (isInline) { + itemRender = (item: StepProps, stepItem: React.ReactNode) => + item.description ? {stepItem} : stepItem; + } + return wrapSSR( { current={current} size={size} items={mergedItems} + itemRender={itemRender} direction={getDirection()} stepIcon={stepIconRender} prefixCls={prefixCls} diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 9f7bfcf6de..e6b578cbf5 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -51,10 +51,21 @@ return ; | responsive | 当屏幕宽度小于 `532px` 时自动变为垂直模式 | boolean | true | | | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` | | | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | | -| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | | +| type | 步骤条类型，可选 `default` `navigation` `inline` | string | `default` | inline: 5.0 | | onChange | 点击切换步骤时触发 | (current) => void | - | | | items | 配置选项卡内容 | [StepItem](#StepItem) | [] | 4.24.0 | +### `type="inline"` + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 步骤条类名 | string | - | | +| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | | +| initial | 起始序号，从 0 开始记数 | number | 0 | | +| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | | +| onChange | 点击切换步骤时触发 | (current) => void | - | | +| items | 配置选项卡内容，不支持 `icon` `subtitle` | [StepItem](#StepItem) | [] | 4.24.0 | + ### StepItem 步骤条内的每一个步骤。 diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 98b7e40f9c..f9ac9b8e77 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -9,6 +9,7 @@ import genStepsProgressDotStyle from './progress-dot'; import genStepsRTLStyle from './rtl'; import genStepsSmallStyle from './small'; import genStepsVerticalStyle from './vertical'; +import genStepsInlineStyle from './inline'; import { resetComponent } from '../../style'; export interface ComponentToken { @@ -60,6 +61,10 @@ export interface StepsToken extends FullToken<'Steps'> { errorDotColor: string; stepsNavActiveColor: string; stepsProgressSize: number; + // Steps inline variable + inlineDotSize: number; + inlineTitleColor: string; + inlineTailColor: string; } enum StepItemStatusEnum { @@ -311,6 +316,8 @@ const genStepsStyle: GenerateStyle = token => { ...genStepsRTLStyle(token), // progress ...genStepsProgressStyle(token), + // inline + ...genStepsInlineStyle(token), }, }; }; @@ -331,10 +338,12 @@ export default genComponentStyleHook( colorPrimary, colorTextLabel, colorTextDescription, + colorTextQuaternary, colorFillContent, controlItemBgActive, colorError, colorBgContainer, + colorBorderSecondary, } = token; const stepsIconSize = token.controlHeight; @@ -385,6 +394,10 @@ export default genComponentStyleHook( errorDotColor: colorError, stepsNavActiveColor: colorPrimary, stepsProgressSize: controlHeightLG, + // Steps inline variable + inlineDotSize: 6, + inlineTitleColor: colorTextQuaternary, + inlineTailColor: colorBorderSecondary, }); return [genStepsStyle(stepsToken)]; diff --git a/components/steps/style/inline.ts b/components/steps/style/inline.ts new file mode 100644 index 0000000000..a481a22fb2 --- /dev/null +++ b/components/steps/style/inline.ts @@ -0,0 +1,124 @@ +import type { CSSObject } from '@ant-design/cssinjs'; +import type { StepsToken } from '.'; +import type { GenerateStyle } from '../../theme'; + +const genStepsInlineStyle: GenerateStyle = token => { + const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token; + const containerPaddingTop = token.paddingXS + token.lineWidth; + const titleStyle = { + [`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: { + color: inlineTitleColor, + }, + }; + + return { + [`&${componentCls}-inline`]: { + width: 'auto', + display: 'inline-flex', + + [`${componentCls}-item`]: { + flex: 'none', + + '&-container': { + padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`, + margin: `0 ${token.marginXXS / 2}px`, + borderRadius: token.borderRadiusSM, + cursor: 'pointer', + '&:hover': { + background: token.controlItemBgHover, + transition: `background-color ${token.motionDurationFast}`, + }, + [`&[role='button']:hover`]: { + opacity: 1, + }, + }, + + '&-icon': { + width: inlineDotSize, + height: inlineDotSize, + marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`, + [`> ${componentCls}-icon`]: { + top: 0, + }, + [`${componentCls}-icon-dot`]: { + borderRadius: token.fontSizeSM / 4, + }, + }, + + '&-content': { + width: 'auto', + marginTop: token.marginXS - token.lineWidth, + }, + '&-title': { + color: inlineTitleColor, + fontSize: token.fontSizeSM, + lineHeight: token.lineHeightSM, + fontWeight: 'normal', + marginBottom: token.marginXXS / 2, + }, + '&-description': { + display: 'none', + }, + + '&-tail': { + marginInlineStart: 0, + top: containerPaddingTop + inlineDotSize / 2, + transform: `translateY(-50%)`, + '&:after': { + width: '100%', + height: token.lineWidth, + borderRadius: 0, + marginInlineStart: 0, + background: inlineTailColor, + }, + }, + + [`&:first-child ${componentCls}-item-tail`]: { + width: '50%', + marginInlineStart: '50%', + }, + [`&:last-child ${componentCls}-item-tail`]: { + display: 'block', + width: '50%', + }, + + '&-wait': { + [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: { + backgroundColor: token.colorBorderBg, + border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`, + }, + ...titleStyle, + }, + '&-finish': { + [`${componentCls}-item-tail::after`]: { + backgroundColor: inlineTailColor, + }, + [`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: { + backgroundColor: inlineTailColor, + border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`, + }, + ...titleStyle, + }, + '&-error': titleStyle, + '&-active, &-process': { + [`${componentCls}-item-icon`]: { + width: inlineDotSize, + height: inlineDotSize, + marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`, + top: 0, + }, + ...titleStyle, + }, + + [`&:not(${componentCls}-item-active) > ${componentCls}-item-container[role='button']:hover`]: + { + [`${componentCls}-item-title`]: { + color: inlineTitleColor, + }, + }, + }, + }, + }; +}; + +export default genStepsInlineStyle; diff --git a/package.json b/package.json index 9bd2a5cfe8..142c52df26 100644 --- a/package.json +++ b/package.json @@ -142,7 +142,7 @@ "rc-segmented": "~2.1.0", "rc-select": "~14.1.13", "rc-slider": "~10.0.0", - "rc-steps": "~5.0.0-alpha.2", + "rc-steps": "~6.0.0-alpha.2", "rc-switch": "~4.0.0", "rc-table": "~7.26.0", "rc-tabs": "~12.2.0",