Merge branch 'main' of github.com:adobe/react-spectrum

Author: devongovett

.storybook-s2/docs/Migrating.jsx

@@ -54,6 +54,19 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>MenuItem</Code></li>
         </ul>
 
+        <H3>ActionGroup</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Use <Code>ActionButtonGroup</Code> if you are migrating from an <Code>ActionGroup</Code> that didn't allow for selection. <Code>ActionButtonGroup</Code> takes <Code>ActionButtons</Code> as children. </li>
+          <li className={style({font: 'body', marginY: 8})}>Use <Code>ToggleButtonGroup</Code> if you are migrating from an <Code>ActionGroup</Code> that used single or multiple selection. <Code>ToggleButtonGroup</Code> takes <Code>ToggleButtons</Code> as children. </li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>overflowMode</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>buttonLabelBehavior</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>summaryIcon</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>Update root level <Code>onAction</Code> to called via <Code>onPress</Code> on each <Code>ActionButton</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Apply <Code>isDisabled</Code> directly on each <Code>ActionButton</Code> or <Code>ToggleButton</Code> instead of root level <Code>disabledKeys</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
+          <li className={style({font: 'body', marginY: 8})}>Convert dynamic collections render function to <Code>items.map</Code></li>
+        </ul>
+
         <H3>AlertDialog</H3>
         <P>No updates needed.</P>
 
