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

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fixes layout bug with ButtonGroup by changing the `display` property from `inline-block` to `inline-flex`

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)

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)

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

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

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"
 />
 `;
 

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"

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>