Separate Dialog Header/Heading grid areas

packages/@adobe/spectrum-css-temp/components/dialog/index.css

@@ -39,6 +39,8 @@ governing permissions and limitations under the License.
 
   /* 12px desktop (medium scale) and 8px mobile (large scale) */
   --spectrum-dialog-close-button-padding: calc(26px - var(--spectrum-global-dimension-size-175));
+
+  --spectrum-dialog-gap-size: var(--spectrum-global-dimension-size-200);
 }
 
 
@@ -85,19 +87,38 @@ governing permissions and limitations under the License.
 
 .spectrum-Dialog .spectrum-Dialog-grid {
   display: grid;
-  grid-template-columns: var(--spectrum-dialog-padding) 1fr auto var(--spectrum-dialog-padding);
+  grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto var(--spectrum-dialog-padding);
   grid-template-rows: auto var(--spectrum-dialog-padding) auto auto 1fr auto var(--spectrum-dialog-padding);
   grid-template-areas:
-    "hero hero    hero        hero"
-    ".    .       .           closeButton"
-    ".    header  header      ."
-    ".    divider divider     ."
-    ".    content content     ."
-    ".    footer  buttonGroup ."
-    ".    .       .           .";
+    "hero hero    hero    hero        hero"
+    ".    .       .       .           closeButton"
+    ".    heading header  header      ."
+    ".    divider divider divider     ."
+    ".    content content content     ."
+    ".    footer  footer  buttonGroup ."
+    ".    .       .       .           .";
   width: 100%;
 }
 
