chore: fix chromatic stories + add ToggleButtonGroup and ActionButtonGroup to chromatic

packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton, ActionButtonGroup, Text} from '../src';
+import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
+import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
+import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg';
+import type {Meta, StoryFn} from '@storybook/react';
+import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
+import {style} from '../style' with { type: 'macro' };
+
+const meta: Meta<typeof ActionButtonGroup> = {
+  component: ActionButtonGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [StaticColorDecorator],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
+  },
+  title: 'S2 Chromatic/ActionButtonGroup'
+};
+
+export default meta;
+
+let justifiedStyle = style({
+  width: {
+    default: '[500px]',
+    orientation: {
+      vertical: 'auto'
+    }
+  },
+  height: {
+    orientation: {
+      vertical: '[500px]'
+    }
+  }
+});
+
+export const Example: StoryFn<typeof ActionButtonGroup> = (args) => (
+  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+  </ActionButtonGroup>
+);
+
+export const IconOnly: StoryFn<typeof ActionButtonGroup> = (args) => (
+  <ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
+    <ActionButton aria-label="Cut"><Cut /></ActionButton>
+    <ActionButton aria-label="Copy"><Copy /></ActionButton>
+    <ActionButton aria-label="Paste"><Paste /></ActionButton>
+  </ActionButtonGroup>
+);
+
+export const Justified: StoryFn<typeof ActionButtonGroup> = (args) => (
+  <ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
+    <ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
+    <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
+    <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
+  </ActionButtonGroup>
+);

packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx

@@ -67,7 +67,7 @@ OnlyIcons.args = {
   'aria-label': 'Text alignment'
 };
 
