From 66ad96a33422a2774b6ecdf1efb505bcac9ee0f6 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 09:25:53 -0700
Subject: [PATCH 1/9] Add prop to tab for new tab styles

---
 static/app/components/tabs/tab.tsx     | 210 +++++++++++++++++++------
 static/app/components/tabs/tabList.tsx |  52 +++---
 2 files changed, 189 insertions(+), 73 deletions(-)

diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index 9f5cd4bfdf1c7b..894d0492727340 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -3,9 +3,14 @@ import type {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {AriaTabProps} from '@react-aria/tabs';
 import {useTab} from '@react-aria/tabs';
-import {useObjectRef} from '@react-aria/utils';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
 import type {TabListState} from '@react-stately/tabs';
-import type {Node, Orientation} from '@react-types/shared';
+import type {
+  DOMAttributes,
+  FocusableElement,
+  Node,
+  Orientation,
+} from '@react-types/shared';
 
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import Link from 'sentry/components/links/link';
@@ -37,64 +42,165 @@ function handleLinkClick(e: React.PointerEvent<HTMLAnchorElement>) {
   }
 }
 
+interface BaseTabProps {
+  children: React.ReactNode;
+  hidden: boolean;
+  isSelected: boolean;
+  orientation: Orientation;
+  overflowing: boolean;
+  tabProps: DOMAttributes<FocusableElement>;
+  /**
+   * Additional props to be merged with `tabProps`. This is used
+   * by <DraggableTab> to pass in props used for drag-and-drop functionality.
+   */
+  additionalProps?: React.HTMLAttributes<HTMLElement>;
+  borderStyle?: 'solid' | 'dashed';
+  to?: string;
+  variant?: 'vanilla' | 'draggable';
+}
+
+export const BaseTab = forwardRef(
+  (props: BaseTabProps, forwardedRef: React.ForwardedRef<HTMLLIElement>) => {
+    const {
+      to,
+      orientation,
+      overflowing,
+      tabProps,
+      hidden,
+      isSelected,
+      additionalProps,
+      variant = 'vanilla',
+      borderStyle = 'solid',
+    } = props;
+
+    const ref = useObjectRef(forwardedRef);
+    const InnerWrap = useCallback(
+      ({children}) =>
+        to ? (
+          <TabLink
+            to={to}
+            onMouseDown={handleLinkClick}
+            onPointerDown={handleLinkClick}
+            orientation={orientation}
+            tabIndex={-1}
+          >
+            {children}
+          </TabLink>
+        ) : (
+          <TabInnerWrap orientation={orientation}>{children}</TabInnerWrap>
+        ),
+      [to, orientation]
+    );
+    if (variant === 'draggable') {
+      return (
+        <DraggableTabWrap
+          {...mergeProps(tabProps, additionalProps)}
+          hidden={hidden}
+          overflowing={overflowing}
+          borderStyle={borderStyle}
+          ref={ref}
+        >
+          {props.children}
+        </DraggableTabWrap>
+      );
+    }
+
+    return (
+      <TabWrap
+        {...mergeProps(tabProps, additionalProps)}
+        hidden={hidden}
+        selected={isSelected}
+        overflowing={overflowing}
+        ref={ref}
+      >
+        <InnerWrap>
+          <StyledInteractionStateLayer
+            orientation={orientation}
+            higherOpacity={isSelected}
+          />
+          <FocusLayer orientation={orientation} />
+          {props.children}
+          <TabSelectionIndicator orientation={orientation} selected={isSelected} />
+        </InnerWrap>
+      </TabWrap>
+    );
+  }
+);
+
 /**
  * Renders a single tab item. This should not be imported directly into any
  * page/view – it's only meant to be used by <TabsList />. See the correct
  * usage in tabs.stories.js
  */
