-
-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(design): add documentation for the notification component (#2892)
- Loading branch information
Showing
2 changed files
with
83 additions
and
29 deletions.
There are no files selected for viewing
44 changes: 37 additions & 7 deletions
44
apps/design-land/src/app/notification/notification.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,47 @@ | ||
| <h1>Notification</h1> | ||
| <p>Notifications provides a way to display and communicate information related user actions within a page's content.</p> | ||
| <p>Notifications provides a way to display and communicate information related to user actions within a page's content.</p> | ||
|
|
||
| <h2>Overview</h2> | ||
| <p>Notifications are used to display short messages that provide context in close promixity to a piece of content. They're often used to provide feedback or to notify users about an action they performed within a page. Notifications should not be used to display app-level alerts. Instead, use the <a routerLink="/toast">Toast</a> component.</p> | ||
|
|
||
| <h3>Default notification</h3> | ||
| <h3>Default Notification</h3> | ||
| <design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Dismissible notification</h3> | ||
| <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container> | ||
| <h2>Supported Content Types</h2> | ||
|
|
||
| <h3>Icon</h3> | ||
| <p>An icon can be used to give a user a brief overview of what the nofication is about. It can be added before the title and subtitle by using the <code>daffPrefix</code> selector.</p> | ||
|
|
||
| <h3>Title</h3> | ||
| <p>Title gives a quick overview of what the notification is about. It can be added by using the <code>daffNotificationTitle</code> selector.</p> | ||
|
|
||
| <h3>Subtitle</h3> | ||
| <p>Subtitle provides additional details about the notification that should be limited to one or two sentences. It can be added by using the <code>daffNotificationSubtitle</code> selector.</p> | ||
|
|
||
| <h3>Actions</h3> | ||
| <p>Buttons can be included in notifications to resolve the notification or navigate them to a page with more information. It can be added by using the <code>daffNotificationActions</code> selector.</p> | ||
|
|
||
| <h2>Properties</h2> | ||
|
|
||
| <h3>Statuses</h3> | ||
| <p>The status color of a notification can be updated by using the <code>status</code> property.</p> | ||
|
|
||
| <h3>Notification Statuses</h3> | ||
| <p>Supported statuses: <code>warn | danger | success</code></p> | ||
|
|
||
| <h4>Notification with statuses</h4> | ||
| <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Notification Orientations</h3> | ||
| <design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container> | ||
| <h3>Orientation</h3> | ||
| <p>Orientation dictates how a notification's content is stacked — <code>vertical</code> or <code>horizontal</code>. Notifications are oriented vertically by default. The orientation of a notification can be defined or updated by using the <code>orientation</code> property.</p> | ||
|
|
||
| <design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Dismissing a notification</h3> | ||
| <p>Notifications are not dismissible by default. They typically persist on the page until a user takes action that resolves the notification.</p> | ||
|
|
||
| <p>The close button is hidden by default but can be visible by setting the <code>dismissible</code> property to <code>true</code>. It should remain hidden if a notification has critical information for a user to read or interact with.</p> | ||
|
|
||
| <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Accessibility</h2> | ||
| <p>Notifications sets <code>aria-live</code> to <code>polite</code> by default. It does not interrupt a user's current activity and waits until they are idle to make the announcement.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,47 @@ | ||
| # Notifications | ||
| Notifications provides a way to display and communicate information for user actions or system updates. There are two main types of notifications — inline or toast. | ||
|
|
||
| ## Usage | ||
| ``` | ||
| <h4>Default Message Bar</h4> | ||
| <daff-notification> | ||
| Default Message Bar | ||
| </daff-notification> | ||
| <h4>Message Bar Statuses</h4> | ||
| <daff-notification status="warn"> | ||
| Message Bar - Primary Color | ||
| </daff-notification> | ||
| <daff-notification status="error"> | ||
| Message Bar - Secondary Color | ||
| </daff-notification> | ||
| <daff-notification status="success"> | ||
| Message Bar - Secondary Color | ||
| </daff-notification> | ||
| ``` | ||
| Notifications provides a way to display and communicate information related to user actions within a page's content. | ||
|
|
||
| ## Overview | ||
| Notifications are used to display short messages that provide context in close promixity to a piece of content. They're often used to provide feedback or to notify users about an action they performed within a page. Notifications should not be used to display app-level alerts. Instead, use the [Toast](/libs/design/toast/README.md) component. | ||
|
|
||
| ### Default Notification | ||
| <design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container> | ||
|
|
||
| ## Supported Content Types | ||
|
|
||
| ### Icon | ||
| An icon can be used to give a user a brief overview of what the nofication is about. It can be added before the title and subtitle by using the <code>daffPrefix</code> selector. | ||
|
|
||
| ### Title | ||
| Title gives a quick overview of what the notification is about. It can be added by using the `daffNotificationTitle` selector. | ||
|
|
||
| ### Subtitle | ||
| Subtitle provides additional details about the notification that should be limited to one or two sentences. It can be added by using the `daffNotificationSubtitle` selector. | ||
|
|
||
| ### Actions | ||
| Buttons can be included in notifications to resolve the notification or navigate them to a page with more information. It can be added by using the `daffNotificationActions` selector. | ||
|
|
||
| ## Properties | ||
|
|
||
| ### Statuses | ||
| The status color of a notification can be updated by using the `status` property. | ||
|
|
||
| Supported statuses: `warn | danger | success` | ||
|
|
||
| #### Notification with statuses | ||
| <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container> | ||
|
|
||
| ### Orientation | ||
| Orientation dictates how a notification's content is stacked — `vertical` or `horizontal`. Notifications are oriented vertically by default. The orientation of a notification can be defined or updated by using the `orientation` property. | ||
|
|
||
| <design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container> | ||
|
|
||
| ### Dismissing a notification | ||
| Notifications are not dismissible by default. They typically persist on the page until a user takes action that resolves the notification. | ||
|
|
||
| The close button is hidden by default but can be visible by setting the `dismissible` property to `true`. It should remain hidden if a notification has critical information for a user to read or interact with. | ||
|
|
||
| <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container> | ||
|
|
||
| ## Accessibility | ||
| Notifications sets `aria-live` to `polite` by default. It does not interrupt a user's current activity and waits until they are idle to make the announcement. |