InlineAlert: Fix background color and clean up stories

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

@@ -37,7 +37,7 @@ governing permissions and limitations under the License.
   --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-global-dimension-static-size-200);
 
   /* Color */
-  --spectrum-inlinealert-background-color: var(--spectrum-alias-background-color-default);
+  --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-content-color: var(--spectrum-alias-text-color);

packages/@react-spectrum/form/stories/Form.stories.tsx

@@ -16,12 +16,13 @@ import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {chain} from '@react-aria/utils';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
 import {ComboBox} from '@react-spectrum/combobox';
-import {Content} from '@react-spectrum/view';
+import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {countries, states} from './data';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '../';
 import {Heading} from '@react-spectrum/text';
+import {InlineAlert} from '@react-spectrum/inlinealert';
 import {Item, Picker} from '@react-spectrum/picker';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
@@ -689,6 +690,12 @@ function FormWithSubmit() {
 
   return (
     <Form onSubmit={handleSubmit} isReadOnly={formStatus === 'valid'}>
+      {(formStatus === 'invalid' || formStatus === 'valid') &&
+        <InlineAlert variant={formStatus === 'invalid' ? 'negative' : 'positive'}>
+          <Header>{formStatus === 'invalid' ? 'Error' : 'Success'}</Header>
+          <Content>{formStatus === 'invalid' ? 'There was an error with the form.' : 'Form was successfully completed.'}</Content>
+        </InlineAlert>
+      }
       <TextField
         label="Email address"
         type="email"

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

@@ -61,8 +61,12 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement
       {...filterDOMProps(props)}
       {...styleProps}
       ref={domRef}
-      className={classNames(styles, 'spectrum-InLineAlert',
-        `spectrum-InLineAlert--${variant}`, styleProps.className)}
+      className={classNames(
+        styles,
+        'spectrum-InLineAlert',
+        `spectrum-InLineAlert--${variant}`,
+        styleProps.className
+      )}
       role="alert">
       <Grid UNSAFE_className={styles['spectrum-InLineAlert-grid']}>
         <SlotProvider slots={slots}>
@@ -75,7 +79,7 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement
 }
 
 /**
- * In-line alerts display a non-modal message associated with objects in a view.
+ * Inline alerts display a non-modal message associated with objects in a view.
  * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  */
 const _InlineAlert = React.forwardRef(InlineAlert);

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

@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
+import {Button} from '@react-spectrum/button';
 import {Content, Header} from '@react-spectrum/view';
 import {InlineAlert} from '../';
 import {Meta} from '@storybook/react';
-import React from 'react';
+import React, {useState} from 'react';
 import {SpectrumInlineAlertProps} from '@react-types/inlinealert';
 
 type StoryArgs = SpectrumInlineAlertProps & {title: string, content: string};
@@ -50,17 +51,22 @@ export const Default = {
   )
 };
 
-export const LongContent = {
-  ...Default,
-  args: {
-    title: 'Unable to process payment',
-    content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.'
-  }
+export const Dynamic = {
+  render: (args) => <DynamicExample {...args} />
 };
 
-export const InfoVariant = {
-  ...Default,
-  args: {
-    variant: 'info'
-  }
-};
+function DynamicExample(args) {
+  let [shown, setShown] = useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onPress={() => setShown(!shown)}>{shown ? 'Hide Alert' : 'Show Alert'}</Button>
+      {shown &&
+        <InlineAlert {...args}>
+          <Header>{args.title}</Header>
+          <Content>{args.content}</Content>
+        </InlineAlert>
+      }
+    </>
+  );
+}

packages/@react-types/inlinealert/src/index.d.ts

@@ -15,12 +15,12 @@ import {ReactNode} from 'react';
 
 export interface SpectrumInlineAlertProps extends DOMProps, StyleProps {
   /**
-   * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In-line Alert.
+   * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the Inline Alert.
    * @default 'neutral'
    */
   variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative',
   /**
-   * The contents of the In-line Alert.
+   * The contents of the Inline Alert.
    */
   children: ReactNode
 }