merge label and icon into single type, remove console.error

wandb · Nov 20, 2024 · 6be54da · 6be54da
1 parent b927886
commit 6be54da
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -7,21 +7,28 @@ import {IconName} from '../Icon';
 import {Tailwind} from '../Tailwind';
 import {ToggleButtonGroupSize} from './types';
 
+export type ToggleOption = {
+  label: string;
+  icon?: IconName;
+};
+
 export type ToggleButtonGroupProps = {
-  options: string[];
+  options: ToggleOption[];
   value: string;
   size: ToggleButtonGroupSize;
   isDisabled?: boolean;
-  icons?: Array<IconName | undefined>;
   onValueChange: (value: string) => void;
 };
 
+/**
+ * ToggleButtonGroup component should only be rendered if options.length >= 2.
+ */
 export const ToggleButtonGroup = React.forwardRef<
   HTMLDivElement,
   ToggleButtonGroupProps
->(({options, value, size, isDisabled = false, icons, onValueChange}, ref) => {
+>(({options, value, size, isDisabled = false, onValueChange}, ref) => {
   if (options.length < 2) {
-    console.error('ToggleButtonGroup requires at least two options.');
+    return null; // Do not render if there are fewer than two options
   }
 
   const handleValueChange = (newValue: string) => {
@@ -37,23 +44,26 @@ export const ToggleButtonGroup = React.forwardRef<
         onValueChange={handleValueChange}
         className="flex gap-px"
         ref={ref}>
-        {options.map((option, index) => (
-          <ToggleGroup.Item key={option} value={option} disabled={isDisabled}>
+        {options.map(({label, icon}) => (
+          <ToggleGroup.Item
+            key={label}
+            value={label}
+            disabled={isDisabled || value === label}>
             <Button
-              icon={icons?.[index]}
+              icon={icon}
               size={size}
               className={twMerge(
                 size === 'small' && 'gap-2 px-6 py-3 text-sm',
                 size === 'medium' && 'gap-3 px-10 py-4 text-base',
                 size === 'large' && 'gap-2 px-12 py-8 text-base',
                 isDisabled && 'pointer-events-none opacity-35',
-                value === option
+                value === label
                   ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]'
                   : 'hover:bg-oblivion/7 bg-oblivion/5 text-moon-600 hover:text-moon-800',
                 'first:rounded-l-sm', // First button rounded left
                 'last:rounded-r-sm' // Last button rounded right
               )}>
-              {option}
+              {label}
             </Button>
           </ToggleGroup.Item>
         ))}

diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
@@ -1,7 +1,6 @@
-export const ToggleButtonGroupSizes = {
-  Small: 'small',
-  Medium: 'medium',
-  Large: 'large',
-} as const;
-export type ToggleButtonGroupSize =
-  (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];
+export enum ToggleButtonGroupSizes {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+}
+export type ToggleButtonGroupSize = keyof typeof ToggleButtonGroupSizes;