feat(buttongroup,page)!: 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/dist/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/index.css

@@ -12,24 +12,19 @@
  */
 
 .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/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"];

components/page/dist/metadata.json

@@ -7,10 +7,7 @@
     "--spectrum-page-content-tap-highlight"
   ],
   "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
-  "system-theme": [
-    "--system-root-page-background-color",
-    "--system-root-page-content-tap-highlight"
-  ],
+  "system-theme": [],
   "passthroughs": [],
   "high-contrast": []
 }

components/page/index.css

@@ -11,9 +11,10 @@
  * governing permissions and limitations under the License.
  */
 
-@import "./themes/spectrum-two.css";
-
 :root {
+	--spectrum-page-background-color: var(--spectrum-gray-75);
+	--spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25);
+
 	background: var(--mod-page-background, var(--spectrum-page-background-color));
 
 	/* The highlight that appears over a link while it's being tapped */