From b1e772734f92f1e6bfd2d9375478a5a2082088ef Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Wed, 17 Jun 2020 14:12:39 -0500 Subject: [PATCH] docs(notification): add notification code docs (#1217) * docs(notification): add notification code docs * docs(notification): remove skeleton anchor link * docs(Notification): several suggested PR changes * fix(docs): update notification code docs * docs(notification): sync up the anchor links * docs(notification): fix missing anchor * docs(notification): add overview anchor and reorder h2 Co-authored-by: Josh Black Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com> --- src/pages/components/notification/code.mdx | 185 ++++++++++++++------- 1 file changed, 126 insertions(+), 59 deletions(-) diff --git a/src/pages/components/notification/code.mdx b/src/pages/components/notification/code.mdx index 4b3488516cd..9c63c4ffe30 100755 --- a/src/pages/components/notification/code.mdx +++ b/src/pages/components/notification/code.mdx @@ -4,66 +4,133 @@ description: Notifications are messages that communicate information to the user tabs: ["Usage", "Style", "Code", "Accessibility"] --- - - {` -
- Subtitle text goes here. Example link} - timeout={0} - title="Notification title" - /> -
-`} - {` -
+ + +How to build a notification using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab. + + + + + +Overview +Toast notification +Inline notification +Inline notifications with action button +Component API +Feedback + + + +## Overview + +Carbon Notifications come in two variants: toast, and inline. They are created by using the `ToastNotification` or `InlineNotification` components. + +## Toast notification + +You can use the `ToastNotification` component to display a non–modal, time–based short message that appears at the bottom or the top of the screen. + +```jsx +import { ToastNotification } from "carbon-components-react"; + +function MyComponent() { + return ( + + ); +} +``` + +## Inline notification + +You can use the `InlineNotification` to notify users of the status of an action. Unlike `ToastNotification` these appear at the top of the primary content area. + +```jsx +import { InlineNotification } from "carbon-components-react"; + +function MyComponent() { + return ( Action} - iconDescription="describes the close button" - subtitle={Subtitle text goes here. Example link} + iconDescription="Dismiss notification" + subtitle="Notification subtitle" title="Notification title" /> -
-`} - + ); +} +``` + +## Inline notifications with action button + +An inline notification optionally can have a ghost button that allows the user to take further action. + +```jsx +import { InlineNotification } from "carbon-components-react"; + +function Mycomponent() { + return ( + Action} + icondescription="Dismiss notification" + subtitle="Notification subtitle" + title="notification title" + /> + ); +} +``` + +## Component API + +### Inline Notification props + +| Prop | Type | Required | Default | Description | +| --------------------- | ---------- | -------- | --------------------- | ---------------------------------------------------------------------------------------- | +| actions | `node` | – | – | Pass in the action nodes that will be rendered inside the notification | +| children | `node` | – | – | Pass in the children that will be rendered inside the notification | +| className | `string` | `true` | `error` | Optional class names to be applied to the notification | +| kind | `string` | `true` | `error` | Specify what state the notification represents: `error`, `success`, `warning`, or `info` | +| lowContrast | `bool` | – | – | Specify whether you are using the low contrast variant styles | +| title | `string` | `true` | `provide a caption` | Specify notification title | +| subtitle | `node` | – | | Specify notification subtitle | +| role | `string` | – | `alert` | Provide an alternative role for the notification | +| onCloseButtonClick | `function` | – | `() => {}` | Function that is called when notification closes | +| iconDescription | `string` | `true` | `closes notification` | Provide screen reader accessible description for close icon | +| statusIconDescription | `string` | – | – | Provide screen reader accessible description for status icon | +| notificationType | `string` | – | `inline` | Specify the type of the button | +| hideCloseButton | `bool` | – | `false` | Optional prop to disable the close button | + +### Notification action button props + +| Prop | Type | Required | Default | Description | +| --------- | ---------- | -------- | ------- | --------------------------------------------- | +| classname | `string` | – | – | class name to be applied to the action button | +| children | `node` | – | – | the content of the notification button | +| onclick | `function` | – | – | click handler for the notification button | + +### Toast notification props + +| prop | type | required | default | description | +| --------------------- | ---------- | -------- | --------------------- | ------------------------------------------------------------------------------------- | +| children | `node` | – | – | Pass in the children that will be rendered inside the notification | +| className | `string` | `true` | – | Optional class names to be applied to the notification | +| kind | `string` | `true` | `error` | Specify what state the notification represents: 'error', 'info', 'success', 'warning' | +| lowContrast | `bool` | – | – | Specify whether you are using the low contrast variant styles | +| title | `string` | `true` | `provide a title` | Specify notification title | +| subtitle | `node` | – | | Specify notification subtitle | +| role | `string` | – | `alert` | Provide an alternative role for the notification | +| caption | `node` | – | `provide a caption` | The caption for the notification | +| onCloseButtonClick | `function` | – | `() => {}` | The function called when the close button is clicked | +| iconDescription | `string` | `true` | `closes notification` | Provide screen reader accessible description for close icon | +| statusIconDescription | `string` | – | – | Provide screen reader accessible description for status icon | +| notificationType | `string` | – | `toast` | The type of notification | +| hideCloseButton | `bool` | – | `false` | Optional prop to disable the close button | +| timeout | `number` | – | `0` | Time until the notification is closed | + +## Feedback + +Help us improve this component by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).