(RSP-1578) Updating Dialogs to use the right semantic element/slot for the title

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);
   }

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);
 }
 

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 {
@@ -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><Text slot="title">{title}</Text>{(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>

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-heading'],
       typeIcon: styles['spectrum-Dialog-typeIcon'],
       divider: styles['spectrum-Dialog-divider'],
       content: styles['spectrum-Dialog-content'],

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)
@@ -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><Text slot="title">The Title</Text></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><Text slot="title">The Title</Text></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><Text slot="title">The Title</Text></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><Text slot="title">The Title</Text></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><Text slot="title">The Title</Text></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><Text slot="title">The Title</Text></Header>
+          <Header><Heading>The Heading</Heading></Header>
           <Divider size="M" />
           <Content>
             <Flex UNSAFE_style={{padding: '10px'}}>

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 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><Text slot="title">The Title</Text></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>

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,