Merge branch 'main' into timepicker-size-audit

carbon-design-system · Mar 15, 2022 · 12e2271 · 12e2271
2 parents 1dc3969 + f308fd7
commit 12e2271
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 16 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3341,6 +3341,9 @@ Map {
       "role": Object {
         "type": "string",
       },
+      "tabIndex": Object {
+        "type": "number",
+      },
     },
     "render": [Function],
   },
@@ -6201,6 +6204,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "tabIndex": Object {
+        "type": "number",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/TreeView/TreeView.js b/packages/react/src/components/TreeView/TreeView.js
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import { keys, match, matches } from '../../internal/keyboard';
 import uniqueId from '../../tools/uniqueId';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 const { prefix } = settings;
 
@@ -23,7 +24,7 @@ export default function TreeView({
   multiselect,
   onSelect,
   selected: preselected = [],
-  size = 'default',
+  size = FeatureFlags.enabled('enable-v11-release') ? 'sm' : 'default',
   ...rest
 }) {
   const { current: treeId } = useRef(rest.id || uniqueId());
@@ -219,5 +220,7 @@ TreeView.propTypes = {
   /**
    * Specify the size of the tree from a list of available sizes.
    */
-  size: PropTypes.oneOf(['default', 'compact']),
+  size: FeatureFlags.enabled('enable-v11-release')
+    ? PropTypes.oneOf(['xs', 'sm'])
+    : PropTypes.oneOf(['default', 'compact']),
 };
diff --git a/packages/react/src/components/TreeView/next/Treeview.stories.js b/packages/react/src/components/TreeView/next/Treeview.stories.js
@@ -192,16 +192,26 @@ function renderTree({ nodes, expanded, withIcons = false }) {
 export default {
   title: 'Experimental/unstable_TreeView',
   component: TreeView,
+  argTypes: {
+    size: {
+      options: ['xs', 'sm'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    size: 'sm',
+  },
 };
 
-export const Default = () => (
+export const Default = (args) => (
   <>
-    <InlineNotification
-      kind="info"
-      title="Experimental component"
-      subtitle="An accessibility review of this component is in progress"
-    />
-    <TreeView {...props()}>{renderTree({ nodes })}</TreeView>
+    <InlineNotification kind="info">
+      Experimental component: An accessibility review of this component is in
+      progress
+    </InlineNotification>
+    <TreeView {...props()} {...args}>
+      {renderTree({ nodes })}
+    </TreeView>
   </>
 );
 
@@ -212,20 +222,22 @@ Default.parameters = {
   },
 };
 
-export const WithIcons = () => (
+export const WithIcons = (args) => (
   <>
     <InlineNotification
       kind="info"
       title="Experimental component"
       subtitle="An accessibility review of this component is in progress"
     />
-    <TreeView {...props()}>{renderTree({ nodes, withIcons: true })}</TreeView>
+    <TreeView {...props()} {...args}>
+      {renderTree({ nodes, withIcons: true })}
+    </TreeView>
   </>
 );
 
 WithIcons.storyName = 'with icons';
 
-export const WithControlledExpansion = () => {
+export const WithControlledExpansion = (args) => {
   const [expanded, setExpanded] = useState(undefined);
   return (
     <>
@@ -242,7 +254,9 @@ export const WithControlledExpansion = () => {
           collapse all
         </button>
       </div>
-      <TreeView {...props()}>{renderTree({ nodes, expanded })}</TreeView>
+      <TreeView {...props()} {...args}>
+        {renderTree({ nodes, expanded })}
+      </TreeView>
     </>
   );
 };
diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -18,6 +18,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
     'aria-current': ariaCurrent,
     children,
     role,
+    tabIndex = 0,
     ...rest
   },
   ref
@@ -38,7 +39,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
         aria-current={ariaCurrent}
         className={linkClassName}
         ref={ref}
-        tabIndex={0}>
+        tabIndex={tabIndex}>
         <span className={`${prefix}--text-truncate--end`}>{children}</span>
       </Link>
     </li>
@@ -74,6 +75,11 @@ HeaderMenuItem.propTypes = {
    * `<ul>` semantics for menus.
    */
   role: PropTypes.string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes.number,
 };
 
 export default HeaderMenuItem;
diff --git a/packages/react/src/components/UIShell/SwitcherItem.js b/packages/react/src/components/UIShell/SwitcherItem.js
@@ -20,6 +20,7 @@ const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
     className: customClassName,
     children,
     isSelected,
+    tabIndex = 0,
     ...rest
   } = props;
 
@@ -42,7 +43,7 @@ const SwitcherItem = React.forwardRef(function SwitcherItem(props, ref) {
         {...rest}
         ref={ref}
         className={linkClassName}
-        tabIndex={0}
+        tabIndex={tabIndex}
         {...accessibilityLabel}>
         {children}
       </Link>
@@ -66,6 +67,11 @@ SwitcherItem.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the tab index of the Link
+   */
+  tabIndex: PropTypes.number,
 };
 
 export default SwitcherItem;
diff --git a/packages/styles/scss/components/treeview/_treeview.scss b/packages/styles/scss/components/treeview/_treeview.scss
@@ -171,7 +171,7 @@
     }
   }
 
-  .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {
+  .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
     min-height: rem(24px);
   }
 }