Browse Source

ref(tabs): Add wrapper around overflow menu (#43446)

Add a wrapper around `TabList`'s overflow menu. The new wrapper will
have `position: absolute; right: 0;` instead of the trigger button. The
current approach, where the trigger button has `position: absolute;`, is
not safe since it assumes that `CompactSelect`'s wrapper has static
position.

There's no visual diff.
Vu Luong 2 years ago
parent
commit
a9a34e2f38
1 changed files with 23 additions and 19 deletions
  1. 23 19
      static/app/components/tabs/tabList.tsx

+ 23 - 19
static/app/components/tabs/tabList.tsx

@@ -183,24 +183,26 @@ function BaseTabList({
       </TabListWrap>
 
       {orientation === 'horizontal' && overflowMenuItems.length > 0 && (
-        <CompactSelect
-          options={overflowMenuItems}
-          value={[...state.selectionManager.selectedKeys][0]}
-          onChange={opt => state.setSelectedKey(opt.value)}
-          isDisabled={disabled}
-          position="bottom-end"
-          size="sm"
-          offset={4}
-          trigger={triggerProps => (
-            <OverflowMenuTrigger
-              {...triggerProps}
-              borderless
-              showChevron={false}
-              icon={<IconEllipsis />}
-              aria-label={t('More tabs')}
-            />
-          )}
-        />
+        <TabListOverflowWrap>
+          <CompactSelect
+            options={overflowMenuItems}
+            value={[...state.selectionManager.selectedKeys][0]}
+            onChange={opt => state.setSelectedKey(opt.value)}
+            isDisabled={disabled}
+            position="bottom-end"
+            size="sm"
+            offset={4}
+            trigger={triggerProps => (
+              <OverflowMenuTrigger
+                {...triggerProps}
+                borderless
+                showChevron={false}
+                icon={<IconEllipsis />}
+                aria-label={t('More tabs')}
+              />
+            )}
+          />
+        </TabListOverflowWrap>
       )}
     </TabListOuterWrap>
   );
@@ -272,10 +274,12 @@ const TabListWrap = styled('ul', {shouldForwardProp: tabsShouldForwardProp})<{
       `};
 `;
 
-const OverflowMenuTrigger = styled(DropdownButton)`
+const TabListOverflowWrap = styled('div')`
   position: absolute;
   right: 0;
   bottom: ${space(0.75)};
+`;
+const OverflowMenuTrigger = styled(DropdownButton)`
   padding-left: ${space(1)};
   padding-right: ${space(1)};
 `;