From 877ab28604b14511b0cdf5b7ff1b766affc406bf Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:29:19 -0500
Subject: [PATCH 1/7] fix segmented control story

---
 .../s2/chromatic/SegmentedControl.stories.tsx    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
index 5375219e99c..97934fe279c 100644
--- a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
@@ -68,7 +68,7 @@ OnlyIcons.args = {
 };
 
 export const CustomWidth = (args: any) => (
-  <SegmentedControl {...args} styles={style({width: '[400px]'})}>
+  <SegmentedControl {...args}>
     <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
     <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
     <SegmentedControlItem id="guidelines">Guidelines</SegmentedControlItem>
@@ -79,3 +79,17 @@ export const CustomWidth = (args: any) => (
 CustomWidth.args = {
   'aria-label': 'Getting started'
 };
+
+export const Justified = (args: any) => (
+  <SegmentedControl {...args} styles={style({width: '[400px]'})}>
+    <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
+    <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
+    <SegmentedControlItem id="guidelines">Guidelines</SegmentedControlItem>
+    <SegmentedControlItem id="accessibility">Accessibility</SegmentedControlItem>
+  </SegmentedControl>
+);
+
+Justified.args = {
+  'aria-label': 'Getting started',
+  isJustified: true
+};

From 445107e996b3f98bb60f8bc67f6b40cf42cb77a3 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:44:13 -0500
Subject: [PATCH 2/7] add power set to toggle button chromatic story and update
 truncate example

---
 .../s2/chromatic/ToggleButton.stories.tsx     | 68 ++++++++++++++++---
 .../@react-spectrum/s2/chromatic/utils.tsx    |  3 +
 2 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
index eef57e30dab..fcb69b037cc 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
@@ -11,8 +11,12 @@
  */
 
 import {categorizeArgTypes, StaticColorDecorator} 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 {StaticColorProvider} from '../stories/utils';
+import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton} from '../src';
 
 const meta: Meta<typeof ToggleButton> = {
@@ -29,22 +33,66 @@ 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}}>
-      <ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
-      <ToggleButton {...args}>Press me</ToggleButton>
-      <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
+    <div style={{display: 'flex', gap: 8}}>
+      <ToggleButton {...args} styles={style({width: 40})}>Press me</ToggleButton>
+      <ToggleButton {...args} styles={style({width: 64})}><NewIcon /><Text>Press me</Text></ToggleButton>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/chromatic/utils.tsx b/packages/@react-spectrum/s2/chromatic/utils.tsx
index 7277b073641..645a8ecebc3 100644
--- a/packages/@react-spectrum/s2/chromatic/utils.tsx
+++ b/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;

From 726c72c14459be8f03c05841c6366489eacacea0 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:01:42 -0500
Subject: [PATCH 3/7] update flex shrink when in group

---
 .../s2/chromatic/ToggleButton.stories.tsx             |  7 ++++---
 packages/@react-spectrum/s2/src/ActionButton.tsx      | 11 ++++++++---
 packages/@react-spectrum/s2/src/ToggleButton.tsx      |  6 ++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
index fcb69b037cc..c2395f0a05f 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
@@ -90,9 +90,10 @@ export const IconOnly = {
 
 export const Truncate: StoryFn<typeof ToggleButton> = (args) => {
   return (
-    <div style={{display: 'flex', gap: 8}}>
-      <ToggleButton {...args} styles={style({width: 40})}>Press me</ToggleButton>
-      <ToggleButton {...args} styles={style({width: 64})}><NewIcon /><Text>Press me</Text></ToggleButton>
+    <div style={{display: 'flex', gap: 8, width: 160}}>
+      <ToggleButton aria-label="Press me" {...args}><NewIcon /></ToggleButton>
+      <ToggleButton {...args}>Press me</ToggleButton>
+      <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
     </div>
   );
 };
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index d1ff4ee609a..0fb37a129ef 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/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
   },
@@ -256,6 +259,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
     size = props.size || 'M',
     isDisabled = props.isDisabled
   } = useSlottedContext(ActionButtonGroupContext) || {};
+  let ctx = !!useContext(ActionButtonGroupContext);
 
   return (
     <RACButton
@@ -272,7 +276,8 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
         isQuiet,
         density,
         isJustified,
-        orientation
+        orientation,
+        isInGroup: ctx
       }, props.styles)}>
       <Provider
         values={[
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index df2fee4ff3b..2cdab15c042 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -13,7 +13,7 @@
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode} from 'react';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -49,6 +49,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
     size = props.size || 'M',
     isDisabled = props.isDisabled
   } = useSlottedContext(ToggleButtonGroupContext) || {};
