[ButtonGroup] Removed segmented boolean prop and replaced with `var…

…iant` (#9997)

<!--
  ☝️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
-->

### WHY are these changes introduced?

Fixes #9981

Removing boolean props from various components. Renaming spacing prop to
`gap` for consistency

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

### WHAT is this pull request doing?
* Replaces the `segmented` boolean prop with a `variant='segmented'`
prop
* Updates `ButtonGroup` story
* Updates css attributed selector in `Button` to match
`variant='segmented'`
* Renames `spacing` to `gap`
<!--
  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>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩
Review in storybook, there should be no visual changes

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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

---------

Co-authored-by: kyledurand <kyle.durand@shopify.com>

.changeset/fuzzy-coats-study.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+[ButtonGroup] Removed `segmented` boolean prop and replaced with `variant`. Replaced `spacing` prop with `gap`

polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx

@@ -311,7 +311,7 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
   });
 
   const groupedActionsMarkup = (
-    <ButtonGroup spacing="tight">
+    <ButtonGroup gap="tight">
       {rollUppableActionsMarkup}
       {actionsMarkup}
       {groupsMarkup}

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

@@ -970,7 +970,7 @@
 }
 // stylelint-enable selector-max-specificity, selector-max-class
 // stylelint-disable selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-[data-buttongroup-segmented='true'] {
