From c906d65354836b8832b8947c154c880d02fd664c Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 18 May 2022 18:02:05 -0400
Subject: [PATCH 1/7] adds a draft for the SegmentedControl component docs

---
 docs/content/SegmentedControl.mdx | 190 ++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 docs/content/SegmentedControl.mdx

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
new file mode 100644
index 00000000000..1acde78853d
--- /dev/null
+++ b/docs/content/SegmentedControl.mdx
@@ -0,0 +1,190 @@
+---
+title: SegmentedControl
+status: Draft
+description: Used to select an option from a short list and immediately apply the selection
+---
+
+## Examples
+
+### Simple
+
+```jsx live drafts
+<SegmentedControl aria-label="File view">
+  <SegmentedControl.Item>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### With icons and labels
+
+```jsx live drafts
+<SegmentedControl aria-label="File view">
+  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### With icons only
+
+```jsx live drafts
+<SegmentedControl aria-label="File view">
+  <SegmentedControl.IconItem icon={EyeIcon} aria-label="Preview" />
+  <SegmentedControl.IconItem icon={FileCodeIcon} aria-label="Raw" />
+  <SegmentedControl.IconItem icon={PeopleIcon} aria-label="Blame" />
+</SegmentedControl>
+```
+
+### With labels hidden on smaller viewports
+
+```jsx live drafts
+<SegmentedControl aria-label="File view" hideLabels={{narrow: false, large: true}}>
+  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### Convert to a dropdown on smaller viewports
+
+```jsx live drafts
+<SegmentedControl aria-label="File view" asDropdown={{narrow: true, large: false}}>
+  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### Fill width of parent
+
+```jsx live drafts
+<SegmentedControl block aria-label="File view">
+  <SegmentedControl.Item>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### In a loading state
+
+```jsx live drafts
+<SegmentedControl loading aria-label="File view">
+  <SegmentedControl.Item>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### With a label and caption on the left
+
+```jsx live drafts
+<Box display="flex">
+  <Box flexGrow={1}>
+    <Text fontSize={2} fontWeight="bold" id="scLabel-vert" display="block">
+      File view
+    </Text>
+    <Text color="fg.subtle" fontSize={1} id="scCaption-vert" display="block">
+      Change the way the file is viewed
+    </Text>
+  </Box>
+  <SegmentedControl aria-labelledby="scLabel-vert" aria-describedby="scCaption-vert">
+    <SegmentedControl.Item>Preview</SegmentedControl.Item>
+    <SegmentedControl.Item>Raw</SegmentedControl.Item>
+    <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  </SegmentedControl>
+</Box>
+```
+
+### With a label above and caption below
+
+```jsx live drafts
+<FormControl>
+  <FormControl.Label id="scLabel-horiz">File view</FormControl.Label>
+  <SegmentedControl aria-labelledby="scLabel-horiz" aria-describedby="scCaption-horiz">
+    <SegmentedControl.Item>Preview</SegmentedControl.Item>
+    <SegmentedControl.Item>Raw</SegmentedControl.Item>
+    <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  </SegmentedControl>
+  <FormControl.Caption id="scCaption-horiz">Change the way the file is viewed</FormControl.Caption>
+</FormControl>
+```
+
+### With something besides the first option selected
+
+```jsx live drafts
+<SegmentedControl aria-label="File view">
+  <SegmentedControl.Item>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item selected>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+### With a selection change handler
+
+```jsx live drafts
+<SegmentedControl
+  aria-label="File view"
+  onChange={selectedIndex => {
+    alert(`Segment ${selectedIndex}`)
+  }}
+>
+  <SegmentedControl.Item>Preview</SegmentedControl.Item>
+  <SegmentedControl.Item>Raw</SegmentedControl.Item>
+  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+</SegmentedControl>
+```
+
+## Props
+
+### SegmentedControl
+
+<PropsTable>
+  <PropsTableRow name="aria-label" type="string" />
+  <PropsTableRow name="aria-labelledby" type="string" />
+  <PropsTableRow name="aria-describedby" type="string" />
+  <PropsTableRow name="block" type="boolean" description="Whether the control fills the width of its parent" />
+  <PropsTableRow name="loading" type="boolean" description="Whether the selected segment is being calculated" />
+  <PropsTableRow
+    name="onChange"
+    type="(selectedIndex?: number) => void"
+    description="The handler that gets called when a segment is selected"
+  />
+</PropsTable>
+
+### SegmentedControl.Item
+
+<PropsTable>
+  <PropsTableRow name="aria-label" type="string" />
+  <PropsTableRow name="leadingIcon" type="Component" description="The leading icon comes before item label" />
+  <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
+</PropsTable>
+
+### SegmentedControl.IconItem
+
+<PropsTable>
+  <PropsTableRow name="aria-label" type="string" />
+  <PropsTableRow name="icon" type="Component" description="The icon that represents the segmented control item" />
+  <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: false,
+    adaptsToThemes: false,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: false,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

From b8421bdf807eba090ea8d70eae61f8aa12c13645 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 19 May 2022 16:26:29 -0400
Subject: [PATCH 2/7] addresses first round of PR feedback

---
 docs/content/SegmentedControl.mdx | 62 +++++++++++++++----------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index 1acde78853d..f3b134ce3d7 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -10,9 +10,9 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Item>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -20,9 +20,9 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button leadingIcon={EyeIcon}>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -30,16 +30,16 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.IconItem icon={EyeIcon} aria-label="Preview" />
-  <SegmentedControl.IconItem icon={FileCodeIcon} aria-label="Raw" />
-  <SegmentedControl.IconItem icon={PeopleIcon} aria-label="Blame" />
+  <SegmentedControl.IconButton icon={EyeIcon} aria-label="Preview" />
+  <SegmentedControl.IconButton icon={FileCodeIcon} aria-label="Raw" />
+  <SegmentedControl.IconButton icon={PeopleIcon} aria-label="Blame" />
 </SegmentedControl>
 ```
 
 ### With labels hidden on smaller viewports
 
 ```jsx live drafts
-<SegmentedControl aria-label="File view" hideLabels={{narrow: false, large: true}}>
+<SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'none'}}>
   <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
   <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
   <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
@@ -49,7 +49,7 @@ description: Used to select an option from a short list and immediately apply th
 ### Convert to a dropdown on smaller viewports
 
 ```jsx live drafts