-function BaseTab(
-  {item, state, orientation, overflowing}: TabProps,
-  forwardedRef: React.ForwardedRef<HTMLLIElement>
-) {
-  const ref = useObjectRef(forwardedRef);
-
-  const {
-    key,
-    rendered,
-    props: {to, hidden},
-  } = item;
-  const {tabProps, isSelected} = useTab({key, isDisabled: hidden}, state, ref);
-
-  const InnerWrap = useCallback(
-    ({children}) =>
-      to ? (
-        <TabLink
-          to={to}
-          onMouseDown={handleLinkClick}
-          onPointerDown={handleLinkClick}
-          orientation={orientation}
-          tabIndex={-1}
-        >
-          {children}
-        </TabLink>
-      ) : (
-        <TabInnerWrap orientation={orientation}>{children}</TabInnerWrap>
-      ),
-    [to, orientation]
-  );
+export const Tab = forwardRef(
+  (
+    {item, state, orientation, overflowing}: TabProps,
+    forwardedRef: React.ForwardedRef<HTMLLIElement>
+  ) => {
+    const ref = useObjectRef(forwardedRef);
 
-  return (
-    <TabWrap
-      {...tabProps}
-      hidden={hidden}
-      selected={isSelected}
-      overflowing={overflowing}
-      ref={ref}
-    >
-      <InnerWrap>
-        <StyledInteractionStateLayer
-          orientation={orientation}
-          higherOpacity={isSelected}
-        />
-        <FocusLayer orientation={orientation} />
+    const {
+      key,
+      rendered,
+      props: {to, hidden},
+    } = item;
+    const {tabProps, isSelected} = useTab({key, isDisabled: hidden}, state, ref);
+
+    return (
+      <BaseTab
+        tabProps={tabProps}
+        isSelected={isSelected}
+        to={to}
+        hidden={hidden}
+        orientation={orientation}
+        overflowing={overflowing}
+        ref={ref}
+      >
         {rendered}
-        <TabSelectionIndicator orientation={orientation} selected={isSelected} />
-      </InnerWrap>
-    </TabWrap>
-  );
-}
+      </BaseTab>
+    );
+  }
+);
+
+const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
+  borderStyle: 'dashed' | 'solid';
+  overflowing: boolean;
+}>`
+  &[aria-selected='true'] {
+    ${p =>
+      `
+        border-radius: 6px 6px 1px 1px;
+        border-top: 1px ${p.borderStyle} ${p.theme.border};
+        border-left: 1px ${p.borderStyle} ${p.theme.border};
+        border-right: 1px ${p.borderStyle} ${p.theme.border};
+        background-color: ${p.theme.white};
+        color: ${p.theme.fontWeightBold};
+        font-weight: 600;
+      `}
+  }
+
+  &[aria-selected='false'] {
+    border-top: 1px solid transparent;
+  }
+
+  transform: translateY(1px);
+  padding: 5px 10px;
+
+  opacity: 0px;
+
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
 
-export const Tab = forwardRef(BaseTab);
+  ${p =>
+    p.overflowing &&
+    `
+      opacity: 0;
+      pointer-events: none;
+    `}
+`;
 
 const TabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
   overflowing: boolean;
