diff --git a/components/steps/style/icon.ts b/components/steps/style/icon.ts index 2cb27a6cc9..0c07478dde 100644 --- a/components/steps/style/icon.ts +++ b/components/steps/style/icon.ts @@ -27,7 +27,7 @@ const genIconStyle: GenerateStyle = (token) => { textAlign: 'center', borderRadius: 'var(--steps-icon-size)', border: `var(--steps-icon-border-width) ${token.lineType} transparent`, - transition: ['background', 'border', 'color'] + transition: ['background', 'border', 'color', 'inset', 'transform'] .map((key) => `${key} ${motionDurationSlow}`) .join(', '), zIndex: 1, diff --git a/components/steps/style/index.ts b/components/steps/style/index.ts index c3b05d1619..19b3e4f32f 100644 --- a/components/steps/style/index.ts +++ b/components/steps/style/index.ts @@ -138,6 +138,7 @@ const genBasicStyle: GenerateStyle = (token) => { color: token.colorText, fontSize: `var(--steps-title-font-size)`, lineHeight: `var(--steps-title-line-height)`, + wordBreak: 'break-word', }, // >>> Sub Title @@ -147,6 +148,7 @@ const genBasicStyle: GenerateStyle = (token) => { fontSize: `var(--steps-subtitle-font-size)`, lineHeight: `var(--steps-subtitle-line-height)`, marginInlineStart: token.marginXS, + wordBreak: 'break-word', }, // Content @@ -154,6 +156,7 @@ const genBasicStyle: GenerateStyle = (token) => { color: token.colorTextDescription, fontSize: token.fontSize, lineHeight: token.lineHeight, + wordBreak: 'break-word', }, // Rail diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts index 3996829cf9..761ab6f254 100644 --- a/components/steps/style/vertical.ts +++ b/components/steps/style/vertical.ts @@ -44,7 +44,7 @@ const genVerticalStyle: GenerateStyle = (token) => { .equal(), insetInlineStart: calc(`var(--steps-icon-size-max)`).div(2).equal(), bottom: calc('var(--steps-vertical-rail-margin)').sub('var(--steps-rail-offset)').equal(), - transform: 'translateX(-50%)', + marginInlineStart: `calc(var(--steps-rail-size) / -2)`, }, }, }, diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 6327f14ad1..70d9340432 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -63,6 +63,7 @@ export interface TimelineProps { variant?: StepsProps['variant']; mode?: TimelineMode; orientation?: 'horizontal' | 'vertical'; + titleSpan?: string | number; // Data items?: TimelineItemType[]; @@ -102,6 +103,7 @@ const Timeline: CompoundedComponent = (props) => { variant = 'outlined', mode, orientation = 'vertical', + titleSpan, // Data items, @@ -228,6 +230,19 @@ const Timeline: CompoundedComponent = (props) => { } // ==================== Render ====================== + const stepStyle: React.CSSProperties = { + ...contextStyle, + ...style, + }; + + if (titleSpan && mergedMode !== 'alternate') { + if (typeof titleSpan === 'number') { + stepStyle['--timeline-head-span'] = titleSpan; + } else { + stepStyle['--timeline-head-span-ptg'] = titleSpan; + } + } + return ( @@ -239,10 +254,7 @@ const Timeline: CompoundedComponent = (props) => { [`${prefixCls}-layout-alternate`]: layoutAlternate, [`${prefixCls}-rtl`]: direction === 'rtl', })} - style={{ - ...contextStyle, - ...style, - }} + style={stepStyle} classNames={mergedClassNames} styles={mergedStyles} // Design diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap index d584f958b9..f7ad806310 100644 --- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1452,210 +1452,6 @@ exports[`renders components/timeline/demo/horizontal-debug.tsx extend context co exports[`renders components/timeline/demo/horizontal-debug.tsx extend context correctly 2`] = `[]`; -exports[`renders components/timeline/demo/label.tsx extend context correctly 1`] = ` -Array [ -
- - - -
, -
    -
  1. -
    -
    -
    -
    -
    - 2015-09-01 -
    -
    -
    -
    - Create a services -
    -
    -
    -
    2. -
  2. -
    -
    -
    -
    -
    - 2015-09-01 09:12:11 -
    -
    -
    -
    - Solve initial network problems -
    -
    -
    -
    3. -
  3. -
    -
    -
    -
    -
    -
    -
    - Technical testing -
    -
    -
    -
    4. -
  4. -
    -
    -
    -
    -
    - 2015-09-01 09:12:11 -
    -
    -
    - Network problems being solved -
    -
    -
    -
    5. -
, -] -`; - -exports[`renders components/timeline/demo/label.tsx extend context correctly 2`] = `[]`; - exports[`renders components/timeline/demo/pending.tsx extend context correctly 1`] = `
+ + + +
, +
    +
  1. +
    +
    +
    +
    +
    + 2015-09-01 +
    +
    +
    +
    + Create a services +
    +
    +
    +
    2. +
  2. +
    +
    +
    +
    +
    + 2015-09-01 09:12:11 +
    +
    +
    +
    + Solve initial network problems +
    +
    +
    +
    3. +
  3. +
    +
    +
    +
    +
    +
    +
    + Technical testing +
    +
    +
    +
    4. +
  4. +
    +
    +
    +
    +
    + 2015-09-01 09:12:11 +
    +
    +
    + Network problems being solved +
    +
    +
    +
    5. +
