diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index b04dab89ae9..e78dffa5783 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/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); diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx index 3377f44b09b..92230b934c2 100644 --- a/packages/@react-spectrum/form/stories/Form.stories.tsx +++ b/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 (
+ {(formStatus === 'invalid' || formStatus === 'valid') && + +
{formStatus === 'invalid' ? 'Error' : 'Success'}
+ {formStatus === 'invalid' ? 'There was an error with the form.' : 'Form was successfully completed.'} +
+ } @@ -75,7 +79,7 @@ function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef }; -export const InfoVariant = { - ...Default, - args: { - variant: 'info' - } -}; +function DynamicExample(args) { + let [shown, setShown] = useState(false); + + return ( + <> + + {shown && + +
{args.title}
+ {args.content} +
+ } + + ); +} diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts index 856a21522fb..03b4b114d7e 100644 --- a/packages/@react-types/inlinealert/src/index.d.ts +++ b/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 }