feat: Allow arbitrary pixel sizes in S2 style macro (#7385)

* feat: Allow arbitrary pixel sizes in S2 style macro

* Fix tests

* Fix selector conflict

* Update codemod

* update unsafe style as well

Author: devongovett

.storybook-s2/docs/Icons.jsx

@@ -6,7 +6,7 @@ import {highlight} from './highlight' with {type: 'macro'};
 
 export function Icons() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
+    <div className={style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Workflow icons

.storybook-s2/docs/Illustrations.jsx

@@ -11,7 +11,7 @@ import { useState } from 'react';
 export function Illustrations() {
   let [gradientStyle, setStyle] = useState('generic1');
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
+    <div className={style({marginX: 'auto'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Illustrations

.storybook-s2/docs/Intro.jsx

@@ -13,7 +13,7 @@ import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
 
 export function Docs() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', marginY: 48})}>
+    <div className={style({marginX: 'auto', marginY: 48})}>
       <header
         style={{
           backgroundImage: `url(${new URL('wallpaper_collaborative_S2_desktop.webp', import.meta.url).toString()})`,

.storybook-s2/docs/MDXLayout.jsx

@@ -19,7 +19,7 @@ const mdxComponents = {
 
 export function MDXLayout({children}) {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
+    <div className={style({marginX: 'auto'})}>
       <main className={style({marginX: 48})}>
         <MDXProvider components={mdxComponents}>
           {children}

.storybook-s2/docs/Migrating.jsx

@@ -3,7 +3,7 @@ import {P, Code, Pre, H3, H2, Link} from './typography';
 
 export function Migrating() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto', fontFamily: 'sans'})}>
+    <div className={style({marginX: 'auto', fontFamily: 'sans'})}>
       <div className={style({marginX: 48})}>
         <h1 className={style({font: 'heading-2xl', marginBottom: 48})}>
           Migrating to Spectrum 2

.storybook-s2/docs/StyleMacro.jsx

@@ -6,7 +6,7 @@ import {Colors} from './Colors';
 
 export function StyleMacro() {
   return (
-    <div className={style({maxWidth: 'lg', marginX: 'auto'})}>
+    <div className={style({marginX: 'auto'})}>
       <header
         className={style({
           paddingX: 48,
@@ -37,9 +37,17 @@ export function StyleMacro() {
         <H3>Colors</H3>
         <P>The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.</P>
         <Colors />
-        <H3>Spacing and sizing</H3>
-        <P>Spacing properties such as <Code>margin</Code> and <Code>padding</Code>, and sizing properties such as <Code>width</Code> and <Code>height</Code> support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent.</P>
-        <P>Internally, spacing and sizing values are converted from pixels to rems, which scale according to the user’s font size preference. In addition, sizing values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets. Spacing values do not scale and remain fixed.</P>
+        <H3>Spacing</H3>
+        <P>Spacing properties such as <Code>margin</Code> and <Code>padding</Code> support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent. Spacing values are automatically converted to rems, which scale according to the user’s font size preference.</P>
+        <P>In addition to numeric values, the following spacing options are available:</P>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>text-to-control</Code> – The default horizontal spacing between text and a UI control, for example between a label and input. This value automatically adjusts based on the font size.</li>
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>text-to-visual</Code> – The default horizontal spacing between text and a visual element, such as an icon. This value automatically adjusts based on the font size.</li>
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>edge-to-text</Code> – The default horizontal spacing between the edge of a UI control and text within it. This value is calculated relative to the height of the control.</li>
+          <li className={style({font: 'body-lg', marginTop: 0, marginBottom: 8})}><Code>pill</Code> – The default horizontal spacing between the edge of a pill-shaped UI control (e.g. a fully rounded button) and text within it. This value is calculated relative to the height of the control.</li>
+        </ul>
+        <H3>Sizing</H3>
+        <P>Sizing properties such as <Code>width</Code> and <Code>height</Code> accept arbitrary pixel values. Internally, sizes are converted to rems, which scale according to the user’s font size preference. Additionally, size values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets.</P>
         <H3>Typography</H3>
         <P>Spectrum 2 does not include specific components for typography. Instead, you can use the style macro to apply Spectrum typography to any HTML element or component.</P>
         <P>The <Code>font</Code> shorthand applies default values for the <Code>fontFamily</Code>, <Code>fontSize</Code>, <Code>fontWeight</Code>, <Code>lineHeight</Code>, and <Code>color</Code> properties, following Spectrum design pairings. These individual properties can also be set to override the default set by the shorthand.</P>

packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx

@@ -34,14 +34,14 @@ export default meta;
 
 let justifiedStyle = style({
   width: {
-    default: '[500px]',
+    default: 500,
     orientation: {
       vertical: 'auto'
     }
   },
   height: {
     orientation: {
-      vertical: '[500px]'
+      vertical: 500
     }
   }
 });

packages/@react-spectrum/s2/chromatic/CardView.stories.tsx

@@ -36,7 +36,7 @@ const cardViewStyles = style({
   height: {
     default: 'screen',
     viewMode: {
-      docs: '[600px]'
+      docs: 600
     }
   }
 });

packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx

@@ -37,7 +37,7 @@ export const Example = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: '[320px]', height: '[280px]'})}
+        className={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -62,7 +62,7 @@ export const ExampleWithFileTrigger = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: '[380px]', height: '[280px]'})}
+        className={style({width: 380, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -94,7 +94,7 @@ export const LongBanner = (args: any) => {
       <DropZone
         {...args}
         replaceMessage="A really long message that will show the text wrapping hopefully"
-        className={style({width: '[320px]', height: '[280px]'})}
+        className={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>
@@ -119,7 +119,7 @@ export const Gradient = (args: any) => {
       <Draggable />
       <DropZone
         {...args}
-        className={style({width: '[320px]', height: '[280px]'})}
+        className={style({width: 320, height: 280})}
         isFilled={isFilled}
         onDrop={() => setIsFilled(true)}>
         <IllustratedMessage>

packages/@react-spectrum/s2/chromatic/SegmentedControl.stories.tsx

@@ -68,7 +68,7 @@ OnlyIcons.args = {
 };
 
 export const CustomWidthJustified = (args: any) => (
-  <SegmentedControl {...args} styles={style({width: '[400px]'})}>
+  <SegmentedControl {...args} styles={style({width: 400})}>
     <SegmentedControlItem id="overview">Overview</SegmentedControlItem>
     <SegmentedControlItem id="specs">Specs</SegmentedControlItem>
     <SegmentedControlItem id="guidelines">Guidelines</SegmentedControlItem>