feat(buttongroup)!: migrate to S2 (#2457)

BREAKING CHANGE: migrates Button Group to Spectrum 2

Also:
* docs(buttongroup): expand chromatic coverage
* refactor(buttongroup): remove extra css classes

Author: jenndiaz

components/buttongroup/index.css

@@ -11,28 +11,13 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-ButtonGroup {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeS {
   --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
   --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
 }
 
-.spectrum-ButtonGroup--sizeM {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeL {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
-}
-
-.spectrum-ButtonGroup--sizeXL {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300);
+.spectrum-ButtonGroup--sizeS {
+  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
+  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-100);
 }
 
 .spectrum-ButtonGroup {

components/buttongroup/metadata/buttongroup.yml

@@ -1,14 +1,19 @@
 name: Button group
 SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
 sections:
+  - name: Migration Guide
+    description: |
+      ### 1/24/2024 - Version 7.0.0
+      #### Spectrum 2 migration also removed `.spectrum-ButtonGroup--sizeM`, `.spectrum-ButtonGroup--sizeL`, and `.spectrum-ButtonGroup--sizeXL`
+        Since each of these classes were using the same tokens for spacing, these classes were removed.
   - name: Custom Properties API
     description: |
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/buttongroup/metadata/mods.md">here</a>.
 examples:
   - id: buttongroup-horizontal
     name: Horizontal
     description: |
-      Default spacing for Medium, Large, and Extra Large t-shirt sizes.
+      Default horizontal spacing for when using medium, large, and extra large buttons.
     markup: |
       <div class="spectrum-ButtonGroup">
         <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">
@@ -25,7 +30,7 @@ examples:
   - id: buttongroup-horizontal-small
     name: Horizontal - Small
     description: |
-      Spacing for the Small t-shirt size.
+      Horizontal spacing for the small t-shirt size. Should be used with small buttons.
     markup: |
       <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS">
         <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">
@@ -42,7 +47,7 @@ examples:
   - id: buttongroup-vertical
     name: Vertical
     description: |
-      Default spacing for Medium, Large, and Extra Large t-shirt sizes.
+      Default vertical spacing for when using medium, large, and extra large buttons.
     markup: |
       <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
         <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">
@@ -59,7 +64,7 @@ examples:
   - id: buttongroup-vertical-small
     name: Vertical - Small
     description: |
-      Spacing for the Small t-shirt size.
+      Vertical spacing for the small t-shirt size. Should be used with small buttons.
     markup: |
       <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-ButtonGroup--vertical">
         <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">

components/buttongroup/stories/buttongroup.stories.js

@@ -1,5 +1,7 @@
 // Import the component markup template
 import { Template } from "./template";
+import isChromatic from "chromatic/isChromatic";
+import { html } from "lit";
 
 export default {
 	title: "Components/Button group",
@@ -45,7 +47,17 @@ export default {
 	},
 };
 
-export const Default = Template.bind({});
+const chromaticKitchenSink = (args) => html`
+	<div style="display: grid; justify-content: start; gap: 2rem;">
+		${Template(args)}
+		${Template({
+			...args,
+			size: "s"
+		})}
+	</div>
+`;
+
+export const Default = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args);
 Default.args = {
 	items: [
 		{
@@ -67,7 +79,7 @@ Default.args = {
 	],
 };
 
-export const Vertical = Template.bind({});
+export const Vertical = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args);
 Vertical.args = {
 	vertical: true,
 	items: [