fix(design): Segmented style with icon (#1300)

Author: dengfuping

packages/design/src/segmented/__tests__/__snapshots__/index.test.tsx.snap

@@ -152,7 +152,6 @@ exports[`Segmented > render options with ellipsis 1`] = `
       >
         <div
           class="ant-flex ant-flex-align-center ant-flex-justify-center"
-          style="gap: 4px;"
         >
           <span
             aria-describedby="test-id"

packages/design/src/segmented/demo/ellipsis.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Segmented } from '@oceanbase/design';
+import { BarsOutlined } from '@oceanbase/icons';
 
 export default () => {
   return (
@@ -12,14 +13,13 @@ export default () => {
           value: 'longtext1',
           label:
             'longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext',
-          ellipsis: {
-            tooltip: true,
-          },
+          icon: <BarsOutlined />,
         },
         {
           value: 'longtext2',
           label:
             'longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext-longtext',
+          // custom ellipsis
           ellipsis: {
             tooltip: {
               title: 'custom tooltip title',

packages/design/src/segmented/demo/icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Segmented } from '@oceanbase/design';
+import { AppstoreOutlined, BarsOutlined } from '@oceanbase/icons';
+
+const Demo: React.FC = () => (
+  <Segmented
+    options={[
+      { label: 'List', value: 'List', icon: <BarsOutlined /> },
+      { label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },
+    ]}
+  />
+);
+
+export default Demo;

packages/design/src/segmented/index.md

@@ -11,14 +11,13 @@ nav:
 
 ## 代码演示
 
-### 基本使用
-
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="基本"></code>
+<code src="./demo/icon.tsx" title="带图标"></code>
 <code src="./demo/disabled.tsx" title="不可用"></code>
 <code src="./demo/size.tsx" title="三种大小"></code>
 <code src="./demo/block.tsx" title="block" description="block 属性使其撑满父元素宽度。"></code>
-<code src="./demo/ellipsis.tsx" title="省略" description="需要同时配置分段器的 block 和选项的 ellipsis 属性。"></code>
+<code src="./demo/ellipsis.tsx" title="省略" description="内容超长会自动省略，并展示 tooltip，仅开启 `block` 时生效。可通过 `ellipsis` 设置省略属性。"></code>
 <code src="./demo/badge.tsx" title="带徽标" description="展示徽标"></code>
 
 ## API

packages/design/src/segmented/index.tsx

@@ -17,6 +17,7 @@ export * from 'antd/es/segmented';
 type BadgeType = BadgeProps | BadgeProps['count'];
 
 export type SegmentedLabeledOption = AntSegmentedLabeledOption & {
+  icon?: React.ReactNode;
   ellipsis?: EllipsisConfig;
   badge?: BadgeType;
 };
@@ -44,16 +45,19 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     const newOptions = options?.map(item => {
       if (typeof item === 'object') {
-        const { label, badge, ...restItem } = item;
+        const {
+          label,
+          icon,
+          badge,
+          ellipsis = { tooltip: true },
+          ...restItem
+        } = item as SegmentedLabeledOption;
         return {
           ...restItem,
           label: (
-            <Flex gap={4} align="center" justify="center">
-              {(item as SegmentedLabeledOption)?.ellipsis ? (
-                <Typography.Text ellipsis={item.ellipsis}>{label}</Typography.Text>
-              ) : (
-                label
-              )}
+            <Flex align="center" justify="center">
+              {icon && <span className={`${prefixCls}-item-icon`}>{icon}</span>}
+              {ellipsis ? <Typography.Text ellipsis={ellipsis}>{label}</Typography.Text> : label}
               {badge && renderBadge(badge)}
             </Flex>
           ),

packages/design/src/segmented/style/index.ts

@@ -28,6 +28,7 @@ export const genSegmentedStyle: GenerateStyle<SegmentedToken> = (
       [`>${componentCls}-item`]: {
         [`>${componentCls}-item-label`]: {
           [`${antCls}-badge >${antCls}-badge-count`]: {
+            marginInlineStart: 4,
             backgroundColor: colorFillSecondary,
             color: 'inherit',
             boxShadow: 'none',