chore(TreeView): updated size props (#10970)

sstrubberg · tay1orjones · web-flow · commit f308fd75908b · 2022-03-14T18:24:14.000Z
* chore(TreeView): updated size props

* Update packages/react/src/components/TreeView/next/Treeview.stories.js

Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;

Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
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/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);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -171,7 +171,7 @@`
`171`	`171`	`}`
`172`	`172`	`}`
`173`	`173`
`174`		`- .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {`
	`174`	`+ .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {`
`175`	`175`	`min-height: rem(24px);`
`176`	`176`	`}`
`177`	`177`	`}`