diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx index 951616f3f14..27af5bb2235 100644 --- a/.storybook-s2/docs/Migrating.jsx +++ b/.storybook-s2/docs/Migrating.jsx @@ -54,6 +54,19 @@ export function Migrating() {
  • Update Item to be a MenuItem
  • +

    ActionGroup

    + +

    AlertDialog

    No updates needed.

    @@ -141,14 +154,37 @@ export function Migrating() { + +

    DialogContainer

    +

    DialogTrigger

    Divider

    @@ -468,7 +504,7 @@ export function Migrating() { 'large' 'xl' - +

    Dimension values

    diff --git a/.storybook-s2/docs/Release Notes.mdx b/.storybook-s2/docs/Release Notes.mdx index ffeb80e7e9f..4ee220f0615 100644 --- 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 index 94292892fe7..26200afa8a1 100644 --- 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 + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx index 041a6b1f96e..8ea3e636222 100644 --- 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 + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js index 16c74f390b1..d2cc185657c 100644 --- 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 + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/package.json b/package.json index 2038982ef6c..abfa7539fd9 100644 --- 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 index c22f7c3545f..f8b07c79f9e 100644 --- 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 index db1f6c8eb52..d6e2d68acfa 100644 --- 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", diff --git a/packages/@internationalized/date/src/conversion.ts b/packages/@internationalized/date/src/conversion.ts index 538015c18b6..508d0e2b336 100644 --- a/packages/@internationalized/date/src/conversion.ts +++ b/packages/@internationalized/date/src/conversion.ts @@ -187,7 +187,7 @@ export function fromAbsolute(ms: number, timeZone: string): ZonedDateTime { let second = date.getUTCSeconds(); let millisecond = date.getUTCMilliseconds(); - return new ZonedDateTime(year < 1 ? 'BC' : 'AD', year < 0 ? Math.abs(year) + 1 : year, month, day, timeZone, offset, hour, minute, second, millisecond); + return new ZonedDateTime(year < 1 ? 'BC' : 'AD', year < 1 ? -year + 1 : year, month, day, timeZone, offset, hour, minute, second, millisecond); } /** diff --git a/packages/@internationalized/date/src/string.ts b/packages/@internationalized/date/src/string.ts index 93b7b40e60f..8b4cfbf66f1 100644 --- a/packages/@internationalized/date/src/string.ts +++ b/packages/@internationalized/date/src/string.ts @@ -18,10 +18,10 @@ import {GregorianCalendar} from './calendars/GregorianCalendar'; import {Mutable} from './utils'; const TIME_RE = /^(\d{2})(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?$/; -const DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/; -const DATE_TIME_RE = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?$/; -const ZONED_DATE_TIME_RE = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?(?:([+-]\d{2})(?::?(\d{2}))?)?\[(.*?)\]$/; -const ABSOLUTE_RE = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?(?:(?:([+-]\d{2})(?::?(\d{2}))?)|Z)$/; +const DATE_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})$/; +const DATE_TIME_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?$/; +const ZONED_DATE_TIME_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?(?:([+-]\d{2})(?::?(\d{2}))?)?\[(.*?)\]$/; +const ABSOLUTE_RE = /^([+-]\d{6}|\d{4})-(\d{2})-(\d{2})(?:T(\d{2}))?(?::(\d{2}))?(?::(\d{2}))?(\.\d+)?(?:(?:([+-]\d{2})(?::?(\d{2}))?)|Z)$/; const DATE_TIME_DURATION_RE = /^((?-)|\+)?P((?\d*)Y)?((?\d*)M)?((?\d*)W)?((?\d*)D)?((?