+  let ctx = !!useContext(ToggleButtonGroupContext);
 
   return (
     <RACToggleButton
@@ -65,7 +66,8 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
         isPending: false,
         density,
         isJustified,
-        orientation
+        orientation,
+        isInGroup: ctx
       }, props.styles)}>
       <Provider
         values={[

From 6066e90d02c1c4732d56b3391ab01cbd0993dfe8 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:15:49 -0500
Subject: [PATCH 4/7] add ToggleButtonGroup and ActionButtonGroup to chromatic

---
 .../chromatic/ActionButtonGroup.stories.tsx   | 71 +++++++++++++++++++
 .../chromatic/ToggleButtonGroup.stories.tsx   | 71 +++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx

diff --git a/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
new file mode 100644
index 00000000000..c8901bdef96
--- /dev/null
+++ b/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 {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' };
+import {Text, ActionButton, ActionButtonGroup} from '../src';
+
+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>
+);
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButtonGroup.stories.tsx
new file mode 100644
index 00000000000..11bf1e1c409
--- /dev/null
+++ b/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>
+);

From 14fdab2bb0031d5c63e0e2eab658443648cf5c55 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:21:59 -0500
Subject: [PATCH 5/7] fix lint

---
 .../s2/chromatic/ActionButtonGroup.stories.tsx               | 4 ++--
 .../@react-spectrum/s2/chromatic/ToggleButton.stories.tsx    | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
index c8901bdef96..ae73fbe1ae8 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx
@@ -10,13 +10,13 @@
  * 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' };
-import {Text, ActionButton, ActionButtonGroup} from '../src';
 
 const meta: Meta<typeof ActionButtonGroup> = {
   component: ActionButtonGroup,
@@ -68,4 +68,4 @@ export const Justified: StoryFn<typeof ActionButtonGroup> = (args) => (
     <ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
     <ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
   </ActionButtonGroup>
-);
\ No newline at end of file
+);
diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
index c2395f0a05f..f24137fe20b 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
@@ -10,12 +10,11 @@
  * 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 {StaticColorProvider} from '../stories/utils';
 import {style} from '../style' with { type: 'macro' };
 import {Text, ToggleButton} from '../src';
 
@@ -96,4 +95,4 @@ export const Truncate: StoryFn<typeof ToggleButton> = (args) => {
       <ToggleButton {...args}><NewIcon /><Text>Press me</Text></ToggleButton>
     </div>
   );
-};
\ No newline at end of file
+};

From 3670d7367d356c8dcff7850d8b5ee7a91a3f46d0 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:56:11 -0500
Subject: [PATCH 6/7] update chromatic story name

---
 .../s2/chromatic/SegmentedControl.stories.tsx   | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
index 97934fe279c..b80bac78719 100644
--- a/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx
@@ -67,20 +67,7 @@ OnlyIcons.args = {
   'aria-label': 'Text alignment'
 };
 
-export const CustomWidth = (args: any) => (
-  <SegmentedControl {...args}>
-    <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
-    <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
-    <SegmentedControlItem id="guidelines">Guidelines</SegmentedControlItem>
-    <SegmentedControlItem id="accessibility">Accessibility</SegmentedControlItem>
-  </SegmentedControl>
-);
-
-CustomWidth.args = {
-  'aria-label': 'Getting started'
-};
-
-export const Justified = (args: any) => (
+export const CustomWidthJustified = (args: any) => (
   <SegmentedControl {...args} styles={style({width: '[400px]'})}>
     <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
     <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
@@ -89,7 +76,7 @@ export const Justified = (args: any) => (
   </SegmentedControl>
 );
 
-Justified.args = {
+CustomWidthJustified.args = {
   'aria-label': 'Getting started',
   isJustified: true
 };

From 2c7384afcbe4543e28ced61f4804775fa2e02e1e Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:26:53 -0500
Subject: [PATCH 7/7] update

---
 packages/@react-spectrum/s2/src/ActionButton.tsx | 7 ++++---
 packages/@react-spectrum/s2/src/ToggleButton.tsx | 9 +++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 0fb37a129ef..f904ecac230 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -250,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,
@@ -258,8 +260,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
     isQuiet = props.isQuiet,
     size = props.size || 'M',
     isDisabled = props.isDisabled
-  } = useSlottedContext(ActionButtonGroupContext) || {};
-  let ctx = !!useContext(ActionButtonGroupContext);
+  } = ctx || {};
 
   return (
     <RACButton
@@ -277,7 +278,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
         density,
         isJustified,
         orientation,
-        isInGroup: ctx
+        isInGroup
       }, props.styles)}>
       <Provider
         values={[
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index 2cdab15c042..547264e529e 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -13,7 +13,7 @@
 import {ActionButtonStyleProps, btnStyles} from './ActionButton';
 import {centerBaseline} from './CenterBaseline';
 import {ContextValue, Provider, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps, useSlottedContext} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {createContext, forwardRef, ReactNode} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -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,8 +50,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
     isEmphasized = props.isEmphasized,
     size = props.size || 'M',
     isDisabled = props.isDisabled
-  } = useSlottedContext(ToggleButtonGroupContext) || {};
-  let ctx = !!useContext(ToggleButtonGroupContext);
+  } = ctx || {};
 
   return (
     <RACToggleButton
@@ -67,7 +68,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
         density,
         isJustified,
         orientation,
-        isInGroup: ctx
+        isInGroup
       }, props.styles)}>
       <Provider
         values={[