From d1f130919861dd5191eccdaf870b8b1e632f74d0 Mon Sep 17 00:00:00 2001 From: Matthias de Baat Date: Wed, 19 Jan 2022 18:02:22 +0100 Subject: [PATCH] Added examples and corrected some text (#11156) --- .../src/pages/components/ha-alert.markdown | 127 +++++++++++------- 1 file changed, 75 insertions(+), 52 deletions(-) diff --git a/gallery/src/pages/components/ha-alert.markdown b/gallery/src/pages/components/ha-alert.markdown index a38a4c72d5..2488b83090 100644 --- a/gallery/src/pages/components/ha-alert.markdown +++ b/gallery/src/pages/components/ha-alert.markdown @@ -5,15 +5,23 @@ title: Alerts # Alert `` The alert offers four severity levels that set a distinctive icon and color. -This is an error alert — check it out! + + This is an error alert — check it out! + -This is an warning alert — check it out! + + This is an warning alert — check it out! + -This is an info alert — check it out! + + This is an info alert — check it out! + -This is an success alert — check it out! + + This is an success alert — check it out! + -**Note:** This component is by [MUI](https://mui.com/components/alert/) and is not documented in the [Material Design guidelines](https://material.io). +**Note:** This component is by MUI and is not documented in the Material Design guidelines. 1. [Guidelines](#guidelines) 2. [Implementation](#implementation) @@ -21,8 +29,8 @@ The alert offers four severity levels that set a distinctive icon and color. ### Resources | Type | Link | Status | |----------------|----------------------------------|-----------| -| Design | [Home Assistant DesignKit](https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit) (Figma) | Available | -| Implementation | [Web Component](https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts) (GitHub) | Available | +| Design | Home Assistant DesignKit (Figma) | Available | +| Implementation | Web Component (GitHub) | Available | ## Guidelines ### Usage @@ -64,78 +72,93 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only ### Example Usage **Alert type** -This is an error alert — check it out! + + This is an error alert — check it out! + -This is an warning alert — check it out! + + This is an warning alert — check it out! + -This is an info alert — check it out! + + This is an info alert — check it out! + -This is an success alert — check it out! + + This is an success alert — check it out! + ```html -This is an error alert — check it out! -This is a warning alert — check it out! -This is an info alert — check it out! -This is a success alert — check it out! + + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + ``` **Title** The `title ` option should not be used without a description. - - This is an error alert — check it out! - - - - Warning - This is an warning alert — check it out! - - - - Info - This is an info alert — check it out! - - - - Success - This is an success alert — check it out! + + This is an success alert — check it out! ```html - - This is an error alert — check it out! - - - Warning - This is an warning alert — check it out! - - - Info - This is an info alert — check it out! - - - Success - This is an success alert — check it out! + + This is an success alert — check it out! ``` **Dismissable** -*Documentation coming soon* + + This is an success alert — check it out! + + +```html + + This is an success alert — check it out! + +``` + +**Slotted action** + + + This is an success alert — check it out! + + + +```html + + This is an success alert — check it out! + + +``` **Slotted icon** *Documentation coming soon* -**Slotted action** - -*Documentation coming soon* - **Right to left** -*Documentation coming soon* + + This is an info alert — check it out! + + +```html + + This is an info alert — check it out! + +``` ### API **Properties/Attributes**