From d544504f87aa6d6771f30960686008f24dda7c60 Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Thu, 14 Nov 2024 15:58:40 -0800
Subject: [PATCH 01/11] feat(ui): create ToggleButtonGroup component

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 48 +++++++++++++++++++
 .../components/ToggleButtonGroup/index.tsx    |  2 +
 .../components/ToggleButtonGroup/types.tsx    |  6 +++
 3 files changed, 56 insertions(+)
 create mode 100644 weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 create mode 100644 weave-js/src/components/ToggleButtonGroup/index.tsx
 create mode 100644 weave-js/src/components/ToggleButtonGroup/types.tsx

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
new file mode 100644
index 00000000000..7237ade9f27
--- /dev/null
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -0,0 +1,48 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import {Tailwind} from '../Tailwind';
+import {ToggleButtonGroupSize} from './types';
+
+export type ToggleButtonGroupProps = {
+  options: string[];
+  value: string;
+  onValueChange: (value: string) => void;
+  size: ToggleButtonGroupSize;
+};
+
+export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
+  ({ options, value, onValueChange, size }, ref) => {
+    return (
+      <Tailwind>
+        <ToggleGroup.Root
+          type="single"
+          value={value}
+          onValueChange={onValueChange}
+          className="flex space-x-2"
+          ref={ref}
+        >
+          {options.map((option) => (
+            <ToggleGroup.Item
+              key={option}
+              value={option}
+              className={twMerge(
+                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px] my-12",
+                size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
+                size === 'medium' && 'px-10 py-4 text-base leading-normal',
+                size === 'large' && 'px-12 py-8 text-base leading-normal',
+                value === option ? 'bg-[#a9edf2]/50 text-[#038194]' : 'bg-[#0d0f12]/5 text-[#565c66]',
+                'first:rounded-l-sm', // First button rounded left
+                'last:rounded-r-sm' // Last button rounded right
+              )}
+            >
+              {option}
+            </ToggleGroup.Item>
+          ))}
+        </ToggleGroup.Root>
+      </Tailwind>
+    );
+  }
+);
+
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
diff --git a/weave-js/src/components/ToggleButtonGroup/index.tsx b/weave-js/src/components/ToggleButtonGroup/index.tsx
new file mode 100644
index 00000000000..3e1c860a4be
--- /dev/null
+++ b/weave-js/src/components/ToggleButtonGroup/index.tsx
@@ -0,0 +1,2 @@
+export * from './ToggleButtonGroup';
+export * from './types';
diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
new file mode 100644
index 00000000000..454fed479ee
--- /dev/null
+++ b/weave-js/src/components/ToggleButtonGroup/types.tsx
@@ -0,0 +1,6 @@
+export const ToggleButtonGroupSizes = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large',
+} as const;
+export type ToggleButtonGroupSize = (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];

From 5c11a0d1416d27762869714445f73e8a014f2b3f Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Fri, 15 Nov 2024 14:46:11 -0800
Subject: [PATCH 02/11] add icon prop

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx         | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 7237ade9f27..67716eacc7e 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,18 +1,22 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+
+import {Icon, IconName} from '../Icon';
 import {Tailwind} from '../Tailwind';
 import {ToggleButtonGroupSize} from './types';
 
 export type ToggleButtonGroupProps = {
   options: string[];
   value: string;
-  onValueChange: (value: string) => void;
+  icon?: IconName;
   size: ToggleButtonGroupSize;
+  isDisabled?: boolean;
+  onValueChange: (value: string) => void;
 };
 
 export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