, +] +`; + +exports[`renders components/timeline/demo/title.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/timeline/demo/title-span.tsx extend context correctly 1`] = ` +
+
+ titleSpan = 100px +
+
    +
  1. +
    +
    +
    +
    +
    + 05:10 +
    +
    +
    +
    + Create a services +
    +
    +
    +
    2. +
  2. +
    +
    +
    +
    +
    + 09:03 +
    +
    +
    +
    + Solve initial network problems +
    +
    +
    +
    3. +
  3. +
    +
    +
    +
    +
    +
    +
    + Technical testing +
    +
    +
    +
    4. +
  4. +
    +
    +
    +
    +
    + 11:28 +
    +
    +
    + Network problems being solved +
    +
    +
    +
    5. +
+
+ titleSpan = 25% +
+
    +
  1. +
    +
    +
    +
    +
    + 05:10 +
    +
    +
    +
    + Create a services +
    +
    +
    +
    2. +
  2. +
    +
    +
    +
    +
    + 09:03 +
    +
    +
    +
    + Solve initial network problems +
    +
    +
    +
    3. +
  3. +
    +
    +
    +
    +
    +
    +
    + Technical testing +
    +
    +
    +
    4. +
  4. +
    +
    +
    +
    +
    + 11:28 +
    +
    +
    + Network problems being solved +
    +
    +
    +
    5. +
+
+ titleSpan = 18, mode = end +
+
    +
  1. +
    +
    +
    +
    +
    + 05:10 +
    +
    +
    +
    + Create a services +
    +
    +
    +
    2. +
  2. +
    +
    +
    +
    +
    + 09:03 +
    +
    +
    +
    + Solve initial network problems +
    +
    +
    +
    3. +
  3. +
    +
    +
    +
    +
    +
    +
    + Technical testing +
    +
    +
    +
    4. +
  4. +
    +
    +
    +
    +
    + 11:28 +
    +
    +
    + Network problems being solved +
    +
    +
    +
    5. +
