From a682735f6e0a112718e5d4ed619216fc89e5980f Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 16 May 2022 16:30:59 -0700
Subject: [PATCH] Fix ButtonGroup component and add docs (#2054)

* Make ButtonGroup display inline-flex

* Create documentation page for ButtonGroup

* Update Button docs

* Create six-mirrors-call.md

* Update tests

* Update stories

* Update six-mirrors-call.md
---
 .changeset/six-mirrors-call.md                |  5 ++
 docs/content/Button.mdx                       | 18 ++---
 docs/content/ButtonGroup.mdx                  | 65 +++++++++++++++++++
 .../src/@primer/gatsby-theme-doctocat/nav.yml |  2 +
 src/ButtonGroup.tsx                           |  8 +--
 .../__snapshots__/Button.test.tsx.snap        |  6 +-
 src/stories/Overlay.stories.tsx               |  4 +-
 src/stories/deprecated/Button.stories.tsx     |  2 +-
 8 files changed, 90 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/six-mirrors-call.md
 create mode 100644 docs/content/ButtonGroup.mdx

diff --git a/.changeset/six-mirrors-call.md b/.changeset/six-mirrors-call.md
new file mode 100644
index 00000000000..27fe11af10b
--- /dev/null
+++ b/.changeset/six-mirrors-call.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fixes layout bug with ButtonGroup by changing the `display` property from `inline-block` to `inline-flex`
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index eeb8c234b7b..02ada6b6751 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -7,16 +7,12 @@ storybook: '/react/storybook?path=/story/composite-components-button'
 description: Use button for the main actions on a page or form.
 ---
 
-import {Button, IconButton, LinkButton} from '@primer/react'
-
-## Usage
-
-### Installation
-
 ```js
 import {Button} from '@primer/react'
 ```
 
+## Examples
+
 ### Default button
 
 This is the default variant for the `Button` component.
@@ -122,7 +118,7 @@ Here's an example of a block button which takes 100% of available width. Checkou
 <Button sx={{width: '100%'}}>Block</Button>
 ```
 
-## API reference
+## Props
 
 Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
 
@@ -165,7 +161,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
   <PropsTableSxRow />
 </PropsTable>
 
-## Component status
+## Status
 
 <ComponentChecklist
   items={{
@@ -174,7 +170,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
     adaptsToThemes: true,
     adaptsToScreenSizes: true,
     fullTestCoverage: true,
-    usedInProduction: false,
+    usedInProduction: true,
     usageExamplesDocumented: true,
     designReviewed: false,
     a11yReviewed: false,
@@ -184,3 +180,7 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
     hasFigmaComponent: false
   }}
 />
+
+## Related components
+
+- [ButtonGroup](/ButtonGroup)
diff --git a/docs/content/ButtonGroup.mdx b/docs/content/ButtonGroup.mdx
new file mode 100644
index 00000000000..9ab3888998f
--- /dev/null
+++ b/docs/content/ButtonGroup.mdx
@@ -0,0 +1,65 @@
+---
+title: ButtonGroup
+componentId: button_group
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/ButtonGroup
+---
+
+```js
+import {ButtonGroup} from '@primer/react'
+```
+
+## Examples
+
+### Default
+
+```jsx live
+<ButtonGroup>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</ButtonGroup>
+```
+
+### With icon buttons
+
+```jsx live
+<ButtonGroup>
+  <IconButton aria-label="Zoom out" icon={DashIcon} />
+  <IconButton aria-label="Zoom in" icon={PlusIcon} />
+</ButtonGroup>
+```
+
+## Props
+
+### ButtonGroup
+
+<PropsTable>
+  <PropsTableSxRow />
+  <PropsTableRefRow refType="HTMLDivElement" />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>
+
+## Related components
+
+- [Button](/Button)
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 1f096be7ecc..d9a9d094afb 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -55,6 +55,8 @@
       url: /Breadcrumbs
     - title: Button
       url: /Button
+    - title: ButtonGroup
+      url: /ButtonGroup
     - title: Checkbox
       url: /Checkbox
     - title: CheckboxGroup
diff --git a/src/ButtonGroup.tsx b/src/ButtonGroup.tsx
index fa49418dd8e..569c7af1137 100644
--- a/src/ButtonGroup.tsx
+++ b/src/ButtonGroup.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components'
-import Box from './Box'
 import {get} from './constants'
 import sx from './sx'
 import {ComponentProps} from './utils/types'
 
-const ButtonGroup = styled(Box)`
+const ButtonGroup = styled.div`
+  display: inline-flex;
   vertical-align: middle;
 
   && > * {
@@ -47,9 +47,5 @@ const ButtonGroup = styled(Box)`
   ${sx};
 `
 
-ButtonGroup.defaultProps = {
-  display: 'inline-block'
-}
-
 export type ButtonGroupProps = ComponentProps<typeof ButtonGroup>
 export default ButtonGroup
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index db323e63e09..d02717b4293 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -298,7 +298,10 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 
 exports[`ButtonGroup renders consistently 1`] = `
 .c0 {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   vertical-align: middle;
 }
 
@@ -344,7 +347,6 @@ exports[`ButtonGroup renders consistently 1`] = `
 
 <div
   className="c0"
-  display="inline-block"
 />
 `;
 
diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx
index 5c2ac9e50aa..b34a54732fc 100644
--- a/src/stories/Overlay.stories.tsx
+++ b/src/stories/Overlay.stories.tsx
@@ -249,7 +249,7 @@ export const NestedOverlays = () => {
       <div>
         primary overlay open: {String(listOverlayOpen)}, secondary overlay open: {String(createListOverlayOpen)}
       </div>
-      <ButtonGroup display="block" my={2}>
+      <ButtonGroup>
         <Button>Star</Button>
         <Button
           aria-label="Add this repository to a list"
@@ -332,7 +332,7 @@ export const MemexNestedOverlays = () => {
 
   return (
     <div>
-      <ButtonGroup display="block" my={2}>
+      <ButtonGroup>
         <Button>Add iteration</Button>
         <Button
           aria-label="Add custom iteration"
diff --git a/src/stories/deprecated/Button.stories.tsx b/src/stories/deprecated/Button.stories.tsx
index 2b107c9fa79..4dcadb58a36 100644
--- a/src/stories/deprecated/Button.stories.tsx
+++ b/src/stories/deprecated/Button.stories.tsx
@@ -66,7 +66,7 @@ export const closeButton = (args: ButtonStyleProps) => (
   <ButtonClose {...args} onClick={() => alert('button clicked.')} />
 )
 export const buttonGroup = (args: StrictButtonStyleProps) => (
-  <ButtonGroup display="block" my={2}>
+  <ButtonGroup>
     <Button {...args}>Button 1</Button>
     <Button {...args}>Button 2</Button>
     <Button {...args}>Button 3</Button>