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,27 +11,20 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum-two.css";
-
 .spectrum-ButtonGroup {
-	/* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
-	--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300)));
+	--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-300));
 	--spectrum-buttongroup-display: flex;
 	--spectrum-buttongroup-flex-direction: row;
-	--spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal);
-
-	&.spectrum-ButtonGroup--sizeS {
-		/* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */
-		--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)));
-	}
+	--spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, flex-start);
+}
 
-	&.spectrum-ButtonGroup--vertical {
-		/* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */
-		--mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical);
+.spectrum-ButtonGroup--sizeS {
+	--spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-200));
+}
 
-		--spectrum-buttongroup-display: inline-flex;
-		--spectrum-buttongroup-flex-direction: column;
-	}
+.spectrum-ButtonGroup--vertical {
+	--spectrum-buttongroup-display: inline-flex;
+	--spectrum-buttongroup-flex-direction: column;
 }
 
 .spectrum-ButtonGroup {

components/buttongroup/metadata/metadata.json

@@ -2,15 +2,13 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ButtonGroup",
-    ".spectrum-ButtonGroup-item",
-    ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
-    ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
+    ".spectrum-ButtonGroup--sizeS",
+    ".spectrum-ButtonGroup--vertical",
+    ".spectrum-ButtonGroup-item"
   ],
   "modifiers": [
     "--mod-buttongroup-justify-content",
-    "--mod-buttongroup-spacing",
-    "--mod-buttongroup-spacing-horizontal",
-    "--mod-buttongroup-spacing-vertical"
+    "--mod-buttongroup-spacing"
   ],
   "component": [
     "--spectrum-buttongroup-display",

components/buttongroup/metadata/mods.md

@@ -1,6 +1,4 @@
-| Modifiable custom properties           |
-| -------------------------------------- |
-| `--mod-buttongroup-justify-content`    |
-| `--mod-buttongroup-spacing`            |
-| `--mod-buttongroup-spacing-horizontal` |
-| `--mod-buttongroup-spacing-vertical`   |
+| Modifiable custom properties        |
+| ----------------------------------- |
+| `--mod-buttongroup-justify-content` |
+| `--mod-buttongroup-spacing`         |

components/buttongroup/stories/buttongroup.stories.js

@@ -74,7 +74,7 @@ Default.tags = ["!autodocs"];
 // ********* DOCS ONLY ********* //
 
 /**
- * Default spacing for Medium, Large, and Extra Large t-shirt sizes.
+ * Default horizontal spacing for when using medium, large, and extra large buttons.
 */
 export const Horizontal = Template.bind({});
 Horizontal.tags = ["!dev"];
@@ -87,7 +87,7 @@ Horizontal.parameters = {
 };
 
 /**
- * Spacing for the Small t-shirt size.
+ * Horizontal spacing for the small t-shirt size. Should be used with small buttons.
 */
 export const HorizontalSmall = Template.bind({});
 HorizontalSmall.tags = ["!dev"];
@@ -102,7 +102,7 @@ HorizontalSmall.parameters = {
 };
 
 /**
- * Default spacing for Medium, Large, and Extra Large t-shirt sizes
+ * Default vertical spacing for when using medium, large, and extra large buttons.
 */
 export const Vertical = ButtonGroup.bind({});
 Vertical.tags = ["!dev"];
@@ -117,7 +117,7 @@ Vertical.parameters = {
 };
 
 /**
- * Spacing for the Small t-shirt size.
+ * Vertical spacing for the small t-shirt size. Should be used with small buttons.
 */
 export const VerticalSmall = Template.bind({});
 VerticalSmall.tags = ["!dev"];