feat(APP-3868): Update Toggle and ToggleGroup components to latest design spec (#586)

Author: thekidnamedkd

.changeset/smart-pillows-melt.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Update Toggle, ToggleGroup to latest design spec

src/core/components/toggles/toggle/toggle.tsx

@@ -22,7 +22,7 @@ export const Toggle: React.FC<IToggleProps> = (props) => {
     const { className, label, value, disabled, ...otherProps } = props;
 
     const toggleClasses = classNames(
-        'flex h-10 items-center rounded-[40px] border px-4 outline-hidden transition-all cursor-pointer focus-ring-primary', // Default
+        'flex h-8 md:h-10 items-center rounded-lg md:rounded-xl border px-3 md:px-4 outline-hidden transition-all cursor-pointer focus-ring-primary', // Default
         'data-[state=off]:enabled:border-neutral-100 data-[state=off]:enabled:bg-neutral-0 data-[state=off]:enabled:text-neutral-500 data-state-off:enabled:shadow-neutral-sm', // Default state
         'data-[state=off]:hover:enabled:border-neutral-200 data-[state=off]:hover:enabled:shadow-neutral', // Default hover state
         'data-[state=on]:enabled:border-primary-400 data-[state=on]:enabled:bg-neutral-0 data-[state=on]:enabled:text-primary-400 data-state-on:enabled:shadow-primary-sm', // Active state

src/core/components/toggles/toggleGroup/toggleGroup.stories.tsx

@@ -42,6 +42,34 @@ export const SpaceBetween: Story = {
     ),
 };
 
+/**
+ * Usage of the ToggleGroup component with many toggles showing wrapped behavior.
+ */
+export const Wrapped: Story = {
+    render: (props) => (
+        <ToggleGroup className="w-full" {...props}>
+            <Toggle value="default" label="Default" />
+            <Toggle value="optimistic" label="Optimistic" />
+            <Toggle value="timelock" label="Timelock" />
+            <Toggle value="active" label="Active" />
+            <Toggle value="inactive" label="Inactive" />
+            <Toggle value="pending" label="Pending" />
+            <Toggle value="red" label="Red" />
+            <Toggle value="blue" label="Blue" />
+            <Toggle value="green" label="Green" />
+            <Toggle value="circle" label="Circle" />
+            <Toggle value="square" label="Square" />
+            <Toggle value="triangle" label="Triangle" />
+            <Toggle value="desktop" label="Desktop" />
+            <Toggle value="tablet" label="Tablet" />
+            <Toggle value="mobile" label="Mobile" />
+            <Toggle value="car" label="Car" />
+            <Toggle value="train" label="Train" />
+            <Toggle value="bike" label="Bike" />
+        </ToggleGroup>
+    ),
+};
+
 /**
  * Controlled usage example of the ToggleGroup component.
  */

src/core/components/toggles/toggleGroup/toggleGroup.tsx

@@ -48,7 +48,7 @@ export const ToggleGroup = (props: IToggleGroupProps) => {
         ...otherProps
     } = props;
 
-    const classes = classNames(
+    const toggleGroupClasses = classNames(
         'flex flex-wrap',
         orientation === 'vertical' ? 'flex-col' : 'flex-row',
         { 'gap-2 md:gap-3': variant === 'fixed' },
@@ -60,7 +60,7 @@ export const ToggleGroup = (props: IToggleGroupProps) => {
         return (
             <RadixToggleGroup
                 type="multiple"
-                className={classes}
+                className={toggleGroupClasses}
                 value={value}
                 onValueChange={onChange}
                 defaultValue={defaultValue}
@@ -73,7 +73,7 @@ export const ToggleGroup = (props: IToggleGroupProps) => {
     return (
         <RadixToggleGroup
             type="single"
-            className={classes}
+            className={toggleGroupClasses}
             value={value}
             onValueChange={onChange}
             defaultValue={defaultValue}