Coverage improvements (#449)

* docs cleanup

* added images

* added popover docs

* docs

* removed progress bar

* added docs for popover and fixed mdx error

* linter fix

* added more button group docs

* Update content/components/button.mdx

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

* Update content/components/button-group.mdx

* Update content/components/button-group.mdx

Co-authored-by: Mike Perrotti <mperrotti@github.com>

* Update content/components/button-group.mdx

Co-authored-by: Mike Perrotti <mperrotti@github.com>

* docs fixes

---------

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>

content/components/action-bar.mdx

@@ -2,6 +2,7 @@
 title: Action bar
 status: Experimental
 description: Action bar contains a collection of horizontally aligned icon buttons.
+figma: https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042%3A65285&t=SjYdIZSMZa38r2ZU-1
 ---
 
 import {Box, Text} from '@primer/react'

content/components/button-group.mdx

@@ -0,0 +1,92 @@
+---
+title: Button group
+description: Button group renders a series of buttons.
+reactId: button_group
+figma: https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=20363%3A71038&t=GrA68FvIJRoUaVbl-1
+rails: https://primer.style/view-components/components/beta/buttongroup
+---
+
+import {Box, Text} from '@primer/react'
+import ComponentLayout from '~/src/layouts/component-layout'
+export default ComponentLayout
+
+<img
+    src="https://user-images.githubusercontent.com/586552/226987730-84d99d46-1dd4-4ddc-91b3-046d7eeedbad.png"
+    role="presentation"
+    width="960"
+    alt="An image showing a button group in medium and small sizes."
+/>
+
+## Usage
+
+Buttons can be grouped together as individual segments of related actions. 
+
+Each segment in a button group is comprised from our default button component and can be visually represented with the same button types and states.
+
+Grouping buttons with a button group is better than rendering buttons close together for the following uses:
+
+- rendering a group of buttons next to one or more buttons
+- grouping multiple sets of buttons
+- saving horizontal space when rendering multiple closely-related buttons
+
+### Best practices
+
+- Use button groups to organize similar functionality. Don't group buttons just because they're close together.
+- For most use-cases, only default button types should be used in button groups. In rare cases, primary buttons can be included in button groups but there should only ever be one primary button (if any) in a button group.
+- Avoid grouping too many buttons together. It could be overwhelming to the user.
+- Do not use a button group to indicate a selection. Use a [segmented control](/components/segmented-control) instead.
+- Do not use a button group as a replacement for tab navigation. <!-- TODO: link to TabNav once it's merged -->
+- Avoid mixing buttons with text labels with icon-only buttons. However, it is acceptable to group a text-labeled button with an icon-only button with a [down-pointing triangle](https://primer.style/design/foundations/icons/triangle-down-16) that opens a dropdown menu of actions related to the button.
+- Do not group an [invisible](/components/button#invisible) button with buttons of another variant.
+
+## Options
+
+### Size
+
+Button groups only support medium (default) and small button sizes.
+
+<img
+    src="https://user-images.githubusercontent.com/586552/226987738-cf95c038-8fa7-4393-bf2c-014082145556.png"
+    role="presentation"
+    width="960"
+    alt="An image showing a button group in medium and small sizes."
+/>
+
+### Split buttons with a dropdown
+
+A button group can be shown as a split button with an action on the left and dropdown button with an additional list of actions.
+
+<img
+    src="https://user-images.githubusercontent.com/586552/226987739-a7aeadc7-9bc3-40d1-ba34-beefe32525ff.png"
+    role="presentation"
+    width="960"
+    alt="An image showing a button group in medium and small sizes."
+/>
+
+### Leading and trailing visuals
+
+Similarly to buttons, button segments can optionally include an icon and/or a counter.
+
+<img
+    src="https://user-images.githubusercontent.com/586552/226987735-471711f1-5342-4605-903d-889301eace46.png"
+    role="presentation"
+    width="960"
+    alt="An image showing a button group in medium and small sizes."
+/>
+
+## Accessibility
+
+A button group does not behave like a [toolbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role), so assistive technologies still interpret the buttons as unrelated. The grouping is purely visual.
+
+### Descriptive buttons
+
+Labeling buttons properly lets users know what will happen when they activate the control, lessens errors, and increases confidence.
+
+Read more about [descriptive buttons](/guides/accessibility/descriptive-buttons).
+
+## Related links
+
+- [Button](/components/button)
+
+- [Segmented control](/components/segmented-control)
+

content/components/button.mdx

@@ -231,6 +231,13 @@ Buttons allow users to initiate an action or command when clicked or tapped. The
 
 ## Best practices
 
+### Primary and outline button usage
+
+Limit primary button usage. Only use one primary button on the page, whenever possible, to indicate its emphasis relative to other actions. Primary buttons have top priority in visual hierarchy, and using too many of them on a single view dilutes their effectiveness.
+
+
+### Button usage
+
 <DoDontContainer>
   <Do>
     <img

content/components/dialog.mdx

@@ -13,8 +13,6 @@ export default ComponentLayout
 import {Box} from '@primer/react'
 import {Caption} from '@primer/gatsby-theme-doctocat'
 
-## Overview
-
 Dialogs can streamline the interface by allowing extra content to be disclosed as needed. Dialogs create a new modality to the user, and can expedite the completion of individual tasks.
 
 ## Anatomy

content/components/popover.mdx

@@ -0,0 +1,44 @@
+---
+title: Popover
+description: Popover is used to bring attention to specific user interface elements.
+reactId: popover
+rails: https://primer.style/view-components/components/beta/popover
+figma: https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=410%3A3890&t=ZTzX5Hzm5IuUl4m8-1
+---
+
+import {Box, Text} from '@primer/react'
+import ComponentLayout from '~/src/layouts/component-layout'
+export default ComponentLayout
+
+## Usage
+
+The popover component is used to deliver context-specific information and functionality. It’s a small dialog to bring attention to specific user interface elements. It can provide additional information, options, or actions related to a specific element or task. Popovers can be helpful for flows that require light onboarding or instruction.
+
+Popovers may contain text, links, and buttons. 
+
+Popover supports various caret positions, which you can specify, though the default is top. Note that the top-left, bottom-left, top-right, and bottom-right values modify the horizontal alignment of the popover.
+
+<img
+    src="https://user-images.githubusercontent.com/586552/227022626-625dad35-47d5-46ac-ba64-3c1285a37410.png"
+    role="presentation"
+    width="960"
+    alt="A popover component example"
+/>
+
+## Best practices
+
+Use sparingly to avoid cognitive overload. Though they can be used for a variety of things, they should be used sparingly to avoid cognitive overload. It's important to consider the context in which the popover appears. Are there other popovers on the page? Does it appear on page load, or require the user to open the popover?
+
+Unlike other messaging components, popovers should never include critical information (such as errors) and should always include a dismiss action.
+
+## Accessibility
+
+- Popovers should be operable using the keyboard alone, without requiring the use of a mouse or other pointing device.
+
+- Popovers should be announced by screen readers, including their content and role on the page.
+
+- When a popover is opened, focus should be moved to the popover so that keyboard users can interact with it. When the popover is closed, focus should be returned to the element that triggered it. For more on this, see the accessibility guidelines [on focus management](/guides/accessibility/focus-management).
+
+## Related links
+
+- [Feature onboarding](../ui-patterns/feature-onboarding)

content/foundations/responsive.mdx

@@ -58,7 +58,7 @@ However, it is recommended to aim for the AAA standard when possible. For more i
 | `pointer: coarse` |       32px        |          44px          |
 | `pointer: fine`   |       24px        |          24px          |
 
-A common example of a hit target that may not meet the AAA standard on mobile is our [medium size button](ui-patterns/button-usage), which is only 32px in height. To improve its touch target, the height must be increased without altering the visual appearance of the button.
+A common example of a hit target that may not meet the AAA standard on mobile is our medium size button, which is only 32px in height. To improve its touch target, the height must be increased without altering the visual appearance of the button.
 
 <DoDontContainer>
   <Do>

content/ui-patterns/messaging.mdx

@@ -7,9 +7,9 @@ import {Box} from '@primer/react'
 
 Primer includes three different messaging components:
 
-- [Toasts](https://primer.style/css/components/toasts)
-- [Flash alerts](https://primer.style/css/components/alerts)
-- [Popovers](https://primer.style/css/components/popover)
+- Toasts
+- [Flash alerts](../components/flash)
+- [Popovers](../components/popover) 
 
 ## Messaging types
 

content/ui-patterns/saving.mdx

@@ -92,7 +92,7 @@ When defining these calls to actions, make sure to:
 - If the save button refers to a segment of controls on the page, use the **secondary** button appearance.
 - If the save button has a corresponding cancel button, use the **primary** button appearance for the save button, and **secondary** for the cancel button.
 
-For more guidance on button usage, see the [button interface guidelines](/ui-patterns/button-usage).
+For more guidance on button usage, see the [button documentation](/components/button).
 
 <Box
   mb={3}