You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<liclassName={style({font: 'body',marginY: 8})}>Update <Linkhref="https://react-spectrum.adobe.com/react-spectrum/styling.html#style-props">style props</Link> to use the <Linkhref="?path=/docs/style-macro--docs">style macro</Link> instead. See the 'Style props' section below</li>
35
35
</ul>
36
36
37
+
<H3>Accordion</H3>
38
+
<ulclassName="sb-unstyled">
39
+
<liclassName={style({font: 'body',marginY: 8})}>Update <Code>Item</Code> to be <Code>Disclosure</Code>. <Code>Disclosure</Code> should now consist of two children: <Code>DisclosureTitle</Code> and <Code>DisclosurePanel</Code>. Note that you can now add interactive elements inside the header and adjacent to the title by using the <Code>DisclosureHeader</Code> component with the <Code>DisclosureTitle</Code> and interactive elements inside.</li>
40
+
<liclassName={style({font: 'body',marginY: 8})}>Update <Code>Item</Code>'s title prop to be a child of <Code>DisclosureTitle</Code></li>
41
+
<liclassName={style({font: 'body',marginY: 8})}>Update children of <Code>Item</Code> to be children of <Code>DisclosurePanel</Code></li>
42
+
<liclassName={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>
43
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>disabledKeys</Code> and add <Code>isDisabled</Code> to individual <Code>Disclosure</Code> components</li>
44
+
<liclassName={style({font: 'body',marginY: 8})}>Add <Code>allowsMultipleExpanded</Code> to allow multiple <Code>Disclosure</Code> components to be expanded at once (previously default behavior)</li>
45
+
</ul>
46
+
37
47
<H3>ActionButton</H3>
38
48
<P>No updates needed.</P>
39
49
@@ -44,6 +54,19 @@ export function Migrating() {
44
54
<liclassName={style({font: 'body',marginY: 8})}>Update <Code>Item</Code> to be a <Code>MenuItem</Code></li>
45
55
</ul>
46
56
57
+
<H3>ActionGroup</H3>
58
+
<ulclassName="sb-unstyled">
59
+
<liclassName={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>
60
+
<liclassName={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>
61
+
<liclassName={style({font: 'body',marginY: 8})}>[PENDING] Comment out <Code>overflowMode</Code> (it has not been implemented yet)</li>
62
+
<liclassName={style({font: 'body',marginY: 8})}>[PENDING] Comment out <Code>buttonLabelBehavior</Code> (it has not been implemented yet)</li>
63
+
<liclassName={style({font: 'body',marginY: 8})}>[PENDING] Comment out <Code>summaryIcon</Code> (it has not been implemented yet)</li>
64
+
<liclassName={style({font: 'body',marginY: 8})}>Update root level <Code>onAction</Code> to called via <Code>onPress</Code> on each <Code>ActionButton</Code></li>
65
+
<liclassName={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>
66
+
<liclassName={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>
67
+
<liclassName={style({font: 'body',marginY: 8})}>Convert dynamic collections render function to <Code>items.map</Code></li>
68
+
</ul>
69
+
47
70
<H3>AlertDialog</H3>
48
71
<P>No updates needed.</P>
49
72
@@ -131,14 +154,37 @@ export function Migrating() {
131
154
<ulclassName="sb-unstyled">
132
155
<liclassName={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>
133
156
<liclassName={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>
157
+
<liclassName={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>
158
+
<liclassName={style({font: 'body',marginY: 8})}>If you are trying to create a dialog with a custom layout use <Code>CustomDialog</Code></li>
159
+
<liclassName={style({font: 'body',marginY: 8})}>If you are trying to create a fullscreen dialog use <Code>FullscreenDialog</Code></li>
160
+
<liclassName={style({font: 'body',marginY: 8})}>If you are trying to create a popover dialog use <Code>Popover</Code></li>
161
+
<liclassName={style({font: 'body',marginY: 8})}>Supports <Code>isKeyboardDismissDisabled</Code> in place of <Code>DialogTrigger</Code></li>
162
+
<liclassName={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>
<liclassName={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>
169
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>isDismissable</Code>, prop now exists on the dialog level component as <Code>isDismissible</Code></li>
170
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>isKeyboardDismissDisabled</Code>, prop now exists on the dialog level component</li>
134
171
</ul>
135
172
136
173
<H3>DialogTrigger</H3>
137
174
<ulclassName="sb-unstyled">
138
175
<liclassName={style({font: 'body',marginY: 8})}>[PENDING] Comment out <Code>type="tray"</Code> (<Code>Tray</Code> has not been implemented yet)</li>
139
-
<liclassName={style({font: 'body',marginY: 8})}>[PENDING] Comment out <Code>mobileType="tray"</Code> (<Code>Tray</Code>has not been implemented yet)</li>
176
+
<liclassName={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>
140
177
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>targetRef</Code> (it is no longer supported in Spectrum 2)</li>
141
178
<liclassName={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>
179
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>containerPadding</Code>, prop now exists on the <Code>Popover</Code> component</li>
180
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>crossOffset</Code>, prop now exists on the <Code>Popover</Code> component</li>
181
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>hideArrow</Code>, prop now exists on the <Code>Popover</Code> component</li>
182
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>isDismissable</Code>, prop now exists on the dialog level component as <Code>isDismissible</Code></li>
183
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>isKeyboardDismissDisabled</Code>, prop now exists on the dialog level component</li>
184
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>offset</Code>, prop now exists on the <Code>Popover</Code> component</li>
185
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>placement</Code>, prop now exists on the <Code>Popover</Code> component</li>
186
+
<liclassName={style({font: 'body',marginY: 8})}>Remove <Code>shouldFlip</Code>, prop now exists on the <Code>Popover</Code> component</li>
187
+
<liclassName={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>
Copy file name to clipboardexpand all lines: .storybook-s2/docs/Release Notes.mdx
+50
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,56 @@ export default MDXLayout;
4
4
5
5
# Release Notes
6
6
7
+
## v0.5.0
8
+
9
+
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:
10
+
11
+
*[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.
12
+
*[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.
13
+
*[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.
14
+
*[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.
15
+
16
+
In addition, several DialogTrigger props have moved to the above children:
17
+
18
+
*`type` is removed. Use one of the above components instead.
19
+
*`isKeyboardDismissDisabled` moved to Dialog, FullscreenDialog, and CustomDialog
20
+
*`isDismissable` was renamed to `isDismissible` (fixed spelling), and moved to Dialog and CustomDialog
21
+
*`hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
22
+
23
+
We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
24
+
[colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
25
+
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)
26
+
for more information. Finally, documentation on [optimizing CSS bundling](?path=/docs/style-macro--docs#css-optimization) have also been
27
+
added to help you generate a properly optimized output when using the bundler of your choice.
<P>The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.</P>
39
39
<Colors/>
40
-
<H3>Spacing and sizing</H3>
41
-
<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>
42
-
<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>
40
+
<H3>Spacing</H3>
41
+
<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>
42
+
<P>In addition to numeric values, the following spacing options are available:</P>
43
+
<ulclassName="sb-unstyled">
44
+
<liclassName={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>
45
+
<liclassName={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>
46
+
<liclassName={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>
47
+
<liclassName={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>
48
+
</ul>
49
+
<H3>Sizing</H3>
50
+
<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>
43
51
<H3>Typography</H3>
44
52
<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>
45
53
<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>
0 commit comments