[ButtonGroup] Update ButtonGroup documentation examples

.changeset/wild-walls-train.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Updated `ButtonGroup` examples to include `Pressed with segmented buttons`

polaris.shopify.com/content/components/actions/button-group.md

@@ -27,7 +27,10 @@ examples:
     description: Use to emphasize several buttons as a thematically-related set among other controls.
   - fileName: button-group-outline-with-segmented-buttons.tsx
     title: Outline with segmented buttons
-    description: Use to emphasize several buttons as a thematically-related set among other controls.
+    description: Use to emphasize several buttons as a thematically-related set against shaded or colorful backgrounds.
+  - fileName: button-group-pressed-with-segmented-buttons.tsx
+    title: Pressed with segmented buttons
+    description: Pressed buttons can be used in combination to create a toggle for other parts of the user interface.
 ---
 
 ## Best practices

polaris.shopify.com/pages/examples/button-group-default.tsx

@@ -2,7 +2,7 @@ import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function ButtonGroupExample() {
+function ButtonGroupDefaultExample() {
   return (
     <ButtonGroup>
       <Button>Cancel</Button>
@@ -11,4 +11,4 @@ function ButtonGroupExample() {
   );
 }
 
-export default withPolarisExample(ButtonGroupExample);
+export default withPolarisExample(ButtonGroupDefaultExample);

polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx

@@ -2,7 +2,7 @@ import {ButtonGroup, Button} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function ButtonGroupExample() {
+function ButtonGroupOutlineWithSegmentedButtonsExample() {
   return (
     <ButtonGroup segmented>
       <Button outline>Bold</Button>
@@ -12,4 +12,6 @@ function ButtonGroupExample() {
   );
 }
 
-export default withPolarisExample(ButtonGroupExample);
+export default withPolarisExample(
+  ButtonGroupOutlineWithSegmentedButtonsExample,
+);

polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx

@@ -0,0 +1,42 @@
+import {ButtonGroup, Button} from '@shopify/polaris';
+import {useCallback, useState} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ButtonGroupPressedWithSegmentedButtonsExample() {
+  const [activeButtonIndex, setActiveButtonIndex] = useState(0);
+
+  const handleButtonClick = useCallback(
+    (index: number) => {
+      if (activeButtonIndex === index) return;
+      setActiveButtonIndex(index);
+    },
+    [activeButtonIndex],
+  );
+
+  return (
+    <ButtonGroup segmented>
+      <Button
+        pressed={activeButtonIndex === 0}
+        onClick={() => handleButtonClick(0)}
+      >
+        Bold
+      </Button>
+      <Button
+        pressed={activeButtonIndex === 1}
+        onClick={() => handleButtonClick(1)}
+      >
+        Italic
+      </Button>
+      <Button
+        pressed={activeButtonIndex === 2}
+        onClick={() => handleButtonClick(2)}
+      >
+        Underline
+      </Button>
+    </ButtonGroup>
+  );
+}
+
+export default withPolarisExample(
+  ButtonGroupPressedWithSegmentedButtonsExample,
+);