From 9b742f54617359d6713a8e937463748a6b2c8837 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Thu, 5 Mar 2020 13:31:34 -0800
Subject: [PATCH 1/2] Updating Dialogs to use the right semantic element/slot
 for the title

---
 .../@react-spectrum/dialog/src/AlertDialog.tsx     |  4 ++--
 packages/@react-spectrum/dialog/src/Dialog.tsx     |  2 +-
 .../dialog/stories/Dialog.stories.tsx              | 14 +++++++-------
 .../dialog/stories/DialogTrigger.stories.tsx       |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
index 76cfdbb3307..aa19850eb0e 100644
--- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
@@ -16,11 +16,11 @@ import {classNames, useStyleProps} from '@react-spectrum/utils';
 import {Content, Footer, Header} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
 import {Divider} from '@react-spectrum/divider';
+import {Heading} from '@react-spectrum/typography';
 import React from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 import {SpectrumButtonProps} from '@react-types/button';
 import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css';
-import {Text} from '@react-spectrum/typography';
 
 export function AlertDialog(props: SpectrumAlertDialogProps) {
   let {
@@ -49,7 +49,7 @@ export function AlertDialog(props: SpectrumAlertDialogProps) {
 
   return (
     <Dialog {...styleProps} UNSAFE_className={classNames(styles, {[`spectrum-Dialog--${variant}`]: variant}, styleProps.className)} size="M" role="alertdialog">
-      <Header><Text slot="title">{title}</Text>{(variant === 'error' || variant === 'warning') && <AlertMedium slot="typeIcon" aria-label="alert" />}</Header>
+      <Header><Heading>{title}</Heading>{(variant === 'error' || variant === 'warning') && <AlertMedium slot="typeIcon" aria-label="alert" />}</Header>
       <Divider size="M" />
       <Content>{children}</Content>
       <Footer>
diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx
index 98ce6c54ea5..0206bc52976 100644
--- a/packages/@react-spectrum/dialog/src/Dialog.tsx
+++ b/packages/@react-spectrum/dialog/src/Dialog.tsx
@@ -78,7 +78,7 @@ function BaseDialog({children, slots, size = 'L', role, ...otherProps}: Spectrum
       container: styles['spectrum-Dialog-grid'],
       hero: styles['spectrum-Dialog-hero'],
       header: styles['spectrum-Dialog-header'],
-      title: styles['spectrum-Dialog-title'],
+      heading: styles['spectrum-Dialog-title'],
       typeIcon: styles['spectrum-Dialog-typeIcon'],
       divider: styles['spectrum-Dialog-divider'],
       content: styles['spectrum-Dialog-content'],
diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
index c1811318cb3..1d833c80fec 100644
--- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
@@ -18,12 +18,12 @@ import {Content, Footer, Header} from '@react-spectrum/view';
 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';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 import {storiesOf} from '@storybook/react';
-import {Text} from '@react-spectrum/typography';
 import {TextField} from '@react-spectrum/textfield';
 
 storiesOf('Dialog', module)
@@ -212,7 +212,7 @@ function render({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -233,7 +233,7 @@ function renderHero({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
           <Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" objectFit="cover" />
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -264,7 +264,7 @@ function renderWithForm({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>
             <Form>
@@ -309,7 +309,7 @@ function renderLongContent({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>{fiveParagraphs()}</Content>
           <Footer>
@@ -328,7 +328,7 @@ function renderWithThreeButtons({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -348,7 +348,7 @@ function renderWithDividerInContent({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content>
             <Flex UNSAFE_style={{padding: '10px'}}>
diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
index 65179c9a7b1..0d05956f29d 100644
--- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
@@ -15,11 +15,11 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {AlertDialog, Dialog, DialogTrigger} from '../';
 import {Content, Footer, Header} from '@react-spectrum/view';
 import {Divider} from '@react-spectrum/divider';
+import {Heading, Text} from '@react-spectrum/typography';
 import isChromatic from 'storybook-chromatic/isChromatic';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
-import {Text} from '@react-spectrum/typography';
 
 storiesOf('DialogTrigger', module)
   // DialogTrigger isn't affected by color scheme, so only visual test light, and ensure animations work properly.
@@ -209,7 +209,7 @@ function render({width = 'auto', ...props}) {
       <DialogTrigger {...props} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
         <Dialog>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content><Text>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.</Text></Content>
           <Footer><Button variant="secondary">Cancel</Button><Button variant="cta">Confirm</Button></Footer>
@@ -225,7 +225,7 @@ function renderPopover({width = 'auto', ...props}) {
       <DialogTrigger {...props} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
         <Dialog>
-          <Header><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Title</Heading></Header>
           <Divider size="M" />
           <Content><Text>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.</Text></Content>
         </Dialog>

From b42a6d73b91893973e666e966bcd09cd745dca0c Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Thu, 5 Mar 2020 13:43:49 -0800
Subject: [PATCH 2/2] Renaming dialog title css and title props to heading

---
 .../components/dialog/index.css               |  4 +--
 .../components/dialog/skin.css                |  2 +-
 .../dialog/src/AlertDialog.tsx                |  4 +--
 .../@react-spectrum/dialog/src/Dialog.tsx     |  2 +-
 .../dialog/stories/Dialog.stories.tsx         | 30 +++++++++----------
 .../dialog/stories/DialogTrigger.stories.tsx  |  6 ++--
 packages/@react-types/dialog/src/index.d.ts   |  2 +-
 7 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/index.css b/packages/@adobe/spectrum-css-temp/components/dialog/index.css
index 1a5356fda0d..0c297c5c7a5 100644
--- a/packages/@adobe/spectrum-css-temp/components/dialog/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/dialog/index.css
@@ -164,7 +164,7 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Dialog-title {
+.spectrum-Dialog-heading {
   flex: 1 1 auto;
 
   margin: 0;
@@ -226,7 +226,7 @@ governing permissions and limitations under the License.
       ".    .       .       .";
   }
 
-  .spectrum-Dialog-title {
+  .spectrum-Dialog-heading {
     font-size: var(--spectrum-dialog-fullscreen-header-text-size);
     font-weight: var(--spectrum-dialog-fullscreen-header-text-font-weight);
   }
diff --git a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css
index 775e27ccc8c..f38f3b8737c 100644
--- a/packages/@adobe/spectrum-css-temp/components/dialog/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/dialog/skin.css
@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
   --spectrum-dialog-warning-icon-color: var(--spectrum-semantic-notice-color-icon);
 }
 
-.spectrum-Dialog-title {
+.spectrum-Dialog-heading {
   color: var(--spectrum-dialog-title-text-color);
 }
 
diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
index aa19850eb0e..5ca8034022c 100644
--- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
@@ -30,7 +30,7 @@ export function AlertDialog(props: SpectrumAlertDialogProps) {
     cancelLabel,
     primaryLabel,
     autoFocusButton,
-    title,
+    heading,
     isConfirmDisabled,
     onCancel,
     onConfirm,
@@ -49,7 +49,7 @@ export function AlertDialog(props: SpectrumAlertDialogProps) {
 
   return (
     <Dialog {...styleProps} UNSAFE_className={classNames(styles, {[`spectrum-Dialog--${variant}`]: variant}, styleProps.className)} size="M" role="alertdialog">
-      <Header><Heading>{title}</Heading>{(variant === 'error' || variant === 'warning') && <AlertMedium slot="typeIcon" aria-label="alert" />}</Header>
+      <Header><Heading>{heading}</Heading>{(variant === 'error' || variant === 'warning') && <AlertMedium slot="typeIcon" aria-label="alert" />}</Header>
       <Divider size="M" />
       <Content>{children}</Content>
       <Footer>
diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx
index 0206bc52976..97cf43fe3b4 100644
--- a/packages/@react-spectrum/dialog/src/Dialog.tsx
+++ b/packages/@react-spectrum/dialog/src/Dialog.tsx
@@ -78,7 +78,7 @@ function BaseDialog({children, slots, size = 'L', role, ...otherProps}: Spectrum
       container: styles['spectrum-Dialog-grid'],
       hero: styles['spectrum-Dialog-hero'],
       header: styles['spectrum-Dialog-header'],
-      heading: styles['spectrum-Dialog-title'],
+      heading: styles['spectrum-Dialog-heading'],
       typeIcon: styles['spectrum-Dialog-typeIcon'],
       divider: styles['spectrum-Dialog-divider'],
       content: styles['spectrum-Dialog-content'],
diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
index 1d833c80fec..cdaadd37519 100644
--- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
@@ -94,7 +94,7 @@ storiesOf('Dialog/Alert', module)
     'destructive',
     () => renderAlert({
       variant: 'destructive',
-      title: 'Warning Destructive',
+      heading: 'Warning Destructive',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -106,7 +106,7 @@ storiesOf('Dialog/Alert', module)
     'confirmation',
     () => renderAlert({
       variant: 'confirmation',
-      title: 'Confirmation Required',
+      heading: 'Confirmation Required',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -118,7 +118,7 @@ storiesOf('Dialog/Alert', module)
     'information',
     () => renderAlert({
       variant: 'information',
-      title: 'Informative Alert',
+      heading: 'Informative Alert',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -130,7 +130,7 @@ storiesOf('Dialog/Alert', module)
     'error',
     () => renderAlert({
       variant: 'error',
-      title: 'Error: Danger Will Robinson',
+      heading: 'Error: Danger Will Robinson',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -142,7 +142,7 @@ storiesOf('Dialog/Alert', module)
     'warning',
     () => renderAlert({
       variant: 'warning',
-      title: 'This is a warning',
+      heading: 'This is a warning',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -154,7 +154,7 @@ storiesOf('Dialog/Alert', module)
     'primary disabled',
     () => renderAlert({
       variant: 'error',
-      title: 'Error: Danger Will Robinson',
+      heading: 'Error: Danger Will Robinson',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -167,7 +167,7 @@ storiesOf('Dialog/Alert', module)
     'autoFocus primary',
     () => renderAlert({
       variant: 'error',
-      title: 'Error: Danger Will Robinson',
+      heading: 'Error: Danger Will Robinson',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -181,7 +181,7 @@ storiesOf('Dialog/Alert', module)
     'autoFocus secondary',
     () => renderAlert({
       variant: 'error',
-      title: 'Error: Danger Will Robinson',
+      heading: 'Error: Danger Will Robinson',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -195,7 +195,7 @@ storiesOf('Dialog/Alert', module)
     'autoFocus cancel',
     () => renderAlert({
       variant: 'error',
-      title: 'Error: Danger Will Robinson',
+      heading: 'Error: Danger Will Robinson',
       children: singleParagraph(),
       primaryLabel: 'Accept',
       cancelLabel: 'Cancel',
@@ -212,7 +212,7 @@ function render({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -233,7 +233,7 @@ function renderHero({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
           <Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" objectFit="cover" />
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -264,7 +264,7 @@ function renderWithForm({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>
             <Form>
@@ -309,7 +309,7 @@ function renderLongContent({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>{fiveParagraphs()}</Content>
           <Footer>
@@ -328,7 +328,7 @@ function renderWithThreeButtons({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>{singleParagraph()}</Content>
           <Footer>
@@ -348,7 +348,7 @@ function renderWithDividerInContent({width = 'auto', ...props}) {
       <DialogTrigger isOpen>
         <ActionButton>Trigger</ActionButton>
         <Dialog {...props}>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>
             <Flex UNSAFE_style={{padding: '10px'}}>
diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
index 0d05956f29d..12952f1a57c 100644
--- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
@@ -209,7 +209,7 @@ function render({width = 'auto', ...props}) {
       <DialogTrigger {...props} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
         <Dialog>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content><Text>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.</Text></Content>
           <Footer><Button variant="secondary">Cancel</Button><Button variant="cta">Confirm</Button></Footer>
@@ -225,7 +225,7 @@ function renderPopover({width = 'auto', ...props}) {
       <DialogTrigger {...props} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
         <Dialog>
-          <Header><Heading>The Title</Heading></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content><Text>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.</Text></Content>
         </Dialog>
@@ -239,7 +239,7 @@ function renderAlert({width = 'auto', ...props}) {
     <div style={{display: 'flex', width, margin: '100px 0'}}>
       <DialogTrigger {...props} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
-        <AlertDialog title="Alert! Danger!" variant="error" primaryLabel="Accept" secondaryLabel="Whoa" cancelLabel="Cancel" onCancel={action('cancel')} onConfirm={action('confirm')}>
+        <AlertDialog heading="Alert! Danger!" variant="error" primaryLabel="Accept" secondaryLabel="Whoa" cancelLabel="Cancel" onCancel={action('cancel')} onConfirm={action('confirm')}>
           <Text>Fine! No, absolutely fine. It's not like I don't have, you know, ten thousand other test subjects begging me to help them escape. You know, it's not like this place is about to EXPLODE.</Text>
         </AlertDialog>
       </DialogTrigger>
diff --git a/packages/@react-types/dialog/src/index.d.ts b/packages/@react-types/dialog/src/index.d.ts
index a4448f8f397..0c96e1ce9fc 100644
--- a/packages/@react-types/dialog/src/index.d.ts
+++ b/packages/@react-types/dialog/src/index.d.ts
@@ -45,7 +45,7 @@ export interface SpectrumDialogProps extends DOMProps, StyleProps {
 
 export interface SpectrumAlertDialogProps extends DOMProps, StyleProps {
   variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning'
-  title: ReactNode,
+  heading: ReactNode,
   children: ReactNode,
   cancelLabel?: string,
   primaryLabel?: string,