From 1c124597faf1317602bd3598819ee33394ca7794 Mon Sep 17 00:00:00 2001 From: petdud Date: Mon, 31 Jul 2023 11:47:19 +0200 Subject: [PATCH 1/7] paddingtop nested tree --- .../react-tree/src/components/Tree/useTreeStyles.styles.ts | 6 ++++++ 1 file changed, 6 insertions(+) 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 index e4383543191797..4d05f7bd166c2d 100644 --- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts @@ -17,15 +17,21 @@ const useStyles = makeStyles({ ...shorthands.flex(1, 1, '100%'), ...shorthands.gridArea('subtree'), }, + nestedtree: { + paddingTop: '2px', + }, }); export const useTreeStyles_unstable = (state: TreeState): TreeState => { const styles = useStyles(); const isSubTree = state.level > 0; + const isNestedTree = state.level > 1; + state.root.className = mergeClasses( treeClassNames.root, styles.root, isSubTree && styles.subtree, + isNestedTree && styles.nestedtree, state.root.className, ); return state; From afaccbbdc084c1c4e8020ef4305adede33ef3e11 Mon Sep 17 00:00:00 2001 From: petdud Date: Mon, 31 Jul 2023 11:54:46 +0200 Subject: [PATCH 2/7] change --- ...ui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json diff --git a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json new file mode 100644 index 00000000000000..ebe4eca7f276c2 --- /dev/null +++ b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent", + "packageName": "@fluentui/react-tree", + "email": "petrduda@microsoft.com", + "dependentChangeType": "none" +} From 75110d6a115985a8864540337a9e20627201dabd Mon Sep 17 00:00:00 2001 From: petdud Date: Mon, 31 Jul 2023 12:09:40 +0200 Subject: [PATCH 3/7] token --- .../react-tree/src/components/Tree/useTreeStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 4d05f7bd166c2d..83001093c2d1cf 100644 --- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts @@ -18,7 +18,7 @@ const useStyles = makeStyles({ ...shorthands.gridArea('subtree'), }, nestedtree: { - paddingTop: '2px', + paddingTop: tokens.spacingVerticalXXS, }, }); From 2aa0266f3869aad54da33614089b268ca29977d5 Mon Sep 17 00:00:00 2001 From: Petr Duda Date: Mon, 31 Jul 2023 13:10:20 +0200 Subject: [PATCH 4/7] Update change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json Co-authored-by: Bernardo Sunderhus --- ...entui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json | 4 ++-- 1 file changed, 2 insertions(+), 2 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 index ebe4eca7f276c2..aab00dedfa227b 100644 --- a/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json +++ b/change/@fluentui-react-tree-0b6932ba-9e9f-4bc9-9d59-4d8152ff0cfe.json @@ -1,7 +1,7 @@ { - "type": "none", + "type": "prerelease", "comment": "bugfix: Tree, vertical spacing of branches and children is inconsistent", "packageName": "@fluentui/react-tree", "email": "petrduda@microsoft.com", - "dependentChangeType": "none" + "dependentChangeType": "patch" } From 32dad6fa3f2f3eab9d630a43fd726651747e21b2 Mon Sep 17 00:00:00 2001 From: Petr Duda Date: Mon, 31 Jul 2023 13:41:33 +0200 Subject: [PATCH 5/7] Update packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts Co-authored-by: Bernardo Sunderhus --- .../react-tree/src/components/Tree/useTreeStyles.styles.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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 index 83001093c2d1cf..f5c4f8334f7040 100644 --- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts @@ -16,22 +16,18 @@ const useStyles = makeStyles({ subtree: { ...shorthands.flex(1, 1, '100%'), ...shorthands.gridArea('subtree'), - }, - nestedtree: { paddingTop: tokens.spacingVerticalXXS, }, }); export const useTreeStyles_unstable = (state: TreeState): TreeState => { const styles = useStyles(); - const isSubTree = state.level > 0; - const isNestedTree = state.level > 1; + const isSubTree = state.level > 1; state.root.className = mergeClasses( treeClassNames.root, styles.root, isSubTree && styles.subtree, - isNestedTree && styles.nestedtree, state.root.className, ); return state; From a2a7eb8e5598638c43c7b6d45eb5a922e81fa724 Mon Sep 17 00:00:00 2001 From: petdud Date: Mon, 31 Jul 2023 14:21:45 +0200 Subject: [PATCH 6/7] remove unused styles --- .../components/FlatTree/useFlatTreeStyles.styles.ts | 12 +----------- .../src/components/Tree/useTreeStyles.styles.ts | 2 -- 2 files changed, 1 insertion(+), 13 deletions(-) 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 index c096d5bf3ed814..8db38e6f82ff97 100644 --- a/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/FlatTree/useFlatTreeStyles.styles.ts @@ -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 index f5c4f8334f7040..deae97db55930f 100644 --- a/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts +++ b/packages/react-components/react-tree/src/components/Tree/useTreeStyles.styles.ts @@ -14,8 +14,6 @@ const useStyles = makeStyles({ rowGap: tokens.spacingVerticalXXS, }, subtree: { - ...shorthands.flex(1, 1, '100%'), - ...shorthands.gridArea('subtree'), paddingTop: tokens.spacingVerticalXXS, }, }); From 5b255c888ca748bf6e75681fe0cdf695a1e8db1a Mon Sep 17 00:00:00 2001 From: petdud Date: Mon, 31 Jul 2023 14:40:10 +0200 Subject: [PATCH 7/7] unused shortcuts --- .../src/components/FlatTree/useFlatTreeStyles.styles.ts | 2 +- .../react-tree/src/components/Tree/useTreeStyles.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 8db38e6f82ff97..2079cc20cf75af 100644 --- 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'; 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 index deae97db55930f..780b2b2f50c8af 100644 --- 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';