-export const CustomWidth = (args: any) => (
+export const CustomWidthJustified = (args: any) => (
   <SegmentedControl {...args} styles={style({width: '[400px]'})}>
     <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
     <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
@@ -76,6 +76,7 @@ export const CustomWidth = (args: any) => (
   </SegmentedControl>
 );
 
-CustomWidth.args = {
-  'aria-label': 'Getting started'
+CustomWidthJustified.args = {
+  'aria-label': 'Getting started',
+  isJustified: true
 };

packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx

@@ -10,9 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
+import {categorizeArgTypes, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
+import {generatePowerset} from '@react-spectrum/story-utils';
 import type {Meta, StoryFn} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {shortName} from './utils';
+import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton} from '../src';
 
 const meta: Meta<typeof ToggleButton> = {
@@ -29,16 +32,61 @@ const meta: Meta<typeof ToggleButton> = {
 
 export default meta;
 
-export const Example: StoryFn<typeof ToggleButton> = (args) => {
+let states = [
+  {isQuiet: true},
+  {isDisabled: true},
+  {isEmphasized: true},
+  {isSelected: true},
+  {size: ['XS', 'S', 'M', 'L', 'XL']},
+  {staticColor: ['black', 'white']}
+];
+
+let combinations = generatePowerset(states);
+
+const Template = (args) => {
+  let {children, ...otherArgs} = args;
   return (
-    <div style={{display: 'flex', gap: 8}}>
-      <ToggleButton {...args}><NewIcon /></ToggleButton>
-      <ToggleButton {...args}>Press me</ToggleButton>
-      <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combinations.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        let button = <ToggleButton key={key} data-testid={fullComboName} {...otherArgs} {...c}>{children ? children : key}</ToggleButton>;
+        if (c.staticColor != null) {
+          return (
+            <StaticColorProvider staticColor={c.staticColor}>
+              {button}
+            </StaticColorProvider>
+          );
+        }
+
+        return button;
+      })}
     </div>
   );
 };
 
+export const Default = {
+  render: Template
+};
+
+export const WithIcon = {
+  render: Template,
+  args: {
+    children: <><NewIcon /><Text>Press me</Text></>
+  }
+};
+
+export const IconOnly = {
+  render: Template,
+  args: {
+    children: <NewIcon />
+  }
+};
+
 export const Truncate: StoryFn<typeof ToggleButton> = (args) => {
   return (
     <div style={{display: 'flex', gap: 8, width: 160}}>

packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
+import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
+import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg';
+import type {Meta, StoryFn} from '@storybook/react';
+import {style} from '../style' with { type: 'macro' };
+import {Text, ToggleButton, ToggleButtonGroup} from '../src';
+import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';
+
+const meta: Meta<typeof ToggleButtonGroup> = {
+  component: ToggleButtonGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [StaticColorDecorator],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
+  },
+  title: 'S2 Chromatic/ToggleButtonGroup'
+};
+
+export default meta;
+
+let justifiedStyle = style({
+  width: {
+    default: '[500px]',
+    orientation: {
+      vertical: 'auto'
+    }
+  },
+  height: {
+    orientation: {
+      vertical: '[500px]'
+    }
+  }
+});
+
+export const Example: StoryFn<typeof ToggleButtonGroup> = (args) => (
+  <ToggleButtonGroup {...args}>
+    <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
+    <ToggleButton id={2}><Italic /><Text slot="label">Italic</Text></ToggleButton>
+    <ToggleButton id={3}><Underline /><Text slot="label">Underline</Text></ToggleButton>
+  </ToggleButtonGroup>
+);
+
+export const IconOnly: StoryFn<typeof ToggleButtonGroup> = (args) => (
+  <ToggleButtonGroup {...args}>
+    <ToggleButton id={1} aria-label="Bold"><Bold /></ToggleButton>
+    <ToggleButton id={2} aria-label="Italic"><Italic /></ToggleButton>
+    <ToggleButton id={3} aria-label="Underline"><Underline /></ToggleButton>
+  </ToggleButtonGroup>
+);
+
+export const Justified: StoryFn<typeof ToggleButtonGroup> = (args) => (
+  <ToggleButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
+    <ToggleButton id={1}><Bold /><Text slot="label">Bold</Text></ToggleButton>
+    <ToggleButton id={2}><Italic /><Text slot="label">Italic</Text></ToggleButton>
+    <ToggleButton id={3}><Underline /><Text slot="label">Underline</Text></ToggleButton>
+  </ToggleButtonGroup>
+);

packages/@react-spectrum/s2/chromatic/utils.tsx

@@ -39,6 +39,9 @@ export function shortName(key, value) {
     case 'isRequired':
       returnVal = 'req';
       break;
+    case 'isSelected':
+      returnVal = 'selec';
+      break;
     case 'orientation':
       returnVal = `orien: ${value}`;
       break;

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -58,13 +58,16 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
 
 // These styles handle both ActionButton and ToggleButton
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
-export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps>({
+export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean}>({
   ...focusRing(),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   columnGap: 'text-to-visual',
-  flexShrink: 0,
+  flexShrink: {
+    default: 1,
+    isInGroup: 0
+  },
   flexGrow: {
     isJustified: 1
   },
@@ -247,6 +250,8 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
+  let ctx = useSlottedContext(ActionButtonGroupContext);
+  let isInGroup = !!ctx;
   let {
     density = 'regular',
     isJustified,
@@ -255,7 +260,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
     isQuiet = props.isQuiet,
     size = props.size || 'M',
     isDisabled = props.isDisabled
-  } = useSlottedContext(ActionButtonGroupContext) || {};
+  } = ctx || {};
 
   return (
     <RACButton
@@ -272,7 +277,8 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
         isQuiet,
         density,
         isJustified,
-        orientation
+        orientation,
+        isInGroup
       }, props.styles)}>
       <Provider
         values={[

packages/@react-spectrum/s2/src/ToggleButton.tsx

@@ -39,6 +39,8 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
+  let ctx = useSlottedContext(ToggleButtonGroupContext);
+  let isInGroup = !!ctx;
   let {
     density = 'regular',
     isJustified,
@@ -48,7 +50,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
     isEmphasized = props.isEmphasized,
     size = props.size || 'M',
     isDisabled = props.isDisabled
-  } = useSlottedContext(ToggleButtonGroupContext) || {};
+  } = ctx || {};
 
   return (
     <RACToggleButton
@@ -65,7 +67,8 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
         isPending: false,
         density,
         isJustified,
-        orientation
+        orientation,
+        isInGroup
       }, props.styles)}>
       <Provider
         values={[