docs(Modal, Menu buttons (Overflow menu), Treeview) Feature flag usag…

…e, code tab update (#4287) * Adding feature flag to Modal, Menu buttons (Overflow menu), Treeview * Minor error - fixing one tag * Thy's copy suggestion * Fixing Modal's storybook link * previous link was right * link shortened * link shortened-2 * fix(styles): extra % --------- Co-authored-by: Scott Strubberg <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 10, 2024 · 9c4ad91 · 9c4ad91
1 parent 803f54c
commit 9c4ad91
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 0 deletions.
diff --git a/src/pages/components/menu-buttons/code.mdx b/src/pages/components/menu-buttons/code.mdx
@@ -4,6 +4,8 @@ title: Menu buttons
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
 Preview the menu button, combo button, and overflow menu component with the
@@ -120,6 +122,7 @@ each framework below.
     >
 
 <MdxIcon name="react" />
+<Tag type="blue">Feature flag</Tag>
 
   </ResourceCard>
 </Column>
@@ -158,6 +161,18 @@ each framework below.
 </Column>
 </Row>
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to the
+overflow menu variant of menu buttons 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/experimental-feature-flags-overflowmenu--overview)
+framework.
+
+The `enable-v12-overflowmenu` flag improves accessibility by more closely
+following the APG pattern for Menu and supports all the new Menu primitives.
+
 ## Live demo
 
 <StorybookDemo

diff --git a/src/pages/components/menu-buttons/usage.mdx b/src/pages/components/menu-buttons/usage.mdx
@@ -7,9 +7,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import A11yStatus from 'components/A11yStatus';
+import { Tag } from '@carbon/react';
 
 <PageDescription>
 
+<Tag type="blue">Feature flag</Tag>
+
 Menu buttons, including menu buttons, combo buttons, and overflow menus, open a
 menu with a list of interactive options.
 
@@ -85,6 +88,15 @@ avoids cluttering the main interface with too many options.
 | [Combo button](#combo-button)   | Use a combo button when screen real estate is limited and one of the actions has particular importance. They are usually used in the page header. |
 | [Overflow menu](#overflow-menu) | Use an overflow menu when additional options are available to the user and there is a space constraint. They are usually used in rows or cards.   |
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to the
+overflow menu variant of menu buttons to improve accessibility and changes parts
+of its functionality, not its visual appearance. For code-specific feature flag
+information, refer to the [Code](/components/menu-buttons/code/) tab. The
+current overflow menu is not being deprecated, but teams are encouraged to use
+the feature flag overflow menu for their products moving forward.
+
 ## Formatting
 
 ### Anatomy

diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
 Preview the modal component with the React live demo. For detailed code usage
@@ -23,6 +25,7 @@ documentation, see the Storybooks for each framework below.
     >
 
 <MdxIcon name="react" />
+<Tag type="blue">Feature flag</Tag>
 
   </ResourceCard>
 </Column>
@@ -58,6 +61,20 @@ documentation, see the Storybooks for each framework below.
 </Column>
 </Row>
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to modal 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/experimental-feature-flags-modal--overview)
+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

diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
@@ -7,9 +7,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import A11yStatus from 'components/A11yStatus';
+import { Tag } from '@carbon/react';
 
 <PageDescription>
 
+<Tag type="blue">Feature flag</Tag>
+
 Modals focus the user’s attention exclusively on one task or piece of
 information via a window that sits on top of the page content.
 
@@ -119,6 +122,15 @@ destructive or irreversible then use a transactional danger modal.
 | [Acknowledgment](/components/modal/usage#acknowledgment-modal) | System requires an acknowledgement of the information from the user. Contains only a single button, commonly "OK".              |
 | [Progress](/components/modal/usage#progress-modal)             | Requires several steps to be completed before it can be closed. Contains a cancel, previous, and next/completion buttons.       |
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to modal to
+improve accessibility and changes parts of its functionality, not its visual
+appearance. For code-specific feature flag information, refer to the
+[Code](/components/modal/code/) tab. The current modal is not being deprecated,
+but teams are encouraged to use the feature flag modal for their products moving
+forward.
+
 ## Formatting
 
 ### Anatomy

diff --git a/src/pages/components/tree-view/code.mdx b/src/pages/components/tree-view/code.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import { Tag } from '@carbon/react';
+
 <PageDescription>
 
 Preview the tree view component with the React live demo. For detailed code
@@ -23,11 +25,24 @@ usage documentation, see the Storybooks for each framework below.
     >
 
 <MdxIcon name="react" />
+<Tag type="blue">Feature flag</Tag>
 
   </ResourceCard>
 </Column>
 </Row>
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to tree
+view 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/experimental-feature-flags-treeview--overview)
+framework.
+
+The `enable-treeview-controllable` flag allows synchronizing the state
+of `selected` and `active` with the application and is a new controllable API of
+TreeView.
+
 ## Live demo
 
 <StorybookDemo

diff --git a/src/pages/components/tree-view/usage.mdx b/src/pages/components/tree-view/usage.mdx
@@ -7,9 +7,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
 import A11yStatus from 'components/A11yStatus';
+import { Tag } from '@carbon/react';
 
 <PageDescription>
 
+<Tag type="blue">Feature flag</Tag>
+
 A tree view is a hierarchical structure that provides nested levels of
 navigation.
 
@@ -88,6 +91,15 @@ child nodes.
   [breadcrumb](/components/breadcrumb/usage/) component can support an
   information architecture several levels deep.
 
+### Feature flags
+
+A [feature flag](/components/overview/feature-flags/) has been added to tree
+view to improve accessibility and changes parts of its functionality, not its
+visual appearance. For code-specific feature flag information, refer to the
+[Code](/components/tree-view/code/) tab. The current tree view is not being
+deprecated, but teams are encouraged to use the feature flag tree view for their
+products moving forward.
+
 ## Formatting
 
 ### Anatomy