aligning tree item (#28320)

Co-authored-by: petdud <petrduda@microsoft.com>

change/@fluentui-react-tree-816beea2-f6e6-48f9-8dbc-d3bb8c34bd02.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "bugfix: aligns TreeItem leaf and branch nodes",
+  "packageName": "@fluentui/react-tree",
+  "email": "petrduda@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-components/react-tree/etc/react-tree.api.md

@@ -112,6 +112,7 @@ export type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;
 // @public (undocumented)
 export type TreeItemLayoutSlots = {
     root: Slot<'div'>;
+    content: NonNullable<Slot<'div'>>;
     iconBefore?: Slot<'div'>;
     iconAfter?: Slot<'div'>;
     expandIcon?: Slot<'div'>;
@@ -142,7 +143,7 @@ export type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaL
 export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {
     root: NonNullable<Slot<'div'>>;
     media: NonNullable<Slot<'div'>>;
-    main: NonNullable<Slot<'div'>>;
+    content: NonNullable<Slot<'div'>>;
     description?: Slot<'div'>;
 };
 

packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts

@@ -3,6 +3,10 @@ import { ButtonContextValue } from '@fluentui/react-button';
 
 export type TreeItemLayoutSlots = {
   root: Slot<'div'>;
+  /**
+   * Content. Children of the root slot are automatically rendered here
+   */
+  content: NonNullable<Slot<'div'>>;
   /**
    * Icon slot that renders right before main content
    */

packages/react-components/react-tree/src/components/TreeItemLayout/__snapshots__/TreeItemLayout.test.tsx.snap

@@ -5,7 +5,11 @@ exports[`TreeItemLayout renders a default state 1`] = `
   <div
     class="fui-TreeItemLayout"
   >
-    Default TreeItemLayout
+    <div
+      class="fui-TreeItemLayout__content"
+    >
+      Default TreeItemLayout
+    </div>
   </div>
 </div>
 `;

packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx

@@ -16,7 +16,7 @@ export const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {
     <slots.root {...slotProps.root}>
       {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}
       {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}
-      {slotProps.root.children}
+      <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>
       {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}
       <ButtonContextProvider value={state.buttonContextValue}>
         {slots.actions && <slots.actions {...slotProps.actions} />}

packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx

@@ -23,7 +23,7 @@ export const useTreeItemLayout_unstable = (
   props: TreeItemLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TreeItemLayoutState => {
-  const { iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;
+  const { content, iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;
 
   const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);
   const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);
@@ -41,13 +41,15 @@ export const useTreeItemLayout_unstable = (
       root: 'div',
       expandIcon: 'div',
       iconBefore: 'div',
+      content: 'div',
       iconAfter: 'div',
       actions: 'div',
       aside: 'div',
     },
     buttonContextValue: { size: 'small' },
     root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),
     iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),
+    content: resolveShorthand(content, { required: true }),
     iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),
     aside: isAsideVisible ? resolveShorthand(aside) : undefined,
     actions: isActionsVisible

packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts

@@ -9,6 +9,7 @@ import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {
   root: 'fui-TreeItemLayout',
   iconBefore: 'fui-TreeItemLayout__iconBefore',
+  content: 'fui-TreeItemLayout__content',
   iconAfter: 'fui-TreeItemLayout__iconAfter',
   expandIcon: 'fui-TreeItemLayout__expandIcon',
   aside: 'fui-TreeItemLayout__aside',
@@ -50,11 +51,9 @@ const useRootStyles = makeStyles({
     paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,
   },
   medium: {
-    columnGap: tokens.spacingHorizontalSNudge,
     ...typographyStyles.body1,
   },
   small: {
-    columnGap: tokens.spacingHorizontalXS,
     minHeight: '24px',
     ...typographyStyles.caption1,
   },
@@ -79,21 +78,6 @@ const useRootStyles = makeStyles({
   },
 });
 
-/**
- * Styles for the before/after icon slot
- */
-const useIconStyles = makeStyles({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    color: tokens.colorNeutralForeground2,
-    lineHeight: tokens.lineHeightBase500,
-    fontSize: tokens.fontSizeBase500,
-  },
-  iconBefore: {},
-  iconAfter: {},
-});
-
 /**
  * Styles for the action icon slot
  */
@@ -138,16 +122,61 @@ const useExpandIconStyles = makeStyles({
   },
 });
 
+/**
+ * Styles for the content slot
+ */
+const useContentStyles = makeStyles({
+  base: {
+    ...shorthands.padding(0, tokens.spacingHorizontalXXS),
+  },
+});
+
+/**
+ * Styles for the before/after icon slot
+ */
+const useIconStyles = makeStyles({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    color: tokens.colorNeutralForeground2,
+    lineHeight: tokens.lineHeightBase500,
+    fontSize: tokens.fontSizeBase500,
+  },
+});
+
+const useIconBeforeStyles = makeStyles({
+  medium: {
+    paddingRight: tokens.spacingHorizontalXS,
+  },
+  small: {
+    paddingRight: tokens.spacingHorizontalXXS,
+  },
+});
+
+const useIconAfterStyles = makeStyles({
+  medium: {
+    paddingLeft: tokens.spacingHorizontalXS,
+  },
+  small: {
+    paddingLeft: tokens.spacingHorizontalXXS,
+  },
+});
+
 /**
  * Apply styling to the TreeItemLayout slots based on the state
  */
 export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {
-  const { iconAfter, iconBefore, root } = state;
+  const { content, iconAfter, iconBefore, expandIcon, root } = state;
   const rootStyles = useRootStyles();
-  const iconStyles = useIconStyles();
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
+
+  const contentStyles = useContentStyles();
+
   const expandIconStyles = useExpandIconStyles();
+  const iconStyles = useIconStyles();
+  const iconBeforeStyles = useIconBeforeStyles();
+  const iconAfterStyles = useIconAfterStyles();
 
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
@@ -162,11 +191,21 @@ export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): Tr
     root.className,
   );
 