+.spectrum-Dialog-heading {
+  grid-area: heading;
+
+  margin: 0;
+
+  font-size: var(--spectrum-dialog-title-text-size);
+  font-weight: var(--spectrum-dialog-title-text-font-weight);
+  line-height: var(--spectrum-dialog-title-text-line-height);
+
+  outline: none; /* Hide focus outline */
+
+  padding-inline-end: var(--spectrum-dialog-gap-size);
+
+  &.spectrum-Dialog-heading--noHeader {
+    grid-area: heading-start / heading-start / header-end / header-end;
+    padding-inline-end: 0;
+  }
+}
+
 .spectrum-Dialog-header {
   grid-area: header;
   display: flex;
@@ -167,24 +188,23 @@ governing permissions and limitations under the License.
   grid-area: buttonGroup;
   /* this padding isn't built into the grid because it disappears with this buttonGroup */
   padding-block-start: var(--spectrum-global-dimension-static-size-500);
+  display: flex;
+  justify-content: flex-end;
+  /* this padding should be safe as button group is always end aligned */
+  padding-inline-start: var(--spectrum-dialog-gap-size);
+
+  &.spectrum-Dialog-buttonGroup--noFooter {
+    grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
+  }
 }
 
 .spectrum-Dialog--dismissable {
-  .spectrum-Dialog-footer {
+  .spectrum-Dialog-buttonGroup {
     display: none;
   }
-}
-
-.spectrum-Dialog-heading {
-  flex: 1 1 auto;
-
-  margin: 0;
-
-  font-size: var(--spectrum-dialog-title-text-size);
-  font-weight: var(--spectrum-dialog-title-text-font-weight);
-  line-height: var(--spectrum-dialog-title-text-line-height);
-
-  outline: none; /* Hide focus outline */
+  .spectrum-Dialog-footer {
+    grid-area: footer / footer/ buttonGroup / buttonGroup;
+  }
 }
 
 .spectrum-Dialog-closeButton {
@@ -221,20 +241,15 @@ governing permissions and limitations under the License.
   &.spectrum-Dialog .spectrum-Dialog-grid {
     display: grid;
     grid-template-columns: var(--spectrum-dialog-padding) 1fr auto auto var(--spectrum-dialog-padding);
-    grid-template-rows: calc(var(--spectrum-dialog-padding) + var(--spectrum-dialog-fullscreen-padding-top)) auto auto 1fr var(--spectrum-dialog-padding);
+    grid-template-rows: var(--spectrum-dialog-padding) auto auto 1fr var(--spectrum-dialog-padding);
     grid-template-areas:
       ".    .       .       .            ."
-      ".    header  header  buttonGroup  ."
+      ".    heading header  buttonGroup  ."
       ".    divider divider divider      ."
       ".    content content content      ."
       ".    .       .       .            .";
   }
 
-  .spectrum-Dialog-heading {
-    font-size: var(--spectrum-dialog-fullscreen-header-text-size);
-    font-weight: var(--spectrum-dialog-fullscreen-header-text-font-weight);
-  }
-
   .spectrum-Dialog-content {
     max-height: none;
   }
@@ -247,23 +262,41 @@ governing permissions and limitations under the License.
   .spectrum-Dialog-footer {
     display: none;
   }
+
+  .spectrum-Dialog-buttonGroup {
+    grid-area: buttonGroup;
+  }
 }
 
 @media screen and (max-width: 700px) {
+  .spectrum-Dialog .spectrum-Dialog-grid {
+    grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto var(--spectrum-dialog-padding);
+    grid-template-rows: auto var(--spectrum-dialog-padding) auto auto auto 1fr auto var(--spectrum-dialog-padding);
+    grid-template-areas:
+      "hero hero    hero    hero        hero"
+      ".    .       .       .           closeButton"
+      ".    heading heading heading     ."
+      ".    header  header  header      ."
+      ".    divider divider divider     ."
+      ".    content content content     ."
+      ".    footer  footer  buttonGroup ."
+      ".    .       .       .           .";
+  }
   .spectrum-Dialog--fullscreen,
   .spectrum-Dialog--fullscreenTakeover {
 
     &.spectrum-Dialog .spectrum-Dialog-grid {
        display: grid;
-       grid-template-columns: var(--spectrum-dialog-padding) 1fr auto auto var(--spectrum-dialog-padding);
-       grid-template-rows: calc(var(--spectrum-dialog-padding) + var(--spectrum-dialog-fullscreen-padding-top)) auto auto 1fr auto var(--spectrum-dialog-padding);
+       grid-template-columns: var(--spectrum-dialog-padding) 1fr var(--spectrum-dialog-padding);
+       grid-template-rows: var(--spectrum-dialog-padding) auto auto auto 1fr auto var(--spectrum-dialog-padding);
        grid-template-areas:
-         ".    .       .            ."
-         ".    header  header       ."
-         ".    divider divider      ."
-         ".    content content      ."
-         ".    .       buttonGroup  ."
-         ".    .       .            .";
+         ".    .            ."
+         ".    heading      ."
+         ".    header       ."
+         ".    divider      ."
+         ".    content      ."
+         ".    buttonGroup  ."
+         ".    .            .";
     }
 
     .spectrum-Dialog-buttonGroup {

packages/@react-spectrum/dialog/src/AlertDialog.tsx

@@ -18,6 +18,7 @@ import {Content, Header} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
 import {DialogContext, DialogContextValue} from './context';
 import {Divider} from '@react-spectrum/divider';
+import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/typography';
 import React, {useContext} from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
@@ -61,7 +62,8 @@ 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>
+      <Heading>{title}</Heading>
+      <Header><Flex justifyContent="flex-end" width="100%">{(variant === 'error' || variant === 'warning') && <AlertMedium slot="typeIcon" aria-label="alert" />}</Flex></Header>
       <Divider />
       <Content>{children}</Content>
       <ButtonGroup>

packages/@react-spectrum/dialog/src/Dialog.tsx

@@ -11,7 +11,7 @@
  */
 
 import {ActionButton} from '@react-spectrum/button';
-import {classNames, filterDOMProps, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {classNames, filterDOMProps, useHasChild, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import CrossLarge from '@spectrum-icons/ui/CrossLarge';
 import {DialogContext, DialogContextValue} from './context';
 import {FocusScope} from '@react-aria/focus';
@@ -90,20 +90,25 @@ let sizeMap = {
 
 function BaseDialog({children, slots, size, role, ...otherProps}: SpectrumBaseDialogProps) {
   let ref = useRef();
+  let gridRef = useRef();
   let sizeVariant = sizeMap[size];
   let {dialogProps, titleProps} = useDialog({ref, role, ...otherProps});
+
+  let hasHeader = useHasChild(`:scope > .${styles['spectrum-Dialog-header']}`, gridRef);
+  let hasFooter = useHasChild(`:scope > .${styles['spectrum-Dialog-footer']}`, gridRef);
+
   if (!slots) {
     slots = {
       container: {UNSAFE_className: styles['spectrum-Dialog-grid']},
       hero: {UNSAFE_className: styles['spectrum-Dialog-hero']},
       header: {UNSAFE_className: styles['spectrum-Dialog-header']},
-      heading: {UNSAFE_className: styles['spectrum-Dialog-heading'], ...titleProps},
+      heading: {UNSAFE_className: classNames(styles, 'spectrum-Dialog-heading', {'spectrum-Dialog-heading--noHeader': !hasHeader}), ...titleProps},
       typeIcon: {UNSAFE_className: styles['spectrum-Dialog-typeIcon']},
       divider: {UNSAFE_className: styles['spectrum-Dialog-divider'], size: 'M'},
       content: {UNSAFE_className: styles['spectrum-Dialog-content']},
       footer: {UNSAFE_className: styles['spectrum-Dialog-footer']},
       closeButton: {UNSAFE_className: styles['spectrum-Dialog-closeButton']},
-      buttonGroup: {UNSAFE_className: styles['spectrum-Dialog-buttonGroup']}
+      buttonGroup: {UNSAFE_className: classNames(styles, 'spectrum-Dialog-buttonGroup', {'spectrum-Dialog-buttonGroup--noFooter': !hasFooter})}
     };
   }
 
@@ -118,7 +123,7 @@ function BaseDialog({children, slots, size, role, ...otherProps}: SpectrumBaseDi
           otherProps.className
         )}
         ref={ref}>
-        <Grid slots={slots}>
+        <Grid slots={slots} ref={gridRef}>
           {children}
         </Grid>
       </section>

packages/@react-spectrum/dialog/stories/Dialog.stories.tsx

@@ -23,6 +23,7 @@ import {Image} from '@react-spectrum/image';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
+import {StatusLight} from '@react-spectrum/statuslight';
 import {storiesOf} from '@storybook/react';
 import {TextField} from '@react-spectrum/textfield';
 
@@ -51,7 +52,7 @@ storiesOf('Dialog', module)
     () => renderHero({isDismissable: true})
   )
   .add(
-    'with footer, isDimissable',
+    'with footer',
     () => renderFooter({})
   )
   .add(
@@ -223,7 +224,8 @@ function render({width = 'auto', isDismissable = undefined, ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>{singleParagraph()}</Content>
             {!isDismissable &&
@@ -246,7 +248,8 @@ function renderHero({width = 'auto', isDismissable = undefined, ...props}) {
         {(close) => (
           <Dialog {...props}>
             <Image slot="hero" src="https://i.imgur.com/Z7AzH2c.png" objectFit="cover" />
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>{singleParagraph()}</Content>
             {!isDismissable &&
@@ -268,7 +271,8 @@ function renderFooter({width = 'auto', isDismissable = undefined, ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>{singleParagraph()}</Content>
             <Footer><Checkbox>I accept</Checkbox></Footer>
@@ -303,7 +307,8 @@ function renderWithForm({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>
               <Form>
@@ -350,7 +355,7 @@ function renderLongContent({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading is also very long and demonstrates what happens if there is no Header</Heading>
             <Divider />
             <Content>{fiveParagraphs()}</Content>
             <ButtonGroup>
@@ -371,7 +376,8 @@ function renderWithThreeButtons({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>{singleParagraph()}</Content>
             <ButtonGroup>
@@ -393,7 +399,8 @@ function renderWithDividerInContent({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog {...props}>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <Content>
               <Flex UNSAFE_style={{padding: '10px'}}>

packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx

@@ -20,6 +20,7 @@ import {Heading, Text} from '@react-spectrum/typography';
 import isChromatic from 'storybook-chromatic/isChromatic';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
+import {StatusLight} from '@react-spectrum/statuslight';
 import {storiesOf} from '@storybook/react';
 
 storiesOf('DialogTrigger', module)
@@ -232,7 +233,8 @@ function render({width = 'auto', ...props}) {
         <ActionButton>Trigger</ActionButton>
         {(close) => (
           <Dialog>
-            <Header><Heading>The Heading</Heading></Header>
+            <Heading>The Heading</Heading>
+            <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
             <Divider />
             <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>
             {!props.isDismissable &&
@@ -253,7 +255,8 @@ function renderPopover({width = 'auto', ...props}) {
       <DialogTrigger {...props} onOpenChange={action('open change')} defaultOpen={isChromatic()}>
         <ActionButton>Trigger</ActionButton>
         <Dialog>
-          <Header><Heading>The Heading</Heading></Header>
+          <Heading>The Heading</Heading>
+          <Header><StatusLight variant="positive">Life is good</StatusLight></Header>
           <Divider />
           <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>

packages/@react-spectrum/utils/src/index.ts

@@ -17,3 +17,4 @@ export * from './useMediaQuery';
 export * from './useDOMRef';
 export * from './styleProps';
 export * from './Slots';
+export * from './useHasChild';

packages/@react-spectrum/utils/src/useHasChild.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 {RefObject, useLayoutEffect, useState} from 'react';
+
+export function useHasChild(query: string, ref: RefObject<HTMLElement>) {
+  let [hasChild, setHasChild] = useState(true);
+  useLayoutEffect(() => {
+    setHasChild(!!(ref.current && ref.current.querySelector(query)));
+  }, [setHasChild, query, ref]);
+  return hasChild;
+}