[Bug]: Tree, vertical spacing of branches and children is inconsistent (

#28681) * paddingtop nested tree * change * token * Update change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json Co-authored-by: Bernardo Sunderhus <[email protected]> * Update packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts Co-authored-by: Bernardo Sunderhus <[email protected]> * remove unused styles * unused shortcuts --------- Co-authored-by: petdud <[email protected]> Co-authored-by: Bernardo Sunderhus <[email protected]>
microsoft · Jul 31, 2023 · d4b3fee · d4b3fee
1 parent f9e014b
commit d4b3fee
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { FlatTreeSlots, FlatTreeState } from './FlatTree.types';
@@ -13,20 +13,10 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     rowGap: tokens.spacingVerticalXXS,
   },
-  subtree: {
-    ...shorthands.flex(1, 1, '100%'),
-    ...shorthands.gridArea('subtree'),
-  },
 });
 
 export const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {
   const styles = useStyles();
-  const isSubTree = state.level > 0;
-  state.root.className = mergeClasses(
-    flatTreeClassNames.root,
-    styles.root,
-    isSubTree && styles.subtree,
-    state.root.className,
-  );
+  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TreeSlots, TreeState } from './Tree.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
@@ -14,14 +14,14 @@ const useStyles = makeStyles({
     rowGap: tokens.spacingVerticalXXS,
   },
   subtree: {
-    ...shorthands.flex(1, 1, '100%'),
-    ...shorthands.gridArea('subtree'),
+    paddingTop: tokens.spacingVerticalXXS,
   },
 });
 
 export const useTreeStyles_unstable = (state: TreeState): TreeState => {
   const styles = useStyles();
-  const isSubTree = state.level > 0;
+  const isSubTree = state.level > 1;
+
   state.root.className = mergeClasses(
     treeClassNames.root,
     styles.root,