+
+`; + +exports[`renders components/timeline/demo/title-span.tsx extend context correctly 2`] = `[]`; + exports[`renders components/timeline/demo/variant.tsx extend context correctly 1`] = `
    `; -exports[`renders components/timeline/demo/label.tsx correctly 1`] = ` -Array [ -
    - - - -
    , -
      -
    1. -
      -
      -
      -
      -
      - 2015-09-01 -
      -
      -
      -
      - Create a services -
      -
      -
      -
      2. -
    2. -
      -
      -
      -
      -
      - 2015-09-01 09:12:11 -
      -
      -
      -
      - Solve initial network problems -
      -
      -
      -
      3. -
    3. -
      -
      -
      -
      -
      -
      -
      - Technical testing -
      -
      -
      -
      4. -
    4. -
      -
      -
      -
      -
      - 2015-09-01 09:12:11 -
      -
      -
      - Network problems being solved -
      -
      -
      -
      5. -
    , -] -`; - exports[`renders components/timeline/demo/pending.tsx correctly 1`] = `
    `; +exports[`renders components/timeline/demo/title.tsx correctly 1`] = ` +Array [ +
    + + + +
    , +
      +
    1. +
      +
      +
      +
      +
      + 2015-09-01 +
      +
      +
      +
      + Create a services +
      +
      +
      +
      2. +
    2. +
      +
      +
      +
      +
      + 2015-09-01 09:12:11 +
      +
      +
      +
      + Solve initial network problems +
      +
      +
      +
      3. +
    3. +
      +
      +
      +
      +
      +
      +
      + Technical testing +
      +
      +
      +
      4. +
    4. +
      +
      +
      +
      +
      + 2015-09-01 09:12:11 +
      +
      +
      + Network problems being solved +
      +
      +
      +
      5. +
    , +] +`; + +exports[`renders components/timeline/demo/title-span.tsx correctly 1`] = ` +
    +
    + titleSpan = 100px +
    +
      +
    1. +
      +
      +
      +
      +
      + 05:10 +
      +
      +
      +
      + Create a services +
      +
      +
      +
      2. +
    2. +
      +
      +
      +
      +
      + 09:03 +
      +
      +
      +
      + Solve initial network problems +
      +
      +
      +
      3. +
    3. +
      +
      +
      +
      +
      +
      +
      + Technical testing +
      +
      +
      +
      4. +
    4. +
      +
      +
      +
      +
      + 11:28 +
      +
      +
      + Network problems being solved +
      +
      +
      +
      5. +
    +
    + titleSpan = 25% +
    +
      +
    1. +
      +
      +
      +
      +
      + 05:10 +
      +
      +
      +
      + Create a services +
      +
      +
      +
      2. +
    2. +
      +
      +
      +
      +
      + 09:03 +
      +
      +
      +
      + Solve initial network problems +
      +
      +
      +
      3. +
    3. +
      +
      +
      +
      +
      +
      +
      + Technical testing +
      +
      +
      +
      4. +
    4. +
      +
      +
      +
      +
      + 11:28 +
      +
      +
      + Network problems being solved +
      +
      +
      +
      5. +
    +
    + titleSpan = 18, mode = end +
    +
      +
    1. +
      +
      +
      +
      +
      + 05:10 +
      +
      +
      +
      + Create a services +
      +
      +
      +
      2. +
    2. +
      +
      +
      +
      +
      + 09:03 +
      +
      +
      +
      + Solve initial network problems +
      +
      +
      +
      3. +
    3. +
      +
      +
      +
      +
      +
      +
      + Technical testing +
      +
      +
      +
      4. +
    4. +
      +
      +
      +
      +
      + 11:28 +
      +
      +
      + Network problems being solved +
      +
      +
      +
      5. +
    +
    +`; + exports[`renders components/timeline/demo/variant.tsx correctly 1`] = `
      { + const sharedProps = { + items: [ + { + title: '05:10', + content: 'Create a services', + }, + { + title: '09:03', + content: 'Solve initial network problems', + }, + { + content: 'Technical testing', + }, + { + title: '11:28', + content: 'Network problems being solved', + }, + ], + }; + + return ( + + + titleSpan = 100px + + + + + titleSpan = 25% + + + + + titleSpan = 18, mode = end + + + + ); +}; + +export default App; diff --git a/components/timeline/demo/title.md b/components/timeline/demo/title.md new file mode 100644 index 0000000000..b389bcf228 --- /dev/null +++ b/components/timeline/demo/title.md @@ -0,0 +1,7 @@ +## zh-CN + +使用 `title` 标签单独展示时间。 + +## en-US + +Use `title` show time alone. diff --git a/components/timeline/demo/label.tsx b/components/timeline/demo/title.tsx similarity index 100% rename from components/timeline/demo/label.tsx rename to components/timeline/demo/title.tsx diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md index 6b3447c4a7..9b9ab9d7e2 100644 --- a/components/timeline/index.en-US.md +++ b/components/timeline/index.en-US.md @@ -26,7 +26,8 @@ demo: Horizontal Custom End alternate -Label +Title +Title Offset Semantic Sample Component Token @@ -44,6 +45,7 @@ Common props ref：[Common props](/docs/react/common-props) | ~~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 | <LoadingOutlined /> | | | reverse | Whether reverse nodes or not | boolean | false | | +| titleSpan | Set the title span space. It is the distance to the center of the dot | number \| string | 12 | | | variant | Config style variant | `filled` \| `outlined` | `outlined` | | ### Items diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index fe03894234..7d6e65e797 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -27,7 +27,8 @@ demo: 水平布局 自定义时间轴点 另一侧时间轴点 -标签 +标题 +标题占比 语义化自定义 组件 Token @@ -45,6 +46,7 @@ demo: | ~~pending~~ | 指定最后一个幽灵节点是否存在或内容，请使用 `item.loading` 代替 | ReactNode | false | | | ~~pendingDot~~ | 当最后一个幽灵节点存在時，指定其时间图点，请使用 `item.icon` 代替 | ReactNode | <LoadingOutlined /> | | | reverse | 节点排序 | boolean | false | | +| titleSpan | 设置标题占比空间，为到 dot 中心点距离 | number \| string | 12 | | | variant | 设置样式变体 | `filled` \| `outlined` | `outlined` | | ### Items diff --git a/components/timeline/style/horizontal.ts b/components/timeline/style/horizontal.ts index 4ded9df638..0042d756e5 100644 --- a/components/timeline/style/horizontal.ts +++ b/components/timeline/style/horizontal.ts @@ -97,8 +97,6 @@ const genHorizontalStyle: GenerateStyle = (token) => { flexDirection: 'column-reverse', }, - [`${itemCls}-section`]: {}, - [`${itemCls}-rail`]: { top: 'auto', bottom: 'var(--steps-horizontal-rail-margin)', diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index 80cc6a0e7f..c623c05472 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -135,49 +135,52 @@ const genVerticalStyle: GenerateStyle = (token) => { return { [`${componentCls}:not(${componentCls}-horizontal)`]: { + '--timeline-head-span': '12', + '--timeline-head-span-ptg': 'calc(var(--timeline-head-span) / 24 * 100%)', + // ============================================================= // == Alternate == // ============================================================= [`&${componentCls}-layout-alternate`]: { [itemCls]: { + '--timeline-alternate-gap': calc(token.margin) + .mul(2) + .add('var(--steps-dot-icon-size)') + .equal(), + minHeight: 'auto', paddingBottom: itemPaddingBottom, - // Icon - [`${itemCls}-icon`]: { - position: 'absolute', - }, - // Icon & Rail [`${itemCls}-icon, ${itemCls}-rail`]: { position: 'absolute', - left: { - _skip_check_: true, - value: '50%', - }, - transform: 'translateX(-50%)', + insetInlineStart: 'var(--timeline-head-span-ptg)', + }, + + // Icon + [`${itemCls}-icon`]: { + marginInlineStart: `calc(var(--steps-icon-size) / -2)`, }, // Section [`${itemCls}-section`]: { display: 'flex', flexWrap: 'nowrap', - gap: calc(token.margin).mul(2).add('var(--steps-dot-icon-size)').equal(), - }, - - // >>> Header & Content - [`${itemCls}-header, ${itemCls}-content`]: { - flex: '1 1 50%', + gap: 'var(--timeline-alternate-gap)', }, + // >>> Header [`${itemCls}-header`]: { textAlign: 'end', flexDirection: 'column', alignItems: 'stretch', + flex: '1 1 calc(var(--timeline-head-span-ptg) - var(--timeline-alternate-gap) / 2)', }, + // >>> Content [`${itemCls}-content`]: { textAlign: 'start', + flex: '1 1 calc(100% - var(--timeline-head-span-ptg) - var(--timeline-alternate-gap) / 2)', }, // Position @@ -190,6 +193,10 @@ const genVerticalStyle: GenerateStyle = (token) => { [`${itemCls}-content`]: { textAlign: 'end', }, + + [`${itemCls}-icon, ${itemCls}-rail`]: { + insetInlineStart: 'calc(100% - var(--timeline-head-span-ptg))', + }, }, }, }, @@ -208,7 +215,7 @@ const genVerticalStyle: GenerateStyle = (token) => { [`${itemCls}-rail`]: { insetInlineStart: 'auto', insetInlineEnd: 'calc(var(--steps-icon-size) / 2)', - transform: 'translateX(50%)', + marginInlineEnd: `calc(var(--steps-rail-size) / -2)`, }, }, },