From 750e7de5d4a8748d2ff350dcc32a5ce24835f8a8 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Wed, 26 Apr 2023 14:33:50 -0400
Subject: [PATCH] Update `ButtonGroup` examples

---
 .changeset/wild-walls-train.md                |  5 +++
 .../components/actions/button-group.md        |  5 ++-
 .../pages/examples/button-group-default.tsx   |  4 +-
 ...n-group-outline-with-segmented-buttons.tsx |  6 ++-
 ...n-group-pressed-with-segmented-buttons.tsx | 42 +++++++++++++++++++
 5 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/wild-walls-train.md
 create mode 100644 polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx

diff --git a/.changeset/wild-walls-train.md b/.changeset/wild-walls-train.md
new file mode 100644
index 00000000000..6d15f39badd
--- /dev/null
+++ b/.changeset/wild-walls-train.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Updated `ButtonGroup` examples to include `Pressed with segmented buttons`
diff --git a/polaris.shopify.com/content/components/actions/button-group.md b/polaris.shopify.com/content/components/actions/button-group.md
index 7015a586eb4..7df867963c9 100644
--- a/polaris.shopify.com/content/components/actions/button-group.md
+++ b/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
diff --git a/polaris.shopify.com/pages/examples/button-group-default.tsx b/polaris.shopify.com/pages/examples/button-group-default.tsx
index e8ba4162632..c9d3ddb95df 100644
--- a/polaris.shopify.com/pages/examples/button-group-default.tsx
+++ b/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);
diff --git a/polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx b/polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx
index dc38bafbb03..dad1b04188c 100644
--- a/polaris.shopify.com/pages/examples/button-group-outline-with-segmented-buttons.tsx
+++ b/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,
+);
diff --git a/polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx b/polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx
new file mode 100644
index 00000000000..06fa724454e
--- /dev/null
+++ b/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,
+);