2024.5.0 (#39)

src-web/components/core/Tabs/Tabs.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { memo, useCallback, useEffect, useRef } from 'react';
-import { Button } from '../Button';
 import { Icon } from '../Icon';
 import type { RadioDropdownProps } from '../RadioDropdown';
 import { RadioDropdown } from '../RadioDropdown';
@@ -25,6 +24,7 @@ interface Props {
   tabListClassName?: string;
   className?: string;
   children: ReactNode;
+  addBorders?: boolean;
 }
 
 export function Tabs({
@@ -35,6 +35,7 @@ export function Tabs({
   tabs,
   className,
   tabListClassName,
+  addBorders,
 }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
 
@@ -73,17 +74,21 @@ export function Tabs({
         aria-label={label}
         className={classNames(
           tabListClassName,
+          addBorders && '!-ml-1 h-md mt-2',
           'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
           // Give space for button focus states within overflow boundary.
           '-ml-5 pl-3 pr-1 py-1',
         )}
       >
-        <HStack space={2} className="flex-shrink-0">
+        <HStack space={2} className="h-full flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
             const btnClassName = classNames(
-              isActive ? 'text-gray-800' : 'text-gray-600 hover:text-gray-700',
+              'h-full flex items-center rounded',
               '!px-2 ml-[1px]',
+              addBorders && 'border',
+              isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',
+              isActive && addBorders ? 'border-background-highlight' : 'border-transparent',
             );
 
             if ('options' in t) {
@@ -97,39 +102,32 @@ export function Tabs({
                   value={t.options.value}
                   onChange={t.options.onChange}
                 >
-                  <Button
+                  <button
                     color="custom"
-                    size="sm"
                     onClick={isActive ? undefined : () => handleTabChange(t.value)}
                     className={btnClassName}
-                    rightSlot={
-                      <Icon
-                        size="sm"
-                        icon="chevronDown"
-                        className={classNames(
-                          '-mr-1.5 mt-0.5',
-                          isActive ? 'opacity-100' : 'opacity-20',
-                        )}
-                      />
-                    }
                   >
                     {option && 'shortLabel' in option
                       ? option.shortLabel
                       : option?.label ?? 'Unknown'}
-                  </Button>
+                    <Icon
+                      size="sm"
+                      icon="chevronDown"
+                      className={classNames('ml-1', isActive ? 'text-fg-subtle' : 'opacity-50')}
+                    />
+                  </button>
                 </RadioDropdown>
               );
             } else {
               return (
-                <Button
+                <button
                   key={t.value}
                   color="custom"
-                  size="sm"
                   onClick={() => handleTabChange(t.value)}
                   className={btnClassName}
                 >
                   {t.label}
-                </Button>
+                </button>
               );
             }
           })}