Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(Notification) Feature flag usage, code tab update #4357

Merged
merged 3 commits into from
Nov 20, 2024
Merged

docs(Notification) Feature flag usage, code tab update #4357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5f76c0
Adding feature flag to Notification
Kritvi-bhatia17 Nov 14, 2024
0e748f8
Merge branch 'main' into FF_Notification
Kritvi-bhatia17 Nov 18, 2024
2f4a0c2
Merge branch 'main' into FF_Notification
alisonjoseph Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/pages/components/notification/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

import { Tag } from '@carbon/react';

<PageDescription>

Preview the notification component with the React live demo. For detailed code
Expand All @@ -23,6 +25,7 @@ usage documentation, see the Storybooks for each framework below.
>

<MdxIcon name="react" />
<Tag type="blue">Feature flag</Tag>

</ResourceCard>
</Column>
Expand Down Expand Up @@ -58,6 +61,21 @@ usage documentation, see the Storybooks for each framework below.
</Column>
</Row>

### Feature flags

A [feature flag](/components/overview/feature-flags/) has been added to the
actionable notification variant to improve accessibility and changes parts of
its functionality, not its visual appearance. For more code-specific feature
flag information, refer to the
[@carbon/react](https://react.carbondesignsystem.com/?path=/docs/components-notifications-actionable-feature-flag--flag-details)
framework.

The `enable-experimental-focus-wrap-without-sentinels` flag is a new approach to
focus wrap behavior, modifying the DOM to no longer include hidden "sentinel
nodes" that previously marked the beginning and end of the wrapped focus. This
behavior considers all interactive child nodes and wraps focus based on their
tab order.

## Live demo

<StorybookDemo
Expand Down
13 changes: 13 additions & 0 deletions src/pages/components/notification/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

import A11yStatus from 'components/A11yStatus';
import { Tag } from '@carbon/react';

<PageDescription>

<Tag type="blue">Feature flag</Tag>

Notifications are messages that communicate information to the user. The four
variants of notifications are toast, inline, actionable, and callout.

Expand Down Expand Up @@ -85,6 +88,16 @@ although some product teams also support banners and notification centers.
| [Actionable](#actionable) | Actionable notifications allow for interactive elements within a notification styled like an inline or toast notification. |
| [Callout](#callout) | Callouts are used to highlight important information that loads with the contents of the page, is placed contextually, and cannot be dismissed. |

### Feature flags

A [feature flag](/components/overview/feature-flags/) has been added to the
actionable notification variant to improve accessibility and changes parts of
its functionality, not its visual appearance. For code-specific feature flag
information, refer to the [Code](/components/notification/code/) tab. The
current actionable notification is not being deprecated, but teams are
encouraged to use the feature flag notification for their products moving
forward.

## Formatting

### Anatomy
Expand Down
Loading