InlineAlert: support Heading instead of Header (#4834)

Author: reidbarber

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

@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
   /* Font */
   --spectrum-inlinealert-heading-font-weight: var(--spectrum-alias-heading-text-font-weight-regular);
   --spectrum-inlinealert-heading-font-style: var(--spectrum-global-font-style-regular);
-  --spectrum-inlinealert-heading-font-size: var(--spectrum-global-dimension-font-size-100);
+  --spectrum-inlinealert-heading-font-size: var(--spectrum-alias-heading-xxs-text-size);
   --spectrum-inlinealert-heading-line-height: var(--spectrum-alias-heading-text-line-height);
 
   --spectrum-inlinealert-content-font-weight: var(--spectrum-alias-body-text-font-weight);
@@ -29,17 +29,17 @@ governing permissions and limitations under the License.
   --spectrum-inlinealert-border-radius: var(--spectrum-border-radius);
   --spectrum-inlinealert-icon-size: var(--spectrum-global-dimension-size-225);
   --spectrum-inlinealert-min-inline-size: 240px;
-  --spectrum-inlinealert-header-min-block-size: var(--spectrum-global-dimension-size-250);
+  --spectrum-inlinealert-heading-min-block-size: var(--spectrum-global-dimension-size-250);
 
   /* Spacing */
   --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-global-dimension-static-size-300);
-  --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-global-dimension-static-size-300);
-  --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-global-dimension-static-size-200);
+  --spectrum-inlinealert-spacing-heading-to-icon: var(--spectrum-global-dimension-static-size-300);
+  --spectrum-inlinealert-spacing-heading-content-button: var(--spectrum-global-dimension-static-size-200);
 
   /* Color */
   --spectrum-inlinealert-background-color: var(--spectrum-global-color-gray-50);
   --spectrum-inlinealert-border-and-icon-color: var(--spectrum-gray-visual-color);
-  --spectrum-inlinealert-header-color: var(--spectrum-alias-heading-text-color);
+  --spectrum-inlinealert-heading-color: var(--spectrum-alias-heading-text-color);
   --spectrum-inlinealert-content-color: var(--spectrum-alias-text-color);
   --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
   --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
@@ -67,16 +67,16 @@ governing permissions and limitations under the License.
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto auto;
-  column-gap: var(--spectrum-inlinealert-spacing-header-to-icon);
+  column-gap: var(--spectrum-inlinealert-spacing-heading-to-icon);
   grid-template-areas:
-    "header      icon   "
+    "heading      icon   "
     "content     content";
   width: 100%;
 }
 
 .spectrum-InLineAlert.spectrum-InLineAlert--neutral .spectrum-InLineAlert-grid {
   column-gap: 0;
-  grid-template-areas: "header" "content";
+  grid-template-areas: "heading" "content";
 }
 
 .spectrum-InLineAlert-icon {
@@ -86,24 +86,26 @@ governing permissions and limitations under the License.
   block-size: var(--spectrum-inlinealert-icon-size);
 }
 
-.spectrum-InLineAlert-header {
+.spectrum-InLineAlert-heading {
   display: block;
-  grid-area: header;
+  grid-area: heading;
 
   font-weight: var(--spectrum-inlinealert-heading-font-weight);
   font-style: var(--spectrum-inlinealert-heading-font-style);
   font-size: var(--spectrum-inlinealert-heading-font-size);
   line-height: var(--spectrum-inlinealert-heading-line-height);
   text-transform: none;
 
-  min-block-size: var(--spectrum-inlinealert-header-min-block-size);
+  min-block-size: var(--spectrum-inlinealert-heading-min-block-size);
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 
 .spectrum-InLineAlert-content {
   display: block;
   grid-area: content;
 
-  margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button);
+  margin-block-start: var(--spectrum-inlinealert-spacing-heading-content-button);
   margin-block-end: 0;
   margin-inline-start: 0;
   margin-inline-end: 0;

packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
   .spectrum-InLineAlert {
     --highcontrast-inlinealert-background-color: Background;
-    --highcontrast-inlinealert-header-color: CanvasText;
+    --highcontrast-inlinealert-heading-color: CanvasText;
     --highcontrast-inlinealert-content-color: CanvasText;
     --highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
   }
@@ -24,8 +24,8 @@ governing permissions and limitations under the License.
   border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color));
 }
 
