feat: Support heading-less inline alerts (#8872)

* feat: Support heading-less inline alerts

* apply set width and add chromatic story

Author: LFDanLu

packages/@react-spectrum/s2/chromatic/InlineAlert.stories.tsx

@@ -57,3 +57,13 @@ const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
 export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
   render: (args) => <DynamicExampleRender {...args} />
 };
+
+export const NoHeading: Story = {
+  render: () => (
+    <InlineAlert variant="informative">
+      <Content>
+        There was an error processing your payment. Please check that your card information is correct, then try again.
+      </Content>
+    </InlineAlert>
+  )
+};

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

@@ -121,7 +121,7 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
 }, getAllowedOverrides());
 
 const icon = style<InlineStylesProps>({
-  gridArea: 'icon',
+  float: 'inline-end',
   '--iconPrimary': {
     type: 'fill',
     value: {
@@ -155,18 +155,6 @@ const icon = style<InlineStylesProps>({
   }
 });
 
-const grid = style({
-  display: 'grid',
-  columnGap: 24,
-  gridTemplateColumns: '1fr auto',
-  gridTemplateRows: 'auto auto auto',
-  width: 'full',
-  gridTemplateAreas: [
-    'heading icon',
-    'content content'
-  ]
-});
-
 let ICONS = {
   informative: InfoCircle,
   positive: CheckmarkCircle,
@@ -177,7 +165,6 @@ let ICONS = {
 
 const heading = style({
   marginTop: 0,
-  gridArea: 'heading',
   font: 'title-sm',
   color: {
     default: 'title',
@@ -193,7 +180,6 @@ const heading = style({
 });
 
 const content = style({
-  gridArea: 'content',
   font: 'body-sm',
   color: {
     default: 'body',
@@ -256,18 +242,15 @@ export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props:
         fillStyle,
         isFocusVisible
       }, props.styles)}>
-      <div
-        className={grid}>
-        <Provider
-          values={[
-            [HeadingContext, {styles: heading({fillStyle})}],
-            [ContentContext, {styles: content({fillStyle})}],
-            [IconContext, {styles: icon({variant, fillStyle})}]
-          ]}>
-          {Icon && <Icon aria-label={iconAlt} />}
-          {children}
-        </Provider>
-      </div>
+      <Provider
+        values={[
+          [HeadingContext, {styles: heading({fillStyle})}],
+          [ContentContext, {styles: content({fillStyle})}],
+          [IconContext, {styles: icon({variant, fillStyle})}]
+        ]}>
+        {Icon && <Icon aria-label={iconAlt} />}
+        {children}
+      </Provider>
     </div>
   );
 });

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

@@ -13,6 +13,7 @@
 import {Button, Content, Heading, InlineAlert, InlineAlertProps} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactElement, useState} from 'react';
+import {style} from '../style' with {type: 'macro'};
 
 const meta: Meta<typeof InlineAlert> = {
   component: InlineAlert,
@@ -61,3 +62,30 @@ const DynamicExampleRender = (args: InlineAlertProps): ReactElement => {
 export const DynamicExample: StoryObj<typeof DynamicExampleRender> = {
   render: (args) => <DynamicExampleRender {...args} />
 };
+
+let NoHeadingExample = (args: InlineAlertProps & {showHeading: boolean, content: string}): ReactElement => {
+  let {showHeading = false, content} = args;
+  return (
+    <InlineAlert {...args}>
+      {showHeading && <Heading>Payment Information</Heading>}
+      <Content>
+        {content}
+      </Content>
+    </InlineAlert>
+  );
+};
+
+export const NoHeading: StoryObj<typeof NoHeadingExample> = {
+  render: (args) => (
+    <NoHeadingExample {...args} styles={style({width: 400})} />
+  ),
+  args: {
+    showHeading: false,
+    content: 'There was an error processing your payment. Please check that your card information is correct, then try again.'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};