From 1932ef68d28484f2f8009a88d5622386f42f72cc Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Fri, 13 Mar 2020 21:25:39 -0700 Subject: [PATCH 01/26] creating dialog docs page and jsdocs to typescript interfaces --- package.json | 4 +- .../@react-spectrum/dialog/docs/Dialog.mdx | 96 +++++++++++++++++++ .../@react-spectrum/dialog/src/Dialog.tsx | 4 + packages/@react-types/dialog/src/index.d.ts | 12 ++- packages/dev/docs/src/template.mdx | 10 +- 5 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 packages/@react-spectrum/dialog/docs/Dialog.mdx diff --git a/package.json b/package.json index d6fb013bc1e..828ac2a6a45 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "plop": "plop", "chromatic": "CHROMATIC_APP_CODE=x8ktlved8wd chromatic test --build-script-name build-storybook", "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js", - "start:docs": "PARCEL_WORKER_BACKEND=process parcel 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx'", - "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-scope-hoist" + "start:docs": "PARCEL_WORKER_BACKEND=process parcel 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-cache", + "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx'" }, "workspaces": [ "packages/*/*" diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx new file mode 100644 index 00000000000..5d288ea8d68 --- /dev/null +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -0,0 +1,96 @@ + + +import {Layout} from '@react-spectrum/docs'; +export default Layout; + +import docs from 'docs:@react-spectrum/dialog'; +import {HeaderInfo, PropTable} from '@react-spectrum/docs'; +import packageData from '../package.json'; + +```jsx import +import {ActionButton, Button} from '@react-spectrum/button'; +import {Content, Footer, Header} from '@react-spectrum/view'; +import {Divider, DialogTrigger} from '@react-spectrum/divider'; +import {Dialog} from '@react-spectrum/dialog'; +import {Heading, Text} from '@react-spectrum/typography'; +``` + +# Component Name + +

{docs.exports.Dialog.description}

+ + + +## Example + +```tsx example +
+ + Trigger + {(close) => ( + +
The Heading
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare. + +
+ + +
+ + )} + +
+``` + +## Content + +*If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* + +### Accessibility + +*If the component has accessibility needs, include this section.* + +### Internationalization + +*If this component has content, cover how to internationalize the content, include this section.* + +## Value + +*If the component displays or allows a user to input a value, include this section.* + +## Labeling + +*If the component supports a label prop, include this section. Please include a note about how to internationalize the content.* + +## Events + +*If the component supports event props, include this section. Only cover the events that are important to the main functionality of the component.* + +## Validation + +*If the component supports validation props, include this section.* + +## Props + + + +## Visual Options + +*Show examples of all variants and visual props here with links to the design website for more usage details. Examples can be grouped together for conciseness.* + +### Sample Option +[View guidelines](https://spectrum.adobe.com/page/text-field/#Width) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index e58e53a36d4..fccd303f313 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -22,6 +22,10 @@ import {SpectrumBaseDialogProps, SpectrumDialogProps} from '@react-types/dialog' import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; import {useDialog, useModalDialog} from '@react-aria/dialog'; +/** + * Dialogs display important information that users need to acknowledge. + * They appear over the interface and block further interactions. + */ export function Dialog(props: SpectrumDialogProps) { props = useSlotProps(props); let { diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index cf8d230fd1d..b6588011243 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -36,10 +36,20 @@ export interface SpectrumBaseDialogProps extends HTMLAttributes { } export interface SpectrumDialogProps extends DOMProps, StyleProps { + /** The contents as semantic elements to display in the dialog. */ children: ReactNode, + /** + * [Slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) + * defining semantic names for dialog children. + */ slots?: Slots, + /** How wide the dialog should be or make fullscreen. */ size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', - isDismissable?: boolean, // adds close button and enables clicking on background + /** + * Whether the dialog adds a close button (AlertButton with a CrossLarge icon). + * Weather the dialog is dismissable by clicking on background. + */ + isDismissable?: boolean, onDismiss?: () => void, role?: 'dialog' | 'alertdialog' } diff --git a/packages/dev/docs/src/template.mdx b/packages/dev/docs/src/template.mdx index 507be08b6cf..004a7e877c6 100644 --- a/packages/dev/docs/src/template.mdx +++ b/packages/dev/docs/src/template.mdx @@ -31,7 +31,7 @@ import {Component} from '@react-spectrum/COMPONENT_NAME'; ## Example -```jsx example +```tsx example ``` @@ -39,6 +39,14 @@ import {Component} from '@react-spectrum/COMPONENT_NAME'; *If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* +### Accessibility + +*If the component has accessibility needs, include this section.* + +### Internationalization + +*If this component has content, cover how to internationalize the content, include this section.* + ## Value *If the component displays or allows a user to input a value, include this section.* From 099f13bd5c9f0cc145958514e4207918673fa7a8 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Mon, 16 Mar 2020 11:37:08 -0700 Subject: [PATCH 02/26] fixing import to fix example --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 5d288ea8d68..228cbfdba2c 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -17,8 +17,8 @@ import packageData from '../package.json'; ```jsx import import {ActionButton, Button} from '@react-spectrum/button'; import {Content, Footer, Header} from '@react-spectrum/view'; -import {Divider, DialogTrigger} from '@react-spectrum/divider'; -import {Dialog} from '@react-spectrum/dialog'; +import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; +import {Divider} from '@react-spectrum/divider'; import {Heading, Text} from '@react-spectrum/typography'; ``` @@ -36,7 +36,6 @@ import {Heading, Text} from '@react-spectrum/typography'; ## Example ```tsx example -
Trigger {(close) => ( @@ -53,7 +52,6 @@ import {Heading, Text} from '@react-spectrum/typography'; )} -
``` ## Content From 8b3128c637a75616df3564c95380401a2f619830 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Mon, 16 Mar 2020 13:42:52 -0700 Subject: [PATCH 03/26] copy improvements --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 2 +- packages/@react-types/dialog/src/index.d.ts | 4 ++-- packages/dev/docs/src/template.mdx | 8 -------- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 228cbfdba2c..6a4a4788e80 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -22,7 +22,7 @@ import {Divider} from '@react-spectrum/divider'; import {Heading, Text} from '@react-spectrum/typography'; ``` -# Component Name +# Dialog

{docs.exports.Dialog.description}

diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index b6588011243..edc1718edd7 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -46,8 +46,8 @@ export interface SpectrumDialogProps extends DOMProps, StyleProps { /** How wide the dialog should be or make fullscreen. */ size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', /** - * Whether the dialog adds a close button (AlertButton with a CrossLarge icon). - * Weather the dialog is dismissable by clicking on background. + * Whether the dialog adds a close button. + * Whether the dialog is dismissable by clicking on background. */ isDismissable?: boolean, onDismiss?: () => void, diff --git a/packages/dev/docs/src/template.mdx b/packages/dev/docs/src/template.mdx index 004a7e877c6..2f62f04137b 100644 --- a/packages/dev/docs/src/template.mdx +++ b/packages/dev/docs/src/template.mdx @@ -39,14 +39,6 @@ import {Component} from '@react-spectrum/COMPONENT_NAME'; *If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* -### Accessibility - -*If the component has accessibility needs, include this section.* - -### Internationalization - -*If this component has content, cover how to internationalize the content, include this section.* - ## Value *If the component displays or allows a user to input a value, include this section.* From cb7b93652698cf3e31c5df0ea1cf06947d9e69a5 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Tue, 17 Mar 2020 15:33:30 -0700 Subject: [PATCH 04/26] fixing package.json merge issue --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 828ac2a6a45..1fbcee1d312 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ "plop": "plop", "chromatic": "CHROMATIC_APP_CODE=x8ktlved8wd chromatic test --build-script-name build-storybook", "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js", - "start:docs": "PARCEL_WORKER_BACKEND=process parcel 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-cache", - "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx'" + "start:docs": "PARCEL_WORKER_BACKEND=process parcel 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx'", + "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-scope-hoist" }, "workspaces": [ "packages/*/*" From 9e84ab5f34dd4726a0a2de3164b12e2edf2421bb Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Tue, 17 Mar 2020 15:58:30 -0700 Subject: [PATCH 05/26] simplifying the dialog jsdocs and adding lints to future docs --- packages/@react-types/dialog/src/index.d.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index edc1718edd7..abdaace9987 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -36,19 +36,16 @@ export interface SpectrumBaseDialogProps extends HTMLAttributes { } export interface SpectrumDialogProps extends DOMProps, StyleProps { - /** The contents as semantic elements to display in the dialog. */ + /** The contents of the dialog. */ children: ReactNode, /** - * [Slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) - * defining semantic names for dialog children. + * Object containing the props that each Dialog child receives, + * see [slots](./Slots.html). */ slots?: Slots, /** How wide the dialog should be or make fullscreen. */ size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', - /** - * Whether the dialog adds a close button. - * Whether the dialog is dismissable by clicking on background. - */ + /** Whether the dialog is [dismissable](#dismissable). */ isDismissable?: boolean, onDismiss?: () => void, role?: 'dialog' | 'alertdialog' From f94beebc7fe0edd60e91f8e37d09624a2e00196e Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 18 Mar 2020 09:53:32 -0700 Subject: [PATCH 06/26] saving progress --- .../@react-spectrum/dialog/docs/Dialog.mdx | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 6a4a4788e80..305805b1671 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -58,15 +58,17 @@ import {Heading, Text} from '@react-spectrum/typography'; *If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* -### Accessibility +Discuss slots and put the grid displaying what slots Dialog supports here -*If the component has accessibility needs, include this section.* +accessibility stuff about children order goes here -### Internationalization +same thing about autofocus for the children + +### Internationalization REMOVE THIS FOR DIALOG? *If this component has content, cover how to internationalize the content, include this section.* -## Value +## Value REMOVE THIS FOR DIALOG *If the component displays or allows a user to input a value, include this section.* @@ -74,11 +76,24 @@ import {Heading, Text} from '@react-spectrum/typography'; *If the component supports a label prop, include this section. Please include a note about how to internationalize the content.* +Accessibility stuff concerning the header aria-labelledby stuff goes here. Maybe this goes into content? + + ## Events *If the component supports event props, include this section. Only cover the events that are important to the main functionality of the component.* -## Validation +Close as a function goes here, put how to chain this with their own close callback +Press events? +Do I put isDismissible here (does it mean you don't have to do the close as a function) + +Maybe isDismissable becomes its own section? Maybe place it in Visual Options? Maybe it becomes a section here? +isDismissable is technically a DialogTrigger prop so don't go into too much detail here? Just mention how if affect close behavior +and hides the Footer slot. Actually + + + +## Validation REMOVE THIS FOR DIALOG *If the component supports validation props, include this section.* @@ -90,5 +105,7 @@ import {Heading, Text} from '@react-spectrum/typography'; *Show examples of all variants and visual props here with links to the design website for more usage details. Examples can be grouped together for conciseness.* +Talk about types here. Put a note that this is set by the context/dialog trigger + ### Sample Option [View guidelines](https://spectrum.adobe.com/page/text-field/#Width) From 206f7d2be968034d8cd46dfffbd7b6c1f2c6cea4 Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Wed, 18 Mar 2020 20:18:02 -0700 Subject: [PATCH 07/26] dialog jsdocs feedback updates --- package.json | 2 +- packages/@react-types/dialog/src/index.d.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 1fbcee1d312..d6fb013bc1e 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "chromatic": "CHROMATIC_APP_CODE=x8ktlved8wd chromatic test --build-script-name build-storybook", "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js", "start:docs": "PARCEL_WORKER_BACKEND=process parcel 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx'", - "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-scope-hoist" + "build:docs": "PARCEL_WORKER_BACKEND=process parcel build 'packages/@react-spectrum/*/docs/*.mdx' 'packages/dev/docs/pages/*.mdx' --no-scope-hoist" }, "workspaces": [ "packages/*/*" diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index abdaace9987..9da9d919b2c 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -36,16 +36,16 @@ export interface SpectrumBaseDialogProps extends HTMLAttributes { } export interface SpectrumDialogProps extends DOMProps, StyleProps { - /** The contents of the dialog. */ + /** The contents of the Dialog. */ children: ReactNode, /** * Object containing the props that each Dialog child receives, * see [slots](./Slots.html). */ slots?: Slots, - /** How wide the dialog should be or make fullscreen. */ + /** How size of the Dialog will be determined. */ size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', - /** Whether the dialog is [dismissable](#dismissable). */ + /** Whether the Dialog is [dismissable](#dismissable). */ isDismissable?: boolean, onDismiss?: () => void, role?: 'dialog' | 'alertdialog' From 328b578dd5caa4131d3f6c4295b94ab3d4bab815 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 20 Mar 2020 12:12:28 -0700 Subject: [PATCH 08/26] first draft of dialog docs --- .../@react-spectrum/dialog/docs/Dialog.mdx | 235 ++++++++++++++++-- .../dialog/docs/images/dialog.png | Bin 0 -> 48491 bytes 2 files changed, 209 insertions(+), 26 deletions(-) create mode 100644 packages/@react-spectrum/dialog/docs/images/dialog.png diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 305805b1671..9d1bcc937f5 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -17,9 +17,13 @@ import packageData from '../package.json'; ```jsx import import {ActionButton, Button} from '@react-spectrum/button'; import {Content, Footer, Header} from '@react-spectrum/view'; +import {Checkbox} from '@react-spectrum/checkbox'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Divider} from '@react-spectrum/divider'; +import {Form} from '@react-spectrum/form'; import {Heading, Text} from '@react-spectrum/typography'; +import {Image} from '@react-spectrum/image'; +import {TextField} from '@react-spectrum/textfield'; ``` # Dialog @@ -43,7 +47,9 @@ import {Heading, Text} from '@react-spectrum/typography';
The Heading
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare. + + This is a dialog. +
@@ -56,46 +62,162 @@ import {Heading, Text} from '@react-spectrum/typography'; ## Content -*If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* +The layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: -Discuss slots and put the grid displaying what slots Dialog supports here +| Section/Element | Slot | +|-------------------|---------------| +| Container | container | +| Cover Image | hero | +| Header | header | +| Heading | heading | +| Type Icon | typeIcon | +| Divider | divider | +| Body | content | +| Footer | footer | +| Close Button | closeButton | -accessibility stuff about children order goes here +![Image of Dialog Layout](./images/dialog.png) +INSERT PICTURE HERE, MAYBE LINK TO SPECTRUM (Contributions is a corp site) -same thing about autofocus for the children +For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). -### Internationalization REMOVE THIS FOR DIALOG? +Each of these sections can be populated by providing a semantic element paired with a corresponding `slot` prop +to the Dialog as children. Note that the order of the children provided does not affect the visual layout of the Dialog. -*If this component has content, cover how to internationalize the content, include this section.* +The example below illustrates how a Dialog with a hero image could be rendered. -## Value REMOVE THIS FOR DIALOG +```tsx example + + Upload + {(close) => ( + + +
Upload file
+ + Are you sure you want to upload this file? +
+ + +
+ + )} + +``` -*If the component displays or allows a user to input a value, include this section.* +### Dismissable Dialogs -## Labeling +A dismissable Dialog forgoes a footer section and its associated action buttons in favor +of rendering a close button. If your Dialog is dismissable, make sure that you do not include a footer section. +While the Dialog will hide any elements occupying the `footer` slot, it will not remove them from the DOM, +resulting in possible tab order issues. -*If the component supports a label prop, include this section. Please include a note about how to internationalize the content.* +### Accessibility -Accessibility stuff concerning the header aria-labelledby stuff goes here. Maybe this goes into content? +The tab order within the Dialog follows the order of the children provided to the Dialog. +This can be leveraged to create a logical flow separate from the reading order on the page. +You are also responsible for determining what component, if any, should be automatically +focused on Dialog render. +The example below sets initial focus to the Dialog's `Save` button and establishes +the following tab order: `Save` button -> `Cancel` button -> `Textfield` -> `Checkbox`. -## Events +```tsx example + + Set Profile + {(close) => ( + +
Profile
+ +
+ + +
+ +
+ + Make private + +
+ + )} + +``` -*If the component supports event props, include this section. Only cover the events that are important to the main functionality of the component.* +## Labeling -Close as a function goes here, put how to chain this with their own close callback -Press events? -Do I put isDismissible here (does it mean you don't have to do the close as a function) +### Accessibility -Maybe isDismissable becomes its own section? Maybe place it in Visual Options? Maybe it becomes a section here? -isDismissable is technically a DialogTrigger prop so don't go into too much detail here? Just mention how if affect close behavior -and hides the Footer slot. Actually +The title of a Dialog is typically provided via its header. By default, the Dialog sets its +`aria-labelledby` to match the header id, but this can be overridden by providing a `aria-labelledby` prop +to the Dialog directly. If a visible label isn't specified, an `aria-label` must be provided instead. + +```tsx example + + See Terms and Conditions + {(close) => ( + + Terms and Conditions + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies. + Eleifend quam adipiscing vitae proin sagittis nisl. Diam donec adipiscing tristique risus. In fermentum posuere urna nec tincidunt praesent semper. Suspendisse in est ante in. Egestas diam in arcu cursus euismod quis viverra nibh cras. Aliquam sem fringilla ut morbi tincidunt augue interdum. Lacus sed turpis tincidunt id aliquet risus feugiat. Praesent semper feugiat nibh sed pulvinar proin. In massa tempor nec feugiat nisl pretium fusce id velit. Non nisi est sit amet facilisis. Mi in nulla posuere sollicitudin aliquam ultrices. Morbi leo urna molestie at elementum. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Risus quis varius quam quisque id. Platea dictumst quisque sagittis purus. Etiam non quam lacus suspendisse faucibus interdum posuere. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. + Risus ultricies tristique nulla aliquet enim tortor at. Ac placerat vestibulum lectus mauris. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Sit amet nulla facilisi morbi tempus iaculis urna. Ut etiam sit amet nisl purus in. Risus at ultrices mi tempus imperdiet. Magna fermentum iaculis eu non diam phasellus. Orci sagittis eu volutpat odio. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Amet nulla facilisi morbi tempus iaculis urna id. Iaculis eu non diam phasellus. Eu lobortis elementum nibh tellus molestie nunc. At tempor commodo ullamcorper a lacus vestibulum sed. Mi sit amet mauris commodo quis. Tellus elementum sagittis vitae et leo duis. Vel risus commodo viverra maecenas accumsan lacus. + Ut porttitor leo a diam sollicitudin tempor id eu nisl. Tristique senectus et netus et malesuada fames ac turpis egestas. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Tempus quam pellentesque nec nam aliquam sem et. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Nunc lobortis mattis aliquam faucibus purus in massa tempor. Tincidunt dui ut ornare lectus sit amet est. Magna fermentum iaculis eu non. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Vitae proin sagittis nisl rhoncus mattis rhoncus. Nunc vel risus commodo viverra maecenas. Diam in arcu cursus euismod. Dolor morbi non arcu risus quis varius quam. Amet nisl suscipit adipiscing bibendum. Nulla pellentesque dignissim enim sit amet venenatis. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit + Cras semper auctor neque vitae tempus quam pellentesque nec. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Pellentesque habitant morbi tristique senectus et. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sem et tortor consequat id porta nibh venenatis. Viverra nibh cras pulvinar mattis nunc sed blandit. Urna porttitor rhoncus dolor purus. Vivamus arcu felis bibendum ut. Cras sed felis eget velit aliquet. Sed tempus urna et pharetra pharetra. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Vel turpis nunc eget lorem. Quisque egestas diam in arcu cursus euismod quis viverra. At tempor commodo ullamcorper a lacus vestibulum sed. Id aliquet lectus proin nibh nisl condimentum id venenatis. Quis viverra nibh cras pulvinar. Purus in mollis nunc sed. + + +
+ +
+ + )} + +``` +## Events +For Dialogs, user defined callbacks should be chained with the DialogTrigger's `close` function in the press/click handler +of the Dialog's action buttons. The following example alerts if the Dialog's save or cancel is clicked. -## Validation REMOVE THIS FOR DIALOG +```tsx example +function Example() { + let alertSave = (cb) => { + cb(); + alert('Profile saved!'); + } + + let alertCancel = (cb) => { + cb(); + alert('Profile not saved!'); + } + + return ( + + Set Profile + {(close) => ( + +
Profile
+ +
+ + +
+ +
+ + Make private + +
+ + )} + + ); +} +``` -*If the component supports validation props, include this section.* +Additionally, DialogTrigger accepts an `onOpenChange` prop which is triggered whenever the Dialog is opened or closed. +For more information on the `onOpenChange` prop see [DialogTrigger page](TODO LINK HERE). ## Props @@ -103,9 +225,70 @@ and hides the Footer slot. Actually ## Visual Options -*Show examples of all variants and visual props here with links to the design website for more usage details. Examples can be grouped together for conciseness.* +### Size -Talk about types here. Put a note that this is set by the context/dialog trigger +Only `modal` type Dialogs support a user defined size prop. Note that the `fullscreen` and `fullscreenTakeover` sizes +require the [DialogTrigger `type`](TODO LINK) prop to be set as `fullscreen` and `fullscreenTakeover` respectively for container sizing +considerations. + +```tsx example + + Set Profile + {(close) => ( + +
Profile
+ +
+ + +
+ +
+ + Make private + +
+ + )} + -### Sample Option -[View guidelines](https://spectrum.adobe.com/page/text-field/#Width) + + Set Profile + {(close) => ( + +
Profile
+ +
+ + +
+ +
+ + Make private + +
+ + )} + + + + Set Profile + {(close) => ( + +
Profile
+ +
+ + +
+ +
+ + Make private + +
+ + )} + +``` diff --git a/packages/@react-spectrum/dialog/docs/images/dialog.png b/packages/@react-spectrum/dialog/docs/images/dialog.png new file mode 100644 index 0000000000000000000000000000000000000000..8025a6d1ccbdeca4935cb69bc147663209b2416a GIT binary patch literal 48491 zcmeEuWl)w~8z3M`N(u-_mvnbZBPrcTHwZj*Bc0L>(%mI((A{0qjdbH4-uP-~XLn}z z$Nu=6yzkHBjO=KK|wv2k`z^hf_h>A1qJgK{uy{8M|I%|1%-@d zE+V2JB_cwsU~g+;Zes!g+myFI1V1+ zO=lzn%@=HCQ6XiBSVuj!&{U|72JHU1Z*X5GYVbpK8pfzV%F2Oa@NsDpw_ zCy(%K-$lf(pCD8G94I|M3@ye0W*8sw#f)b~-i^AwdpJ zSV!Kg=e1NVgjFIDV33Rm_E&$tD(z7|q3d^K9Q<*0{o={1XvR|9_fS4C4D*aH3BW_U%&9ZNlU|j*4$5}d8n0^N57uuuCNB9?&C?7H2>1p)Pi4gRJH|}^}#uTwEj~4NH z4~#s?(6>4}`2_;hkMh{BoW39(^6Yji6Y9io%b$@wLw^#CZOF&<$&urg@Ymm*O$t|= z-}cG1VRN`W!X#YYZjHf!wLz!Y{eZj7 zTtbv{<)uc(;1Tp-7E<;V#So{8b;fv~YYH}LhPo8j@`s${FLf%uXs7Sn7Nd$b8cZnO z6J7P+>X$E0Q7vmW_M~?y`nCpp6FrdIYV5ZVuXk{-Wo*CTpC)~Si5!H@PcKWShl**{ zsdsGAm%Oy{x7$c%IAVh;r%*_KknQGxS(#CS+CFOA3D^DMq=)o11SL{kop@ZT-cShY z#b@MpMEcKg;Xd30-6&kp&R=03h+#$j)IY(Rd<`}AdDY{}k%XGyW1xUIfBirNdh#r#iOA4OgUHcon#!``Re5V8< z-Suv*4d&VRd?u+|=DhX*bOw6EH z9gngD+kiryTQ%&UTXW^N2f<#~v&twg^nx{+1-uIrG{PWi0HG?@NMMwesTj!J3>1w zJEUW%W45Z;8R=J~(UO|vv@vkhF&&f}v7u6_Qtna(k~+BpV{p}^8ktrSD8y8;PuEH9 zxm{7O$s5D&!ud)+XTQ&0$ww>ts*+SvDXw229QK_(Kp;Rrl%_L$^-V~gkz#@Z&Ffq0 zEo#))wlA=-o@41?6}&#d!l6}tO{m*(+`fRmjlQ7x3To8C z*M&*NSH+bo*u~04uap|gSaRR0rRU-mrQ|fdb&T3Ip4_q^XIEnPW-p&(sUxs3opjrI zxfpyXy)}|J<~%k$emfDeYqI-oH+eU2_jY1_5{`X>?G@W9`=*()dD_Uf$$MlaaVE0V zszAG7yRc*Pv_q~VyB0gz?gOG}_QTdq7uf_#`5MtvpH108c}*F5?=reFM@?Bx)H*wB z=>zJynmWtcVN29-HKHSd4AwTIyR73&hysChx>>p_4=-d65(qhmJaKez}NiP|HbUMnYBOj|fvL}|R=usO)sXzRYeHmd1u>E)%mbbIMm z$zSgdacALI;%jhqa>sS4YPD!3tO-}wo?@6{wM9CTIci;E^tAHy7m)B=x^22<_{Dz^ zbp7-u{;KY_?M4uh30V@=4E`lD1UU`Ig(n#81zs(~wo|1I6V(?17p4wwqc=T` z3KnKEX2#oVO#Mvy>e5_zgcxlCcW?Zq{E4%vF+`t9lt+2IG{%m{IiG*A8dpfIqLd*n zADThr$s9|zdWzw@6?jt zBx|uQn~IrC8b=sW84>l6Y~`-M!Yo9nhTSsR8BAdAdHhOEd z`6l#sW$zEl9Ci1c5{nYB63)v}^_IW*Hf9<9n2%uP)Mapfz1$R1E!9%gOj?@lT64Tv zmnx`cqP$dkQpBTBrqo(}bB}$PP>!cM_)ylQCEegP*R||q>b`Q(r8z!#LeN3*lsDrr zeA)FFCsA+L+5CuR@jOpXVY-#q?XuBr>*j`^$9;6T@;-xp89 zpX9-Pdvp9v&`b9Ed@5^1q%24WWcoZ}l=% zl(SCXm+O5&_gLE<3{FjNShZPfbI&m0Zgmm#B3g9M#rI?vwSpSTMBa%+Ep4>md+D9L+52%A z#X!X9_4ew_%H_gzY%7!zTTins(94r4hLt6zAGP#yHoh>s;6`O-cnoc=8T5^84U8FFtUrL& zP*8j>Jm6PrV~9Sni?x-F1CI+o=^rb2!0(Tb8A*x%SOT%+CsmhKAQrK;HzsChU}In+ z6+k2=Cg!s@GT~7a760pV@E1R+83giyhmq0Q*_pwamBH5Dl#!X6o12k|g^`7Y9;~2u zaJ7NxyU^P>ko^hdZ#bgH4u57^*SzQ?CL3g#}xR_dbW*2XptU=IN<4i3IQ*8fj${<-77e5vuz zFWI^N?aP08^VgSrjE@BT3qgN!>yM{^T>^-FjQ?Q003tK4LK~3AD|1nKW$+W`Q8Yks zK#EYW|NQy*`@3%*)iBR0 zAQbu)TNHn$EZ@;(EzwIlywt78$Y8J8JeO%_x1CD$%f`qGRSO5byncJLIp=@d3VZkJmRDD33f$JJNySqf5IR(@Obtgk6dJ+&`)1-Ex!488iYEo zkpF|MUrA7;o6H}YKK=urKQ{FVKF0l5;=$V$W@ym?!xaeJe-MDa#`-sl{(|w<5GFXO z`|A$MzcUbuw9EA0@$vEL26RUGjuZR`_e8^o{~aGF=>IbGzYP6XE&s2E{=3!v*W~|i zeJH3;e7q+(*~lU+dfkt}8_7DAASv}mb;jMKIVm-j;<^zxCO$f=fiV5Rsa)hQM}|h> z`!hO+g^Q0=XHn#xK<@z>JR!6woeMYFDjLkZfLVNng`1I>idWC9VLSh6Ze!R?i|c8w zwphh$LFs*Wl)q004C(h~X6kraaCzQPB+_)|n(~wYO7htbuL%s1=Pbo-9qC1DKX&KB zl+5!1#@^`a)n8Z*$r&4bfBQ`bGNw`%r!Pfn;^LbZeDZI;9s$SNZW?^`9YeA0tt?xt3(^N@58Nmdr$6yLwR-uE{8#^hL#i4#Pe(UCc?p~q2S%oJy2r-oICj|TR`N-g)`S|<>j~@CF&?)@E z8njZjT}*K5$z!~E=>XsiM&QeX!xx$gY|H2CPecvGsi?SsBMSCJs}Ubq1Ekr#@Bmxo zVuDxc)#+1)VjW{V_tb(eqI4TdX>(6RI}~}_!@(Jvjfl5{4(&%{Ir*S*xJQpY5J z;=qzuXQ`k$5BG|xq!=l^;;^x0K}JI{dMmBO`Y^WbK_7wN`E&k!BS$-%#3qihbVa@1 z^u$)0!#pZKXPsyB=+JZI2uamVzI*S$Q!6%aVuR6<)uqpX6@CfKtLdUp=&Al6iHMRfug{mS5X?&FrV$UOH#&dpHi$SJ1`HS7;rk zxv$LHZp;VTAn;$JwlD2zH=BtBXnWj{a;s01T?+n=a2T={JX@H!I1uMGwa#?bY_#ID zYx_S#V{7DB@Y&gOiSuwAPBH^sh5RUD41jbJy8$6!c0|q!KD-cdI*`py+(B@+=J*Vm zyiG~`d<8+7z1ZD*KU*uaoy35=Mn%;a0!Mk}j%@L+C(xuoO0PBi-RPi2_th!We4${+ ze1K4&Nkw`E>k%BrxD)>FOGbHlKOW+lEi|2DY+NNyR~2W@Zw93J**M&V3b2jx=L#Iy zS?6)*n4Q9|9pw()>Cl;(riwyBxs^dVu~IsTzEFqk!+=ori5?eXA@D5}MVLYq1yJsO ze^#K}c#q0W+&hXI&2BKtx`qHx9t*ILxj7?X1v+Bl&jvg`Y%~-pc1I}%pNS~l&)^*> z7(4KNCl*zNt1M926s~)qb#25zkx8F>A^EWzc=f{{3lZ~y@A-(zZ_+@pcM6M62uu9w zCD25JFV9+3MCn!#$nR=_(&p*(DOr9ER=3!Q9R*<`I^ZiQY`ks*d&6b_5dYv%f8ssc z3IFZ9@kWerk!~E3qq@};Iy(y?JQ@Hm)Jr;H2&}T3ffkg9LrR5+q6a4^9$uRb5c!xE!;0M`9-Nb*4! zr8ThD`FJ8ocs~|G&Pc^t8lLRWUwN(-U#Y+Kkh%QDLe&n5z@Rv6W@Y5vY*u#N?+;OD zB{L>Q1F`7wndg?F>)GR*{i#HCZw>c8dt8o*WvOF4+@JEMZV1U%C}jxQyps^QTiNsQ^Z=OhxGI)u=Xag#|quQg6O@MRTM( zt^_aKDn~4Q_$I7T&t;z#mRkX7{zJwEGcM>rSM`AfyTo4u zkSl26~Co=g>J7@B96zhS6`&#Z#&)#=5zQ75KCJzQo%1Fi`H;2~O<69%6PR19 z9l*}Wg8Rz$b!Xd~4n?}G9gbI`bc-xQE+kOUK_Fj()5n7Wo%kiKwG+e3nUpGPqI!!B zI*}Wdz))oqn^`yq9%qwo*Q1-AYkSuy>=(T?nyt;JO%yS)=_Hw6*lDapa^P~k zh>iR5RRRhBa;g2apvy$`)I6t}l+BQTB{yfmC{eIF9tAH}P-t+TfhsO0EHM);&~#PN z9TySc0`gf>Xbhbebuc;95FBnLC)o`c_j$7Ym`OR!9L@6AK8R%UHMU9}wzSO^VR#np z^~lI@WNI3SvPtjVs>$!Mi4rVV_l=qdSD2@!&uv8*8rHKLdAn5Ua%|7l)Ibn( z3xoN8JJmpTCkC{-^I0Eu&c);Fyc+kzpH@3*WUB- z=Sh;{J_8qA2iCEbZjIL?Zabph~revRF*j)BWHc`#QS( zh-Qr1ljHnX^1vEZ18RdnEf;+Xvt@N7c)5uZt*eAU63 zQ-vYZyR}uV(XEW8H0?iF>)SoC_5Gf2+=Sp#z;PrwANz1N=SG7_)%Dj&A;N+I=2zpsQ6Tbdgdi#BJUUktR$ z6C{My**B=tS~|_#G}Op3#4D-ET6LYs>Qt~kJ=x+^?)MpzxVt}fJZbHxNso}(PqstR zWUir3+;Ic3N6PgJTu#yi(h#GUAf$i*Ms2&~^)5Ormj38uRr$VfTGclrlj^uXsdsW4 zDBkeH`8MUoQQbSFL2s^=&nh-VvccJVzfN4oJDx&qSNU5qN(r%s%I^2^zBKb74(lTv zPWtp(?jWgHS-}O5q3stUCE5pLi->}A%Or^HphdryLspNZ*B*kzj9)D9(vQ$r6T z{6n?9%?--Dd&B$MJitnLO!x!3!h`b^Sa1=6m2d+qu~#*Rm^!$(@89H#6(p;O^6wU5 zn2e(zBw1VDO7c|iMA9a{czd3`Jq>g1Io;79Xs)EOJBB!Ju+^%m8C>B-Rqr-Lddkp+O9p_u9G`_FlC#ZBS`BEXNF7C5c2Xt5Srk3fl)T(qt)9jjLJm(cdMJDM5N-#mS ztCuId61hUOTJ?D?)~0#|q_s^=LbR$9DsGY6*yr4GorC@+ms$OXHnRgFE>nB_5Zj;-BXE`P+6Iq)T%~I`4#|{nzM-eyR^dP&+ zJ$}c7f`lXLB{&;>*G(Dp(wrz&i-Zk(&qxFtokH4bZwhBjSE1xO7jS$V!Iw(WB&GCX>6#2Ns7mod*zROlnn2;MQwQR4R*5}-u%8&&f9e?vuO;HZP5NK?7X|1ee4`M+eISZ zGP@108Hl(R$S!7|>mb?Zi0>6E%DXhNh;Mz0HsAIjw`kR|#CnTw7;% zvASDE6E0i!WC;7R-sS)?y?CchZ$Q*BuWyl?O1?CwS+9UIqq@2$nP;afDN+x;3Nqk^ z7y)AOEF+c|Abhk3VeWeA*!Gawbnv-_*air-NA$`irr!t56WA4p-&^(f9Xl%x2D;?4 z8`SWdPTvc#GeeLs9vD-_x#VfZ0$eqQZfp0O5TaVwxgh+B_hbu`yz6PKy$JlJ={Bt< zM+mI%Qr*-Yd&!4%1Fh!ghau`jswy>`1s6XB3@_ESE*L6yZmMtH&KwLFi=8UwAsr9C zIk8R<$e|KG@>B&#xyQshNcF$*qrrn5Dqw8o_AAKaU=mqi0-<16 z-+(j)t~1WkkRjD^W9Vtp;(HSpEwjcl4e)1GX~%b28tJ`;g1D?B$6RH(jqNbUHQuwTo@^k zCsXi0g+)UGz_8u;kU&2>FLQ<`-StbRQ<&( zTG9kRDPu`ApRfCXvRT}`p9H1o(m!%p*M&fb1SVa;PvXz^g}D?Ix^#c-Fo&6_6^F2P zkWc$#C8iH!{;-Qgmnfy!ZU$fenEvXLgL2w z{@D2Dw<1*8Eknq z+>baY%{SmLIyi4j=Z7IFI!ue+b{}6iq~^A;NepRl_PM!S6?!O5(*~v98jH5;>Bcjb zB&_r9lU}a{=nT?0c2?(-a_%3H&0X@f8fM%x|9DrC`H>Ozvabs>G>=KpA+VV;lMolZ zx9254jyYYd7W{7|S*7+@g$JWETfM6%uQZxotDV@Bh7D?>MA$ZE{_4jO zIY=!bCqo|I$;_D75Vf*daOtB01+z?YKPFIYw*|4)(g}*BZR`CH`@(VwRR-!$mzQ-? zmRmj#Cwl95Rw6DNt>UKShmBL^B(A?tv9}g>EOC17vgttasWUkz)yt!-or$RMAm+N0 z+x{lRcLW znUepFYS}6-;ew=b{p=dOcZEpL=F_P>eY|nJtDI$Y2a9ZjzI^M$o03}R=Y5D+6HS}Y z5}NHfci84)7WIJL61i_Ttnbw~cC&Ey*2l(i258E_JkhlGZ;vu<2i*WVx>Wv1$+^@6 z!atPnk{uZT^bQFZ@R#p^+KNW!>13k+Y7U-_>wr^%E$40!rVY($Z%Msc-!kcoH%*9A zi$~!+?;W2{-RM?R<5rLsmztdg8H2%gq)>HejP|~e4Oj|aofG(Gx zH!M|Ek=sPcB*sM~@fw!>Z4X|SWmW>s!q~J&8NT}0_YRKsTj!HBH@Iu@bS080P+L3P zm+;opCsTrKEJNe1TgeS6>;A?8_TTN6WEjOdv`;*qlLPbrWKL!V7^DhwfiL!@QL?Ij z_!R9I0(5)W%)<}%}$w=`w;ZYKONObPZJtMT78^DTSS!85pq|Eo=(%Xlx}0x=NHp!-F4J?K?EVQ^WbmTX##xNZ zkrKQ8S^!e_#yMa>I^s%`iWrNg{(jt%j_S^ttrBg61=ha1CUf)e0Jrpn!Wfgy!XQsu zZ-TkuX-f*r5IH-K(;pmFEi?Kmt5=kod(+=)&p>nab5e;M5Tz-b9Q7XOG5{8yd={wA@?mJ1j3 z?zl1V>Uy`UbgmR?J9YUP{<=HPbK^F&4tZ5EnINHO{%IUCn4slaJ^|VJ*AZ$=#4i8R7#0Wb-O5R) zePx@xlgAikgDy9X^Tnxj6L+V|T(@1Acmc5{zI)q#%*W@Rb9w>eMrL$+7Ece$qUP4~ z!*Hac`vxMT=5xJ&6{y}mR1_`?sO`a9#Fx_}^OtH~+-~iq6{TF$ zGciy z=FBK3lc z$LQ6B(B*7VeA9^f!{_0d+E!M%SMft#Q*T@?+;i?^3ZB*%-|=PJyKbFJlbe>Zn69<% ztOl%Mu{NM$ifWP7znOM9-<|mW@%&y+tiL#PR^t?M*({xEpoPt(eBtGyeH}u`WmJP<<6D|E^M=yrv7<~uLr6Pg>s-;RD(wK?>x z7Wc9r#4x>2k{WX@hS8o!ugS}0(tvuT?tS~1c??H-6|t?sO)mfCjOBAV$0PqL`m2I215%BwW|6t$ zybFEd^Hcm{T2Q*rb>x!S^1E2agZu=?YY6>Nwqaz zX2kr|ujKuV3d<3zk7&GfPN{(|zBV$egi$SX#9JAq`0;cZg&0lK7{^%X(y%IXXW^ij zk88o>2L*cv+BK(29KjU6uy=F@lp>dWuIdlhgWVCfeaCn6gF{{?7h&!0GlJ#Ay9}WL zH2fUKqvX9){*B|XdywaG2h~@sSa|bBtBG@)2dQP%)vHCl z%7)d$4>j3hGjw&3oLW^=oxJ7_m2=BS%tM`KUI=3n%%>Uc>Z_DuloD&$#rOEQ>xdE1@qsLXe8@Ez{ZMm-IiWRAS6ym;hDoviu{B3c* z+R~(>LqjoLQ_z8*nW9w%OrNGcMe$ZG@W;p9MtiN2caX)?t z4em^Rec%cL_|q4h>7Zlc^;qSn!0d>A595W+jNhbEDpMHhI2cDjNla;2-)1?x>ajC+ zu0RP_Z@EgZrp$BHcXO9&Guzm(h@J(#xci_{7B@T5oa%TGU#3w_0DIJAr(C&DF?zvJ z^}HL0_x2RBosUl`&(S(O#dZIy*ifu{ZrS0pLkrIaY`*u*M9aw-U4fqwzU7SS@s{OA z8L?o$#hHgPm>#9&SUsX7`b)U%2sr*?@4&K9Q9rX5!X6EmCh-9der2;ix3+IeXMK} ztS9sIqxskmD~PEWTs+T5Xc*=9+{)_9p*=aZ>d8dwk$z%n(%))3i!7Az-g-)uD1zEo zzRp~NR5SrjdFIjn$#nUVPmMW5g9mPSsa>TQ{PDwyueQ!G(Mp?%nzH$#yiYHzd}Gc- zE`ZI_oicct28t-~u2=6VU;BWEEgKHo&T^02X>oF&M+^4w)rhPg0ll3ZkCik*BnKgT>y|hSi zQo}CBgGMI`hM6_bhNl9O6)wzG4i$B18^lYDGK>AaK2M65OvGcE6e-h>IO@-Kf2eb= z#4Tv9SLU5xy*!KJQt3!#)L36PVw>yu9TH5D!OTw%a@Yi+FKo}D;ja>bZ7(mNX=o!{ z>2z2n@@qvwe9QS$+>$=b-jJ7knr$M-#Bn}|S+r#Iaw@o%^>o@DrbL`=5^J_L`AJw` zFB2&zu%#PzR$|R+d$eU=ATXy#fB*4^+=fj)hm42t@-X|j=g*;3Ce8i&^9M*!r*W#6 z%w+_&zKD;wr+35OF6+AE^@*0$D>qpB({C5HK843_ZVP#M+Sd51aSbniD#zIy+n8D*nTB%kH0x(d7@QNdIid5-yGJ{ zA*UQWYd)U{5(8)%JQ9FV706%>OeK+gL2&kzR2G(70(2AERxUgycUppnmY6?fY0Zak zFC}f{amOxA@DCbhq}{w-?s|x6OZ`bTO^3VOG#(r2Ifp>HIo^SW4ce>ffF6VEu_jx9 zdz;i#Uvki|#)g?(>bcKullUyY?B#XXr07ZJmJx?-B3;q;xIZ-*XJ&SMs;$-a9TU*DEHv*0L^7Gbt+VyVz8*K@>Gx`9@nV`DU9c)0gd=SHJk^Tp9b ze*K%W7Gv%sCNnF74@}GR>k+d^&>)2p*TRDl2p;e)hJLWhphNL3QvQf84KeohA$Enlu;m!^-U=eu4$U*6} zhJ^OI0@(|%MT%3Ej1-j^j#qkgTbY{q!ffQA4NAqSS1qaQ-rgCV#>=4=(Xi%q+MT#- ztm5dK=4l@SW*7QxGs+y7HXoL@2n>!i8~PU6w^YnjDwcP;ry7!(Jbzcejc*AFUD|?c zHg0Zvz64wTg-KeI_nGnd>;}lJp314|O`r4FA)|)9*f1^r^xVAN^|58ScI4QAq2MO5LbKs&mi-Ib4du{Ju2ziTTDH*V} zLu`Mjqgb z6}i`dA=UB<*o-HlI`vZ&3{TG>@QtnLUgizw6Gu0HnD zb{0zxTgGpLHi;vR7?Ia#k-=0^d^XL_sG|vLn?eOvp1s7v{&E(tfO+DNh*tZ4tgww7 zMqcCY45!)b$yy4moN=sfUfkO*rw?q$x1it3Gs&cNVOD27z2tO#%&roX%Fjdp>pFcf z^0nvX*jtIu`=fe-N;w$$EQON|H)QuGTh^mH4D(^ z@XFPcx0@ici3npd-EANFPnzVkASF(ezV!nAu)X|*o_TK)82aK*Ax$|19LB$vs8IXs zw$!*{jK&FhAvf#T>2f=S%@FG}sa%zg(kN>pGa^m~0-Q#k*alGRD43?V>pD+0wQ%Gy z%&(Cf%$JyRt3NLZTi3=?u2^Oa4Q|v}rv;8x6?li*x6VAM*yz$*`vng(=v7s(+V7=O zJ?siiJv4t#Ow6+hH_XN7!E6w6q%%pByi?u58}(*>I61~^eE5!N`Z2PVMz6u9*q&p$ z@?1R#|8`wDy(ux4eK@*egk9?~mY>u_Xnub$S~qy`1Kl6o!J-=j#24`rh{}xyl-*mHpXxfyO z?k-tyUN%kb0~+5yOYv*!w4GW?NDU|R=PLx9o}gg9F43G#DXVL$x6EIoju_?``l4L` zHP`;}Xw;N}-_y4o4uA3e4=1kL&;|NbZ0UfvF$9^ro20e}<^&ZV__HkgB6ok=w7F!T zTzsA4G5r`b?sx-k$DFMZL@Z8~B{R+Gk8@ZPB&&?daQxm{3)%=}?eD&Iw0S!Q#sp%% zj?)7PY6C5`zaDQk1!?-Q!uUH3psge$Wh`g1o|!cn7L9Ep1I7GW9D5|1PP1gc)%>V8ZP#>`(#~ooCmbsZ zsJF~63#;A=#|<=(smq*eX=%6*`8*Xgqpq&4NXRORbiNB%_X zT>T(xo@yOhBaX$92Y#Dz8l0WmZ*-9`SaQ7ki|^}846ILm;u4Mf+iaUR-lo@Yt1j^< zf2Y%Rw@oIXES=sdkGNo9u0RzXuv|R@R}rrKfU^!`Lla#EwdxR48Ps0TC>i{^WYpg= zu!M@;L^<%VI1TzvR)R;W=_Y0dbK@L!6-u1_l{i$XU&;3>oxL3|Be>=_g67}LnFYm@}+0C&IwsUt9y%4eg$jJXaq7|iUyxZZgdMqWKJXhZ1I6q-c5BwrJ{cW~N z&pDbe+j6}v$8u4)VgGXcGa9p?@kez~gdYZ?%*e{mSqF!9On>GQCOEXE>6V4+Z16*8 z<|?~X7eA9TiqJR?PD{}urdc1|^Pq_iR3wuyfQoAt*vfx3&+a#9Yu?2ok%s&o1c?AL zf+}|qfh#}-u0XJnIL7}mCrku~a0)zA3#NdL#;}3sL zS4v5NS8wy<-$Vc)SFd4HK;#NWf59j-lNyMMwR?}XzXFn>rC$grpv9XF z;b^Ep0FRyva{vYKG<4~MI~E?$gL?)LMt;wgZUI&*_rG34_+K>=#pd9_KPo{7B}Ll7 z4K~;ekA%B_L|6nn7#hgnaW0eFo<{~;C8FbA*qOu!;^9o&p?Cw}!usZEfU4s%aA)3I zLEEdK!xx7C7Vm@vFd|5bB)1139$mBgIPez$=%kL53B-s5#6_Y^`^kZBpxd)?J}*(a zK|v^FBAA`W+--WGVDSrjRjstE=JS{6(j}0BrT6Gn6aCa=pq4}mQWP<$5G_S8b)0~x zVT8;I#AHJH<5~#l5KJ_spFe1hf?3lr&UbUCV61tdAcUm!3wZaKCdB}ONn^X-1VF*Y zJnlr}#d8U8*(9)ZJIMe)`5oNC$pDR!Oy)rK;2+85Y9t*?0(dk3T+`14tntVo{*DB) zEu`U~65z-}fmSNARUun~EX9fj-Aj(*QL&6!pLc^yPJav+G<=Euf{&>s!SuCy3OSE# zP)Kl|`KprfOt5;fQH&i>hrj2$zX9Pq<#ZMm0F??WC-H@!kJprX$4R1DGl8 zg%V6`2b8I!D$f`dtR)o6M*>Ra4N&;K;UA0v=G~>?Rq@XMjtd$AoXxI?0x$sX1B3#T zA@n^e4k#5h^&!%q4PCNLJD~hrh;3l2F_1YY$j!>_RgoH)r$59I@jX%~cK}UlP?WAG z4&3wrQ1(=4+$%4eoT^yrTn>o3}(_s zk3SQE7hXLu%s`eI02w|BxuD)h_Z!69>Lvn=D3G<4JQ%d&bx;5`6)uI z1D=3ks#<(7Oyxu^Ujj{LU><)sflo)8;Kpq%3h;#mB)}8fNz(x3S0o7w*QW&d${2AG z!2_Cz$3#DYH7x+jG38r#0U*+AHfDb;9Pmz?X-u*jAlFMO-wxI&f;Cc|@>@#)mli`= z`6WPOi>X|c9l-msxdZBx-yYS7N=+2+@v;D=2j9K}P~BlnQJ0_K+n?7Tus|CB4nPj2 zOwgAFTgg&5`!zRIr~o)`S&0A#z?eS32t|QTF(t2}0lB0Uot}Tqw|DRXH;gawjT4Z>17ti# zJ#WshDoR&2o_X?7;*r84ej!o1y3_t`z!+Sx0jtkXNHJKcNS_l<^=Ni)KOQ}i06tN> z4<58lg5dxSgfGm=z%9`#DDn`rEg*wbRvyALz{~+u4dQ3Ov>!EOt7nIa8?0IXP@wi$ zDO&oFp9l-!V!$StfYOLJ;O|{JQFa(UfM@gCyyx%E7AaMwyI#<~-~_E&dMok1NM}HD zOnNf?QS0uHcyT z*WJ9tx{&p7>7eIP_1hxtPpo^MO145B`4~S<0g^b6N|Xzf;n7F&8M;Y6UY>H@-{D4q ztv|GiVYGCoU^Ud8nX+m7qKG~Grh^7&z3+xSPk(;%UvDyv^1lXsT3MO3T0~!RKvPT_ zR8v&M*XGO!IoX!8v+By{Dsd*#a!zMTnCMlN>W$!<5O5`El8;eMmWw%GFJKWlmCvCe z*{AJ69<-{NlON-MUcL2I2b5HetZB4AvMPgQ6$u1iNMS)?f4%pz$2G5@=wDZCg8@`* zB>s%^zf0?tV11>_m%s4;dl=|S10Y!gwOZW{^!H&1brd*^NBj%`)K1|j(|e$Pr|yBl zj35A`qa$PhP2$JbFyIhJg51D+0VHSWe7@}40*z@u6@mPh^#4lz{}+X?xV)c-fx9tNefZt^c=nKX!bw@+%l}j@*B@YPF0?gnsH73Xk^ZO-`o2BCz*Rz{3d0D$4&3 zMlM0a!Z9Mi)R(yYv~DyU+mbe5Sl+qTap;*|eVNM8Xy~BAmm+P34-&8AF|I$an-UiR z(dDidoWcSxih=A>K4`n>DjG@1PcxmS##|H@FTPJA@Iqv^KuAsX0((>`loFupjEBh@G?A z!;6E{D@;7nZIZ-J+>&d;t{{52vTrRd?Mrl+itj4v^{@LFOo2@Q9F#X7LB;?VDeZ;` zPwWdYh5aAwy=PQZ-Lf{Sh>9Xf1Vl0jC{c0_B0-5Nl9K`rNR*sGMRHC}1`z>~WYYwR zt&)U>MluaFL9!%?P3F!9cX;>N`sy9R@4ZH) zieIj}!Wl+9t-RdHeH}VN^<}P>@X-oL!L)fN4PszS=w|0~z+>Y$R!DEr@-K$#jwM)< zsQY@4prHS%?x--|K_2u6nd_?9gO(KLG?e~ZX3=iln63Y$k?$aE-vmL&$tLwzNSO007i3N7eJhOZYdD;@zc;`;O7;|ji5d)wc(;B4mLmd}w|Rb5%F zLWy*~;q3F=+nYP{NcFbP_7?*VdJ4Z_IyAIj%PwnM%u0H0Fntje4T?Sn1da+T%RTd2<)Nyr zdZ%86@b`CQG>QAR+ih-)blHD^g0iFa&22W!!<(Aw`j2k1)9NthayWy$h_1(QfWFZo z3D)=5=w>gC_Ci80Ug8S}}NGpu5O(V;Z)M{m8M6$gx_vtX)Fi0b=YZ z#PUgdt|gZX>M#rI^Aq&G239gW$m*?N@UpkwA4u`Gui3^p_eQo!Q4RYsx0v(Q*kZO> zmU|=p#iQ&GvX^V;@@!-_(~%vW@fDMqX(bvWxGGWU9J=_CITy3bphdUq$4>rYZ{)b0 ze-8vqZGIsfOls5Q zcu+anN||^I>v6x?rnARKZ2$dZbV-jzVwpk3USjT5%hr)$?AIW_YLE?Bco+-cvP#n; z(BWogaXU#N}MLSp;*-Kn0LObLi!#W|by_j0dFg zQu7o>5}u>C{^U%lWTBz7*pHbfO#}1w1MUGwcv(5$+$z+4%Y`hoD;6K?5mMBz1xfB* zAR{ChUavfUnx8JorZ%}c%W=Bcubw4uSs7!hUXeRSL|L${oB-gg%OI?0uvn|&c$iOT za+5|Qxz5ZqKzR_feMOYgdGE|zxP7}lfg*gvWh$y$P0)7lEuHp)mv-*25}LxT3^Vc8 zhtZ&e6lUr7e)S?;O$3+BFw8gTt6gkc${ZJS5+1J7>L3=`ZY!_}%ZR+I+R(1TF1+g@ zpRb^8!@7i5+`zgBqU?AF`^6;xqbxUM&hf&*ZxJVek#R0+0!Mw4#LL}x1cP`gMDQ$3K4iRZN3R<(0RNR|vb z)Of^}kkMoaTP-3geSf@js(j)C&EAkMBWg|hUTrqgXP~vLqtX9;YZ&XaypO40Htiaf zuH?IK#Z}4ITCbl`3u===U!UoiCFStA>Ntz3KrFRXbV%S_qt=Pr|1AQL-1sh2%@7WN ztcCCQ3aK4}mfOhnUYjJ*G_yBuPiZXs1h>Q%;Y$a&y?1}Z&4^c(7R+B`7CH?z@f=?!|j4jHcOwJM@1- zg}Yw{5>vi^QnY=2Y5eXN4PXH>kb7pkJB2*x+{6!AizRO~Nem<`Bp8gdC1{8FiWa}v zj(C7v(X(1MTnkLmV8I)=59E;Wl0tJh6^H! zLd&z}@NnMV!)>LJR~#}oCcKRFyJ~4E?~O>Q?^;su9UsCNe9Z7uD)l;MKVcjJqXuyG zQ^3-^j%9zRipyeNo*ol6pYO&7ro4v)*G;48QtMSZ+!Q+K3^->q-4VmW+x5>f8M>FR zO4J6k>I^2%EF2%Y0Hy`rU08P5u`RxPM4{3+{{2)}_r>rkoh=Xz4x5`58|Ng1^Vlv3 zyW-OW@_-BP{^(EK{dPt_DdHONPoUS!zu~lI9F-f%purA~v7nSb3$`O^L%^JZUG(qB z9MENyG%}g${9v%QOK-gino?vz#f|xw5x{IwGX{e9PsFRy8XO*JH0_ zyvry)j@}BfG=Q~y+aM)SdMRW&IsbwPuMOAuA#+il6wm}*7d#{{pUookuyhDNSl2LV zEBlBi<_QUHFqFR6U^kyA;b3_C{9fFCHGNHomfxm`1JeH>X%W&KH)LEz)>SzxPM;Yd z`-eMcz>fnooC>kKS0s*~lKk%GoAK4(*DC7(gUNq`h%F?&&;M!fi}WTs?Hpz5rn^i{b#Gtx^?w{%>^FEaOB38jBHUn4~A^J^l0(olwFB| z9>?(@2tcWV#b>hU_r9SYp^Pp3ds+L}>p7#+G!3RAH$Xmt)E!vDXl&2hXk28Zd?8!@ zgy!xj2$A|g0W*0>MyL^1*v9r7afFp}YNIBcN!=*SBbq@kSF9H`giV@Y$`tdtq3vl5 z!fnUc`K0ynqh&?FsIbfIjJtiGbuOIVwt-4ed_o|wnz+4vH}+_Bpn$jhFxY+Oc-NhV z?k>&4wLP6XFUieIi_K%_)*l7QXuLb1_z1sI3?S?;#U3z7H_3g>A6GX4j zU;}~+{3K=ofxAyStz3ZYHT+tH-|(zPILzIFk%Y#qI0*{nxVG zk%^W%?e3e^22Yxf8WEyeQ8MB?gImsR=v!0mk}JbLWvjP5P;*tj8P%i z@p{R25Ua5a}|di&i{g_|EMwVNU^tC z{ATMr*cYZNO6I+BE@NOPpLeDKA!V?hkB;O^tvt9Fb03!-%VVR*odfb4tf3AKG$Zr_ z5dLH=Oiu~8g)Ne^Xm9 zdaYaOCDi-9g~2mfE|JO0Z?CIoUI>nA*EqIMI@qGK$q3Vlwx3wzb=9BB6(?FBD1?gD z-tsdT4CFylYYbo|z)X@HB)h-EujUG3mtM140+Lc^_Oq$HxWe(+X)(QQ{0x+Js`tz@TJ z%3=y(6}`_p@fC2|N^l^%=+JF%bMMdpPsAM9^tG@wbdHY4V>#b545jviJu6 zvYY3z?Ezws3dghx`$=Zt4qV#7{~LD?;*ta0@h$FtAv}MwuHraS^7o}rn4b-zL$?>T z6HojoE`W(~!Z#kr+{Dxnuh$S3;zvuSY5Jt9heD=(l<70FH%I$AQH7;jdO3?1Fn5&X~MBevB_x$&pWcW|MP+v@c zk(u-EkwEf?((zB?dWYJ3^(*g93_VMA#=J7>HofX=bObH(?LODO$hBHZAV#oF{H=p#2VOQW?4*uPHa4Z`8Nv8g@Yw3%-jCuId zJLQk0(S2MxSwc*l63L=$CQ&I`sT3mt&s;2x3J>zLisCN%m+2lYP}xj3b}d3yBCb{+ zR_>0i4<0nyj13lcr7$C*>dQjgIR=t^Yd z?s9&aMU3yUuE~BSl!mZuwdM8pbj!gu9LB!U4RhVrH0s@DXzJcwtpeXH?YGhjP_e@& zTV4;i97*gS3GLUiS6TeXJTUVe+}vj<&)XPB%k*WAN(X>JUJqOW!yVwRgEe@!zcGvP z6`4K2j<}oM^zVL5#L)0kXEp5CurT^jZ7Yoc%p!?qV?+be z$%vchwjH+!rTKW|`Q#I@C8rs7n%Y8T*xKQl)FiT2g_L%mwC>Rb2LpVCws2AUg>sDatXx23*fawMi zq;?1qzJjfMBKZ7c?AOu+0>-At-sD;@zX z;f^CX=mh*+mJtfRhh3pj&%Y1GWxiz}&ITqTIQ3fR&jdk5F)0l}*iZ-u`1}b=fXQt# z*^t~fp=l>S2bIUT`$2|Yh%10`uibSt5Cju>M@?1tXM$Jo&%POweb}V<1o!z3>I3Ca zFk@ELQT$W>DTEb_%hedvdmBh1mmqB9-Gehsl%1a^C{8E%lo1H*!fR&Xcgjz{6T+nI zjCuwdbdO-O;#4B(d~KmfzKD zyaYq%)HMC=i|6rE8}B5a%4&sKRo=J&w6`s!B7%dK$C5#$<=9GbylPSLXmg!7MbzRw zm)^t7*y2yYBFjT8yPl2aa=YI@ja+cCZ#JlXU!SAGqc1rI-|yM4xKT@7y;Q!Eb`AXRt1(Gp|ovh0$6$X8si@eS_c*sOF~9$AI<)euDy! zgl`?K^s}eRiUA>rWF|mqpV(gt$h1BIzxZBASL@zswdxBQ*<(n)w5n+ z&sQ@)`ROehp>Lci@QA*7>69Csxg!O7pMz$JJzZThd=}%{9#12at9N0nEM83siDJUS z?(IW8k_+>roZ8G{C7WO3zQ{CuHfpgEUfneFwk%K;)MM+C*KAJq>GD6epy_ifzWfkw zl+7Bca2{hhpz4uY$~iW6o5E~kWKcb$PwaM-_Fxnnz~0Etx~}MB5BuQ zUnnaL>++G;jy{L4y>zv|qV!20IB>4}`W&Z!(xHB3xm?R`rnfxu4mdpebtVPP5+RfD zP?H|XA79}CG#SvEns^}#CzULdk=u=1wnOLHqn8!FylGs`9A!)TwVP8ge8p75CVw;+ zoy3Vso(Lu2 ztx_Hq>g==4+iNpf3}#lUd;W^NK|yQBAsgf^H}_7n<@s&nY@bbqoVu!#yOa!?v*=F( z*1lbdDfPAe;|&lm2EVbJZqW9o%uCGVaXMC%s8DW+{L1J1^tT7#*3ewdYfdYd%pkMx z<@mA~yq*QSd=$TtM-IgZ_{)qBGk4WhtJv3@mbIc%10>h>)G6%j9v3x;l)HQ{__YYz zSElYfu97YqRMn0xIx6b+&Qt61GV5_TLo36RbbT%iXJZ~|tL`<0#a64N%=o!cMv zhMyDQKzNwL)8EgP(qQ9dTWr=An5o?t^&OaUsUJL zkyw2XGd3e37bN-kR_}M>BjY3)PP_65gL;d1JUWleiSE&R`PC-x=z4v-&Wqd*yBx|XFnWd!Ddxuy0iCtyx+xFPr1w8~z5Bgm1U9D=JE_!Cy+AQd@IJq}= zQH+yZFW-hG+KuAQ?A&7tKJC}&(P38JdY!3^i~B7K@seN7=Njof?7ewkS-!IlfZ7}9 zqi-WqF~^39gD%qt@vUw5DQs4YOOr$f2E4l>dX`clbUMCX+Fo#||4zur> z#q3PBS1J&F1rxS$tl{nTYvL3|SSh$#iA2>mB!0v56cvh>gNvz0i-GPok_;#@zlj@} zJIleo$Doq>i0cD5Dbja~- zlqKFLeI!w-l=r)(4|YixvsN)nra2a^9neekoOA~}NVd`kZQMy}3t}YO?=28qX_jaX zkz-f8Lv6S-74HgaKIM2IZ@esY#p_`+X8O`@nQofzlV$5IROPOKdDaqn zY?bj?hO75C{v_+8gZLIP^07ho@uAzf98Wt@Pfeg-_sc$NwQyoTE#5yo&^6rmX1yDt z2kkFwHarpHopOSqOS{a68LT_+eI#`mn|_k9*QrL!q5_jIy$m)PWfJ+dd*?WXZ6pf$ z67wQ6?6#fHGrYXJ0#8b`_5_BNF-HrgKikV5*+@Gilooiv_*-2$ij1E;b4AW*NWKgm%A=7m)EJY~^<>aZcMWsr&d(S0hq@})}`&8ufVx&a4pl>xPQ?$i~>{!Cr zuf$?GDy!FM_WGNVHUz3InLvzOKMSUjK)jez6rM z^4eak38mI~)*~q4>b;^v=62;f(LEJWX;S*WI>cTXrDz%VlsgrNVy|qDy0RWE)em-H zHVRv-JoLWjL|>l?eJEjKiN5QucVTJ6j@wwVqh-ac0+M!C0nidD2E502V6N~cl$3~qWU7z=Jlc~N{~ zuik|=`IN+E^bE?`$ag?~)z<_n#Yrt>C}4ZutLsiFUl7tq&tgTLLWrk!nwnr|s>;iv zv;D|od69m8pnf^*c73X|Zl%rphGXQL_+{V4DDCRm^uw75w@jOvUzqg_6?X6aN&)k2 zycsy9YtoTe?92h*c>b<_dz#Ha{TkB@g!#u2lkJhoyX8#`GPn3yYw2;_aYP2Bm7`)Z z2y#3M=?LQFC9kQR%}C9tlT~3jOi_`j!g5xa(O%r}wLmE$4}_kJ&3!f2m{{TLadw8@ zU0O}VXR1``lGM+C1geWc>h!u7zOqteLY?5zAr-}A0@w$6Jejh)jB|1wV}zCUm1-s3 zCew#W5>qaTP`u&r*y8xC&`<%b2;G!-Mp?Gj+bDbVE{p{61FpwmVaVxz9G+TiFxi+| z;ix9Fq=(#0{!y#doFeqaL*4+DWOXjOfk<@87+aTkw6*-jYGbABN^e}CnU}HfGQZbK zL?XsAQf{T&Sx5ax@-27^kSlML8@Kx)o_CW`XkZKCOQF|1ovnpv)>`} zR{o1O*!6ii?gyJ95}w-QkV+MWr7~xZ?R~_mpMWWKwUVnHx%U9sT5M7wr1WS`*<|4z z1T(vWd?)s7P{jE;B-WvT@n|m)GxIJpAYi98zI63*Hpb^WMaG2mbfmBS{nw<6a8|z) z{uw}lAP`s!XMgJ!B$ze~0Uad{(?kqx>^9IsEdiQs|Ig74woq#d%X|idl}l$wk}4pG zxdo1D?dAawyK(!Z!Ix9JbdQVB?*ul}lUzky1|0-d;15CJs6wZk^lXFW$D1<8cerOb zw`#Z=4%h6Z49b=4hX?un6W!zubIsU0;n-&sUJZS}QsL!`?}QdUT^Zp{a&^~nvDrMd zE?&&nqV$}3Eo?bAUUai(7?t&IE?>M{WfHEh{(NhAr3kt!=B*z~TRP(>VLeR{6nO&9)vy>MmW|#KPFu zmNX09H7Iv{!^!7NcX8QpkRnygIm!DGJe1BGk!UpF z`CE)vrElfX)+Xhlvt`3lz2QJnBMOR!7*SAl@%D4|S*>0fEU9rT)oKv&jFBmd^sWu# zws||r!AsK_c?QT;Jh>Q~Nz zr9ly)LWpI%+jBTcQayk6Zr$EdoAfwR2=1QhW?l|GcJsty*N#1<94xt4dBrLWzUZ38 zCKlR2BB5caU-+f9t*yLamHW^@?@fx%)P?lsFQ`eqoQT0qDO-^b$(@7y&W_y;(o}tV zgn3I6h~S2ZVgu80?3P^MD*t}7zPDIhu2|6W>eH@p7r-qWNE z2)v$x;?1bbr(kSk8l&CgR~D8%J|$jo=p@`jkI;W==Vc{A=9ztg@T~Q1KrwI=Nc>tuju0Hz`%0>3QniSd7;AA@RCPrxK6ZZKojXrHhO20n+P6>2C56Y>Y z1exHHu;5__M^xr1ju*Kwrg+wBzYc2!c-M9}vGQkj}t z(*kp4$_0(gwxJoGk>oa@jo`AlPV+|hI^FCaz`Vu=0JHnSZ|QU}RJw+?<+7B~cH9CB z$?6JTN`LcJYg#7gk1u81rv$=F08~J?13v)CaXAwB+d-r>cy}#M%LDJ214tcYJ0INC zLS}l8xuXqpQ;w?|2C+Pie9pePo`ow{3}F?kx%bq80LDaWUU^#DcMl3!h3`Rr_ibsJ zgl~RJA5~*+ilZ@byKsuh!7Zu(-`w*4d(y&QcSEV8U+UFXYogRS%ad?NyOJ>$&&J@k zCO#JUv!fVcgOOVE!#oQyuh|dx#?sn}7KRP>J>z|4pWbsOK)-tJKpFiQ!vXNc zEtReF$Y(mqS$^Kng!fPtx5vk&U|J<&-tQ8kZgjhgFUqhql|?0=|D#VamY1YRYA;H9 ze7sO{)2`BwvEL4!Ikg|~lZ;cP7QjycZ&N)#s0$-i!vu<;e$8+P`#DIb`|A(g1m> z7IF|(7!&K+SZCC*=~uk8e0A4F1@1G~(pf)dB5g?kN5Q~Kz0FoZ+qaZ@*bIxoj0wjJdE{wgwFL&YOL{{Ura-jlvz%> zRaCmR-3gp13#{xgK8#*&-G(F;LzqiSVE0h^f-N*O9WublJV>kfBlQ3k5Y>OK)3bYl zd%*fl<6_`ulBVVoHXqjQFW5Pu9L=7HF8{{YX}By%u1O+UYlIRnG1M*@E1vPC7(48D zwJZC%e1qHa$<{k@v$k(eDd5o5PCe?WG#fYX*B>i?)3#)e?SKRuR120hOrk`fVqe6+3?V3^Aq6v^ST;+?0Al6n@= z@o;TxElF*CcYw0`cY@>k*L^Mw0gc^Hqjyx$!9`e$o zF>$e)y2M!u7tk3XFl*nzOOY^3I9O>bUhjvqd3@`%mDy_Hq1J)UT}njQS|t$aZ+q-6 zkPE6jS-q4=D5wb;WFPMTAwSx0skUi5R;u?ojW=aFQB5B`&a3622Pd*|dM39_#nD$X zkVmC{-%D{bdhqBmdu;`64=Mm%q0$wQ@}+KT{r2PhDUuHl%T|L6J|ApN8Mw-rN%3L7 zBPFH@I+N*qn{KV`Q(JVE88{RbZ`WhO+^E~)k+7>{|5aoNchHQ9Zm>#-^ioH? zS$Jwf0DJLsS-*X+%e{EZes4BcV2hVJOfUe=h0tsGN>h6{usb$LrK5!;EUd)d*smDd z2pp3z%G!lW+a%FQEPf7knsvl{+s|6jo$9RSLmWQAB_J3UZN@2`&F*evbbn-yCXf3G zZ<|YtSEBqr+K3+qh>9N{f^R?qB-w2Cr@8Q`?vGTIzvVc>!XG<5aAi2&zi2hp?>OKj z-4Q$-KVk_60oQ=xlE=YyG6U`!DKBt&j`U-{eS0n|jU(8R6YY1YTx9pEf29l!?!t}n zW3;o`QP-<*FdTw*pN8E4UXrb*U(r4@ozs}+nR5K7{*-Sg!Urn`#?h%-|J%Nposl-V z)nudq;<@Y8QPf>#sIqCH%F#DVOXt<_V7lC_eOik`)GpPIe+@F@8#(;B5#^IOk1l2* z);XKQ>WR@S5!bjQR*RK{t5Gr-%|cK`v^~m~Ix`_zTvM~kEG8zJ?A}j0(sOfT-4vHG zu3JvaXbdD~q@ufJU8m3+Rh$wdSX))__Lo8G&dacp^EDS2e^?Ffsi}GK6yAkqXfkEl zu2kBLk8H71m~50^aZC_qhsCwhY}Tb`Os(UTo?N8msP}dzS{qNS_}xQFIx zRdWnhb!Hx6e2BEC&hxC%bg}=$`(`LRv=sAj6(i{TIMzZ<$x6>U*audDrb!cl*G5#; zRI0i4tt<#xAnph*>a{Q*a;3b4BO}#r@y4v}r}m11jEaLyqEG>L`1AdYc*yLRk*-VJF8eCsUItwQ#z6tgPvqHKi@2a$@yLp3UGFSp|Az{Klg9(QxGOAJDUB03{K4bT(ysjd>w?F%fjYXaMIN|$~& zjq?r99(9r|YR$WT7i)DFDgVUPQ^T7!6XrYjv8b-=%?Qz)Yv~ksGBRu#k1CGYorf+H3LI6RvdekTW7Q`M`4wL6^;!RL1aDK*7kci7g|DIaVg~ZSFOYG z=xWwL9BK+la;so-Jid69%yiP+VADa4!K7O4*#8defg-M72c&}>@m1@EttS3h=%s_bz<5b|d!J7Y%uU}OtQOfM9&g5LtxsrB29JLSN9mr( zU7C(#Wue*D| zl8Vc&*76qWKY2(yn>b!=IXI%nOW{}%xooU$2eqhE*ZFF(%2>N!P&~HF#reEkc*Vj0 z$!dj9Rgy$$kAT^LvVXY+hKmqlbe&|7ILIx9pd9Ph+0QRmtJ;x}6cIxn&9UXTecWA_ zuVOstY(P`q-*Bn$5l2K(dQU23^l(~Ost`V2QqQ^M$lX{s-M6N%Jyfr4BGb5p)~mq5 zy$lPyWsd7&h7EZbrea#B?kVh_E_@nc)RXi~!ba8km###2$q zr-8_Fcx(2=G(aoPFI+OV+3KKcN#E1513yZ zhef87sXUfNtNbJYF`i!hrNuo8Qw+P69uHRHSxz>15$avUmswXrxxn`xR&_m1-W7st+REgO5BN@=#1sFPnyRrX`VnXWZHlAlVyXi8)8qT| z0WwtZ>BK^W&!R#UB&0o(sKFQ(2Oi?BU^0_utpGwnnxJuY3Pgz5KMz5Bw$#_xJD)4n zh<>CVI7%9ET8&r02F~9fy^2es&bM6XI$a}G_@XROgQFtiSNA};Nf$=C5sSmRE*>vV zU)1P?OEKTu;Uao<4VMH53D0hjlqQTOvTXXJ1)SDopPS;IIt2^?X^GBvRt4!``ZI5I zMH&9Ms9`YI?kJKm2v9VXS|$_4hZDpZtG_?r12$QB)J>(NdRE*#FFm6D<_(hYlM`^) z6SWYqexZgvlvI^toC70?k(?zq2O_0ZFReE#^(lkhokek7`p4710@00%rb@7(k3Pf} ztN7g1_FnMRZIIQ^1wHKV01Ba`r$L1TZakwriM8LUflroqCX6h=*ePpM3$y@$2VMjp z{*&-e_4+SQ$f;&nnj5-tOYO?VX53PHg@5&}Am6LI5S377P+RasG=NkE z1gVY3EZ`~oL>;N{ofLo|IM<6L7;##>{trb1K`3&ybweB;fF!<(+_m7}^x%T8a}ob6 zOi`BqgZV{#$j-h@RmB?`Z=|G!|zH--9l+GERV5 zt=$a~0;W{d7<`&0j=_~QaD8hQ#J}(o@Fiy$O__1D&*YN3NF}ms#fZIXTwLa#cFvDB zBkyzIDjcm8O>PbeY%RhrqM3MLz{@e8S!-}VgiZcM^8eP1>mr7vQpsu~!Iig93?4vv zYS?sh0v&5Oux7nATBq8(Aw<I;173$Etmic%5I2fdVC z$9VxNO}7Lt@HFPl0yeb^!tPVS$ii&$p8bOqAD!52+>f-@t1Pt$=%*NN- zYITTHjhpVBiFtWg-a*|fGBvGQ{h3KB_wR$eAD`5+_;Ai{8-OM1pX&PNAEJM0LHCb! ziuf*7zt^jX<662(8;QwN9%k|?(Hq}t?YNNMY-vJ@M z^&oRK5<1FPh6ND9qL&O)n1fx**smgB1_LEwsjr2H(0VwSxf2 zwa5sRs;GSZeh7&!wlgZLEx6Z`6uD`;&6ilg01*1U@KY^@h=H4SoD10xWd|!&H)Pev zHk?bkMs>FH*0!64>93L*gXwq8Q|7-KB8GyqMA}qV2bCWk-Qm`ok9(xRG9A|2s`BXT zi&biJhgF{^yoCe(-koAWL=vjMgpify&#F7J#FYICY`D^mm|Hu?OjdTjeY{a%_ag$G zLVhvvmK+zY$bWXhypJ^oMO@o48g_|dz2Uh&eFPNxjSx&8TUV<}g`i_{9zq&3%GK3i z#4?v9scrFuvK?ggtB=vk{LYWF(@W4iwV7UKNl>QBHc$4*egO-X+(#<3{`=Fy)sK-^ z*&~rjO2)%X;P{g1I`UR8?8pH|L#M4-8aAhPMrliV~pgEhgwPTMi z`h{5rn2H?IH~`KN=`<=^N)P4FyV+H1Y1U7#cVu1RqXeQ-suqyxZ)>6Rp0-iptn=Kj z{+Op$B5m`#E1IbZq}F#LA@YL`wlSUp*rePGW8Y89U~Wcz2`~Iuuij3TrA_@W`=nzv zBr$Vp?{~Oj^}@l5|HMi^<@UgbsYoH$_0Dki(2S`X2ZcmKf8*Q;>UzZa!$N;FcUskI zEM!i7vkanLVuj{*udiw_E~1$d;Ypn)@-3pfX5vw$ZC~qDw)7mc2$|#&^-NbSypNy` zF(^cskeME`wj7=WEO(v|yim0LAfM{nf~!9(i6#8KpHk)iKuIad(4~DR6CH)BcWTW^ zn@OK)#Zjfx4?2@EZp{hConp|^B4}*tg1Cta*{Xkua-Qm~7|pHpl-f++e8uxR`G!u` zRhW$0kvgZA(hMCYo2@!DYFN0MSqXEE%#=s@s|h#DcBnz^RX=XTh9cH+v`~{>Dzl&;xHj#w-0}JG$nXf7PeKJ6P6+n% zjKAy@z@?o=t&C0lQ&cJWwdKTXRMEEGlv}wRA1>EzJR5PVXs?OvSc8=RiHu_*%QX<;DMDu z2tSV}T1*`(TD<^w52oYGy+6{EwAC?ET?UFP+V-;qtuLtg|FC)8K(ln9*`gd;S?xaP ztY5OzmS+K5Z;JbQIA!m5ifej{SU?!t&GN8xmBq)-wZitJb!<(GFtuhXuL;7cMn^v* zw8~Adl>G-`#iLy4KKajLeg_QB_#buh@%ui; zN>JuJnHt7v54c{eW#6Ffte-p?W{-3i`uoqjKi28Y*X#)-fHO2klH1i z&J}HH6K%%E8p5;Y?wYkebFB_Y4MeRho5rn#$-Ou)_vMccy|(_wr4a@-mFa2?a*Q1K z1NI*VquMgctkkjIaydVB{14s=!eqd^N9@6_?-;Hdby(4(XfyAaC_MiOZc*I;LIJXg zlTaY%-UOBZfofM}B@&B}X8&;;*)zV;r|7xfU(D~+bcZ?{U52RnMIiQU<+{{yjZVq& zYAG@|Un6dAYYAGx;P20C+&+O{ zzFs=OAnG}FGKCaS($b%~*1V688qx(FiVWSyCZ!aQ_Dpozs@c^O3OB1E98E{NrP0t* zTIu1m}` ziISg8a}E~A={Nz&Bk8|~$!cI{w^CdRBFytr9~luU8vTI^MDLa~P{ZypZMS>t5A6KT zcN!$oNceUzc~N#gy7(Nu1$ZSZGXNC?=g;XdlFEXco(as}0p2>WHSENfMiQST*Oob& zxgk~B&t_8lG?h!V%rMA?s>zz0H(jvdA=Ksq5*2dz8|pbGR>Hp7G1S=Q0L@yY=39Jw zoh@_8*K54)P;K`}&ABcjsa|Q#p}c5Kl{=trrLMr3s+qS+sI8+dr)g}yo57%)DTE#O zvL93kt3b)pN5DBmXvh`ez;>gh(Y&8qmpHDreo};=@D%|mu03SCof5XBTkq$lb}e#X zVBP)jH~#8j2*UrDir!j_FbuSZG_%x~gc4dLd1mtNJCwE|=BZ(Nnl)V^Qtxv^8T`?V zGM_z5L>!E$O*|}vJF>KXMd}U8+ib%sYMRMGcL>YOvCpw6Y?kJ*g5s>p=QFQl@%k(5 zhA)-l!hL*H>oZa&%HUg*X1F+iA#SSrJ`kG%^A*vvugkkL$>eQ6OmWs7=v+$`oAFNaC_U| zS57dX6TqMU6>$@iMC+t_ltS6Yl%Jda14ZP9wuRr8P^JWtX4y}%X}17ULK3mR6CgO~ z4Zx69>%~=mTt+j3L1Qi%XJu#p85n>q{FEaBTR2nLJr5F)Ri^c+BtAh?*|_Bq7W{x< z8kgFhWBT$+6|7bM?AAZ<&KxY3e}(0N7qkAdO#`?1e}w))DR}$3PUZKqT+K!Y^HVH- zRq5$+kk@m&RZt*~G^-VPqx)a5J7#Et`Xv6J#=%%8WL7`Zi(6ot_sC48dw?oqiAhkW z1Pw7TJ|}{#T&9@+4$|FHi}LG|U z+;0AbNE{;zO$N;xnave&kIORz~$@b+1Or6_8 z0s~BOQjx{G6ho%+^db83JD{7Z6sYVfYQUa!h_U=LL7_~Z^N%oFGQ$kq^Y z@EKCRSRA?aVw<}-V|}OH&Z$#O^V`4ba4|u_xgF?GncVDO38>#gfI9mpijLsl8S#G( zzfK>I_TtN#QwF>YXT|6r6W8%2@d)^&31GNqb=`S!+J{_*$nW&tEubeEz+c^1y zW)dPiF+d$5$vmKR*MWpzO@>gMat5FzS$EyEJqjGB$OJ9&Ag;y$<=#_=NBx0Xp!h?X zJf7BQ8;TEpcT?VxVD&5@x_tgKy#G55_y6sMc;@f^@Sh3c|Gl&Owou`|l&B#r{CzZq z6}LT|=p&Tn_s@^k&q0AixJF^b@)+*!DcD^~C?v$Ui#?jt4*jHZ5mVl+|q>$-)@eMFb zT9$tn#CKc?(GvG1Fv5e7pQK~wfZgu=)ov~S8JPcX=lkDzj4!wx6TDN6zroggUK*t< zsMr!gPv)iZW4ehCmwfGcTQC%H*h^<4X@c-vP)&KHcN5oYHqJFZ5sC3z^jR&;VDWg? zzin)W81QcR;hn!IFy3Ri>||z1C-Mj-XktKr((-cxk8TcQ`WA#Ll zO524etBb=#TV=EG8e_9Lwmo_J;s{l~KxyoVt%nv34-MLu?xHQ?`gckv}=fT2<>=d$a^NAOK`r!V) zYgYmzh7r+4(SX=;P3)va;4HySoGZpv&M^azfBvr?pOI747Vyxw=-JHF!GIfQh+VOu!tap$%hBl`1$uW)A4KtZ-vfnu zf90&tym|;cHpp(Y;9{`Zv$VffSek7a<(7*@rGnh z;<=kC;PG)BHc;rf|6idva`}H$=;Wjg;Q9T1p2fTOqFZ%vExM15M%cO#nlq8y2IBqu zHK1j=Xt$_ja0qan5O1|`Ra(tkmh>WHY0hRF(YN9~1yt%_`#QFp4K;u9tpC^5`t+7W zp?C^tbtZfnT0vc*W5f;Ve6Y%)9Jg1(Z-P?q?8cu*Gg71o0`sY)=&uKX97|N1SY$kz zYX>MJNy@i%J}obrH5)hic_G!z1hida<`}KiT02&{5RFd;bNC(*l$YSlz$r!SyiYV%ctMxsX!J>rLS&@&`lR#A9Pl z(-)uq*~?*8%l&T<4SiaMYw>!PUzsxfLEBFp_jOvrE*}FH#Ou3XbHPEiq%?ODuD72D zE=JV#e@?6x2|Ct8*=kyDOu7r4#xoC?L6SD^U7K+nE*ft7K%6bb)D-ma6Z-Vfrp@q| zLOY)#u6By=1xBVZ-LV2|J0K`EuKqU{g@WGw7-eZUt(feXm-$_q`H#q7JSI!;d z4ZPiG>lqS$5YQvf&_~NLn&OY`eNyyW`)$czQFeb8bu0FD-Lv(XZOZE1GU~?(GLm)< z*cFQE$&01P!%a?}&&OPU3QS!Ks_qVh%W6V7;H0?Lb1)OvHM%{DD-7-DY zf-4;z&8;FklTZn8jpP>(TZbjE?JGgTpr~+sk)Ec?Hp#abjp3L=UN#^4v|`|9Gx&M+ zV8?EE!JX>+^rb+4pP{3op^`mea6Z;zqNB>7HgE9GSv)dE9P5LBmWq)SM>XLE7t8}+ z8`v81hxK`7al9E_X`W7V#sHsVu>kC z29L3WGd;cRZO#sMNm9eCC4XZnM|*FN@1wn?gy%YMB{E=yH3l54W3t9;#};o54v(?w zaHW956`VcvE4?Cc$JyMO07y)D;y&MXCLj$QDYd5oW{2wVgB_x!0MZ(nJwaMdsuTZD zduJNW*4p;*4m#+Bs^h4R6m3l{r4*%#w#I7J6r`mw#jG{OP%Sl7sUl__)Er5ZmlyCb%nkJS7lz!*Lxl2B{m|PR<{bX$) zV5qj_Au|9jd=57DsX)eTGU}qvr+>K97tki2zmPfSImm7Rf>`z(jOwJDzVD?8m!@GUsz_hkdHZRQpyKIF;hl)F+Ich(BO1TyL2(>2)P`X^V(b*sc zdVVSW3Kp%^qZju0e+BbRxw_lq)pkaRliysmf?T$y;rdc6e6CDC(VP0z2KVig3lG|q zJtx1+sdY)&2+boR$G=bw8TK40O8G2l!KPSYM%s#>Uu1~QIm3o=Y zH&lB2suj@!W5+=ZZ-=MyaH^)}=dYP6%2%$AG|}Fy+|e(?YJq{?n!bsF4?OLH^`#@% z3p<9Ob77sRbG=qICt6!;A}Z`&o%|}_kywZh6EDMGA10ljuS3D#ORaVqgGO~&-0R30 zzjD7M!`YV`-J#O=%6J=CJ_R47jN%t%*n?5*_zKYMa7^aOgOmbMF)>YgZOWcs8>^ly zZ)C)}TMJ<#aStmuB=_zld`Ul!I0J>q=$t(%`#GJ>*6}aogVK?-MR-2tQILt7@gixD z&jk%mAhGZVSq&G>x9^It>v8^``JRIykFD5d`xzaamOAV8GGhkFjm3U#nf1MhNY|w+ zv}I9g8gr<4)(Sn$DM;2;q7VD8B0!kME7FSE=|8tuML*c*$E{~56I1u!(CN0rl-BJl zX>?F2Hm6*W6yiGZQCn~)iEuZS?m~;!&^g{e0bPpkM4{nP_HqzPoKde|54>OsqAPG$ zs>f}-rPq%?DP&#m&3ZMy2j&IyPm;%cL3~Ir@0}e?-!D9$mPzn?px$mNxOn;>Go4Bg z13UNU*nZHK6y;8mM{|!nsIDRIm_MpH8`Lk4z4wbZEN`*mlGd>woeK%l%YzznLo2RA z>PAQXED%pBeRh({2pU)BdM}HCnl;js_np<*mD$3gJ@_{b9vyv*(k*0Yav3wt5-V)8)0{wa_E@Vl6we@5(<0GPFbkYNW+F%$xRWWJT3g`#`jpH zwg?A4vIAyZAykQsfmH+XDD}TB>EKvc}OD`$~x7 z_H4t%&_eg|7dJNn2XpsVZepVArcN3lGpvp-^hi|Lj>~;nls|Vo-%n?_BBnKt#g-nVRgtrEy6#FD5xB$zO$Pf5w|X^Eq8p6~h0I z`OC;7<_R7xjYLZ$Z_Rii`4xv22}$5}7e49Jawhe~jZshkL-Fq@f!s-#&_Z$#z-o7T#;nV7*Z>|A1hL3w=0m^|DXW-itgj(HN7GY@h2J2L~jVWBVLxEX8xW*VyLnZzEZxt*J~LHA6SC{ZC=e1nqcow~Pp4 zq#b|o;Ay0NRVPWn|K>id7ni=fV!jsfN8K$-=em&)9F}z1J5H#oJkwT}yWfQ>D_&*zsTwJB0i)dD5Zaj zwKPpAY`R;p;{DSPw*afbX~xjgM=Ke1@7le$@$Xb`AgvPzm1zjtcOSp9!t!fmM>{0U z7&$7&DNf3El7ree-o9o9JSGZOu#r}go(}YmVQtYxNH*WF@cGvXkkUtfQhlBu9ZfF% z&Z&uPM*wvKfh8p*`yeENux?16+!)C&Yy7s{aQ{PSKCo&LdEpZTD>WN8>dX96SbP1v z1XR*i@H1+nbDgB0byC%(yL_@2?w2)NLw&7E=_`tP-nZB&T|D)5pE&1IdUxmB9Y0ol z4)mS?(vG?bYq#cULSR-RY1kmZP`ipflSNVs-dzXkm8XddEUo(#tR7EL?v|lm_qM%% zKl1u+Dd}ze6Nzii)w^QMt7=(V2Zh~jgpJ^B1Jk*`$HE*SOrHgocRb_6xfC zIqh;i!=zU}I31NfFHd)JlSEi```U7X=Nwe09D7$?3SsHC`>(JKf6yiN_eBFxdSmUci;J?Ut}LR z*kEvK6R(!6xDNLhKf<~9jcw;r4AMC}%AvK;EG~B$CcOnBXsV;+eC8RH+OwQ&IXbK@ zjs&)|A_2A~Tca#bNi|O+p~Od4*=R)!u7fAffR2Mm=XBy4yXuY2mS^@5RFN^<#^lN8 zv%&;dlPwxSfmzke;y6jSgzSvJF|pd<1}Hy%tsAXMa#5C)WNurVG+2KleOWS;u$UlQ zub}OPo)`t13ckGZtTv)Vi6`-i5BjSJzhy`7dAAWwQ8NBMfyZ!cNTi8fOvc6U#tkd} z9v}+(9`MgK9;GvZaUp!7Hb{+2iEWFxSq(W`2qhbco9KWvfXQ?12X-gQP3qT0BG8~o zh(a#CqoCb8+KH>ip&qlfQ3Qz+xf4AftjbDASGyDhz17tY#*TF#^8HYr(|FXPXfdWs zBaEh}JBZV0w(Q4Lw2Ou5FI%HF$!_PVT7Q1M1`U~D~@+0z<#A@_(y@S#{b4;>$%5M$M)Z#2+ zx}Bkq8Q{hhD*v7VA_8An>I~S(X3$mH}Sl#8>`e(>?Yidh;>X_gI}>^7@f{) zZ<(FS;ky~W7(gd9ECmyx4~ z8Z8!SiZkL2N6a6Hms@>UaIytCE6}a_(Q)UYM7%=~8=PFPPFD*m6DCS%0#eJgItR5_ zv_03%N{xPn9ND5SOqEY$J<16S>^2!RQHZsSjZx_%5k<@^ z8my>ui%v+pLw{*vE#;Nc7@^f!1E_*e5u|Ib`Suk>+&b53H|r`bLy%xNIh9DOFn@I;P9bm!1p~QvC|YLoG@W3C6ldR!U#w@=`!O zAv*P$WBlRZBzF7)m0UJpXTNp4XcZsidHE>XI2VN&f zUICtKE(6bm$JsIGMX9Cw8rxsYuf=lSgtkjQgn1QYDFuE$PYo^_AMAB$l}DV^f0sAD zj5W6ZeiiN#+3}(JsL@xKuA$p~(vO+xTmzoJ8{9W=f%(QIhhR_prOh9PJ8 zy@YAWNLekqf2lt4N5t$E?Q^&nzw`gI^I0xo7&5C~=6U&n zRnKG?1Zyc#o@FFTI!PJA83>xaG3Zz98bK6WE@-!fhoR$dy`q!g)$DLjT0+bg079y# zb2LN|&?emRU1lh1IqSC@&=yquzG}#V6z!w_;=<8wazrF%ab!R_nDX=roZ07RcMuTA zJIUbH9rmhd2d9Nrsu{cUb=K{dhB|6s!$LE9 z!vvl`U6&o;es^ULE&_aVnEPR`+F49Ic%{3hBc=zX6pvL8PN{DrBGt_80g=$bW=C z*bBD4k1vtrK2dT#GDgBUy|IL+ZVVTD9a0@Nn`h@-q&Oe@Obb+1w?33*y9#%3OZUi1q31xJq;;_FE_2i}jCYyS>PvBeJz`ig`r3VydDOEgs`yT#iJbH^I(=8ms>%8NF#z*he@6sU%-Fy9=~t*U1zRa!xZv`EH)RDk$!bNHuTae?1O-LJL&nJK!- zU=}Di$Zr|I*n@Y1{U3WD5HZFm@@a&R@G;WIAs{QbbvvFC2ES`m8QKyICQ9`Tdr>4q z)!_BjgIV!o-vjn9qr!T!4HSwrVvmtjnFJ8l&AQzaC4Dd-xTjpH96(0;0sxZv6~G2_ zo1NA+Eq{l={+)vlUrlF-ti)tfUI3D%;hCx@oXiu10>2B}C9KBJ$e99po|+ffV9a^& z9CQDmMPtnXyMVVQqqu15BG1hV_J1>AyAbmP88PIm`}D)q7zKAe|KDEz_X7Cu1@Qko z0-WkmMin^)h+Os3^lE1GEZmAkJRF^7ZRc|ody^v%o_MbGCkj@nATUlA`>;}mN7ltq zeZz@KrQNn;C(!PV9K_|9z`h+YX9c=caF5=;;FLyZ*?m3ur6}*Y7vUlk6|VBkE=Et3 zx>?+)4pCrXlD00-rhIA~+>5#q>>GiHJpj+syC6+f@Fj_j;5gj^yCZF@GOF+(O0X_G zLE3oVY*0{d-LXGLdbl%(#q z%8z`OCwGJ(L1?%U5sho{bcy>R{#?^&hFSZ6EABsBAePmlX$V0W^q=#6&S(K!bC~;% zG!uNw48tnP;G!Srs8ZaD8e7FWh7TL4b@rd*Wd>7b%zw|21I+LJe)8vVH$xHd&F#h3 z1V$fZMsDV$>oQaaUI9Ot2%W7n!RW6UU^t-M@SOQAW-!YH&q!4TH- SbG2*(f45Y%RnW@!pZ*JGb^aCr literal 0 HcmV?d00001 From 787bbefd8132fa15afaed1b7a0c5497b0432b2e4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 20 Mar 2020 14:22:04 -0700 Subject: [PATCH 09/26] adding stuff for onDismiss --- .../@react-spectrum/dialog/docs/Dialog.mdx | 37 ++++++++++++++++++- packages/@react-types/dialog/src/index.d.ts | 2 + 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 9d1bcc937f5..b56df7b0895 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -65,7 +65,7 @@ import {TextField} from '@react-spectrum/textfield'; The layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: | Section/Element | Slot | -|-------------------|---------------| +|-------------------|--------------:| | Container | container | | Cover Image | hero | | Header | header | @@ -219,6 +219,41 @@ function Example() { Additionally, DialogTrigger accepts an `onOpenChange` prop which is triggered whenever the Dialog is opened or closed. For more information on the `onOpenChange` prop see [DialogTrigger page](TODO LINK HERE). +### Dismissable Dialogs + +Dismissable Dialogs support a `onDismiss` prop which is triggered whenever the Dialog's close button is clicked. +Similar to non-dismissable dialogs, you must chain the DialogTrigger's `close` function with whatever callback you provide as +`onDismiss`. + +```tsx example +function Example() { + let alertDismiss = (cb) => { + cb(); + alert('Dialog dismissed.'); + } + + return ( + + Info + {(close) => ( + alertDismiss(close)}> +
Version Info
+ + + + Version 1.0.0, Copyright 2020 + + + + )} + + ); +} +``` + +Note that `onDismiss` is optional. If you don't need to add a `onDismiss` handler to your dismissable Dialog, you may omit +the wrapping `close` function surround the Dialog. + ## Props diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index 9da9d919b2c..8cf08dea398 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -47,7 +47,9 @@ export interface SpectrumDialogProps extends DOMProps, StyleProps { size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', /** Whether the Dialog is [dismissable](#dismissable). */ isDismissable?: boolean, + /** Handler that is called when the 'x' button of a dismissable dialog is clicked. */ onDismiss?: () => void, + /** The role of the dialog. */ role?: 'dialog' | 'alertdialog' } From dc29ade2f2ce84299f7dc4129193d7dd0091f120 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 24 Mar 2020 17:02:49 -0700 Subject: [PATCH 10/26] update description so it doesn't conflict with ActionDialog too much --- packages/@react-spectrum/dialog/src/Dialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index acf1f530d55..c5527e11cfd 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -23,8 +23,8 @@ import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; import {useDialog, useModalDialog} from '@react-aria/dialog'; /** - * Dialogs display important information that users need to acknowledge. - * They appear over the interface and block further interactions. + * Dialogs are windows that appear over the interface and block further interactions. + * Contextual information, tasks, or workflows are typically contained within. */ export function Dialog(props: SpectrumDialogProps) { props = useSlotProps(props); From a03da0c853734662bff4c17a1353cefacb9468fe Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 25 Mar 2020 12:28:53 -0700 Subject: [PATCH 11/26] reorganizing so slots are under advanced section --- .../@react-spectrum/dialog/docs/Dialog.mdx | 160 +++++++++++++----- 1 file changed, 113 insertions(+), 47 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index b56df7b0895..b6977145199 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -15,7 +15,7 @@ import {HeaderInfo, PropTable} from '@react-spectrum/docs'; import packageData from '../package.json'; ```jsx import -import {ActionButton, Button} from '@react-spectrum/button'; +import {ActionButton, Button, ButtonGroup} from '@react-spectrum/button'; import {Content, Footer, Header} from '@react-spectrum/view'; import {Checkbox} from '@react-spectrum/checkbox'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; @@ -51,10 +51,10 @@ import {TextField} from '@react-spectrum/textfield'; This is a dialog. -
+ -
+ )} @@ -62,55 +62,75 @@ import {TextField} from '@react-spectrum/textfield'; ## Content -The layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: - -| Section/Element | Slot | -|-------------------|--------------:| -| Container | container | -| Cover Image | hero | -| Header | header | -| Heading | heading | -| Type Icon | typeIcon | -| Divider | divider | -| Body | content | -| Footer | footer | -| Close Button | closeButton | +A typical Dialog with a title, contents, and action buttons can be created like so: -![Image of Dialog Layout](./images/dialog.png) -INSERT PICTURE HERE, MAYBE LINK TO SPECTRUM (Contributions is a corp site) +```tsx example + + Publish + {(close) => ( + +
Publish 3 pages
+ + Confirm publish? + + + + + + )} + +``` -For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). +A dismissable Dialog forgoes a footer section and its associated action buttons in favor +of rendering a close button. If your Dialog is dismissable, make sure that you do not include a footer section or +a ButtonGroup. While the Dialog will hide any elements occupying the `footer` slot, it will not remove them from the DOM, +resulting in possible tab order issues. In the example below, note that the dismissable Dialog does not need +to be wrapped in a `close` function unlike the non-dismissable example before. -Each of these sections can be populated by providing a semantic element paired with a corresponding `slot` prop -to the Dialog as children. Note that the order of the children provided does not affect the visual layout of the Dialog. +```tsx example + + Status + +
Status
+ + Printer Status: Connected + + +``` -The example below illustrates how a Dialog with a hero image could be rendered. +It is important to note that the `Heading`, `Content`, and `Footer` content elements accept any renderable +node, not just strings. This allows you to create Dialogs for more complex workflows, such as including a form +for the user to fill out or adding confirmation checkboxes. ```tsx example - Upload + Register {(close) => ( - -
Upload file
+
Register for newsletter
- Are you sure you want to upload this file? + +
+ + + + + +
+ + I want to receive updates for exclusive offers in my area. + +
+ - -
+ + )} ``` -### Dismissable Dialogs - -A dismissable Dialog forgoes a footer section and its associated action buttons in favor -of rendering a close button. If your Dialog is dismissable, make sure that you do not include a footer section. -While the Dialog will hide any elements occupying the `footer` slot, it will not remove them from the DOM, -resulting in possible tab order issues. - ### Accessibility The tab order within the Dialog follows the order of the children provided to the Dialog. @@ -128,10 +148,10 @@ the following tab order: `Save` button -> `Cancel` button -> `Textfield` -> `Che
Profile
-
+ -
+
@@ -143,6 +163,52 @@ the following tab order: `Save` button -> `Cancel` button -> `Textfield` -> `Che ``` +### Advanced Usage + +The grid layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: + +| Section/Element | Slot | +|-------------------|--------------:| +| Container | container | +| Cover Image | hero | +| Header | header | +| Heading | heading | +| Type Icon | typeIcon | +| Divider | divider | +| Body | content | +| Footer | footer | +| Button Group | buttonGroup | +| Close Button | closeButton | + +![Image of Dialog Layout](./images/dialog.png) +INSERT PICTURE HERE, MAYBE LINK TO SPECTRUM (Contributions is a corp site) + +For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). + +Each of these sections can be populated by providing a content element paired with a corresponding `slot` prop +to the Dialog as children. Content elements like `Footer`, `Divider`, and `Header` map directly to their named `slot`, +but this can be overridden via the `slot` prop. + +The example below illustrates how a Dialog with a hero image could be rendered via the `hero` slot: + +```tsx example + + Upload + {(close) => ( + + +
Upload file
+ + Are you sure you want to upload this file? + + + + + + )} + +``` + ## Labeling ### Accessibility @@ -167,9 +233,9 @@ to the Dialog directly. If a visible label isn't specified, an `aria-label` must Cras semper auctor neque vitae tempus quam pellentesque nec. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Pellentesque habitant morbi tristique senectus et. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sem et tortor consequat id porta nibh venenatis. Viverra nibh cras pulvinar mattis nunc sed blandit. Urna porttitor rhoncus dolor purus. Vivamus arcu felis bibendum ut. Cras sed felis eget velit aliquet. Sed tempus urna et pharetra pharetra. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Vel turpis nunc eget lorem. Quisque egestas diam in arcu cursus euismod quis viverra. At tempor commodo ullamcorper a lacus vestibulum sed. Id aliquet lectus proin nibh nisl condimentum id venenatis. Quis viverra nibh cras pulvinar. Purus in mollis nunc sed. -
+ -
+
)} @@ -199,10 +265,10 @@ function Example() {
Profile
-
+ -
+ @@ -273,10 +339,10 @@ considerations.
Profile
-
+ -
+ @@ -293,10 +359,10 @@ considerations.
Profile
-
+ -
+ @@ -313,10 +379,10 @@ considerations.
Profile
-
+ -
+ From 3ddaf7da1c2cae4ef256827c6ccdf574618d4eeb Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 25 Mar 2020 12:33:45 -0700 Subject: [PATCH 12/26] editing some sentences --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index b6977145199..925151f66d7 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -83,9 +83,8 @@ A typical Dialog with a title, contents, and action buttons can be created like A dismissable Dialog forgoes a footer section and its associated action buttons in favor of rendering a close button. If your Dialog is dismissable, make sure that you do not include a footer section or -a ButtonGroup. While the Dialog will hide any elements occupying the `footer` slot, it will not remove them from the DOM, -resulting in possible tab order issues. In the example below, note that the dismissable Dialog does not need -to be wrapped in a `close` function unlike the non-dismissable example before. +a ButtonGroup. While the Dialog will hide any elements occupying the footer section, it will not remove them from the DOM, +resulting in possible tab order issues. ```tsx example From 4d1cdde49746756ab8d8084beae8df2a5da30c31 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 25 Mar 2020 14:59:55 -0700 Subject: [PATCH 13/26] formatting table via css --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 2 +- packages/dev/docs/src/Layout.js | 3 ++- packages/dev/docs/src/docs.css | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 925151f66d7..5a1a4e0bf10 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -167,7 +167,7 @@ the following tab order: `Save` button -> `Cancel` button -> `Textfield` -> `Che The grid layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: | Section/Element | Slot | -|-------------------|--------------:| +|-------------------|-------------- | | Container | container | | Cover Image | hero | | Header | header | diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js index 233bfbc688f..f471ad852a4 100644 --- a/packages/dev/docs/src/Layout.js +++ b/packages/dev/docs/src/Layout.js @@ -51,7 +51,8 @@ const mdxComponents = { p: ({children, ...props}) =>

{children}

, code: ({children, ...props}) => {children}, inlineCode: ({children, ...props}) => {children}, - a: ({children, ...props}) => {children} + a: ({children, ...props}) => {children}, + table: ({children, ...props}) => {children}
}; function getTarget(href) { diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css index 9a9c603437f..c9bb6fac627 100644 --- a/packages/dev/docs/src/docs.css +++ b/packages/dev/docs/src/docs.css @@ -20,6 +20,20 @@ html, body { background: var(--spectrum-global-color-gray-50) !important; } +.exampleTable { + margin-inline-start: auto; + margin-inline-end: auto; + margin-bottom: 12px; + &, th, td { + border: 1px solid #dee2e6; + border-collapse: collapse; + } + + & th, & td { + padding: .75rem + } +} + .nav { position: fixed; top: 0; From c4ad1d034c5fbd9c57a1f293933dde8f7355bb15 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 26 Mar 2020 14:59:07 -0700 Subject: [PATCH 14/26] removing image todo for now --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 5a1a4e0bf10..3d1e882b57c 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -179,9 +179,6 @@ The grid layout of a Dialog is made up of the following elements and sections, m | Button Group | buttonGroup | | Close Button | closeButton | -![Image of Dialog Layout](./images/dialog.png) -INSERT PICTURE HERE, MAYBE LINK TO SPECTRUM (Contributions is a corp site) - For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). Each of these sections can be populated by providing a content element paired with a corresponding `slot` prop From 1eb8755d95ba56ce950c466920fd2aba663510f0 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 26 Mar 2020 14:59:42 -0700 Subject: [PATCH 15/26] forgot to delete the image folder too --- .../dialog/docs/images/dialog.png | Bin 48491 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/@react-spectrum/dialog/docs/images/dialog.png diff --git a/packages/@react-spectrum/dialog/docs/images/dialog.png b/packages/@react-spectrum/dialog/docs/images/dialog.png deleted file mode 100644 index 8025a6d1ccbdeca4935cb69bc147663209b2416a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 48491 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 SbG2*(f45Y%RnW@!pZ*JGb^aCr From 75c6a672f9dd8fb0f04febfa04ec9c2551faead9 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 27 Mar 2020 14:49:11 -0700 Subject: [PATCH 16/26] addressing review comments partial --- .../@react-spectrum/dialog/docs/Dialog.mdx | 47 ++----------------- .../@react-spectrum/dialog/src/Dialog.tsx | 13 +++-- packages/@react-types/dialog/src/index.d.ts | 10 ++-- 3 files changed, 13 insertions(+), 57 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 3d1e882b57c..0d15ea48851 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -132,59 +132,26 @@ for the user to fill out or adding confirmation checkboxes. ### Accessibility -The tab order within the Dialog follows the order of the children provided to the Dialog. -This can be leveraged to create a logical flow separate from the reading order on the page. -You are also responsible for determining what component, if any, should be automatically +The tab order within the Dialog follows the order of the children provided to the Dialog so keep this in mind +when creating your Dialog. You are also responsible for determining what component, if any, should be automatically focused on Dialog render. -The example below sets initial focus to the Dialog's `Save` button and establishes -the following tab order: `Save` button -> `Cancel` button -> `Textfield` -> `Checkbox`. - -```tsx example - - Set Profile - {(close) => ( - -
Profile
- - - - - - - - - Make private - - - - )} - -``` - ### Advanced Usage The grid layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: | Section/Element | Slot | -|-------------------|-------------- | -| Container | container | +|-------------------|-------------- | | Cover Image | hero | | Header | header | | Heading | heading | -| Type Icon | typeIcon | | Divider | divider | | Body | content | | Footer | footer | | Button Group | buttonGroup | -| Close Button | closeButton | For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). -Each of these sections can be populated by providing a content element paired with a corresponding `slot` prop -to the Dialog as children. Content elements like `Footer`, `Divider`, and `Header` map directly to their named `slot`, -but this can be overridden via the `slot` prop. - The example below illustrates how a Dialog with a hero image could be rendered via the `hero` slot: ```tsx example @@ -221,13 +188,7 @@ to the Dialog directly. If a visible label isn't specified, an `aria-label` must Terms and Conditions - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies. - Eleifend quam adipiscing vitae proin sagittis nisl. Diam donec adipiscing tristique risus. In fermentum posuere urna nec tincidunt praesent semper. Suspendisse in est ante in. Egestas diam in arcu cursus euismod quis viverra nibh cras. Aliquam sem fringilla ut morbi tincidunt augue interdum. Lacus sed turpis tincidunt id aliquet risus feugiat. Praesent semper feugiat nibh sed pulvinar proin. In massa tempor nec feugiat nisl pretium fusce id velit. Non nisi est sit amet facilisis. Mi in nulla posuere sollicitudin aliquam ultrices. Morbi leo urna molestie at elementum. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Risus quis varius quam quisque id. Platea dictumst quisque sagittis purus. Etiam non quam lacus suspendisse faucibus interdum posuere. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. - Risus ultricies tristique nulla aliquet enim tortor at. Ac placerat vestibulum lectus mauris. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Sit amet nulla facilisi morbi tempus iaculis urna. Ut etiam sit amet nisl purus in. Risus at ultrices mi tempus imperdiet. Magna fermentum iaculis eu non diam phasellus. Orci sagittis eu volutpat odio. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Amet nulla facilisi morbi tempus iaculis urna id. Iaculis eu non diam phasellus. Eu lobortis elementum nibh tellus molestie nunc. At tempor commodo ullamcorper a lacus vestibulum sed. Mi sit amet mauris commodo quis. Tellus elementum sagittis vitae et leo duis. Vel risus commodo viverra maecenas accumsan lacus. - Ut porttitor leo a diam sollicitudin tempor id eu nisl. Tristique senectus et netus et malesuada fames ac turpis egestas. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Tempus quam pellentesque nec nam aliquam sem et. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Nunc lobortis mattis aliquam faucibus purus in massa tempor. Tincidunt dui ut ornare lectus sit amet est. Magna fermentum iaculis eu non. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Vitae proin sagittis nisl rhoncus mattis rhoncus. Nunc vel risus commodo viverra maecenas. Diam in arcu cursus euismod. Dolor morbi non arcu risus quis varius quam. Amet nisl suscipit adipiscing bibendum. Nulla pellentesque dignissim enim sit amet venenatis. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit - Cras semper auctor neque vitae tempus quam pellentesque nec. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Pellentesque habitant morbi tristique senectus et. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sem et tortor consequat id porta nibh venenatis. Viverra nibh cras pulvinar mattis nunc sed blandit. Urna porttitor rhoncus dolor purus. Vivamus arcu felis bibendum ut. Cras sed felis eget velit aliquet. Sed tempus urna et pharetra pharetra. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Vel turpis nunc eget lorem. Quisque egestas diam in arcu cursus euismod quis viverra. At tempor commodo ullamcorper a lacus vestibulum sed. Id aliquet lectus proin nibh nisl condimentum id venenatis. Quis viverra nibh cras pulvinar. Purus in mollis nunc sed. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies. diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index c5527e11cfd..c42faa7d374 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -22,6 +22,8 @@ import {SpectrumBaseDialogProps, SpectrumDialogProps} from '@react-types/dialog' import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css'; import {useDialog, useModalDialog} from '@react-aria/dialog'; +type DialogType = 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover'; + /** * Dialogs are windows that appear over the interface and block further interactions. * Contextual information, tasks, or workflows are typically contained within. @@ -29,7 +31,7 @@ import {useDialog, useModalDialog} from '@react-aria/dialog'; export function Dialog(props: SpectrumDialogProps) { props = useSlotProps(props); let { - type = 'popover', + type = 'popover' as DialogType, ...contextProps } = useContext(DialogContext) || {} as DialogContextValue; let { @@ -54,12 +56,9 @@ export function Dialog(props: SpectrumDialogProps) { if (type === 'popover') { return {children}; } else { - if (type === 'fullscreen' || type === 'fullscreenTakeover') { - size = type; - } return ( - + {children} {isDismissable && { slots?: Slots, - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', + size?: 'S' | 'M' | 'L', + type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover', role?: 'dialog' | 'alertdialog' } export interface SpectrumDialogProps extends DOMProps, StyleProps { /** The contents of the Dialog. */ children: ReactNode, - /** - * Replaces the default slots used within Dialog, - * see [slots](./Slots.html). - */ - slots?: Slots, /** The size of the Dialog. Only applies to "modal" type Dialogs. */ - size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover', + size?: 'S' | 'M' | 'L', /** Whether the Dialog is [dismissable](#dismissable). */ isDismissable?: boolean, /** Handler that is called when the 'x' button of a dismissable dialog is clicked. */ From 25605669fd3ebcca9152098fabf7102525a77dbf Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 30 Mar 2020 11:24:51 -0700 Subject: [PATCH 17/26] adding anatomy svg --- .../@react-spectrum/dialog/docs/Dialog.mdx | 95 ++++++++++++++----- packages/dev/docs/src/Layout.js | 2 +- packages/dev/docs/src/docs.css | 18 ++-- 3 files changed, 80 insertions(+), 35 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 0d15ea48851..3338b79357c 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -62,6 +62,71 @@ import {TextField} from '@react-spectrum/textfield'; ## Content +A standard Dialog has the following anatomy: + + + + + + + + + + + + + Body area + + + + + + + + + + + + + + + + + Title area + Footer content area (optional) + Header content area (optional) + Button group area + Header + Footer + Body + + + + + + + + + + + + + + + + + + + Divider + + + + +Each of these sections can be populated by providing the following components to your Dialog as children: +`Header`, `Heading`, `Divider`, `Content` (for body), `ButtonGroup`, and `Footer`. + + +### Examples A typical Dialog with a title, contents, and action buttons can be created like so: ```tsx example @@ -130,28 +195,6 @@ for the user to fill out or adding confirmation checkboxes. ``` -### Accessibility - -The tab order within the Dialog follows the order of the children provided to the Dialog so keep this in mind -when creating your Dialog. You are also responsible for determining what component, if any, should be automatically -focused on Dialog render. - -### Advanced Usage - -The grid layout of a Dialog is made up of the following elements and sections, mapped to the corresponding default slot names: - -| Section/Element | Slot | -|-------------------|-------------- | -| Cover Image | hero | -| Header | header | -| Heading | heading | -| Divider | divider | -| Body | content | -| Footer | footer | -| Button Group | buttonGroup | - -For an explanation of what slots are and how you can use them, see the [slots page](TODO LINK THIS PAGE). - The example below illustrates how a Dialog with a hero image could be rendered via the `hero` slot: ```tsx example @@ -172,6 +215,12 @@ The example below illustrates how a Dialog with a hero image could be rendered v ``` +### Accessibility + +The tab order within the Dialog follows the order of the children provided to the Dialog so keep this in mind +when creating your Dialog. You are also responsible for determining what component, if any, should be automatically +focused on Dialog render. + ## Labeling ### Accessibility @@ -201,7 +250,7 @@ to the Dialog directly. If a visible label isn't specified, an `aria-label` must ## Events For Dialogs, user defined callbacks should be chained with the DialogTrigger's `close` function in the press/click handler -of the Dialog's action buttons. The following example alerts if the Dialog's save or cancel is clicked. +of the Dialog's action buttons. The following example alerts if the Dialog's save or cancel button is clicked. ```tsx example function Example() { diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js index f471ad852a4..cfb5059c3b7 100644 --- a/packages/dev/docs/src/Layout.js +++ b/packages/dev/docs/src/Layout.js @@ -52,7 +52,7 @@ const mdxComponents = { code: ({children, ...props}) => {children}, inlineCode: ({children, ...props}) => {children}, a: ({children, ...props}) => {children}, - table: ({children, ...props}) => {children}
+ svg: ({children, ...props}) =>
{children}
}; function getTarget(href) { diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css index c9bb6fac627..ccf90017cb3 100644 --- a/packages/dev/docs/src/docs.css +++ b/packages/dev/docs/src/docs.css @@ -20,17 +20,13 @@ html, body { background: var(--spectrum-global-color-gray-50) !important; } -.exampleTable { - margin-inline-start: auto; - margin-inline-end: auto; - margin-bottom: 12px; - &, th, td { - border: 1px solid #dee2e6; - border-collapse: collapse; - } - - & th, & td { - padding: .75rem +.exampleImage { + display: flex; + justify-content: center; + padding-bottom: 12px; + svg { + width: auto; + height: auto; } } From 7492dbeeb39e08d97bd3516c474e4c879df03c5d Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 30 Mar 2020 13:22:29 -0700 Subject: [PATCH 18/26] make ExampleImage component for rendering svgs or images in docs --- .parcelrc | 3 +- package.json | 1 + .../@react-spectrum/dialog/docs/Dialog.mdx | 63 ++----------------- .../dialog/images/DialogAnatomy.svg | 57 +++++++++++++++++ packages/dev/docs/src/ExampleImage.js | 22 +++++++ packages/dev/docs/src/Layout.js | 3 +- packages/dev/docs/src/docs.css | 2 +- packages/dev/docs/src/index.js | 1 + yarn.lock | 49 ++++++++++++++- 9 files changed, 137 insertions(+), 64 deletions(-) create mode 100644 packages/@react-spectrum/dialog/images/DialogAnatomy.svg create mode 100644 packages/dev/docs/src/ExampleImage.js diff --git a/.parcelrc b/.parcelrc index 8a18a7c5e69..91ec27ad82d 100644 --- a/.parcelrc +++ b/.parcelrc @@ -4,7 +4,8 @@ "transforms": { "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], - "*.mdx": ["parcel-transformer-mdx-docs"] + "*.mdx": ["parcel-transformer-mdx-docs"], + "*.svg": ["@parcel/transformer-svg-react"] }, "namers": ["parcel-namer-docs", "..."], "packagers": { diff --git a/package.json b/package.json index d6fb013bc1e..ef416c181d5 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@octokit/rest": "*", "@parcel/babel-preset-env": "^2.0.0-nightly.92", "@parcel/transformer-inline": "^2.0.0-nightly.92", + "@parcel/transformer-svg-react": "^2.0.0-nightly.1739", "@spectrum-css/vars": "^2.0.0", "@storybook/addon-a11y": "^5.2.1", "@storybook/addon-actions": "^5.2.1", diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 3338b79357c..0fff398ff76 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -10,8 +10,9 @@ governing permissions and limitations under the License. --> import {Layout} from '@react-spectrum/docs'; export default Layout; +import DialogAnatomy from '../images/DialogAnatomy.svg'; import docs from 'docs:@react-spectrum/dialog'; -import {HeaderInfo, PropTable} from '@react-spectrum/docs'; +import {ExampleImage, HeaderInfo, PropTable} from '@react-spectrum/docs'; import packageData from '../package.json'; ```jsx import @@ -64,63 +65,9 @@ import {TextField} from '@react-spectrum/textfield'; A standard Dialog has the following anatomy: - - - - - - - - - - - - Body area - - - - - - - - - - - - - - - - - Title area - Footer content area (optional) - Header content area (optional) - Button group area - Header - Footer - Body - - - - - - - - - - - - - - - - - - - Divider - - - + + + Each of these sections can be populated by providing the following components to your Dialog as children: `Header`, `Heading`, `Divider`, `Content` (for body), `ButtonGroup`, and `Footer`. diff --git a/packages/@react-spectrum/dialog/images/DialogAnatomy.svg b/packages/@react-spectrum/dialog/images/DialogAnatomy.svg new file mode 100644 index 00000000000..57eff1cf35a --- /dev/null +++ b/packages/@react-spectrum/dialog/images/DialogAnatomy.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + Body area + + + + + + + + + + + + + + + + + Title area + Footer content area (optional) + Header content area (optional) + Button group area + Header + Footer + Body + + + + + + + + + + + + + + + + + + + Divider + + + diff --git a/packages/dev/docs/src/ExampleImage.js b/packages/dev/docs/src/ExampleImage.js new file mode 100644 index 00000000000..5ae686e5aae --- /dev/null +++ b/packages/dev/docs/src/ExampleImage.js @@ -0,0 +1,22 @@ +/* + * Copyright 2020 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import docStyles from './docs.css'; +import React from 'react'; + +export function ExampleImage({children, ...props}) { + return ( +
+ {children} +
+ ); +} diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js index cfb5059c3b7..233bfbc688f 100644 --- a/packages/dev/docs/src/Layout.js +++ b/packages/dev/docs/src/Layout.js @@ -51,8 +51,7 @@ const mdxComponents = { p: ({children, ...props}) =>

{children}

, code: ({children, ...props}) => {children}, inlineCode: ({children, ...props}) => {children}, - a: ({children, ...props}) => {children}, - svg: ({children, ...props}) =>
{children}
+ a: ({children, ...props}) => {children} }; function getTarget(href) { diff --git a/packages/dev/docs/src/docs.css b/packages/dev/docs/src/docs.css index ccf90017cb3..7caa4a0e23f 100644 --- a/packages/dev/docs/src/docs.css +++ b/packages/dev/docs/src/docs.css @@ -24,7 +24,7 @@ html, body { display: flex; justify-content: center; padding-bottom: 12px; - svg { + svg, img { width: auto; height: auto; } diff --git a/packages/dev/docs/src/index.js b/packages/dev/docs/src/index.js index e29e0d1f326..72acaa5e00d 100644 --- a/packages/dev/docs/src/index.js +++ b/packages/dev/docs/src/index.js @@ -10,6 +10,7 @@ * governing permissions and limitations under the License. */ +export * from './ExampleImage'; export * from './Layout'; export * from './PropTable'; export * from './HeaderInfo'; diff --git a/yarn.lock b/yarn.lock index 247a748b977..4bff98263fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2885,6 +2885,13 @@ dependencies: "@parcel/plugin" "2.0.0-nightly.137+a07a8b84" +"@parcel/plugin@2.0.0-nightly.117+ed04041c": + version "2.0.0-nightly.117" + resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.0.0-nightly.117.tgz#1cfaff0a2330583af3401085a24279c26de5fe42" + integrity sha512-bVMqVTlVi0+WgPIH6xY/P43GxlZ84ep6mRsX8e/nWn07PzRSF8borsVd+JgC5Lyqvb62G5rXoUvpVoHlFkdqBg== + dependencies: + "@parcel/types" "2.0.0-nightly.117+ed04041c" + "@parcel/plugin@2.0.0-nightly.137+a07a8b84": version "2.0.0-nightly.137" resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.0.0-nightly.137.tgz#7b9a8ae123545926bebf11a4401516378a673fd2" @@ -3202,6 +3209,15 @@ "@parcel/plugin" "2.0.0-nightly.137+a07a8b84" postcss "^7.0.5" +"@parcel/transformer-svg-react@^2.0.0-nightly.1739": + version "2.0.0-nightly.1739" + resolved "https://registry.yarnpkg.com/@parcel/transformer-svg-react/-/transformer-svg-react-2.0.0-nightly.1739.tgz#40acfb38e78d146008c52cbc739ef26553ff7cc6" + integrity sha512-LA8Guzy/QSkCrpRznbxFzdQs1OclGEphCVzZc+G5e9T0+KQTCUV0lwmv18cSyFLr/S8oeCdYD7mgs87GMNGQOg== + dependencies: + "@parcel/plugin" "2.0.0-nightly.117+ed04041c" + camelcase "^5.3.1" + svg-to-jsx "^1.0.2" + "@parcel/transformer-toml@2.0.0-nightly.137+a07a8b84": version "2.0.0-nightly.137" resolved "https://registry.yarnpkg.com/@parcel/transformer-toml/-/transformer-toml-2.0.0-nightly.137.tgz#5fb1993acb51f4299cae03afbbebda9b753213f0" @@ -3233,6 +3249,11 @@ dependencies: nullthrows "^1.1.1" +"@parcel/types@2.0.0-nightly.117+ed04041c": + version "2.0.0-nightly.117" + resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.0.0-nightly.117.tgz#386cd5ea7844b0f6110fc36c615f0d2f718c7080" + integrity sha512-Hp9xB9AhMPPaFNG7b3NjR68D7rPMIuCWbYp1nhwt5dqmJ+FWJc7DTAqhfxl7NDrEkNJZY/DL8wy8gfs7yVT/WA== + "@parcel/types@2.0.0-nightly.120+cf6c31c7": version "2.0.0-nightly.120" resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.0.0-nightly.120.tgz#9a305632a6575ed9ad511794fe6cc7cabe818424" @@ -16783,7 +16804,7 @@ purgecss@^1.4.0: postcss-selector-parser "^6.0.0" yargs "^14.0.0" -q@^1.1.2, q@^1.5.1: +q@^1.1.2, q@^1.4.1, q@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= @@ -19447,6 +19468,17 @@ svg-stylus@^0.0.5: underscore "~1.8.3" xmldoc "git+https://github.com/jankuca/xmldoc.git" +svg-to-jsx@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/svg-to-jsx/-/svg-to-jsx-1.0.2.tgz#1218de500a3e2661fe98104872d6c9c1aa409f45" + integrity sha512-RTT7epDAk1jlenKsWSwoKj3bYkg8WcIl/sO+0ZS+icPF2YTYTtLpH/70FmWfn53vOITPpUnabJbAMw+drrtUqg== + dependencies: + object-assign "^4.0.1" + q "^1.4.1" + xml2js "^0.4.10" + xmlbuilder "^13.0.2" + yargs "^3.21.0" + svgo@^1.0.0, svgo@^1.2.2, svgo@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" @@ -21337,6 +21369,14 @@ xml-name-validator@^3.0.0: resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw== +xml2js@^0.4.10: + version "0.4.23" + resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66" + integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug== + dependencies: + sax ">=0.6.0" + xmlbuilder "~11.0.0" + xml2js@^0.4.4: version "0.4.22" resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.22.tgz#4fa2d846ec803237de86f30aa9b5f70b6600de02" @@ -21346,6 +21386,11 @@ xml2js@^0.4.4: util.promisify "~1.0.0" xmlbuilder "~11.0.0" +xmlbuilder@^13.0.2: + version "13.0.2" + resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-13.0.2.tgz#02ae33614b6a047d1c32b5389c1fdacb2bce47a7" + integrity sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ== + xmlbuilder@~11.0.0: version "11.0.1" resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3" @@ -21560,7 +21605,7 @@ yargs@^14.2.0: y18n "^4.0.0" yargs-parser "^15.0.0" -yargs@^3.23.0: +yargs@^3.21.0, yargs@^3.23.0: version "3.32.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995" integrity sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU= From 355a48452fafbcc7068970baa249533528426833 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 30 Mar 2020 13:53:16 -0700 Subject: [PATCH 19/26] Updating examples for header/heading update --- .../@react-spectrum/dialog/docs/Dialog.mdx | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 0fff398ff76..4f82af8b4c9 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -24,6 +24,7 @@ import {Divider} from '@react-spectrum/divider'; import {Form} from '@react-spectrum/form'; import {Heading, Text} from '@react-spectrum/typography'; import {Image} from '@react-spectrum/image'; +import {StatusLight} from '@react-spectrum/statuslight'; import {TextField} from '@react-spectrum/textfield'; ``` @@ -42,14 +43,19 @@ import {TextField} from '@react-spectrum/textfield'; ```tsx example - Trigger + Check connectivity {(close) => ( -
The Heading
+ Internet Speed Test +
+ + Connection status + +
- This is a dialog. + Start speed test? @@ -70,7 +76,7 @@ A standard Dialog has the following anatomy: Each of these sections can be populated by providing the following components to your Dialog as children: -`Header`, `Heading`, `Divider`, `Content` (for body), `ButtonGroup`, and `Footer`. +`Header`, `Heading` (title), `Divider`, `Content` (body), `ButtonGroup`, and `Footer`. ### Examples @@ -81,7 +87,7 @@ A typical Dialog with a title, contents, and action buttons can be created like Publish {(close) => ( -
Publish 3 pages
+ Publish 3 pages Confirm publish? @@ -102,14 +108,14 @@ resulting in possible tab order issues. Status -
Status
+ Status Printer Status: Connected ``` -It is important to note that the `Heading`, `Content`, and `Footer` content elements accept any renderable +It is important to note that the `Heading`, `Header`, `Content`, and `Footer` content elements accept any renderable node, not just strings. This allows you to create Dialogs for more complex workflows, such as including a form for the user to fill out or adding confirmation checkboxes. @@ -118,7 +124,12 @@ for the user to fill out or adding confirmation checkboxes. Register {(close) => ( -
Register for newsletter
+ Register for newsletter +
+ + Registration Status + +
@@ -150,7 +161,7 @@ The example below illustrates how a Dialog with a hero image could be rendered v {(close) => ( -
Upload file
+ Upload file Are you sure you want to upload this file? @@ -216,7 +227,7 @@ function Example() { Set Profile {(close) => ( -
Profile
+ Profile @@ -256,7 +267,7 @@ function Example() { Info {(close) => ( alertDismiss(close)}> -
Version Info
+ Version Info @@ -290,7 +301,7 @@ considerations. Set Profile {(close) => ( -
Profile
+ Profile @@ -310,7 +321,7 @@ considerations. Set Profile {(close) => ( -
Profile
+ Profile @@ -330,7 +341,7 @@ considerations. Set Profile {(close) => ( -
Profile
+ Profile From c0a38f4f8bd9de47fc0ecfbf8e33a438fa624906 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 31 Mar 2020 10:41:32 -0700 Subject: [PATCH 20/26] readding slots to types due to Dialog structure change --- packages/@react-spectrum/dialog/src/Dialog.tsx | 3 --- packages/@react-types/dialog/src/index.d.ts | 4 ++++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 6aa575a39d4..f9f9da290f8 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -57,9 +57,6 @@ export function Dialog(props: SpectrumDialogProps) { let {styleProps} = useStyleProps(otherProps); size = type === 'popover' ? undefined : (size || 'L'); - if (type === 'fullscreen' || type === 'fullscreenTakeover') { - size = type; - } let ref = useRef(); let gridRef = useRef(); diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index ef0cfe25497..fce88a7f983 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -32,6 +32,10 @@ export interface SpectrumDialogTriggerProps extends PositionProps { export interface SpectrumDialogProps extends DOMProps, StyleProps { /** The contents of the Dialog. */ children: ReactNode, + /** + * Replaces the default slots used within Dialog. + */ + slots?: Slots, /** The size of the Dialog. Only applies to "modal" type Dialogs. */ size?: 'S' | 'M' | 'L', /** Whether the Dialog is [dismissable](#dismissable). */ From e4520bb0a5ed151bb57bcd562c017c7c0c756f7f Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 6 Apr 2020 10:57:00 -0700 Subject: [PATCH 21/26] Updating docs to match updates --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 9 +++++---- packages/@react-spectrum/dialog/src/Dialog.tsx | 5 +---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 4f82af8b4c9..fc34567db69 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -16,7 +16,8 @@ import {ExampleImage, HeaderInfo, PropTable} from '@react-spectrum/docs'; import packageData from '../package.json'; ```jsx import -import {ActionButton, Button, ButtonGroup} from '@react-spectrum/button'; +import {ActionButton, Button} from '@react-spectrum/button'; +import {ButtonGroup} from '@react-spectrum/buttongroup'; import {Content, Footer, Header} from '@react-spectrum/view'; import {Checkbox} from '@react-spectrum/checkbox'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; @@ -183,8 +184,8 @@ focused on Dialog render. ### Accessibility -The title of a Dialog is typically provided via its header. By default, the Dialog sets its -`aria-labelledby` to match the header id, but this can be overridden by providing a `aria-labelledby` prop +The title of a Dialog is typically provided via its heading. By default, the Dialog sets its +`aria-labelledby` to match the heading id, but this can be overridden by providing an `aria-labelledby` prop to the Dialog directly. If a visible label isn't specified, an `aria-label` must be provided instead. ```tsx example @@ -282,7 +283,7 @@ function Example() { ``` Note that `onDismiss` is optional. If you don't need to add a `onDismiss` handler to your dismissable Dialog, you may omit -the wrapping `close` function surround the Dialog. +the wrapping `close` function surrounding the Dialog. ## Props diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 0300ed070a8..20a51aaaa6e 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -52,13 +52,10 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) { let {styleProps} = useStyleProps(otherProps); size = type === 'popover' ? 'S' : (size || 'L'); - if (type === 'fullscreen' || type === 'fullscreenTakeover') { - size = type; - } let domRef = useDOMRef(ref); let gridRef = useRef(); - let sizeVariant = sizeMap[size]; + let sizeVariant = sizeMap[type] || sizeMap[size]; let {dialogProps, titleProps} = useDialog({ref: domRef, role, ...otherProps}); let hasHeader = useHasChild(`.${styles['spectrum-Dialog-header']}`, unwrapDOMRef(gridRef)); From e258f2ac5792dee81b2f564acbd0636330c61121 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 7 Apr 2020 10:59:23 -0700 Subject: [PATCH 22/26] Adding popover/tray examples and fixing docs link --- .../@react-spectrum/dialog/docs/Dialog.mdx | 32 +++++++++++++++++++ .../@react-spectrum/dialog/src/Dialog.tsx | 4 +-- packages/@react-types/dialog/src/index.d.ts | 2 +- 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index fc34567db69..3e46046f2be 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -291,6 +291,38 @@ the wrapping `close` function surrounding the Dialog. ## Visual Options +### Dialog Variants + +Dialogs can be rendered as modals, popovers, or trays. See the [DialogTrigger docs](TODO link) for more information. + +```tsx example + + Trigger + + Popover + + + + This is a popover. + + + + + + + More Info + + Tray + + + + This is a tray. + + + + +``` + ### Size Only `modal` type Dialogs support a user defined size prop. Note that the `fullscreen` and `fullscreenTakeover` sizes diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx index 20a51aaaa6e..06741071c47 100644 --- a/packages/@react-spectrum/dialog/src/Dialog.tsx +++ b/packages/@react-spectrum/dialog/src/Dialog.tsx @@ -123,8 +123,8 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) { } /** - * Dialogs are windows that appear over the interface and block further interactions. - * Contextual information, tasks, or workflows are typically contained within. + * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. + * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged. */ let _Dialog = React.forwardRef(Dialog); export {_Dialog as Dialog}; diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts index 23468c79f4b..cfd926035fb 100644 --- a/packages/@react-types/dialog/src/index.d.ts +++ b/packages/@react-types/dialog/src/index.d.ts @@ -36,7 +36,7 @@ export interface SpectrumDialogProps extends DOMProps, StyleProps { children: ReactNode, /** The size of the Dialog. Only applies to "modal" type Dialogs. */ size?: 'S' | 'M' | 'L', - /** Whether the Dialog is [dismissable](#dismissable). */ + /** Whether the Dialog is dismissable. See the [examples](#examples) for more details. */ isDismissable?: boolean, /** Handler that is called when the 'x' button of a dismissable dialog is clicked. */ onDismiss?: () => void, From 9e4ba2b7f2c29479e64c6bf990f6b6cd407d42d8 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 7 Apr 2020 16:46:44 -0700 Subject: [PATCH 23/26] addressing review comments --- .../@react-spectrum/dialog/docs/Dialog.mdx | 44 ++++++++++++++----- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 3e46046f2be..b95f9a9dbca 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -17,11 +17,13 @@ import packageData from '../package.json'; ```jsx import import {ActionButton, Button} from '@react-spectrum/button'; +import Book from '@spectrum-icons/workflow/Book'; import {ButtonGroup} from '@react-spectrum/buttongroup'; import {Content, Footer, Header} from '@react-spectrum/view'; import {Checkbox} from '@react-spectrum/checkbox'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {Divider} from '@react-spectrum/divider'; +import {Flex} from '@react-spectrum/layout'; import {Form} from '@react-spectrum/form'; import {Heading, Text} from '@react-spectrum/typography'; import {Image} from '@react-spectrum/image'; @@ -77,8 +79,8 @@ A standard Dialog has the following anatomy: Each of these sections can be populated by providing the following components to your Dialog as children: -`Header`, `Heading` (title), `Divider`, `Content` (body), `ButtonGroup`, and `Footer`. - +`Header`, `Heading` (title), `Divider`, `Content` (body), `ButtonGroup`, and `Footer`. Each of these components are +required in a Spectrum compliant Dialog except for `Header` and `Footer` so be sure to design your Dialog accordingly. ### Examples A typical Dialog with a title, contents, and action buttons can be created like so: @@ -100,9 +102,9 @@ A typical Dialog with a title, contents, and action buttons can be created like ``` -A dismissable Dialog forgoes a footer section and its associated action buttons in favor -of rendering a close button. If your Dialog is dismissable, make sure that you do not include a footer section or -a ButtonGroup. While the Dialog will hide any elements occupying the footer section, it will not remove them from the DOM, +A dismissable Dialog forgoes its ButtonGroup in favor of rendering a close button at the top right of the Dialog. +If your Dialog is dismissable, make sure that you do not include a ButtonGroup in the render. +While the Dialog will hide any elements occupying the ButtonGroup section, it will not remove them from the DOM, resulting in possible tab order issues. ```tsx example @@ -125,7 +127,14 @@ for the user to fill out or adding confirmation checkboxes. Register {(close) => ( - Register for newsletter + + + + + Register for newsletter + + +
Registration Status @@ -178,7 +187,9 @@ The example below illustrates how a Dialog with a hero image could be rendered v The tab order within the Dialog follows the order of the children provided to the Dialog so keep this in mind when creating your Dialog. You are also responsible for determining what component, if any, should be automatically -focused on Dialog render. +focused on Dialog render. + +Additional information about the slots and their effect on tab order behavior can be found in the [Slots documentation](TODO LINK). ## Labeling @@ -283,7 +294,7 @@ function Example() { ``` Note that `onDismiss` is optional. If you don't need to add a `onDismiss` handler to your dismissable Dialog, you may omit -the wrapping `close` function surrounding the Dialog. +the wrapping `close` function surrounding the Dialog. An example of this can be found in the Examples section [above](#examples). ## Props @@ -296,8 +307,21 @@ the wrapping `close` function surrounding the Dialog. Dialogs can be rendered as modals, popovers, or trays. See the [DialogTrigger docs](TODO link) for more information. ```tsx example + + Trigger Modal + + Modal + + + + This is a modal. + + + + + - Trigger + Trigger Popover Popover @@ -310,7 +334,7 @@ Dialogs can be rendered as modals, popovers, or trays. See the [DialogTrigger do - More Info + Trigger Tray Tray From 7e6fff4f94ac875ffbc2f4b86ebb66bdc02439cd Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 14 Apr 2020 10:58:30 -0700 Subject: [PATCH 24/26] addressing review comments --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 12 ++++++------ packages/dev/docs/src/Layout.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index b95f9a9dbca..24af8a958b6 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -80,7 +80,7 @@ A standard Dialog has the following anatomy: Each of these sections can be populated by providing the following components to your Dialog as children: `Header`, `Heading` (title), `Divider`, `Content` (body), `ButtonGroup`, and `Footer`. Each of these components are -required in a Spectrum compliant Dialog except for `Header` and `Footer` so be sure to design your Dialog accordingly. +required in a Spectrum compliant Dialog except for `Header`, `Footer`, and `Divider` so be sure to design your Dialog accordingly. ### Examples A typical Dialog with a title, contents, and action buttons can be created like so: @@ -307,7 +307,7 @@ the wrapping `close` function surrounding the Dialog. An example of this can be Dialogs can be rendered as modals, popovers, or trays. See the [DialogTrigger docs](TODO link) for more information. ```tsx example - + Trigger Modal Modal @@ -351,11 +351,11 @@ Dialogs can be rendered as modals, popovers, or trays. See the [DialogTrigger do Only `modal` type Dialogs support a user defined size prop. Note that the `fullscreen` and `fullscreenTakeover` sizes require the [DialogTrigger `type`](TODO LINK) prop to be set as `fullscreen` and `fullscreenTakeover` respectively for container sizing -considerations. +considerations. Modal sizes on mobile devices are also unaffected by this prop due to screen constraints. ```tsx example - Set Profile + Small {(close) => ( Profile @@ -375,7 +375,7 @@ considerations. - Set Profile + Medium {(close) => ( Profile @@ -395,7 +395,7 @@ considerations. - Set Profile + Large {(close) => ( Profile diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js index 233bfbc688f..ef1390df7cc 100644 --- a/packages/dev/docs/src/Layout.js +++ b/packages/dev/docs/src/Layout.js @@ -55,7 +55,7 @@ const mdxComponents = { }; function getTarget(href) { - if (/localhost|reactspectrum\.blob\.core\.windows\.net|react-spectrum\.(corp\.)?adobe\.com/.test(href)) { + if (/localhost|reactspectrum\.blob\.core\.windows\.net|react-spectrum\.(corp\.)?adobe\.com|\#/.test(href)) { return null; } From 4a9922bf2409449d928f036878bdf4a5bb8b9597 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 14 Apr 2020 11:00:10 -0700 Subject: [PATCH 25/26] forgot to save this last change --- packages/@react-spectrum/dialog/docs/Dialog.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/dialog/docs/Dialog.mdx b/packages/@react-spectrum/dialog/docs/Dialog.mdx index 24af8a958b6..11b498a04a8 100644 --- a/packages/@react-spectrum/dialog/docs/Dialog.mdx +++ b/packages/@react-spectrum/dialog/docs/Dialog.mdx @@ -78,7 +78,7 @@ A standard Dialog has the following anatomy: -Each of these sections can be populated by providing the following components to your Dialog as children: +These sections can be populated by providing the following components to your Dialog as children: `Header`, `Heading` (title), `Divider`, `Content` (body), `ButtonGroup`, and `Footer`. Each of these components are required in a Spectrum compliant Dialog except for `Header`, `Footer`, and `Divider` so be sure to design your Dialog accordingly. From 7b0d8b6b90b92c2c22a5810e036ade21eddaa880 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 14 Apr 2020 11:15:23 -0700 Subject: [PATCH 26/26] fixing lint --- packages/dev/docs/src/Layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/docs/src/Layout.js b/packages/dev/docs/src/Layout.js index ef1390df7cc..7d72e1bc4ca 100644 --- a/packages/dev/docs/src/Layout.js +++ b/packages/dev/docs/src/Layout.js @@ -55,7 +55,7 @@ const mdxComponents = { }; function getTarget(href) { - if (/localhost|reactspectrum\.blob\.core\.windows\.net|react-spectrum\.(corp\.)?adobe\.com|\#/.test(href)) { + if (/localhost|reactspectrum\.blob\.core\.windows\.net|react-spectrum\.(corp\.)?adobe\.com|#/.test(href)) { return null; }