Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: S2 release notes #7406

Merged
merged 10 commits into from
Nov 21, 2024
Merged

docs: S2 release notes #7406

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5a3f4aa
update s2 release notes
LFDanLu Nov 20, 2024
222ca94
update migrating docs
LFDanLu Nov 20, 2024
e76938c
update release notes
LFDanLu Nov 20, 2024
d16962d
exposing padding prop in CustomDialog docs
LFDanLu Nov 20, 2024
7c611c7
Merge branch 'main' of github.com:adobe/react-spectrum into S2_releas…
LFDanLu Nov 20, 2024
f72d1d2
add section for docs updates
LFDanLu Nov 20, 2024
9a66831
tensing
LFDanLu Nov 20, 2024
301568b
updating for ActionGroup codemod
LFDanLu Nov 20, 2024
a93e8e4
consistency fixes
LFDanLu Nov 20, 2024
6d6a838
Merge branch 'main' into S2_release_notes
dannify Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions .storybook-s2/docs/Migrating.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ 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>
</ul>

<H3>AlertDialog</H3>
<P>No updates needed.</P>

Expand Down Expand Up @@ -141,14 +147,36 @@ 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>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</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</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>
Expand Down Expand Up @@ -468,7 +496,7 @@ export function Migrating() {
<td><Code>'large'</Code></td>
<td><Code>'xl'</Code></td>
</tr>
</tbody>
</tbody>
</table>

<H3>Dimension values</H3>
Expand Down
39 changes: 39 additions & 0 deletions .storybook-s2/docs/Release Notes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,45 @@ export default MDXLayout;

# Release Notes

## v0.5.0

This version includes a major update to the way Dialogs are created. Previously, the Dialog API largely followed S1's Dialog's API
LFDanLu marked this conversation as resolved.
Show resolved Hide resolved
where the DialogTrigger was responsible for rendering both modal and popover type dialogs. However, this limited the ability for end users
to fully customize the internal layout and contents of their dialogs. To support this use case, S2 Dialog has been split into four components:
* [Dialog](?path=/docs/dialog--docs) - Only renders modal dialogs and comes with the standard layout previously supported (hero image, heading, content, etc).
* [FullscreenDialog](?path=/docs/fullscreendialog--docs) - Render a fullscreen or takeover modal. Has the standard padding built in but this can be removed to allow for edge-to-edge content.
* [CustomDialog](?path=/docs/customdialog--docs) - Supports completely custom dialog layouts. Also supports the standard padding by default or edge-to-edge content.
* [Popover](?path=/docs/popover--docs) - Only way to create popover dialogs now. The layout of its contents can be freely customized but always has 8px of padding.

Note that many of the props that previously existed on DialogTrigger and DialogContainer (e.g. `isKeyboardDismissDisabled`, `placement`, etc) have now been shifted to the dialogs now as a part of this change.

### 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not exactly sure where, but we should link to the new docs for style macro (color and typography) #7292 and optimizing CSS bundling #7278

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, I think those are pretty important so I'll put it right after the dialog summary blurb

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also supporting arbitrary pixel sizes #7385


* [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): Due to the overall dialogs refactor, Dialog now are responsibly for rendering modals only now. See above for a summary of the changes to other Dialog adjacent components.
* [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
* [DropZone](?path=/docs/dropzone--docs): Add tshirt 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 arbitrary pixel sizing for style macro sizing properties
* Update S1 to S2 icon mapping

## v0.4.0

### New components
Expand Down