-.spectrum-InLineAlert-header {
-  color:var(--highcontrast-inlinealert-header-color, var(--spectrum-inlinealert-header-color));
+.spectrum-InLineAlert-heading {
+  color:var(--highcontrast-inlinealert-heading-color, var(--spectrum-inlinealert-heading-color));
 }
 
 .spectrum-InLineAlert-content {

packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx

@@ -16,7 +16,8 @@ import packageData from '@react-spectrum/inlinealert/package.json';
 
 ```jsx import
 import {InlineAlert} from '@react-spectrum/inlinealert';
-import {Header, Content} from '@adobe/react-spectrum';
+import {Content} from '@adobe/react-spectrum';
+import {Heading} from '@react-spectrum/text';
 ```
 
 ---
@@ -39,7 +40,7 @@ keywords: [inline alert, alert]
 
 ```tsx example
 <InlineAlert>
-  <Header>Payment Information</Header>
+  <Heading>Payment Information</Heading>
   <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
 </InlineAlert>
 ```
@@ -50,7 +51,7 @@ Inline alerts contain a title and body. They also include an icon for non-neutra
 
 ```tsx example
 <InlineAlert variant="positive">
-  <Header>Payment Information</Header>
+  <Heading>Payment Information</Heading>
   <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
 </InlineAlert>
 ```
@@ -80,7 +81,7 @@ The default variant is neutral, and should be used when the message is neutral i
 
 ```tsx example
 <InlineAlert variant="info">
-  <Header>Accepted Payment Methods</Header>
+  <Heading>Accepted Payment Methods</Heading>
   <Content>Only major credit cards are accepted for payment. Direct debit is currently unavailable.</Content>
 </InlineAlert>
 ```
@@ -89,7 +90,7 @@ The default variant is neutral, and should be used when the message is neutral i
 
 ```tsx example
 <InlineAlert variant="positive">
-  <Header>Purchase completed</Header>
+  <Heading>Purchase completed</Heading>
   <Content>You'll get a confirmation email with your order details shortly.</Content>
 </InlineAlert>
 ```
@@ -98,7 +99,7 @@ The default variant is neutral, and should be used when the message is neutral i
 
 ```tsx example
 <InlineAlert variant="notice">
-  <Header>Update payment information</Header>
+  <Heading>Update payment information</Heading>
   <Content>The saved credit card for your account has expired. Update your payment information to complete the purchase.</Content>
 </InlineAlert>
 ```
@@ -107,7 +108,7 @@ The default variant is neutral, and should be used when the message is neutral i
 
 ```tsx example
 <InlineAlert variant="negative">
-  <Header>Unable to process payment</Header>
+  <Heading>Unable to process payment</Heading>
   <Content>There was an error processing your payment. Please check that your credit card information is correct, then try again.</Content>
 </InlineAlert>
 ```

packages/@react-spectrum/inlinealert/src/InlineAlert.tsx

@@ -44,7 +44,7 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement
   let domRef = useDOMRef(ref);
 
   let slots = {
-    header: {UNSAFE_className: styles['spectrum-InLineAlert-header']},
+    heading: {UNSAFE_className: styles['spectrum-InLineAlert-heading']},
     content: {UNSAFE_className: styles['spectrum-InLineAlert-content']}
   };
 

packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx

@@ -11,7 +11,8 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {Content, Header} from '@react-spectrum/view';
+import {Content} from '@react-spectrum/view';
+import {Heading} from '@react-spectrum/text';
 import {InlineAlert} from '../';
 import {Meta} from '@storybook/react';
 import React, {useState} from 'react';
@@ -45,7 +46,7 @@ export default meta;
 export const Default = {
   render: (args) => (
     <InlineAlert {...args}>
-      <Header>{args.title}</Header>
+      <Heading>{args.title}</Heading>
       <Content>{args.content}</Content>
     </InlineAlert>
   )
@@ -63,7 +64,7 @@ function DynamicExample(args) {
       <Button variant="primary" onPress={() => setShown(!shown)}>{shown ? 'Hide Alert' : 'Show Alert'}</Button>
       {shown &&
         <InlineAlert {...args}>
-          <Header>{args.title}</Header>
+          <Heading>{args.title}</Heading>
           <Content>{args.content}</Content>
         </InlineAlert>
       }