@@ -141,14 +154,37 @@ export function Migrating() {
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Update children to move render props from being the second child of <Code>DialogTrigger</Code> to being a child of <Code>Dialog</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>onDismiss</Code> and use <Code>onOpenChange</Code> on the <Code>DialogTrigger</Code>, or <Code>onDismiss</Code> on the <Code>DialogContainer</Code> instead</li>
+          <li className={style({font: 'body', marginY: 8})}><Code>Dialog</Code> is now meant specifically for rendering modal dialogs only and follows the same preset layout as before</li>
+          <li className={style({font: 'body', marginY: 8})}>If you are trying to create a dialog with a custom layout use <Code>CustomDialog</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>If you are trying to create a fullscreen dialog use <Code>FullscreenDialog</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>If you are trying to create a popover dialog use <Code>Popover</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Supports <Code>isKeyboardDismissDisabled</Code> in place of <Code>DialogTrigger</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Supports <Code>isDismissible</Code> in place of <Code>DialogTrigger</Code>. Note the fixed spelling from previous <Code>isDismissible</Code> prop.</li>
+          <li className={style({font: 'body', marginY: 8})}>Supports <Code>role: "dialog" | "alertdialog"</Code></li>
+        </ul>
+
+        <H3>DialogContainer</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>type</Code>, this is dependent on the dialog level child that you use (e.g. <Code>Dialog</Code>, <Code>FullscreenDialog</Code>, <Code>Popover</Code>)</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isDismissable</Code>, prop now exists on the dialog level component as <Code>isDismissible</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isKeyboardDismissDisabled</Code>, prop now exists on the dialog level component</li>
         </ul>
 
         <H3>DialogTrigger</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>type="tray"</Code> (<Code>Tray</Code> has not been implemented yet)</li>
-          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>mobileType="tray"</Code> (<Code>Tray</Code> has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>mobileType</Code> (<Code>Tray</Code> and other types have not been implemented yet for <Code>Popover</Code>)</li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>targetRef</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>children</Code> to remove render props usage, and note that the <Code>close</Code> function was moved from <Code>DialogTrigger</Code> to <Code>Dialog</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>containerPadding</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>crossOffset</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>hideArrow</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isDismissable</Code>, prop now exists on the dialog level component as <Code>isDismissible</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isKeyboardDismissDisabled</Code>, prop now exists on the dialog level component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>offset</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>placement</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>shouldFlip</Code>, prop now exists on the <Code>Popover</Code> component</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>type</Code>, this is dependent on the dialog level child that you use (e.g. <Code>Dialog</Code>, <Code>FullscreenDialog</Code>, <Code>Popover</Code>)</li>
         </ul>
 
         <H3>Divider</H3>
@@ -468,7 +504,7 @@ export function Migrating() {
                 <td><Code>'large'</Code></td>
                 <td><Code>'xl'</Code></td>
               </tr>
-            </tbody>        
+            </tbody>
         </table>
 
         <H3>Dimension values</H3>

.storybook-s2/docs/Release Notes.mdx

@@ -4,6 +4,56 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.5.0
+
+In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:
+
+* [Dialog](?path=/docs/dialog--docs) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
+* [FullscreenDialog](?path=/docs/fullscreendialog--docs) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
+* [CustomDialog](?path=/docs/customdialog--docs) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
+* [Popover](?path=/docs/popover--docs) Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.
+
+In addition, several DialogTrigger props have moved to the above children:
+
+* `type` is removed. Use one of the above components instead.
+* `isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
+* `isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
+* `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
+
+We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
+[colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
+these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](?path=/docs/style-macro--docs#sizing)
+for more information. Finally, documentation on [optimizing CSS bundling](?path=/docs/style-macro--docs#css-optimization) have also been
+added to help you generate a properly optimized output when using the bundler of your choice.
+
+### New components
+
+* [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
+* [CloseButton](?path=/docs/customdialog--docs)
+* [CustomDialog](?path=/docs/customdialog--docs)
+* [FullscreenDialog](?path=/docs/fullscreendialog--docs)
+* [Popover](?path=/docs/popover--docs)
+* [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)
+
+### Updates
+
+* [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
+* [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
+* [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
+* [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
+* [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
+* [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
+* [Meter](?path=/docs/meter--docs): Add label positioning support
+* Update Spectrum Tokens to v53
+* Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)
+
+### Codemods
+
+* Support Dialog updates
+* Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
+* Support arbitrary pixel sizing for style macro sizing properties
+* Update S1 to S2 icon mapping
+
 ## v0.4.0
 
 ### New components

packages/@react-spectrum/accordion/docs/Accordion.mdx

@@ -29,7 +29,8 @@ import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-sp
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Accordion', 'Disclosure', 'DisclosureTitle', 'DisclosurePanel']} />
+  componentNames={['Accordion', 'Disclosure', 'DisclosureTitle', 'DisclosurePanel']}
+  since="3.38.0" />
 
 ## Example
 
@@ -67,7 +68,7 @@ import {Key} from "@react-types/shared";
 
 function ControlledExpansion() {
   let [expandedKeys, setExpandedKeys] = React.useState<Set<Key>>(new Set(['personal']))
-  
+
   return (
     <>
       <Accordion expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>

packages/@react-spectrum/accordion/docs/Disclosure.mdx

@@ -29,7 +29,8 @@ import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/acco
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Disclosure', 'DisclosureTitle', 'DisclosurePanel']} />
+  componentNames={['Disclosure', 'DisclosureTitle', 'DisclosurePanel']}
+  since="3.38.0" />
 
 ## Example
 
@@ -44,7 +45,7 @@ import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/acco
 
 ## Content
 
-Disclosure follows the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and consists of two children: `DisclosureTitle` and `DisclosurePanel`. The `DisclosureTitle` controls the expansion of the `DisclosurePanel` and the contents inside. 
+Disclosure follows the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and consists of two children: `DisclosureTitle` and `DisclosurePanel`. The `DisclosureTitle` controls the expansion of the `DisclosurePanel` and the contents inside.
 
 Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an [Accordion](Accordion.html).
 
@@ -59,7 +60,7 @@ Disclosure accepts an `onExpandedChange` prop which is triggered when it is expa
 ```tsx example
 function ControlledExpansion() {
   let [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-  
+
   return (
     <>
       <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>

packages/@react-spectrum/color/docs/ColorArea.mdx

@@ -37,7 +37,8 @@ keywords: [color area]
   componentNames={['ColorArea']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-area/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorField.mdx

@@ -33,7 +33,8 @@ keywords: [color field, input]
 <HeaderInfo
   packageData={packageData}
   componentNames={['ColorField']}
-  sourceData={[]} />
+  sourceData={[]}
+  since="3.35.0" />
 
 ## Example
 
@@ -44,7 +45,7 @@ keywords: [color field, input]
 ## Value
 
 A ColorField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` prop.  The value provided to either of these props should be a color string or <TypeLink links={colorTypes.links} type={colorTypes.exports.Color} /> object. 
+Alternatively, a controlled value can be provided using the `value` prop.  The value provided to either of these props should be a color string or <TypeLink links={colorTypes.links} type={colorTypes.exports.Color} /> object.
 
 In the example below, the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} /> function is used to parse the initial color
 from a hex value, stored in state.

packages/@react-spectrum/color/docs/ColorPicker.mdx

@@ -32,7 +32,8 @@ keywords: [color picker]
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['ColorPicker', 'ColorEditor']} />
+  componentNames={['ColorPicker', 'ColorEditor']}
+  since="3.35.0" />
 
 ## Example
 
@@ -142,7 +143,7 @@ import {ColorWheel, ColorArea} from '@react-spectrum/color';
 
 <ColorPicker label="Fill" defaultValue="#08f">
   <ColorWheel />
-  <ColorArea 
+  <ColorArea
     colorSpace="hsb"
     xChannel="saturation"
     yChannel="brightness"

packages/@react-spectrum/color/docs/ColorSlider.mdx

@@ -35,7 +35,8 @@ keywords: [color slider]
   componentNames={['ColorSlider']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-slider/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorSwatch.mdx

@@ -35,7 +35,8 @@ keywords: [color swatch]
   componentNames={['ColorSwatch']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/swatch/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx

@@ -34,7 +34,8 @@ keywords: [color swatch]
   componentNames={['ColorSwatchPicker']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/swatch-group/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorWheel.mdx

@@ -35,7 +35,8 @@ keywords: [color wheel, slider]
   componentNames={['ColorWheel']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-wheel/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/dropzone/docs/DropZone.mdx

@@ -35,6 +35,7 @@ category: Drag and drop
 <HeaderInfo
   packageData={packageData}
   componentNames={['DropZone']}
+  since="3.35.0"
 />
 
 ## Example
@@ -340,7 +341,7 @@ function Example() {
 
 A DropZone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `'cancel'` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true. [Read more about getDropOperation.](../react-aria/useDrop.html#getdropoperation)
 
-In the below example, the drop zone only supports dropping JPEG images. If a JPEG is dragged over the drop zone, it will be highlighted and the operating system will display a copy cursor. If another type is dragged over the drop zone, then there is no visual feedback, indicating that a drop is not accepted. 
+In the below example, the drop zone only supports dropping JPEG images. If a JPEG is dragged over the drop zone, it will be highlighted and the operating system will display a copy cursor. If another type is dragged over the drop zone, then there is no visual feedback, indicating that a drop is not accepted.
 
 ```tsx example
 import {FileTrigger} from '@adobe/react-spectrum';

packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx

@@ -32,7 +32,8 @@ category: Buttons
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['FileTrigger']} />
+  componentNames={['FileTrigger']}
+  since="3.35.0" />
 
 ## Example
 
@@ -94,9 +95,9 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` proper
 
 ## Directory selection
 
-To enable selecting directories instead of files, use the `acceptDirectory` property. 
+To enable selecting directories instead of files, use the `acceptDirectory` property.
 
-This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser. 
+This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.
 
 
 ```tsx example

packages/@react-spectrum/icon/docs/custom-icons.mdx

@@ -32,7 +32,8 @@ Custom icons can be used by wrapping them in an Icon component.
   componentNames={['Icon']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/iconography/'}
-  ]} />
+  ]}
+  since="3.0.0" />
 
 ## Example
 

packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx

@@ -22,10 +22,7 @@ const meta: Meta<typeof CustomDialog> = {
     layout: 'centered'
   },
   tags: ['autodocs'],
-  title: 'CustomDialog',
-  argTypes: {
-    padding: {table: {disable: true}}
-  }
+  title: 'CustomDialog'
 };
 
 export default meta;
@@ -59,7 +56,12 @@ export const EdgeToEdge = (args: any) => (
   </DialogTrigger>
 );
 
+EdgeToEdge.args = {
+  padding: 'none'
+};
+
 export const Illustration = (args: any) => (
+
   <DialogTrigger>
     <ActionButton>Open dialog</ActionButton>
     <CustomDialog {...args}>
@@ -82,7 +84,7 @@ export const SideImage = (args: any) => (
     <ActionButton>Open dialog</ActionButton>
     <CustomDialog padding="none" {...args}>
       <div className={style({display: 'flex', size: 'full', flexDirection: {default: 'column', sm: 'row'}})}>
-        <Image 
+        <Image
           alt=""
           src={new URL('./assets/preview.png', import.meta.url).toString()}
           styles={style({