+  content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);
+
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(
+      treeItemLayoutClassNames.expandIcon,
+      expandIconStyles.base,
+      expandIcon.className,
+    );
+  }
+
   if (iconBefore) {
     iconBefore.className = mergeClasses(
       treeItemLayoutClassNames.iconBefore,
       iconStyles.base,
-      iconStyles.iconBefore,
+      iconBeforeStyles[size],
       iconBefore.className,
     );
   }
@@ -175,7 +214,7 @@ export const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): Tr
     iconAfter.className = mergeClasses(
       treeItemLayoutClassNames.iconAfter,
       iconStyles.base,
-      iconStyles.iconAfter,
+      iconAfterStyles[size],
       iconAfter.className,
     );
   }

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts

@@ -14,11 +14,11 @@ export type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | '
    */
   media: NonNullable<Slot<'div'>>;
   /**
-   * Main text. Children of the root slot are automatically rendered here
+   * Content. Children of the root slot are automatically rendered here
    */
-  main: NonNullable<Slot<'div'>>;
+  content: NonNullable<Slot<'div'>>;
   /**
-   * Secondary text that describes or complements the main text
+   * Secondary text that describes or complements the content
    */
   description?: Slot<'div'>;
 };

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/__snapshots__/TreeItemPersonaLayout.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`TreeItemPersonaLayout renders a default state 1`] = `
       class="fui-TreeItemPersonaLayout__media"
     />
     <div
-      class="fui-TreeItemPersonaLayout__main"
+      class="fui-TreeItemPersonaLayout__content"
     >
       Default TreeItemPersonaLayout
     </div>

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx

@@ -26,7 +26,7 @@ export const renderTreeItemPersonaLayout_unstable = (
       <AvatarContextProvider value={contextValues.avatar}>
         <slots.media {...slotProps.media} />
       </AvatarContextProvider>
-      <slots.main {...slotProps.main} />
+      <slots.content {...slotProps.content} />
       {slots.description && <slots.description {...slotProps.description} />}
       <ButtonContextProvider value={state.buttonContextValue}>
         {slots.actions && <slots.actions {...slotProps.actions} />}

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.tsx

@@ -18,7 +18,7 @@ export const useTreeItemPersonaLayout_unstable = (
   props: TreeItemPersonaLayoutProps,
   ref: React.Ref<HTMLSpanElement>,
 ): TreeItemPersonaLayoutState => {
-  const { media, children, main, description } = props;
+  const { media, children, content, description } = props;
 
   const treeItemLayoutState = useTreeItemLayout_unstable(
     {
@@ -34,15 +34,15 @@ export const useTreeItemPersonaLayout_unstable = (
     ...treeItemLayoutState,
     components: {
       expandIcon: 'div',
-      main: 'div',
+      content: 'div',
       description: 'div',
       root: 'div',
       media: 'div',
       aside: 'div',
       actions: 'div',
     },
     avatarSize: treeAvatarSize[size],
-    main: resolveShorthand(main, { required: true, defaultProps: { children } }),
+    content: resolveShorthand(content, { required: true, defaultProps: { children } }),
     media: resolveShorthand(media, { required: true }),
     description: resolveShorthand(description),
   };

packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts

@@ -9,7 +9,7 @@ export const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayo
   root: 'fui-TreeItemPersonaLayout',
   media: 'fui-TreeItemPersonaLayout__media',
   description: 'fui-TreeItemPersonaLayout__description',
-  main: 'fui-TreeItemPersonaLayout__main',
+  content: 'fui-TreeItemPersonaLayout__content',
   expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   aside: 'fui-TreeItemPersonaLayout__aside',
   actions: 'fui-TreeItemPersonaLayout__actions',
@@ -24,7 +24,7 @@ const useRootStyles = makeStyles({
     gridTemplateRows: '1fr auto',
     gridTemplateColumns: 'auto auto 1fr auto',
     gridTemplateAreas: `
