improve(design): Customize Tabs horizontalItemGutter and horizontalIt…

…emPadding token
oceanbase · Jan 14, 2025 · 5b46672 · 5b46672
1 parent 5532c59
commit 5b46672
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 18 deletions.
diff --git a/packages/design/src/tabs/index.tsx b/packages/design/src/tabs/index.tsx
@@ -83,7 +83,6 @@ const Tabs = ({
       items={newItems as AntTabsProps['items']}
       type={type}
       tabPosition={tabPosition}
-      tabBarGutter={!type || type === 'line' ? (isHorizontal ? 24 : 0) : undefined}
       prefixCls={customizePrefixCls}
       className={tabsCls}
       {...restProps}

diff --git a/packages/design/src/tabs/style/index.ts b/packages/design/src/tabs/style/index.ts
@@ -54,22 +54,6 @@ export const genTagStyle: GenerateStyle<TabsToken | CardToken> = (
         borderRadius: '1px',
       },
     },
-    [`${componentCls}:not(${componentCls}-card)`]: {
-      [`&${componentCls}-top, &${componentCls}-bottom`]: {
-        [`${componentCls}-nav`]: {
-          [`${componentCls}-tab`]: {
-            padding: `${token.paddingXS}px 0px`,
-          },
-        },
-        [`&${componentCls}-small`]: {
-          [`${componentCls}-nav`]: {
-            [`${componentCls}-tab`]: {
-              padding: `${token.paddingXS - token.lineWidth * 2}px 0px`,
-            },
-          },
-        },
-      },
-    },
   };
 };
 

diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -118,6 +118,12 @@ const defaultTheme: ThemeConfig = {
       handleActiveColor: '#5189fb',
       handleColorDisabled: '#b3ccff',
     },
+    Tabs: {
+      horizontalItemGutter: 24,
+      horizontalItemPadding: '8px 0',
+      horizontalItemPaddingLG: '8px 0',
+      horizontalItemPaddingSM: '6px 0',
+    },
     Tag: {
       defaultColor: '#5c6b8a',
       colorBorder: tagColorBorder,

diff --git a/packages/ui/src/DateRanger/demo/simple-mode.tsx b/packages/ui/src/DateRanger/demo/simple-mode.tsx
@@ -2,5 +2,5 @@ import React from 'react';
 import { DateRanger } from '@oceanbase/ui';
 
 export default () => {
-  return <DateRanger simpleMode allowClear />;
+  return <DateRanger simpleMode />;
 };