-<SegmentedControl aria-label="File view" asDropdown={{narrow: true, large: false}}>
+<SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'none'}}>
   <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
   <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
   <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
@@ -60,9 +60,9 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl block aria-label="File view">
-  <SegmentedControl.Item>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -70,9 +70,9 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl loading aria-label="File view">
-  <SegmentedControl.Item>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -89,9 +89,9 @@ description: Used to select an option from a short list and immediately apply th
     </Text>
   </Box>
   <SegmentedControl aria-labelledby="scLabel-vert" aria-describedby="scCaption-vert">
-    <SegmentedControl.Item>Preview</SegmentedControl.Item>
-    <SegmentedControl.Item>Raw</SegmentedControl.Item>
-    <SegmentedControl.Item>Blame</SegmentedControl.Item>
+    <SegmentedControl.Button>Preview</SegmentedControl.Button>
+    <SegmentedControl.Button>Raw</SegmentedControl.Button>
+    <SegmentedControl.Button>Blame</SegmentedControl.Button>
   </SegmentedControl>
 </Box>
 ```
@@ -102,9 +102,9 @@ description: Used to select an option from a short list and immediately apply th
 <FormControl>
   <FormControl.Label id="scLabel-horiz">File view</FormControl.Label>
   <SegmentedControl aria-labelledby="scLabel-horiz" aria-describedby="scCaption-horiz">
-    <SegmentedControl.Item>Preview</SegmentedControl.Item>
-    <SegmentedControl.Item>Raw</SegmentedControl.Item>
-    <SegmentedControl.Item>Blame</SegmentedControl.Item>
+    <SegmentedControl.Button>Preview</SegmentedControl.Button>
+    <SegmentedControl.Button>Raw</SegmentedControl.Button>
+    <SegmentedControl.Button>Blame</SegmentedControl.Button>
   </SegmentedControl>
   <FormControl.Caption id="scCaption-horiz">Change the way the file is viewed</FormControl.Caption>
 </FormControl>
@@ -114,9 +114,9 @@ description: Used to select an option from a short list and immediately apply th
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Item>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item selected>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -129,9 +129,9 @@ description: Used to select an option from a short list and immediately apply th
     alert(`Segment ${selectedIndex}`)
   }}
 >
-  <SegmentedControl.Item>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -152,7 +152,7 @@ description: Used to select an option from a short list and immediately apply th
   />
 </PropsTable>
 
-### SegmentedControl.Item
+### SegmentedControl.Button
 
 <PropsTable>
   <PropsTableRow name="aria-label" type="string" />
@@ -160,7 +160,7 @@ description: Used to select an option from a short list and immediately apply th
   <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
 </PropsTable>
 
-### SegmentedControl.IconItem
+### SegmentedControl.IconButton
 
 <PropsTable>
   <PropsTableRow name="aria-label" type="string" />

From c754dfd79eee47642a30390fb94af21fa8ecfabd Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Mon, 23 May 2022 12:21:13 -0400
Subject: [PATCH 3/7] changes 'block' prop name to 'fullWidth

---
 docs/content/SegmentedControl.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index f3b134ce3d7..d4f4bd0de96 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -59,7 +59,7 @@ description: Used to select an option from a short list and immediately apply th
 ### Fill width of parent
 
 ```jsx live drafts
