[RFC]Bubble.System & Bubble.Divider

[anxLiang]

Summary

Bubble 组件扩充两个子组件

Motivation

提升 Bubble 的易用性，更丰富的变种让用户开箱即用，尤其是在 List 场景下省去自定义组件的开销。

Detailed Design

interface SystemBubbleProps
  extends Pick<
    BubbleProps,
    | 'prefixCls'
    | 'content'
    | 'style'
    | 'className'
    | 'styles'
    | 'classNames'
    | 'rootClassName'
    | 'variant'
    | 'shape'
  > {}

interface DividerBubbleProps<ContentType extends BubbleContentType = string> {
  prefixCls?: string;
  content?: ContentType;
  dividerProps?: Omit<DividerProps, 'children'>;
}

Example Usage

<Bubble content="message 1" />
<Bubble.Divider content="Solid" />
<Bubble content="message 2" placement="end" />
<Bubble.Divider content="Dashed" dividerProps={{ variant: 'dashed' }} />
<Bubble content="message 3" />
<Bubble.Divider content="Dotted" dividerProps={{ variant: 'dotted' }} />
<Bubble content="message 4" placement="end" />
<Bubble.Divider content="Plain Text" dividerProps={{ plain: true }} />
<Bubble content="message 5" />

<Bubble.System content={text} />
<Bubble.System
  variant="outlined"
  shape="round"
  content={
    <Space>
      {text}
      <Typography.Link>ok</Typography.Link>
    </Space>
  }
/>
<Bubble.System
  variant="borderless"
  content={
    <Space>
      {text}
      <Typography.Link>cancel</Typography.Link>
    </Space>
  }
/>

...

Hints

...

[kimteayon]

👍