Shopify · kyledurand · Aug 25, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/.changeset/fuzzy-coats-study.md b/.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`
diff --git a/polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx b/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}

diff --git a/polaris-react/src/components/Button/Button.scss b/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;

diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/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'}} />

diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
@@ -27,7 +27,7 @@
   }
 }
 
-.segmented {
+.variantSegmented {
   display: flex;
   flex-wrap: nowrap;
   margin-top: 0;

diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx b/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 (
     <>

diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.tsx b/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}

diff --git a/polaris-react/src/components/ButtonGroup/tests/ButtonGroup.test.tsx b/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);
     });

diff --git a/polaris-react/src/components/Pagination/Pagination.tsx b/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}

diff --git a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx b/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',
     });
   });
 });

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/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>

diff --git a/polaris-react/src/components/Toast/Toast.stories.tsx b/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>

diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/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>

diff --git a/polaris.shopify.com/pages/examples/button-group-pressed-with-segmented-buttons.tsx b/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)}

diff --git a/polaris.shopify.com/pages/examples/button-group-with-segmented-buttons.tsx b/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>

diff --git a/polaris.shopify.com/pages/examples/button-pressed.tsx b/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>

diff --git a/polaris.shopify.com/pages/examples/button-split.tsx b/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

diff --git a/polaris.shopify.com/pages/examples/toast-multiple-messages.tsx b/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>

diff --git a/polaris.shopify.com/pages/examples/tooltip-visible-only-with-child-interaction.tsx b/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>