-<SegmentedControl block aria-label="File view">
+<SegmentedControl fullWidth aria-label="File view">
   <SegmentedControl.Button>Preview</SegmentedControl.Button>
   <SegmentedControl.Button>Raw</SegmentedControl.Button>
   <SegmentedControl.Button>Blame</SegmentedControl.Button>
@@ -143,7 +143,7 @@ description: Used to select an option from a short list and immediately apply th
   <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="aria-labelledby" type="string" />
   <PropsTableRow name="aria-describedby" type="string" />
-  <PropsTableRow name="block" type="boolean" description="Whether the control fills the width of its parent" />
+  <PropsTableRow name="fullWidth" type="boolean" description="Whether the control fills the width of its parent" />
   <PropsTableRow name="loading" type="boolean" description="Whether the selected segment is being calculated" />
   <PropsTableRow
     name="onChange"

From 6edd979d098d65ebef4b2c42ce2ee75068fa612d Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 24 May 2022 10:57:07 -0400
Subject: [PATCH 4/7] Update docs/content/SegmentedControl.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 docs/content/SegmentedControl.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index d4f4bd0de96..c4f25fbaed8 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -1,7 +1,7 @@
 ---
 title: SegmentedControl
 status: Draft
-description: Used to select an option from a short list and immediately apply the selection
+description: Use a segmented control to let users select an option from a short list and immediately apply the selection
 ---
 
 ## Examples

From 266bce99d7ce971195a4bc826208f9a41e90e4fb Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 24 May 2022 10:57:15 -0400
Subject: [PATCH 5/7] Update docs/content/SegmentedControl.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 docs/content/SegmentedControl.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index c4f25fbaed8..4a7ea83aef8 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -4,6 +4,8 @@ status: Draft
 description: Use a segmented control to let users select an option from a short list and immediately apply the selection
 ---
 
+<Note variant="warning">Not implemented yet</Note>
+
 ## Examples
 
 ### Simple

From 07d1382008e1a29ea56fafb7b1561e09baaa1a51 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 24 May 2022 11:01:01 -0400
Subject: [PATCH 6/7] Update docs/content/SegmentedControl.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 docs/content/SegmentedControl.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index 4a7ea83aef8..2092235ce06 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -160,6 +160,8 @@ description: Use a segmented control to let users select an option from a short
   <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="leadingIcon" type="Component" description="The leading icon comes before item label" />
   <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
+  <PropsTableSxRow />
+  <PropsTableRefRow refType="HTMLButtonElement" />
 </PropsTable>
 
 ### SegmentedControl.IconButton

From 0272eaddcf1b4234a9187a932343d404396e802c Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 25 May 2022 12:29:53 -0400
Subject: [PATCH 7/7] addresses remainder of PR feedback

---
 docs/content/SegmentedControl.mdx | 47 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index 2092235ce06..4da191647e2 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -12,7 +12,7 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
   <SegmentedControl.Button>Raw</SegmentedControl.Button>
   <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