-      "expandIcon media main        aside"
+      "expandIcon media content        aside"
       "expandIcon media description aside"
     `,
     alignItems: 'center',
@@ -68,9 +68,9 @@ const useMediaStyles = makeStyles({
   },
 });
 
-const useMainStyles = makeStyles({
+const useContentStyles = makeStyles({
   base: {
-    ...shorthands.gridArea('main'),
+    ...shorthands.gridArea('content'),
     ...shorthands.padding(
       tokens.spacingVerticalMNudge,
       tokens.spacingHorizontalXS,
@@ -148,7 +148,7 @@ export const useTreeItemPersonaLayoutStyles_unstable = (
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
   const expandIconStyles = useExpandIconStyles();
-  const mainStyles = useMainStyles();
+  const contentStyles = useContentStyles();
 
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
 
@@ -161,12 +161,12 @@ export const useTreeItemPersonaLayoutStyles_unstable = (
 
   state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
 
-  if (state.main) {
-    state.main.className = mergeClasses(
-      treeItemPersonaLayoutClassNames.main,
-      mainStyles.base,
-      state.description && mainStyles.withDescription,
-      state.main.className,
+  if (state.content) {
+    state.content.className = mergeClasses(
+      treeItemPersonaLayoutClassNames.content,
+      contentStyles.base,
+      state.description && contentStyles.withDescription,
+      state.content.className,
     );
   }
   if (state.description) {

packages/react-components/react-tree/stories/A_Tree/TreeDefault.stories.tsx

@@ -31,6 +31,9 @@ export const Default = () => {
           </TreeItem>
         </Tree>
       </TreeItem>
+      <TreeItem itemType="leaf">
+        <TreeItemLayout>level 1, item 3</TreeItemLayout>
+      </TreeItem>
     </Tree>
   );
 };

packages/react-components/react-tree/stories/C_Layouts/TreeItemLayoutIconBefore.stories.tsx

@@ -24,7 +24,7 @@ export const IconBefore = () => {
         <TreeItemLayout iconBefore={<Image20Regular />}>level 1, item 2</TreeItemLayout>
         <Tree>
           <TreeItem itemType="branch">
-            level 2, item 1
+            <TreeItemLayout>level 2, item 1</TreeItemLayout>
             <Tree>
               <TreeItem itemType="leaf">
                 <TreeItemLayout>level 3, item 1</TreeItemLayout>