[ButtonGroup] Add optional nowrap property to ButtonGroup (#8033)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

This PR is non-breaking and adds an optional noWrap property to the
ButtonGroup component which prevents the buttons in a ButtonGroup from
wrapping onto a new line. This change will help with alignment issues we
have been having on the new Metaobjects Index page encountered with very
long Metaobject Type names.

<img width="556" alt="Screenshot 2023-01-11 at 4 13 12 PM"
src="https://user-images.githubusercontent.com/109357057/211918907-9632b84b-1f32-4b5b-80d4-75b2130f0022.png">

A `noWrap` option will allow for the title object to wrap sooner instead
of forcing the action buttons onto 2 lines.

### WHY are these changes introduced?

To address alignment issues on the new Metaobjects page. Since we want
our buttons in line with our Metaobjects `Type` label (which might be
long), we would prefer to set the `ButtonGroup` to `noWrap` and force
the label to wrap.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->


### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: allisonjanes-shopify

.changeset/happy-dragons-repair.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added an optional `noWrap` prop to `ButtonGroup`

polaris-react/src/components/ButtonGroup/ButtonGroup.scss

@@ -90,3 +90,8 @@
     margin-left: var(--p-space-5);
   }
 }
+
+.noWrap {
+  display: flex;
+  flex-wrap: nowrap;
+}

polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -34,3 +34,43 @@ export function OutlineWithSegmentedButtons() {
     </ButtonGroup>
   );
 }
+
+export function NoWrapButtons() {
+  return (
+    <>
+      <p>Default</p>
+      <div
+        style={{
+          width: '300px',
+          border: '2px solid blue',
+          padding: '10px',
+          overflowX: 'scroll',
+        }}
+      >
+        <ButtonGroup>
+          <Button>Fourth</Button>
+          <Button>Third</Button>
+          <Button>Second</Button>
+          <Button primary>First</Button>
+        </ButtonGroup>
+      </div>
+      <br />
+      <p>With noWrap</p>
+      <div
+        style={{
+          width: '300px',
+          border: '2px solid blue',
+          padding: '10px',
+          overflowX: 'scroll',
+        }}
+      >
+        <ButtonGroup noWrap>
+          <Button>Fourth</Button>
+          <Button>Third</Button>
+          <Button>Second</Button>
+          <Button primary>First</Button>
+        </ButtonGroup>
+      </div>
+    </>
+  );
+}

polaris-react/src/components/ButtonGroup/ButtonGroup.tsx

@@ -17,6 +17,8 @@ export interface ButtonGroupProps {
   fullWidth?: boolean;
   /** Remove top left and right border radius */
   connectedTop?: boolean;
+  /** Prevent buttons in button group from wrapping to next line */
+  noWrap?: boolean;
   /** Button components */
   children?: React.ReactNode;
 }
@@ -27,12 +29,14 @@ export function ButtonGroup({
   segmented,
   fullWidth,
   connectedTop,
+  noWrap,
 }: ButtonGroupProps) {
   const className = classNames(
     styles.ButtonGroup,
     spacing && styles[spacing],
     segmented && styles.segmented,
     fullWidth && styles.fullWidth,
+    noWrap && styles.noWrap,
   );
 
   const contents = elementChildren(children).map((child, index) => (
@@ -45,6 +49,7 @@ export function ButtonGroup({
       data-buttongroup-segmented={segmented}
       data-buttongroup-connected-top={connectedTop}
       data-buttongroup-full-width={fullWidth}
+      data-buttongroup-no-wrap={noWrap}
     >
       {contents}
     </div>