@@ -22,7 +22,9 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Button leadingIcon={EyeIcon}>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected leadingIcon={EyeIcon}>
+    Preview
+  </SegmentedControl.Button>
   <SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
   <SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
 </SegmentedControl>
@@ -32,7 +34,7 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.IconButton icon={EyeIcon} aria-label="Preview" />
+  <SegmentedControl.IconButton selected icon={EyeIcon} aria-label="Preview" />
   <SegmentedControl.IconButton icon={FileCodeIcon} aria-label="Raw" />
   <SegmentedControl.IconButton icon={PeopleIcon} aria-label="Blame" />
 </SegmentedControl>
@@ -42,9 +44,11 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view" variant={{narrow: 'hideLabels', regular: 'none'}}>
-  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button selected leadingIcon={EyeIcon}>
+    Preview
+  </SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -52,9 +56,11 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view" variant={{narrow: 'dropdown', regular: 'none'}}>
-  <SegmentedControl.Item leadingIcon={EyeIcon}>Preview</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Item>
-  <SegmentedControl.Item leadingIcon={PeopleIcon}>Blame</SegmentedControl.Item>
+  <SegmentedControl.Button selected leadingIcon={EyeIcon}>
+    Preview
+  </SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={FileCodeIcon}>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button leadingIcon={PeopleIcon}>Blame</SegmentedControl.Button>
 </SegmentedControl>
 ```
 
@@ -62,7 +68,7 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl fullWidth aria-label="File view">
-  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
   <SegmentedControl.Button>Raw</SegmentedControl.Button>
   <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
@@ -72,7 +78,7 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl loading aria-label="File view">
-  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
   <SegmentedControl.Button>Raw</SegmentedControl.Button>
   <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
@@ -91,7 +97,7 @@ description: Use a segmented control to let users select an option from a short
     </Text>
   </Box>
   <SegmentedControl aria-labelledby="scLabel-vert" aria-describedby="scCaption-vert">
-    <SegmentedControl.Button>Preview</SegmentedControl.Button>
+    <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
     <SegmentedControl.Button>Raw</SegmentedControl.Button>
     <SegmentedControl.Button>Blame</SegmentedControl.Button>
   </SegmentedControl>
@@ -104,7 +110,7 @@ description: Use a segmented control to let users select an option from a short
 <FormControl>
   <FormControl.Label id="scLabel-horiz">File view</FormControl.Label>
   <SegmentedControl aria-labelledby="scLabel-horiz" aria-describedby="scCaption-horiz">
-    <SegmentedControl.Button>Preview</SegmentedControl.Button>
+    <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
     <SegmentedControl.Button>Raw</SegmentedControl.Button>
     <SegmentedControl.Button>Blame</SegmentedControl.Button>
   </SegmentedControl>
@@ -116,7 +122,7 @@ description: Use a segmented control to let users select an option from a short
 
 ```jsx live drafts
 <SegmentedControl aria-label="File view">
-  <SegmentedControl.Button>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
   <SegmentedControl.Button selected>Raw</SegmentedControl.Button>
   <SegmentedControl.Button>Blame</SegmentedControl.Button>
 </SegmentedControl>
@@ -152,6 +158,17 @@ description: Use a segmented control to let users select an option from a short
     type="(selectedIndex?: number) => void"
     description="The handler that gets called when a segment is selected"
   />
+  <PropsTableRow
+    name="variant"
+    type="{
+      narrow?: 'hideLabels' | 'dropdown',
+      regular?: 'hideLabels' | 'dropdown',
+      wide?: 'hideLabels' | 'dropdown'
+    }"
+    description="Configure alternative ways to render the control when it gets rendered in tight spaces"
+  />
+  <PropsTableSxRow />
+  <PropsTableRefRow refType="HTMLDivElement" />
 </PropsTable>
 
 ### SegmentedControl.Button
@@ -170,6 +187,8 @@ description: Use a segmented control to let users select an option from a short
   <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="icon" type="Component" description="The icon that represents the segmented control item" />
   <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
+  <PropsTableSxRow />
+  <PropsTableRefRow refType="HTMLButtonElement" />
 </PropsTable>
 
 ## Status