+[data-buttongroup-variant='segmented'] {
   .Button,
   .Button::after {
     border-radius: 0;

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

@@ -576,7 +576,7 @@ export function Pressed() {
   }, [isFirstButtonActive]);
 
   return (
-    <ButtonGroup segmented>
+    <ButtonGroup variant="segmented">
       <Button pressed={isFirstButtonActive} onClick={handleFirstButtonClick}>
         First button
       </Button>
@@ -634,7 +634,7 @@ export function Split() {
   const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <ButtonGroup segmented>
+      <ButtonGroup variant="segmented">
         <Button variant="primary">Save</Button>
 
         <div style={{width: '0px'}} />

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

@@ -27,7 +27,7 @@
   }
 }
 
-.segmented {
+.variantSegmented {
   display: flex;
   flex-wrap: nowrap;
   margin-top: 0;

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

@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Button, ButtonGroup} from '@shopify/polaris';
+import {Button, ButtonGroup, BlockStack} from '@shopify/polaris';
 
 export default {
   component: ButtonGroup,
@@ -27,13 +27,13 @@ export function WithSegmentedButtons() {
   );
   return (
     <div>
-      <ButtonGroup segmented>
+      <ButtonGroup variant="segmented">
         <Button>Bold</Button>
         <Button pressed>Italic</Button>
         <Button>Underline</Button>
       </ButtonGroup>
       <br />
-      <ButtonGroup segmented>
+      <ButtonGroup variant="segmented">
         <Button
           pressed={activeButtonIndex === 0}
           onClick={() => handleButtonClick(0)}
@@ -89,14 +89,36 @@ export function WithSegmentedButtons() {
 
 export function OutlineWithSegmentedButtons() {
   return (
-    <ButtonGroup segmented>
+    <ButtonGroup variant="segmented">
       <Button>Bold</Button>
       <Button>Italic</Button>
       <Button>Underline</Button>
     </ButtonGroup>
   );
 }
 
+export function WithAllGaps() {
+  return (
+    <BlockStack gap="4">
+      <ButtonGroup gap="extraTight" connectedTop>
+        <Button>Bold</Button>
+        <Button>Italic</Button>
+        <Button>Underline</Button>
+      </ButtonGroup>
+      <ButtonGroup gap="tight">
+        <Button>Bold</Button>
+        <Button>Italic</Button>
+        <Button>Underline</Button>
+      </ButtonGroup>
+      <ButtonGroup gap="loose">
+        <Button>Bold</Button>
+        <Button>Italic</Button>
+        <Button>Underline</Button>
+      </ButtonGroup>
+    </BlockStack>
+  );
+}
+
 export function NoWrapButtons() {
   return (
     <>

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

@@ -1,18 +1,20 @@
 import React from 'react';
 
-import {classNames} from '../../utilities/css';
+import {classNames, variationName} from '../../utilities/css';
 import {elementChildren} from '../../utilities/components';
 
 import {Item} from './components';
 import styles from './ButtonGroup.scss';
 
-type Spacing = 'extraTight' | 'tight' | 'loose';
+type Gap = 'extraTight' | 'tight' | 'loose';
+
+type Variant = 'segmented';
 
 export interface ButtonGroupProps {
   /** Determines the space between button group items */
-  spacing?: Spacing;
-  /** Join buttons as segmented group */
-  segmented?: boolean;
+  gap?: Gap;
+  /** Styling variant for group */
+  variant?: Variant;
   /** Buttons will stretch/shrink to occupy the full width */
   fullWidth?: boolean;
   /** Remove top left and right border radius */
@@ -25,16 +27,16 @@ export interface ButtonGroupProps {
 
 export function ButtonGroup({
   children,
-  spacing,
-  segmented,
+  gap,
+  variant,
   fullWidth,
   connectedTop,
   noWrap,
 }: ButtonGroupProps) {
   const className = classNames(
     styles.ButtonGroup,
-    spacing && styles[spacing],
-    segmented && styles.segmented,
+    gap && styles[gap],
+    variant && styles[variationName('variant', variant)],
     fullWidth && styles.fullWidth,
     noWrap && styles.noWrap,
   );
@@ -46,7 +48,7 @@ export function ButtonGroup({
   return (
     <div
       className={className}
-      data-buttongroup-segmented={segmented}
+      data-buttongroup-variant={variant}
       data-buttongroup-connected-top={connectedTop}
       data-buttongroup-full-width={fullWidth}
       data-buttongroup-no-wrap={noWrap}

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

@@ -29,14 +29,15 @@ describe('<ButtonGroup />', () => {
       expect(item.find(Button)).toContainReactText('Cancel');
     });
 
-    it('adds a data-buttongroup-segmented to the outter div when segmented', () => {
+    it('adds a data-buttongroup-variant to the outter div when variant is passed', () => {
+      const variant = 'segmented';
       const buttonGroup = mountWithApp(
-        <ButtonGroup segmented>
+        <ButtonGroup variant={variant}>
           <Button />
         </ButtonGroup>,
       );
       const selector: any = {
-        'data-buttongroup-segmented': true,
+        'data-buttongroup-variant': variant,
       };
       expect(buttonGroup).toContainReactComponent('div', selector);
     });

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

@@ -175,7 +175,7 @@ export function Pagination({
     <nav aria-label={navLabel} ref={node} className={styles.Pagination}>
       {previousButtonEvents}
       {nextButtonEvents}
-      <ButtonGroup segmented>
+      <ButtonGroup variant="segmented">
         {constructedPrevious}
         {labelMarkup}
         {constructedNext}

polaris-react/src/components/Pagination/tests/Pagination.test.tsx

@@ -248,7 +248,7 @@ describe('<Pagination />', () => {
     );
 
     expect(pagination).toContainReactComponent(ButtonGroup, {
-      segmented: true,
+      variant: 'segmented',
     });
     expect(pagination).toContainReactComponent(Button, {url: '/prev'});
     expect(pagination).toContainReactComponent(Button, {url: '/next'});
@@ -260,7 +260,7 @@ describe('<Pagination />', () => {
     );
 
     expect(pagination).toContainReactComponent(ButtonGroup, {
-      segmented: true,
+      variant: 'segmented',
     });
   });
 });

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

@@ -289,7 +289,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         actionsMarkup = (
           <div className={styles.Actions} onClick={stopPropagation}>
             <Box position="absolute" insetBlockStart="4" insetInlineEnd="5">
-              <ButtonGroup segmented>
+              <ButtonGroup variant="segmented">
                 {buttonsFrom(shortcutActions, {size: 'slim'})}
               </ButtonGroup>
             </Box>

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

@@ -60,7 +60,7 @@ export function MultipleMessages() {
     <div style={{height: '250px'}}>
       <Frame>
         <Page title="Multiple Messages">
-          <ButtonGroup segmented>
+          <ButtonGroup variant="segmented">
             <Button onClick={toggleActiveOne}>Show toast 1</Button>
             <Button onClick={toggleActiveTwo}>Show toast 2</Button>
           </ButtonGroup>

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

@@ -229,7 +229,7 @@ export function VisibleOnlyWithChildInteraction() {
   return (
     <Box paddingBlockStart="24">
       <div style={{width: '200px'}}>
-        <ButtonGroup segmented fullWidth>
+        <ButtonGroup variant="segmented" fullWidth>
           <Tooltip content="Bold" dismissOnMouseOut>
             <Button>B</Button>
           </Tooltip>
@@ -322,7 +322,7 @@ export function WithSuffix() {
   return (
     <Box padding="16" background="bg">
       <InlineStack>
-        <ButtonGroup segmented fullWidth>
+        <ButtonGroup variant="segmented" fullWidth>
           <Tooltip
             content={
               <InlineStack gap="2">
@@ -434,7 +434,7 @@ export function Alignment() {
   return (
     <Box paddingBlockStart="24">
       <InlineStack>
-        <ButtonGroup segmented fullWidth>
+        <ButtonGroup variant="segmented" fullWidth>
           <Tooltip content="Content is longer than the activator">
             <Button>Bold</Button>
           </Tooltip>

polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx

@@ -14,7 +14,7 @@ function ButtonGroupPressedWithSegmentedButtonsExample() {
   );
 
   return (
-    <ButtonGroup segmented>
+    <ButtonGroup variant="segmented">
       <Button
         pressed={activeButtonIndex === 0}
         onClick={() => handleButtonClick(0)}

polaris.shopify.com/pages/examples/button-group-with-segmented-buttons.tsx

@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ButtonGroupExample() {
   return (
-    <ButtonGroup segmented>
+    <ButtonGroup variant="segmented">
       <Button>Bold</Button>
       <Button>Italic</Button>
       <Button>Underline</Button>

polaris.shopify.com/pages/examples/button-pressed.tsx

@@ -16,7 +16,7 @@ function PressedButton() {
   }, [isFirstButtonActive]);
 
   return (
-    <ButtonGroup segmented>
+    <ButtonGroup variant="segmented">
       <Button pressed={isFirstButtonActive} onClick={handleFirstButtonClick}>
         First button
       </Button>

polaris.shopify.com/pages/examples/button-split.tsx

@@ -7,7 +7,7 @@ function ButtonExample() {
   const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <ButtonGroup segmented>
+      <ButtonGroup variant="segmented">
         <Button variant="primary">Save</Button>
         <div style={{width: '0px'}} />
         <Popover

polaris.shopify.com/pages/examples/toast-multiple-messages.tsx

@@ -28,7 +28,7 @@ function MultipleToastExample() {
     <div style={{height: '250px'}}>
       <Frame>
         <Page title="Toast example">
-          <ButtonGroup segmented>
+          <ButtonGroup variant="segmented">
             <Button onClick={toggleActiveOne}>Show toast 1</Button>
             <Button onClick={toggleActiveTwo}>Show toast 2</Button>
           </ButtonGroup>

polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx

@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function TooltipExample() {
   return (
     <div style={{width: '200px'}}>
-      <ButtonGroup segmented fullWidth>
+      <ButtonGroup variant="segmented" fullWidth>
         <Tooltip content="Bold" dismissOnMouseOut>
           <Button>B</Button>
         </Tooltip>