-  ({ options, value, onValueChange, size }, ref) => {
+  ({ options, value, icon, size, isDisabled, onValueChange }, ref) => {
     return (
       <Tailwind>
         <ToggleGroup.Root
@@ -27,10 +31,11 @@ export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGr
               key={option}
               value={option}
               className={twMerge(
-                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px] my-12",
+                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px]",
                 size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
                 size === 'medium' && 'px-10 py-4 text-base leading-normal',
                 size === 'large' && 'px-12 py-8 text-base leading-normal',
+                isDisabled && 'pointer-events-none opacity-35',
                 value === option ? 'bg-[#a9edf2]/50 text-[#038194]' : 'bg-[#0d0f12]/5 text-[#565c66]',
                 'first:rounded-l-sm', // First button rounded left
                 'last:rounded-r-sm' // Last button rounded right

From cfb155841a94c8122dadf81763fb0bf53dadaf1b Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Mon, 18 Nov 2024 12:11:33 -0800
Subject: [PATCH 03/11] import Button

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 67716eacc7e..e24ac9063fd 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -3,45 +3,56 @@ import { twMerge } from 'tailwind-merge';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 
 import {Icon, IconName} from '../Icon';
+import {Button} from '../Button';
 import {Tailwind} from '../Tailwind';
 import {ToggleButtonGroupSize} from './types';
 
 export type ToggleButtonGroupProps = {
   options: string[];
   value: string;
-  icon?: IconName;
   size: ToggleButtonGroupSize;
   isDisabled?: boolean;
+  icon?: IconName;
   onValueChange: (value: string) => void;
 };
 
 export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
-  ({ options, value, icon, size, isDisabled, onValueChange }, ref) => {
+  ({ options, value, size, isDisabled, icon, onValueChange }, ref) => {
+    const handleValueChange = (newValue: string) => {
+        if (newValue !== value) {
+          onValueChange(newValue);
+        }
+      };
     return (
       <Tailwind>
         <ToggleGroup.Root
           type="single"
           value={value}
-          onValueChange={onValueChange}
+          onValueChange={handleValueChange}
           className="flex space-x-2"
           ref={ref}
         >
           {options.map((option) => (
             <ToggleGroup.Item
               key={option}
-              value={option}
-              className={twMerge(
-                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px]",
-                size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
-                size === 'medium' && 'px-10 py-4 text-base leading-normal',
-                size === 'large' && 'px-12 py-8 text-base leading-normal',
-                isDisabled && 'pointer-events-none opacity-35',
-                value === option ? 'bg-[#a9edf2]/50 text-[#038194]' : 'bg-[#0d0f12]/5 text-[#565c66]',
-                'first:rounded-l-sm', // First button rounded left
-                'last:rounded-r-sm' // Last button rounded right
-              )}
-            >
-              {option}
+              value={option}>
+                <Button
+                icon={icon}
+                className={twMerge(
+                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px] my-10", // TODO: don't use my-10 here
+                  size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
+                  size === 'medium' && 'px-10 py-4 text-base leading-normal',
+                  size === 'large' && 'px-12 py-8 text-base leading-normal',
+                  isDisabled && 'pointer-events-none opacity-35',
+                  value === option ? 'bg-[#a9edf2]/50 text-[#038194] hover:bg-[#a9edf2]/50]' : 'bg-[#0d0f12]/5 text-[#565c66] hover:text-[#0d0f12] hover:bg-[#0d0f12]/10',
+                  'first:rounded-l-sm', // First button rounded left
+                  'last:rounded-r-sm' // Last button rounded right
+                )}
+                active={value === option}
+                disabled={isDisabled}
+              >
+                {option}
+              </Button>
             </ToggleGroup.Item>
           ))}
         </ToggleGroup.Root>

From 717ffcfb6ab0f5acfc82d8dfeae88efbbbc48bec Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Mon, 18 Nov 2024 17:08:23 -0800
Subject: [PATCH 04/11] fiix gap, update styling

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index e24ac9063fd..13eb48799a9 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -12,12 +12,12 @@ export type ToggleButtonGroupProps = {
   value: string;
   size: ToggleButtonGroupSize;
   isDisabled?: boolean;
-  icon?: IconName;
+  icons?: (IconName | undefined)[];
   onValueChange: (value: string) => void;
 };
 
 export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
-  ({ options, value, size, isDisabled, icon, onValueChange }, ref) => {
+  ({ options, value, size, isDisabled, icons, onValueChange }, ref) => {
     const handleValueChange = (newValue: string) => {
         if (newValue !== value) {
           onValueChange(newValue);
@@ -29,27 +29,31 @@ export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGr
           type="single"
           value={value}
           onValueChange={handleValueChange}
-          className="flex space-x-2"
+          className="flex gap-[1px] my-16"
           ref={ref}
         >
-          {options.map((option) => (
+          {options.map((option, index) => (
             <ToggleGroup.Item
               key={option}
-              value={option}>
-                <Button
-                icon={icon}
+              value={option}
+              active={value === option}
+              disabled={isDisabled}
+            >
+              <Button
+                icon={icons?.[index]}
                 className={twMerge(
-                "inline-flex items-center justify-center whitespace-nowrap font-['Source_Sans_Pro'] font-semibold gap-[1px] my-10", // TODO: don't use my-10 here
+                "flex justify-center items-center",
                   size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
                   size === 'medium' && 'px-10 py-4 text-base leading-normal',
                   size === 'large' && 'px-12 py-8 text-base leading-normal',
                   isDisabled && 'pointer-events-none opacity-35',
-                  value === option ? 'bg-[#a9edf2]/50 text-[#038194] hover:bg-[#a9edf2]/50]' : 'bg-[#0d0f12]/5 text-[#565c66] hover:text-[#0d0f12] hover:bg-[#0d0f12]/10',
+                  value === option 
+                    ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]' 
+                    : 'bg-oblivion/5 text-[#565c66] hover:text-[#0d0f12] hover:bg-moonbeam/[0.05]',
                   'first:rounded-l-sm', // First button rounded left
-                  'last:rounded-r-sm' // Last button rounded right
+                  'last:rounded-r-sm', // Last button rounded right
+                  'gap-3'
                 )}
-                active={value === option}
-                disabled={isDisabled}
               >
                 {option}
               </Button>

From 44b6b9ef910362f82141c163f7d4a878e75b3a4b Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Tue, 19 Nov 2024 19:55:39 -0800
Subject: [PATCH 05/11] add error handling, fix styling

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 103 +++++++++---------
 .../components/ToggleButtonGroup/types.tsx    |   3 +-
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 13eb48799a9..435a842a06b 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import React from 'react';
+import {twMerge} from 'tailwind-merge';
 
-import {Icon, IconName} from '../Icon';
 import {Button} from '../Button';
+import {IconName} from '../Icon';
 import {Tailwind} from '../Tailwind';
 import {ToggleButtonGroupSize} from './types';
 
@@ -12,57 +12,58 @@ export type ToggleButtonGroupProps = {
   value: string;
   size: ToggleButtonGroupSize;
   isDisabled?: boolean;
-  icons?: (IconName | undefined)[];
+  icons?: Array<IconName | undefined>;
   onValueChange: (value: string) => void;
 };
 
-export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
-  ({ options, value, size, isDisabled, icons, onValueChange }, ref) => {
-    const handleValueChange = (newValue: string) => {
-        if (newValue !== value) {
-          onValueChange(newValue);
-        }
-      };
-    return (
-      <Tailwind>
-        <ToggleGroup.Root
-          type="single"
-          value={value}
-          onValueChange={handleValueChange}
-          className="flex gap-[1px] my-16"
-          ref={ref}
-        >
-          {options.map((option, index) => (
-            <ToggleGroup.Item
-              key={option}
-              value={option}
-              active={value === option}
-              disabled={isDisabled}
-            >
-              <Button
-                icon={icons?.[index]}
-                className={twMerge(
-                "flex justify-center items-center",
-                  size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
-                  size === 'medium' && 'px-10 py-4 text-base leading-normal',
-                  size === 'large' && 'px-12 py-8 text-base leading-normal',
-                  isDisabled && 'pointer-events-none opacity-35',
-                  value === option 
-                    ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]' 
-                    : 'bg-oblivion/5 text-[#565c66] hover:text-[#0d0f12] hover:bg-moonbeam/[0.05]',
-                  'first:rounded-l-sm', // First button rounded left
-                  'last:rounded-r-sm', // Last button rounded right
-                  'gap-3'
-                )}
-              >
-                {option}
-              </Button>
-            </ToggleGroup.Item>
-          ))}
-        </ToggleGroup.Root>
-      </Tailwind>
-    );
+export const ToggleButtonGroup = React.forwardRef<
+  HTMLDivElement,
+  ToggleButtonGroupProps
+>(({options, value, size, isDisabled = false, icons, onValueChange}, ref) => {
+  if (options.length < 2) {
+    console.error('ToggleButtonGroup requires at least two options.');
   }
-);
+
+  const handleValueChange = (newValue: string) => {
+    if (newValue !== value) {
+      onValueChange(newValue);
+    }
+  };
+  return (
+    <Tailwind>
+      <ToggleGroup.Root
+        type="single"
+        value={value}
+        onValueChange={handleValueChange}
+        className="flex gap-px"
+        ref={ref}>
+        {options.map((option, index) => (
+          <ToggleGroup.Item
+            key={option}
+            value={option}
+            active={value === option}
+            disabled={isDisabled}>
+            <Button
+              icon={icons?.[index]}
+              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
+                  ? '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}
+            </Button>
+          </ToggleGroup.Item>
+        ))}
+      </ToggleGroup.Root>
+    </Tailwind>
+  );
+});
 
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
index 454fed479ee..977002f9256 100644
--- a/weave-js/src/components/ToggleButtonGroup/types.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/types.tsx
@@ -3,4 +3,5 @@ export const ToggleButtonGroupSizes = {
   Medium: 'medium',
   Large: 'large',
 } as const;
-export type ToggleButtonGroupSize = (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];
+export type ToggleButtonGroupSize =
+  (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];

From 1027fddb3d3948ed37ae349a3b57c1d272585c73 Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Wed, 20 Nov 2024 11:40:20 -0800
Subject: [PATCH 06/11] yarn lock for toggle

---
 weave-js/package.json                         |   1 +
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   |   3 +-
 weave-js/yarn.lock                            | 105 ++++++++++++++++++
 3 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/weave-js/package.json b/weave-js/package.json
index 96647af8cab..cb57125143a 100644
--- a/weave-js/package.json
+++ b/weave-js/package.json
@@ -48,6 +48,7 @@
     "@radix-ui/react-slider": "^1.0.4",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@segment/analytics.js-core": "^4.1.11",
     "@segment/analytics.js-integration-segmentio": "^4.4.7",
diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 435a842a06b..eaa563c452f 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -32,7 +32,7 @@ export const ToggleButtonGroup = React.forwardRef<
   return (
     <Tailwind>
       <ToggleGroup.Root
-        type="single"
+        type="single" // supports single selection only
         value={value}
         onValueChange={handleValueChange}
         className="flex gap-px"
@@ -41,7 +41,6 @@ export const ToggleButtonGroup = React.forwardRef<
           <ToggleGroup.Item
             key={option}
             value={option}
-            active={value === option}
             disabled={isDisabled}>
             <Button
               icon={icons?.[index]}
diff --git a/weave-js/yarn.lock b/weave-js/yarn.lock
index 553ae08d00d..c7f9379e32a 100644
--- a/weave-js/yarn.lock
+++ b/weave-js/yarn.lock
@@ -3247,6 +3247,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@@ -3281,6 +3286,16 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-collection@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
+  integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -3288,6 +3303,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
@@ -3295,6 +3315,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
+  integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
+
 "@radix-ui/react-dialog@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
@@ -3323,6 +3348,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
+
 "@radix-ui/react-dismissable-layer@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
@@ -3374,6 +3404,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-menu@2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"
@@ -3441,6 +3478,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-primitive@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-radio-group@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz#3197f5dcce143bcbf961471bf89320735c0212d3"
@@ -3474,6 +3518,21 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-roving-focus@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
+  integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-slider@^1.0.4":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
@@ -3500,6 +3559,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
@@ -3529,6 +3595,28 @@
     "@radix-ui/react-roving-focus" "1.0.4"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-toggle-group@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.0.tgz#28714c4d1ff4961a8fd259b1feef58b4cac92f80"
+  integrity sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-toggle" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
+"@radix-ui/react-toggle@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz#1f7697b82917019330a16c6f96f649f46b4606cf"
+  integrity sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-tooltip@^1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
@@ -3555,6 +3643,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
 "@radix-ui/react-use-controllable-state@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
@@ -3563,6 +3656,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@@ -3578,6 +3678,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@radix-ui/react-use-previous@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"

From 627e342b437e100326d185067a1f07a3f254797b Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Wed, 20 Nov 2024 13:04:18 -0800
Subject: [PATCH 07/11] lint

---
 .../src/components/ToggleButtonGroup/ToggleButtonGroup.tsx   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index eaa563c452f..9d61418a396 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -38,10 +38,7 @@ export const ToggleButtonGroup = React.forwardRef<
         className="flex gap-px"
         ref={ref}>
         {options.map((option, index) => (
-          <ToggleGroup.Item
-            key={option}
-            value={option}
-            disabled={isDisabled}>
+          <ToggleGroup.Item key={option} value={option} disabled={isDisabled}>
             <Button
               icon={icons?.[index]}
               size={size}

From 6be54daf6679685738192b0fcbd9d146e9436e08 Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Wed, 20 Nov 2024 14:48:54 -0800
Subject: [PATCH 08/11] merge label and icon into single type, remove
 console.error

---
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 28 +++++++++++++------
 .../components/ToggleButtonGroup/types.tsx    | 13 ++++-----
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 9d61418a396..e81c9b93ab6 100644
--- 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
index 977002f9256..2a79660fbd8 100644
--- 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;

From afaef095c7251019a48fa476310513d0ee60e16f Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Wed, 20 Nov 2024 16:39:58 -0800
Subject: [PATCH 09/11] remove type ToggleButtonGroupSize

---
 .../src/components/ToggleButtonGroup/ToggleButtonGroup.tsx    | 4 ++--
 weave-js/src/components/ToggleButtonGroup/types.tsx           | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index e81c9b93ab6..6d3f7361640 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -5,7 +5,7 @@ import {twMerge} from 'tailwind-merge';
 import {Button} from '../Button';
 import {IconName} from '../Icon';
 import {Tailwind} from '../Tailwind';
-import {ToggleButtonGroupSize} from './types';
+import {ToggleButtonGroupSizes} from './types';
 
 export type ToggleOption = {
   label: string;
@@ -15,7 +15,7 @@ export type ToggleOption = {
 export type ToggleButtonGroupProps = {
   options: ToggleOption[];
   value: string;
-  size: ToggleButtonGroupSize;
+  size: ToggleButtonGroupSizes;
   isDisabled?: boolean;
   onValueChange: (value: string) => void;
 };
diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
index 2a79660fbd8..f58c669454f 100644
--- a/weave-js/src/components/ToggleButtonGroup/types.tsx
+++ b/weave-js/src/components/ToggleButtonGroup/types.tsx
@@ -3,4 +3,3 @@ export enum ToggleButtonGroupSizes {
   medium = 'medium',
   large = 'large',
 }
-export type ToggleButtonGroupSize = keyof typeof ToggleButtonGroupSizes;

From 428c80b74d3f8123b21b4a1345f46d3636a7ac87 Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Thu, 21 Nov 2024 20:05:07 -0800
Subject: [PATCH 10/11] remove barrel files, use ButtonSize instead of
 ToggleButtonGroupSizes

---
 .../ToggleButtonGroup.tsx                     | 29 +++++++++++--------
 .../components/ToggleButtonGroup/index.tsx    |  2 --
 .../components/ToggleButtonGroup/types.tsx    |  5 ----
 3 files changed, 17 insertions(+), 19 deletions(-)
 rename weave-js/src/components/{ToggleButtonGroup => }/ToggleButtonGroup.tsx (77%)
 delete mode 100644 weave-js/src/components/ToggleButtonGroup/index.tsx
 delete mode 100644 weave-js/src/components/ToggleButtonGroup/types.tsx

diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup.tsx
similarity index 77%
rename from weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
rename to weave-js/src/components/ToggleButtonGroup.tsx
index 6d3f7361640..45fc33846ec 100644
--- a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup.tsx
@@ -2,20 +2,19 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import React from 'react';
 import {twMerge} from 'tailwind-merge';
 
-import {Button} from '../Button';
-import {IconName} from '../Icon';
-import {Tailwind} from '../Tailwind';
-import {ToggleButtonGroupSizes} from './types';
+import {Button, ButtonSize} from './Button';
+import {IconName} from './Icon';
+import {Tailwind} from './Tailwind';
 
 export type ToggleOption = {
-  label: string;
+  value: string;
   icon?: IconName;
 };
 
 export type ToggleButtonGroupProps = {
   options: ToggleOption[];
   value: string;
-  size: ToggleButtonGroupSizes;
+  size: ButtonSize;
   isDisabled?: boolean;
   onValueChange: (value: string) => void;
 };
@@ -31,6 +30,12 @@ export const ToggleButtonGroup = React.forwardRef<
     return null; // Do not render if there are fewer than two options
   }
 
+  if (!options.some(option => option.value === value)) {
+    console.warn(
+      `Warning: The provided value "${value}" is not one of the options.`
+    );
+  }
+
   const handleValueChange = (newValue: string) => {
     if (newValue !== value) {
       onValueChange(newValue);
@@ -44,11 +49,11 @@ export const ToggleButtonGroup = React.forwardRef<
         onValueChange={handleValueChange}
         className="flex gap-px"
         ref={ref}>
-        {options.map(({label, icon}) => (
+        {options.map(({value: optionValue, icon}) => (
           <ToggleGroup.Item
-            key={label}
-            value={label}
-            disabled={isDisabled || value === label}>
+            key={optionValue}
+            value={optionValue}
+            disabled={isDisabled || value === optionValue}>
             <Button
               icon={icon}
               size={size}
@@ -57,13 +62,13 @@ export const ToggleButtonGroup = React.forwardRef<
                 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 === label
+                value === optionValue
                   ? '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
               )}>
-              {label}
+              {optionValue}
             </Button>
           </ToggleGroup.Item>
         ))}
diff --git a/weave-js/src/components/ToggleButtonGroup/index.tsx b/weave-js/src/components/ToggleButtonGroup/index.tsx
deleted file mode 100644
index 3e1c860a4be..00000000000
--- a/weave-js/src/components/ToggleButtonGroup/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ToggleButtonGroup';
-export * from './types';
diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
deleted file mode 100644
index f58c669454f..00000000000
--- a/weave-js/src/components/ToggleButtonGroup/types.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum ToggleButtonGroupSizes {
-  small = 'small',
-  medium = 'medium',
-  large = 'large',
-}

From c0f0b6aad1d9e35e322639a7d9ac7f5a99c7b6e6 Mon Sep 17 00:00:00 2001
From: Mollie Anderson <mollie.anderson@wandb.com>
Date: Fri, 22 Nov 2024 09:58:38 -0800
Subject: [PATCH 11/11] update padding

---
 weave-js/src/components/ToggleButtonGroup.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/weave-js/src/components/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup.tsx
index 45fc33846ec..65b2c538975 100644
--- a/weave-js/src/components/ToggleButtonGroup.tsx
+++ b/weave-js/src/components/ToggleButtonGroup.tsx
@@ -58,9 +58,14 @@ export const ToggleButtonGroup = React.forwardRef<
               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',
+                size === 'small' &&
+                  (icon ? 'gap-4 px-4 py-3 text-sm' : 'px-8 py-3 text-sm'),
+                size === 'medium' &&
+                  (icon ? 'gap-5 px-7 py-4 text-base' : 'px-10 py-4 text-base'),
+                size === 'large' &&
+                  (icon
+                    ? 'gap-6 px-10 py-8 text-base'
+                    : 'px-12 py-8 text-base'),
                 isDisabled && 'pointer-events-none opacity-35',
                 value === optionValue
                   ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]'