diff --git a/static/app/components/tabs/tabList.tsx b/static/app/components/tabs/tabList.tsx
index 253a32ccf53577..698648b34e8fc0 100644
--- a/static/app/components/tabs/tabList.tsx
+++ b/static/app/components/tabs/tabList.tsx
@@ -85,6 +85,32 @@ function useOverflowTabs({
   return overflowTabs.filter(tabKey => !tabItemKeyToHiddenMap[tabKey]);
 }
 
+export function OverflowMenu({state, overflowMenuItems, disabled}) {
+  return (
+    <TabListOverflowWrap>
+      <CompactSelect
+        options={overflowMenuItems}
+        value={[...state.selectionManager.selectedKeys][0]}
+        onChange={opt => state.setSelectedKey(opt.value)}
+        disabled={disabled}
+        position="bottom-end"
+        size="sm"
+        offset={4}
+        trigger={triggerProps => (
+          <OverflowMenuTrigger
+            {...triggerProps}
+            size="sm"
+            borderless
+            showChevron={false}
+            icon={<IconEllipsis />}
+            aria-label={t('More tabs')}
+          />
+        )}
+      />
+    </TabListOverflowWrap>
+  );
+}
+
 export interface TabListProps
   extends AriaTabListOptions<TabListItemProps>,
     TabListStateOptions<TabListItemProps> {
@@ -195,27 +221,11 @@ function BaseTabList({
       </TabListWrap>
 
       {orientation === 'horizontal' && overflowMenuItems.length > 0 && (
-        <TabListOverflowWrap>
-          <CompactSelect
-            options={overflowMenuItems}
-            value={[...state.selectionManager.selectedKeys][0]}
-            onChange={opt => state.setSelectedKey(opt.value)}
-            disabled={disabled}
-            position="bottom-end"
-            size="sm"
-            offset={4}
-            trigger={triggerProps => (
-              <OverflowMenuTrigger
-                {...triggerProps}
-                size="sm"
-                borderless
-                showChevron={false}
-                icon={<IconEllipsis />}
-                aria-label={t('More tabs')}
-              />
-            )}
-          />
-        </TabListOverflowWrap>
+        <OverflowMenu
+          state={state}
+          overflowMenuItems={overflowMenuItems}
+          disabled={disabled}
+        />
       )}
     </TabListOuterWrap>
   );

From 5ac2ab8177877730d7f13741458dfb91b62c6352 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 11:46:05 -0700
Subject: [PATCH 2/9] Fix minor style issues

---
 static/app/components/tabs/tab.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index 894d0492727340..3fd3630a2f02e0 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -174,8 +174,7 @@ const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp}
         border-left: 1px ${p.borderStyle} ${p.theme.border};
         border-right: 1px ${p.borderStyle} ${p.theme.border};
         background-color: ${p.theme.white};
-        color: ${p.theme.fontWeightBold};
-        font-weight: 600;
+        font-weight: ${p.theme.fontWeightBold};
       `}
   }
 
@@ -186,8 +185,6 @@ const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp}
   transform: translateY(1px);
   padding: 5px 10px;
 
-  opacity: 0px;
-
   cursor: pointer;
 
   &:focus {

From d78cd4bc4122d27db3a47e9c5c67e13065416399 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 12:02:08 -0700
Subject: [PATCH 3/9] Bubble variant prop up and add storybook entry

---
 static/app/components/tabs/index.stories.tsx | 24 ++++++++++++++++++++
 static/app/components/tabs/tab.tsx           |  6 +++--
 static/app/components/tabs/tabList.tsx       | 15 +++++++++---
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/static/app/components/tabs/index.stories.tsx b/static/app/components/tabs/index.stories.tsx
index 3d376562b18c84..159698f0d8d39b 100644
--- a/static/app/components/tabs/index.stories.tsx
+++ b/static/app/components/tabs/index.stories.tsx
@@ -187,4 +187,28 @@ export default storyBook(Tabs, story => {
       </div>
     </SideBySide>
   ));
+
+  story('Variants', () => (
+    <div>
+      <p>
+        Use the variant prop to control which tab design to use. The default, "vanilla",
+        is used in the above examples, but you can also use "draggable" variant, as shown
+        here:
+      </p>
+      <SizingWindow>
+        <Tabs>
+          <TabList variant={'draggable'}>
+            {TABS.map(tab => (
+              <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
+            ))}
+          </TabList>
+          <TabPanels>
+            {TABS.map(tab => (
+              <TabPanels.Item key={tab.key}>{tab.content}</TabPanels.Item>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </SizingWindow>
+    </div>
+  ));
 });
diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index 3fd3630a2f02e0..817abf6486f26f 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -28,6 +28,7 @@ interface TabProps extends AriaTabProps {
    */
   overflowing: boolean;
   state: TabListState<any>;
+  variant?: BaseTabProps['variant'];
 }
 
 /**
@@ -42,7 +43,7 @@ function handleLinkClick(e: React.PointerEvent<HTMLAnchorElement>) {
   }
 }
 
-interface BaseTabProps {
+export interface BaseTabProps {
   children: React.ReactNode;
   hidden: boolean;
   isSelected: boolean;
@@ -134,7 +135,7 @@ export const BaseTab = forwardRef(
  */
 export const Tab = forwardRef(
   (
-    {item, state, orientation, overflowing}: TabProps,
+    {item, state, orientation, overflowing, variant}: TabProps,
     forwardedRef: React.ForwardedRef<HTMLLIElement>
   ) => {
     const ref = useObjectRef(forwardedRef);
@@ -155,6 +156,7 @@ export const Tab = forwardRef(
         orientation={orientation}
         overflowing={overflowing}
         ref={ref}
+        variant={variant}
       >
         {rendered}
       </BaseTab>
diff --git a/static/app/components/tabs/tabList.tsx b/static/app/components/tabs/tabList.tsx
index 698648b34e8fc0..f65faa17a76255 100644
--- a/static/app/components/tabs/tabList.tsx
+++ b/static/app/components/tabs/tabList.tsx
@@ -19,7 +19,7 @@ import {browserHistory} from 'sentry/utils/browserHistory';
 import {TabsContext} from './index';
 import type {TabListItemProps} from './item';
 import {Item} from './item';
-import {Tab} from './tab';
+import {type BaseTabProps, Tab} from './tab';
 import {tabsShouldForwardProp} from './utils';
 
 /**
@@ -117,16 +117,19 @@ export interface TabListProps
   className?: string;
   hideBorder?: boolean;
   outerWrapStyles?: React.CSSProperties;
+  variant?: BaseTabProps['variant'];
 }
 
 interface BaseTabListProps extends TabListProps {
   items: TabListItemProps[];
+  variant?: BaseTabProps['variant'];
 }
 
 function BaseTabList({
   hideBorder = false,
   className,
   outerWrapStyles,
+  variant,
   ...props
 }: BaseTabListProps) {
   const tabListRef = useRef<HTMLUListElement>(null);
@@ -216,6 +219,7 @@ function BaseTabList({
             orientation={orientation}
             overflowing={orientation === 'horizontal' && overflowTabs.includes(item.key)}
             ref={element => (tabItemsRef.current[item.key] = element)}
+            variant={variant}
           />
         ))}
       </TabListWrap>
@@ -237,7 +241,7 @@ const collectionFactory = (nodes: Iterable<Node<any>>) => new ListCollection(nod
  * To be used as a direct child of the <Tabs /> component. See example usage
  * in tabs.stories.js
  */
-export function TabList({items, ...props}: TabListProps) {
+export function TabList({items, variant, ...props}: TabListProps) {
   /**
    * Initial, unfiltered list of tab items.
    */
@@ -258,7 +262,12 @@ export function TabList({items, ...props}: TabListProps) {
   );
 
   return (
-    <BaseTabList items={parsedItems} disabledKeys={disabledKeys} {...props}>
+    <BaseTabList
+      items={parsedItems}
+      disabledKeys={disabledKeys}
+      variant={variant}
+      {...props}
+    >
       {item => <Item {...item} />}
     </BaseTabList>
   );

From 285009f8a336c3eca4db6fc2d2183d3b55514ded Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 12:52:26 -0700
Subject: [PATCH 4/9] Rename variant options from vanilla & draggable to flat &
 filled, respectively

---
 static/app/components/tabs/index.stories.tsx |  7 +++----
 static/app/components/tabs/tab.tsx           | 10 +++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/static/app/components/tabs/index.stories.tsx b/static/app/components/tabs/index.stories.tsx
index 159698f0d8d39b..eb74bf57712c71 100644
--- a/static/app/components/tabs/index.stories.tsx
+++ b/static/app/components/tabs/index.stories.tsx
@@ -191,13 +191,12 @@ export default storyBook(Tabs, story => {
   story('Variants', () => (
     <div>
       <p>
-        Use the variant prop to control which tab design to use. The default, "vanilla",
-        is used in the above examples, but you can also use "draggable" variant, as shown
-        here:
+        Use the variant prop to control which tab design to use. The default, "flat", is
+        used in the above examples, but you can also use "filled" variant, as shown here:
       </p>
       <SizingWindow>
         <Tabs>
-          <TabList variant={'draggable'}>
+          <TabList variant={'filled'}>
             {TABS.map(tab => (
               <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
             ))}
diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index 817abf6486f26f..f9bac918738fd3 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -55,9 +55,13 @@ export interface BaseTabProps {
    * by <DraggableTab> to pass in props used for drag-and-drop functionality.
    */
   additionalProps?: React.HTMLAttributes<HTMLElement>;
+  /**
+   * This controls the border style of the tab. Only active when
+   * `variant=filled` since other variants do not have a border
+   */
   borderStyle?: 'solid' | 'dashed';
   to?: string;
-  variant?: 'vanilla' | 'draggable';
+  variant?: 'flat' | 'filled';
 }
 
 export const BaseTab = forwardRef(
@@ -70,7 +74,7 @@ export const BaseTab = forwardRef(
       hidden,
       isSelected,
       additionalProps,
-      variant = 'vanilla',
+      variant = 'flat',
       borderStyle = 'solid',
     } = props;
 
@@ -92,7 +96,7 @@ export const BaseTab = forwardRef(
         ),
       [to, orientation]
     );
-    if (variant === 'draggable') {
+    if (variant === 'filled') {
       return (
         <DraggableTabWrap
           {...mergeProps(tabProps, additionalProps)}

From 6b9759356edcef0ec6edea71eb1a70eed01abc47 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 14:01:26 -0700
Subject: [PATCH 5/9] Tighten the gap between tabs. use space instead of hard
 coded pixel vals

---
 static/app/components/tabs/index.stories.tsx | 46 ++++++++++----------
 static/app/components/tabs/tab.tsx           |  8 ++--
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/static/app/components/tabs/index.stories.tsx b/static/app/components/tabs/index.stories.tsx
index eb74bf57712c71..6de8fe7317ca38 100644
--- a/static/app/components/tabs/index.stories.tsx
+++ b/static/app/components/tabs/index.stories.tsx
@@ -120,6 +120,29 @@ export default storyBook(Tabs, story => {
     );
   });
 
+  story('Variants', () => (
+    <div>
+      <p>
+        Use the variant prop to control which tab design to use. The default, "flat", is
+        used in the above examples, but you can also use "filled" variant, as shown here:
+      </p>
+      <SizingWindow>
+        <Tabs>
+          <TabList variant={'filled'}>
+            {TABS.map(tab => (
+              <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
+            ))}
+          </TabList>
+          <TabPanels>
+            {TABS.map(tab => (
+              <TabPanels.Item key={tab.key}>{tab.content}</TabPanels.Item>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </SizingWindow>
+    </div>
+  ));
+
   story('Rendering', () => (
     <Matrix<TabsProps<string> & TabListProps>
       render={props => (
@@ -187,27 +210,4 @@ export default storyBook(Tabs, story => {
       </div>
     </SideBySide>
   ));
-
-  story('Variants', () => (
-    <div>
-      <p>
-        Use the variant prop to control which tab design to use. The default, "flat", is
-        used in the above examples, but you can also use "filled" variant, as shown here:
-      </p>
-      <SizingWindow>
-        <Tabs>
-          <TabList variant={'filled'}>
-            {TABS.map(tab => (
-              <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
-            ))}
-          </TabList>
-          <TabPanels>
-            {TABS.map(tab => (
-              <TabPanels.Item key={tab.key}>{tab.content}</TabPanels.Item>
-            ))}
-          </TabPanels>
-        </Tabs>
-      </SizingWindow>
-    </div>
-  ));
 });
diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index f9bac918738fd3..e3e4eefb2906d9 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -175,21 +175,23 @@ const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp}
   &[aria-selected='true'] {
     ${p =>
       `
-        border-radius: 6px 6px 1px 1px;
         border-top: 1px ${p.borderStyle} ${p.theme.border};
         border-left: 1px ${p.borderStyle} ${p.theme.border};
         border-right: 1px ${p.borderStyle} ${p.theme.border};
-        background-color: ${p.theme.white};
+        background-color: ${p.theme.background};
         font-weight: ${p.theme.fontWeightBold};
       `}
+    border-radius: 6px 6px 1px 1px;
+    padding: ${space(0.5)} ${space(1)};
   }
 
   &[aria-selected='false'] {
     border-top: 1px solid transparent;
+    padding-top: ${space(0.5)};
+    padding-bottom: ${space(0.5)};
   }
 
   transform: translateY(1px);
-  padding: 5px 10px;
 
   cursor: pointer;
 

From e1a5d4e2d5e7e2047d4de88c59b6b4dd80a276c3 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 14:35:47 -0700
Subject: [PATCH 6/9] Fix padding for filled and flat tabs

---
 static/app/components/tabs/index.stories.tsx | 46 ++++++++++----------
 static/app/components/tabs/tab.tsx           | 11 +++--
 static/app/components/tabs/tabList.tsx       |  6 ++-
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/static/app/components/tabs/index.stories.tsx b/static/app/components/tabs/index.stories.tsx
index 6de8fe7317ca38..eb74bf57712c71 100644
--- a/static/app/components/tabs/index.stories.tsx
+++ b/static/app/components/tabs/index.stories.tsx
@@ -120,29 +120,6 @@ export default storyBook(Tabs, story => {
     );
   });
 
-  story('Variants', () => (
-    <div>
-      <p>
-        Use the variant prop to control which tab design to use. The default, "flat", is
-        used in the above examples, but you can also use "filled" variant, as shown here:
-      </p>
-      <SizingWindow>
-        <Tabs>
-          <TabList variant={'filled'}>
-            {TABS.map(tab => (
-              <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
-            ))}
-          </TabList>
-          <TabPanels>
-            {TABS.map(tab => (
-              <TabPanels.Item key={tab.key}>{tab.content}</TabPanels.Item>
-            ))}
-          </TabPanels>
-        </Tabs>
-      </SizingWindow>
-    </div>
-  ));
-
   story('Rendering', () => (
     <Matrix<TabsProps<string> & TabListProps>
       render={props => (
@@ -210,4 +187,27 @@ export default storyBook(Tabs, story => {
       </div>
     </SideBySide>
   ));
+
+  story('Variants', () => (
+    <div>
+      <p>
+        Use the variant prop to control which tab design to use. The default, "flat", is
+        used in the above examples, but you can also use "filled" variant, as shown here:
+      </p>
+      <SizingWindow>
+        <Tabs>
+          <TabList variant={'filled'}>
+            {TABS.map(tab => (
+              <TabList.Item key={tab.key}>{tab.label}</TabList.Item>
+            ))}
+          </TabList>
+          <TabPanels>
+            {TABS.map(tab => (
+              <TabPanels.Item key={tab.key}>{tab.content}</TabPanels.Item>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </SizingWindow>
+    </div>
+  ));
 });
diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index e3e4eefb2906d9..96b3a7b5c49a97 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -98,7 +98,7 @@ export const BaseTab = forwardRef(
     );
     if (variant === 'filled') {
       return (
-        <DraggableTabWrap
+        <FilledTabWrap
           {...mergeProps(tabProps, additionalProps)}
           hidden={hidden}
           overflowing={overflowing}
@@ -106,7 +106,7 @@ export const BaseTab = forwardRef(
           ref={ref}
         >
           {props.children}
-        </DraggableTabWrap>
+        </FilledTabWrap>
       );
     }
 
@@ -168,7 +168,7 @@ export const Tab = forwardRef(
   }
 );
 
-const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
+const FilledTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
   borderStyle: 'dashed' | 'solid';
   overflowing: boolean;
 }>`
@@ -182,15 +182,14 @@ const DraggableTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp}
         font-weight: ${p.theme.fontWeightBold};
       `}
     border-radius: 6px 6px 1px 1px;
-    padding: ${space(0.5)} ${space(1)};
   }
 
   &[aria-selected='false'] {
     border-top: 1px solid transparent;
-    padding-top: ${space(0.5)};
-    padding-bottom: ${space(0.5)};
   }
 
+  padding: ${space(0.5)} ${space(1)};
+
   transform: translateY(1px);
 
   cursor: pointer;
diff --git a/static/app/components/tabs/tabList.tsx b/static/app/components/tabs/tabList.tsx
index f65faa17a76255..a22455c7a99fe5 100644
--- a/static/app/components/tabs/tabList.tsx
+++ b/static/app/components/tabs/tabList.tsx
@@ -129,7 +129,7 @@ function BaseTabList({
   hideBorder = false,
   className,
   outerWrapStyles,
-  variant,
+  variant = 'flat',
   ...props
 }: BaseTabListProps) {
   const tabListRef = useRef<HTMLUListElement>(null);
@@ -210,6 +210,7 @@ function BaseTabList({
         hideBorder={hideBorder}
         className={className}
         ref={tabListRef}
+        variant={variant}
       >
         {[...state.collection].map(item => (
           <Tab
@@ -282,6 +283,7 @@ const TabListOuterWrap = styled('div')`
 const TabListWrap = styled('ul', {shouldForwardProp: tabsShouldForwardProp})<{
   hideBorder: boolean;
   orientation: Orientation;
+  variant: BaseTabProps['variant'];
 }>`
   position: relative;
   display: grid;
@@ -295,7 +297,7 @@ const TabListWrap = styled('ul', {shouldForwardProp: tabsShouldForwardProp})<{
       ? `
         grid-auto-flow: column;
         justify-content: start;
-        gap: ${space(2)};
+        gap: ${p.variant === 'filled' ? space(0) : space(2)};
         ${!p.hideBorder && `border-bottom: solid 1px ${p.theme.border};`}
       `
       : `

From f59efbc220a699fa98e2f5ab30ca1092758a5afe Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Wed, 24 Jul 2024 16:41:12 -0700
Subject: [PATCH 7/9] Add interaction state layer and focus layer for filled
 variant

---
 .../app/components/interactionStateLayer.tsx  | 16 ++++++--
 static/app/components/tabs/index.stories.tsx  |  3 +-
 static/app/components/tabs/tab.tsx            | 37 ++++++++++++++++++-
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/static/app/components/interactionStateLayer.tsx b/static/app/components/interactionStateLayer.tsx
index cb76d3d44a4a5d..d8932f478b5258 100644
--- a/static/app/components/interactionStateLayer.tsx
+++ b/static/app/components/interactionStateLayer.tsx
@@ -7,6 +7,7 @@ import {defined} from 'sentry/utils';
 interface StateLayerProps extends React.HTMLAttributes<HTMLSpanElement> {
   as?: React.ElementType;
   color?: string;
+  hasSelectedBackground?: boolean;
   higherOpacity?: boolean;
   isHovered?: boolean;
   isPressed?: boolean;
@@ -65,11 +66,16 @@ const InteractionStateLayer = styled(
         `
       : // If isPressed is undefined, then fallback to default press selectors
         css`
-          *:active > &&,
-          *[aria-expanded='true'] > &&,
-          *[aria-selected='true'] > && {
+          *:active > && {
             opacity: ${p.higherOpacity ? 0.12 : 0.09};
           }
+          ${p.hasSelectedBackground &&
+          css`
+            *[aria-expanded='true'] > &&,
+            *[aria-selected='true'] > && {
+              opacity: ${p.higherOpacity ? 0.12 : 0.09};
+            }
+          `}
         `}
 
 
@@ -79,4 +85,8 @@ const InteractionStateLayer = styled(
   }
 `;
 
+InteractionStateLayer.defaultProps = {
+  hasSelectedBackground: true,
+};
+
 export default InteractionStateLayer;
diff --git a/static/app/components/tabs/index.stories.tsx b/static/app/components/tabs/index.stories.tsx
index eb74bf57712c71..dbd7f5bf22377d 100644
--- a/static/app/components/tabs/index.stories.tsx
+++ b/static/app/components/tabs/index.stories.tsx
@@ -192,7 +192,8 @@ export default storyBook(Tabs, story => {
     <div>
       <p>
         Use the variant prop to control which tab design to use. The default, "flat", is
-        used in the above examples, but you can also use "filled" variant, as shown here:
+        used in the above examples, but you can also use "filled" variant, as shown below.
+        Note that the "filled" variant does not work when the oritentation is vertical
       </p>
       <SizingWindow>
         <Tabs>
diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index 96b3a7b5c49a97..f8d5fa29aac427 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -105,6 +105,8 @@ export const BaseTab = forwardRef(
           borderStyle={borderStyle}
           ref={ref}
         >
+          <FilledStyledInteractionStateLayer hasSelectedBackground={false} />
+          <FilledFocusLayer />
           {props.children}
         </FilledTabWrap>
       );
@@ -180,10 +182,11 @@ const FilledTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
         border-right: 1px ${p.borderStyle} ${p.theme.border};
         background-color: ${p.theme.background};
         font-weight: ${p.theme.fontWeightBold};
-      `}
-    border-radius: 6px 6px 1px 1px;
+    `}
   }
 
+  border-radius: 6px 6px 1px 1px;
+
   &[aria-selected='false'] {
     border-top: 1px solid transparent;
   }
@@ -292,6 +295,17 @@ const StyledInteractionStateLayer = styled(InteractionStateLayer)<{
   bottom: ${p => (p.orientation === 'horizontal' ? space(0.75) : 0)};
 `;
 
+const FilledStyledInteractionStateLayer = styled(InteractionStateLayer)`
+  position: absolute;
+  width: auto;
+  height: auto;
+  transform: none;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+`;
+
 const FocusLayer = styled('div')<{orientation: Orientation}>`
   position: absolute;
   left: 0;
@@ -311,6 +325,25 @@ const FocusLayer = styled('div')<{orientation: Orientation}>`
   }
 `;
 
+const FilledFocusLayer = styled('div')`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: 0;
+  transition: box-shadow 0.1s ease-out;
+
+  li:focus-visible & {
+    box-shadow:
+      ${p => p.theme.focusBorder} 0 0 0 1px,
+      inset ${p => p.theme.focusBorder} 0 0 0 1px;
+  }
+`;
+
 const TabSelectionIndicator = styled('div')<{
   orientation: Orientation;
   selected: boolean;

From 75954c7d0533445351eb73e35bc3627891478a76 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Thu, 25 Jul 2024 13:08:14 -0700
Subject: [PATCH 8/9] Add annotation for hasSelectedBackground prop

---
 static/app/components/interactionStateLayer.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/static/app/components/interactionStateLayer.tsx b/static/app/components/interactionStateLayer.tsx
index d8932f478b5258..4a41c1c2f7048d 100644
--- a/static/app/components/interactionStateLayer.tsx
+++ b/static/app/components/interactionStateLayer.tsx
@@ -7,6 +7,10 @@ import {defined} from 'sentry/utils';
 interface StateLayerProps extends React.HTMLAttributes<HTMLSpanElement> {
   as?: React.ElementType;
   color?: string;
+  /**
+   * Controls if the opacity is increased when the element is in a
+   * selected or expanded state (aria-selected='true' or aria-expanded='true')
+   */
   hasSelectedBackground?: boolean;
   higherOpacity?: boolean;
   isHovered?: boolean;

From 4e3a182aa8d7d7100b567cc15844e09654ae2889 Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Thu, 25 Jul 2024 13:09:12 -0700
Subject: [PATCH 9/9] Remove additional props from tab component

---
 static/app/components/tabs/tab.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/static/app/components/tabs/tab.tsx b/static/app/components/tabs/tab.tsx
index f8d5fa29aac427..c489c26488b721 100644
--- a/static/app/components/tabs/tab.tsx
+++ b/static/app/components/tabs/tab.tsx
@@ -3,7 +3,7 @@ import type {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {AriaTabProps} from '@react-aria/tabs';
 import {useTab} from '@react-aria/tabs';
-import {mergeProps, useObjectRef} from '@react-aria/utils';
+import {useObjectRef} from '@react-aria/utils';
 import type {TabListState} from '@react-stately/tabs';
 import type {
   DOMAttributes,
@@ -50,11 +50,6 @@ export interface BaseTabProps {
   orientation: Orientation;
   overflowing: boolean;
   tabProps: DOMAttributes<FocusableElement>;
-  /**
-   * Additional props to be merged with `tabProps`. This is used
-   * by <DraggableTab> to pass in props used for drag-and-drop functionality.
-   */
-  additionalProps?: React.HTMLAttributes<HTMLElement>;
   /**
    * This controls the border style of the tab. Only active when
    * `variant=filled` since other variants do not have a border
@@ -73,7 +68,6 @@ export const BaseTab = forwardRef(
       tabProps,
       hidden,
       isSelected,
-      additionalProps,
       variant = 'flat',
       borderStyle = 'solid',
     } = props;
@@ -99,7 +93,7 @@ export const BaseTab = forwardRef(
     if (variant === 'filled') {
       return (
         <FilledTabWrap
-          {...mergeProps(tabProps, additionalProps)}
+          {...tabProps}
           hidden={hidden}
           overflowing={overflowing}
           borderStyle={borderStyle}
@@ -114,7 +108,7 @@ export const BaseTab = forwardRef(
 
     return (
       <TabWrap
-        {...mergeProps(tabProps, additionalProps)}
+        {...tabProps}
         hidden={hidden}
         selected={isSelected}
         overflowing={overflowing}