feat(tabs): Add new variant to be used on issue details (#75029)

this pr adds a new variant of tabs - "floating" , which will be used on
the updated issue details page

Author: roggenkemper

static/app/components/tabs/index.stories.tsx

@@ -209,6 +209,22 @@ export default storyBook(Tabs, story => {
           </TabPanels>
         </Tabs>
       </SizingWindow>
+      <br />
+      <p>You can also use the "floating" variant, which is used below</p>
+      <SizingWindow>
+        <Tabs>
+          <TabList variant="floating" hideBorder>
+            {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>
   ));
 });

static/app/components/tabs/tab.tsx

@@ -56,7 +56,7 @@ export interface BaseTabProps {
    */
   borderStyle?: 'solid' | 'dashed';
   to?: string;
-  variant?: 'flat' | 'filled';
+  variant?: 'flat' | 'filled' | 'floating';
 }
 
 export const BaseTab = forwardRef(
@@ -99,13 +99,28 @@ export const BaseTab = forwardRef(
           borderStyle={borderStyle}
           ref={ref}
         >
-          <FilledStyledInteractionStateLayer hasSelectedBackground={false} />
-          <FilledFocusLayer />
+          <VariantStyledInteractionStateLayer hasSelectedBackground={false} />
+          <VariantFocusLayer />
           {props.children}
         </FilledTabWrap>
       );
     }
 
+    if (variant === 'floating') {
+      return (
+        <FloatingTabWrap
+          {...tabProps}
+          hidden={hidden}
+          overflowing={overflowing}
+          ref={ref}
+        >
+          <VariantStyledInteractionStateLayer hasSelectedBackground={false} />
+          <VariantFocusLayer />
+          {props.children}
+        </FloatingTabWrap>
+      );
+    }
+
     return (
       <TabWrap
         {...tabProps}
@@ -164,6 +179,36 @@ export const Tab = forwardRef(
   }
 );
 
+const FloatingTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
+  overflowing: boolean;
+}>`
+  &[aria-selected='true'] {
+    ${p =>
+      `
+        color: ${p.theme.purple400};
+        font-weight: ${p.theme.fontWeightBold};
+        background-color: ${p.theme.purple100};
+    `}
+  }
+  &[aria-selected='false'] {
+    border-top: 1px solid transparent;
+  }
+  color: ${p => p.theme.gray300};
+  border-radius: 6px;
+  padding: ${space(0.5)} ${space(1)};
+  transform: translateY(1px);
+  cursor: pointer;
+  &:focus {
+    outline: none;
+  }
+  ${p =>
+    p.overflowing &&
+    `
+      opacity: 0;
+      pointer-events: none;
+    `}
+`;
+
 const FilledTabWrap = styled('li', {shouldForwardProp: tabsShouldForwardProp})<{
   borderStyle: 'dashed' | 'solid';
   overflowing: boolean;
@@ -289,7 +334,7 @@ const StyledInteractionStateLayer = styled(InteractionStateLayer)<{
   bottom: ${p => (p.orientation === 'horizontal' ? space(0.75) : 0)};
 `;
 
-const FilledStyledInteractionStateLayer = styled(InteractionStateLayer)`
+const VariantStyledInteractionStateLayer = styled(InteractionStateLayer)`
   position: absolute;
   width: auto;
   height: auto;
@@ -319,7 +364,7 @@ const FocusLayer = styled('div')<{orientation: Orientation}>`
   }
 `;
 
-const FilledFocusLayer = styled('div')`
+const VariantFocusLayer = styled('div')`
   position: absolute;
   left: 0;
   right: 0;

static/app/components/tabs/tabList.tsx

@@ -297,7 +297,7 @@ const TabListWrap = styled('ul', {shouldForwardProp: tabsShouldForwardProp})<{
       ? `
         grid-auto-flow: column;
         justify-content: start;
-        gap: ${p.variant === 'filled' ? space(0) : space(2)};
+        gap: ${p.variant === 'filled' || p.variant === 'floating' ? space(0) : space(2)};
         ${!p.hideBorder && `border-bottom: solid 1px ${p.theme.border};`}
       `
       : `