diff --git a/src/pages/components/menu-buttons/code.mdx b/src/pages/components/menu-buttons/code.mdx index 4207209e662..a1c94504bbd 100644 --- 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'; + Preview the menu button, combo button, and overflow menu component with the @@ -120,6 +122,7 @@ each framework below. > +Feature flag @@ -158,6 +161,18 @@ each framework below. +### 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 +Feature flag + 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 index 94665d41b38..11f2911a983 100755 --- 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'; + 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. > +Feature flag @@ -58,6 +61,20 @@ documentation, see the Storybooks for each framework below. +### 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 +Feature flag + 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 index 092d8d77006..af6a11339be 100755 --- 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'; + 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. > +Feature flag +### 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 +Feature flag + 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