Merge branch 'main' into fix/useTag

adobe · Nov 24, 2024 · 56985c0 · 56985c0
2 parents 7797193 + ab9fd5c
commit 56985c0
Show file tree

Hide file tree

Showing 275 changed files with 4,343 additions and 3,119 deletions.
diff --git a/.storybook-s2/docs/Migrating.jsx b/.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>

diff --git a/.storybook-s2/docs/Release Notes.mdx b/.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

diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js
@@ -14,6 +14,7 @@ import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
   ActionButton,
+  ActionButtonGroup,
   ActionMenu,
   Button,
   ButtonGroup,
@@ -34,6 +35,7 @@ import {
   TableView,
   Text,
   ToggleButton,
+  ToggleButtonGroup
 } from "@react-spectrum/s2";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
@@ -100,6 +102,16 @@ function App() {
             >
               Link Button
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx
@@ -14,6 +14,7 @@ import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
   ActionButton,
+  ActionButtonGroup,
   ActionMenu,
   Button,
   ButtonGroup,
@@ -34,6 +35,7 @@ import {
   TableView,
   Text,
   ToggleButton,
+  ToggleButtonGroup
 } from "@react-spectrum/s2";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
@@ -100,6 +102,16 @@ function App() {
             >
               Link Button
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js
@@ -14,6 +14,7 @@ import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
   ActionButton,
+  ActionButtonGroup,
   ActionMenu,
   Button,
   ButtonGroup,
@@ -34,6 +35,7 @@ import {
   TableView,
   Text,
   ToggleButton,
+  ToggleButtonGroup
 } from "@react-spectrum/s2";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
@@ -100,6 +102,16 @@ function App() {
             >
               Link Button
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@parcel/transformer-inline-string": "^2.13.0",
     "@parcel/transformer-svg-react": "^2.13.0",
     "@parcel/transformer-typescript-types": "^2.13.0",
-    "@react-spectrum/s2-icon-builder": "^0.1.0",
+    "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "1.0.1",
     "@spectrum-css/vars": "^2.3.0",
     "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",

diff --git a/packages/@adobe/react-spectrum/package.json b/packages/@adobe/react-spectrum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adobe/react-spectrum",
-  "version": "3.37.1",
+  "version": "3.38.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -37,66 +37,66 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/string": "^3.2.4",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/ssr": "^3.9.6",
-    "@react-aria/utils": "^3.25.3",
-    "@react-aria/visually-hidden": "^3.8.17",
-    "@react-spectrum/accordion": "^3.0.0-alpha.35",
-    "@react-spectrum/actionbar": "^3.6.1",
-    "@react-spectrum/actiongroup": "^3.10.9",
-    "@react-spectrum/avatar": "^3.0.16",
-    "@react-spectrum/badge": "^3.1.17",
-    "@react-spectrum/breadcrumbs": "^3.9.11",
-    "@react-spectrum/button": "^3.16.8",
-    "@react-spectrum/buttongroup": "^3.6.16",
-    "@react-spectrum/calendar": "^3.4.13",
-    "@react-spectrum/checkbox": "^3.9.10",
-    "@react-spectrum/color": "^3.0.1",
-    "@react-spectrum/combobox": "^3.13.4",
-    "@react-spectrum/contextualhelp": "^3.6.15",
-    "@react-spectrum/datepicker": "^3.10.3",
-    "@react-spectrum/dialog": "^3.8.15",
-    "@react-spectrum/divider": "^3.5.17",
-    "@react-spectrum/dnd": "^3.4.3",
-    "@react-spectrum/dropzone": "^3.0.5",
-    "@react-spectrum/filetrigger": "^3.0.5",
-    "@react-spectrum/form": "^3.7.9",
-    "@react-spectrum/icon": "^3.7.16",
-    "@react-spectrum/illustratedmessage": "^3.5.4",
-    "@react-spectrum/image": "^3.5.5",
-    "@react-spectrum/inlinealert": "^3.2.9",
-    "@react-spectrum/labeledvalue": "^3.1.17",
-    "@react-spectrum/layout": "^3.6.9",
-    "@react-spectrum/link": "^3.6.11",
-    "@react-spectrum/list": "^3.8.3",
-    "@react-spectrum/listbox": "^3.13.3",
-    "@react-spectrum/menu": "^3.20.5",
-    "@react-spectrum/meter": "^3.5.4",
-    "@react-spectrum/numberfield": "^3.9.7",
-    "@react-spectrum/overlays": "^5.6.5",
-    "@react-spectrum/picker": "^3.15.3",
-    "@react-spectrum/progress": "^3.7.10",
-    "@react-spectrum/provider": "^3.9.12",
-    "@react-spectrum/radio": "^3.7.10",
-    "@react-spectrum/searchfield": "^3.8.10",
-    "@react-spectrum/slider": "^3.6.13",
-    "@react-spectrum/statuslight": "^3.5.16",
-    "@react-spectrum/switch": "^3.5.9",
-    "@react-spectrum/table": "^3.14.1",
-    "@react-spectrum/tabs": "^3.8.14",
-    "@react-spectrum/tag": "^3.2.10",
-    "@react-spectrum/text": "^3.5.9",
-    "@react-spectrum/textfield": "^3.12.6",
-    "@react-spectrum/theme-dark": "^3.5.13",
-    "@react-spectrum/theme-default": "^3.5.13",
-    "@react-spectrum/theme-light": "^3.4.13",
-    "@react-spectrum/tooltip": "^3.6.11",
-    "@react-spectrum/view": "^3.6.13",
-    "@react-spectrum/well": "^3.4.17",
-    "@react-stately/collections": "^3.11.0",
-    "@react-stately/data": "^3.11.7",
-    "@react-types/shared": "^3.25.0",
+    "@internationalized/string": "^3.2.5",
+    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/ssr": "^3.9.7",
+    "@react-aria/utils": "^3.26.0",
+    "@react-aria/visually-hidden": "^3.8.18",
+    "@react-spectrum/accordion": "^3.0.0",
+    "@react-spectrum/actionbar": "^3.6.2",
+    "@react-spectrum/actiongroup": "^3.10.10",
+    "@react-spectrum/avatar": "^3.0.17",
+    "@react-spectrum/badge": "^3.1.18",
+    "@react-spectrum/breadcrumbs": "^3.9.12",
+    "@react-spectrum/button": "^3.16.9",
+    "@react-spectrum/buttongroup": "^3.6.17",
+    "@react-spectrum/calendar": "^3.5.0",
+    "@react-spectrum/checkbox": "^3.9.11",
+    "@react-spectrum/color": "^3.0.2",
+    "@react-spectrum/combobox": "^3.14.0",
+    "@react-spectrum/contextualhelp": "^3.6.16",
+    "@react-spectrum/datepicker": "^3.11.0",
+    "@react-spectrum/dialog": "^3.8.16",
+    "@react-spectrum/divider": "^3.5.18",
+    "@react-spectrum/dnd": "^3.5.0",
+    "@react-spectrum/dropzone": "^3.0.6",
+    "@react-spectrum/filetrigger": "^3.0.6",
+    "@react-spectrum/form": "^3.7.10",
+    "@react-spectrum/icon": "^3.8.0",
+    "@react-spectrum/illustratedmessage": "^3.5.5",
+    "@react-spectrum/image": "^3.5.6",
+    "@react-spectrum/inlinealert": "^3.2.10",
+    "@react-spectrum/labeledvalue": "^3.1.18",
+    "@react-spectrum/layout": "^3.6.10",
+    "@react-spectrum/link": "^3.6.12",
+    "@react-spectrum/list": "^3.9.0",
+    "@react-spectrum/listbox": "^3.14.0",
+    "@react-spectrum/menu": "^3.21.0",
+    "@react-spectrum/meter": "^3.5.5",
+    "@react-spectrum/numberfield": "^3.9.8",
+    "@react-spectrum/overlays": "^5.7.0",
+    "@react-spectrum/picker": "^3.15.4",
+    "@react-spectrum/progress": "^3.7.11",
+    "@react-spectrum/provider": "^3.10.0",
+    "@react-spectrum/radio": "^3.7.11",
+    "@react-spectrum/searchfield": "^3.8.11",
+    "@react-spectrum/slider": "^3.7.0",
+    "@react-spectrum/statuslight": "^3.5.17",
+    "@react-spectrum/switch": "^3.5.10",
+    "@react-spectrum/table": "^3.15.0",
+    "@react-spectrum/tabs": "^3.8.15",
+    "@react-spectrum/tag": "^3.2.11",
+    "@react-spectrum/text": "^3.5.10",
+    "@react-spectrum/textfield": "^3.12.7",
+    "@react-spectrum/theme-dark": "^3.5.14",
+    "@react-spectrum/theme-default": "^3.5.14",
+    "@react-spectrum/theme-light": "^3.4.14",
+    "@react-spectrum/tooltip": "^3.7.0",
+    "@react-spectrum/view": "^3.6.14",
+    "@react-spectrum/well": "^3.4.18",
+    "@react-stately/collections": "^3.12.0",
+    "@react-stately/data": "^3.12.0",
+    "@react-types/shared": "^3.26.0",
     "client-only": "^0.0.1"
   },
   "publishConfig": {

diff --git a/packages/@internationalized/date/package.json b/packages/@internationalized/date/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internationalized/date",
-  "version": "3.5.6",
+  "version": "3.6.0",
   "description": "Internationalized calendar, date, and time manipulation utilities",
   "license": "Apache-2.0",
   "main": "dist/main.js",