feat!: Tab should left aligned by default

alibaba · Feb 6, 2025 · 37eb9b2 · 37eb9b2
1 parent 5b307ad
commit 37eb9b2
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 244 deletions.
diff --git a/packages/bui-core/src/Tabs/Tab.less b/packages/bui-core/src/Tabs/Tab.less
@@ -22,11 +22,6 @@
     --bui-tabs-color: var(--bui-color-fg-default);
   }
 
-  &-center {
-    flex: 1 0 0;
-    margin: 0 auto;
-  }
-
   &-miniapp-active {
     line-height: 1.5;
     font-weight: var(--bui-font-weight-medium);

diff --git a/packages/bui-core/src/Tabs/Tab.tsx b/packages/bui-core/src/Tabs/Tab.tsx
@@ -16,14 +16,13 @@ const Tab = React.forwardRef<HTMLDivElement, TabProps>((props, ref) => {
     ...props,
   };
   const tabsContext = React.useContext(TabsContext);
-  const { value, align, triggerChange } = tabsContext;
+  const { value, triggerChange } = tabsContext;
 
   return (
     <div
       ref={ref}
       className={clsx(
         prefixCls,
-        align !== 'start' && `${prefixCls}-${align}`,
         {
           [`${prefixCls}-active`]: !isMini && index === value,
           [`${prefixCls}-miniapp-active`]: isMini && index === value,

diff --git a/packages/bui-core/src/Tabs/Tabs.tsx b/packages/bui-core/src/Tabs/Tabs.tsx
@@ -20,12 +20,11 @@ import './Tabs.less';
 
 const prefixCls = 'bui-tabs';
 const defaultProps = {
-  align: 'center',
   tabs: [],
 } satisfies Partial<TabsProps>;
 
 const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
-  const { children, className, value, tabs, align, onChange, ...others } = {
+  const { children, className, value, tabs, onChange, ...others } = {
     ...defaultProps,
     ...props,
   };
@@ -172,8 +171,8 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
   };
 
   const providerValue = useMemo(() => {
-    return { value, align, triggerChange: handleClick };
-  }, [value, align, children, handleClick]);
+    return { value, triggerChange: handleClick };
+  }, [value, children, handleClick]);
 
   return (
     <div ref={ref} className={clsx(prefixCls, className)} {...others}>

diff --git a/packages/bui-core/src/Tabs/Tabs.types.ts b/packages/bui-core/src/Tabs/Tabs.types.ts
@@ -39,10 +39,6 @@ export type TabsProps<
        * 切换面板的数据
        */
       tabs?: ITabItem[];
-      /**
-       * 对齐方式，默认为center
-       */
-      align?: ITabAlign;
       /**
        * 切换面板的回调
        */

diff --git a/packages/bui-core/src/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/bui-core/src/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -23,17 +23,17 @@ exports[`Tabs test with TabPanel should be actived by \`value\` property 1`] = `
         style="transform: translate3d(0px, 0px, 0px); transition: transform 0.3s ease-in-out;"
       />
       <div
-        class="bui-tab bui-tab-center"
+        class="bui-tab"
       >
         水果
       </div>
       <div
-        class="bui-tab bui-tab-center bui-tab-active"
+        class="bui-tab bui-tab-active"
       >
         蔬菜
       </div>
       <div
-        class="bui-tab bui-tab-center"
+        class="bui-tab"
       >
         动物
       </div>