fix(tabs): The tab was not fully displayed when scrollIntoView

DouyinFE · May 20, 2024 · c212858 · c212858
1 parent 08c76a5
commit c212858
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/semi-foundation/tabs/tabs.scss b/packages/semi-foundation/tabs/tabs.scss
@@ -264,7 +264,7 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
 
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
-            & > .#{$prefix}-button {
+            & > .#{$prefix}-button[area-disabled=true] {
                 color: $color-tabs_tab-pane_arrow-text-default;
                 padding: $spacing-tabs_tab-pane_arrow;
                 border: $width-tabs_tab-pane_arrow-border solid $color-tabs_tab-pane_arrow-border-default;

diff --git a/packages/semi-ui/tabs/TabBar.tsx b/packages/semi-ui/tabs/TabBar.tsx
@@ -144,13 +144,20 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
     };
 
     renderCollapse = (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end'): ReactNode => {
+        const arrowCls = cls({
+            [`${cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
+            [`${cssClasses.TABS_BAR}-arrow`]: true,
+        });
+
         if (isEmpty(items)) {
             return (
-                <Button
-                    disabled={true}
-                    icon={icon}
-                    theme="borderless"
-                />
+                <div role="presentation" className={arrowCls}>
+                    <Button
+                        disabled={true}
+                        icon={icon}
+                        theme="borderless"
+                    />
+                </div>
             );
         }
         const { dropdownClassName, dropdownStyle } = this.props;
@@ -175,11 +182,6 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
             </Dropdown.Menu>
         );
 
-        const arrowCls = cls({
-            [`${cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
-            [`${cssClasses.TABS_BAR}-arrow`]: true,
-        });
-
         const dropdownCls = cls(dropdownClassName, {
             [`${cssClasses.TABS_BAR}-dropdown`]: true,
         });