diff --git a/change/@fluentui-react-tree-7b614498-e79f-460b-a3a4-22ba4d9a2bea.json b/change/@fluentui-react-tree-7b614498-e79f-460b-a3a4-22ba4d9a2bea.json new file mode 100644 index 00000000000000..b59c3335f4543f --- /dev/null +++ b/change/@fluentui-react-tree-7b614498-e79f-460b-a3a4-22ba4d9a2bea.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "tree stories and doc update", + "packageName": "@fluentui/react-tree", + "email": "petrduda@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx index 58c032dee313ff..a20be498e2d237 100644 --- a/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx +++ b/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx @@ -7,7 +7,16 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTreeItemContextValues_unstable } from './useTreeItemContextValues'; /** - * TreeItem component - TODO: add more docs + * The `TreeItem` component represents a single item in a tree. + * It expects a certain order of children to work properly: the first child should be the node itself, + * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem. + * This order follows the same order as document traversal for the TreeWalker API in JavaScript: + * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker. + * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component, + * which should be used as a direct child of TreeItem. + * + * When a TreeItem has nsted child subtree, an expand/collapse control is displayed, + * allowing the user to show or hide the children. */ export const TreeItem: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useTreeItem_unstable(props, ref); diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx index 9eb0c32604cc56..7de4b11e7d2a2f 100644 --- a/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx +++ b/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx @@ -6,7 +6,9 @@ import type { TreeItemLayoutProps } from './TreeItemLayout.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; /** - * TreeItemLayout component - TODO: add more docs + * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item. + * It provides a consistent visual structure for tree items in a `Tree` component. + * This component should only be used as a direct child of `TreeItem`. */ export const TreeItemLayout: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useTreeItemLayout_unstable(props, ref); diff --git a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx index 9e5b8f44b762ff..55ede65c081c02 100644 --- a/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx +++ b/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx @@ -7,7 +7,9 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues'; /** - * TreeItemPersonaLayout component - TODO: add more docs + * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description. + * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics. + * This component should only be used as a direct child of `TreeItem`. */ export const TreeItemPersonaLayout: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useTreeItemPersonaLayout_unstable(props, ref); diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md new file mode 100644 index 00000000000000..da5e107408907b --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.md @@ -0,0 +1 @@ +You can combine multiple props to customize the appearance and behavior of a `Tree` component. It includes the use of `icons`, `badges`, `actions`, and layouts, which can be composed together to create a more complex and flexible user interface. diff --git a/packages/react-components/react-tree/stories/Tree/TreeLayout.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx similarity index 95% rename from packages/react-components/react-tree/stories/Tree/TreeLayout.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx index c76588ad8d6442..a9fb2b1c39b43d 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeLayout.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayout.stories.tsx @@ -10,6 +10,7 @@ import { SquareMultiple20Regular, } from '@fluentui/react-icons'; import { Button, CounterBadge, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; +import story from './TreeItemLayout.md'; const iconStyleProps: FluentIconsProps = { primaryFill: 'red', @@ -102,3 +103,11 @@ export const Layout = () => { ); }; + +Layout.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md new file mode 100644 index 00000000000000..993f85a456f07b --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.md @@ -0,0 +1 @@ +The `Tree` component allows for an `aside` prop to be added to individual `TreeItemLayout` or `TreeItemPersonaLayout` layout components. This creates an area on the right side of the `TreeItem` where additional information can be displayed, such as a badge with notification count or an icon indicating importance. When actions are specified using the `actions` prop, they will overlay the `aside` area on hover. diff --git a/packages/react-components/react-tree/stories/Tree/TreeAside.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx similarity index 93% rename from packages/react-components/react-tree/stories/Tree/TreeAside.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx index 65c77c1fb6d335..6d78eb13092406 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeAside.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutAside.stories.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; import { Button, CounterBadge } from '@fluentui/react-components'; import { Edit20Regular, FluentIconsProps, Important16Regular, MoreHorizontal20Regular } from '@fluentui/react-icons'; +import story from './TreeItemLayoutAside.md'; const iconStyleProps: FluentIconsProps = { primaryFill: 'red', @@ -23,7 +24,7 @@ const Actions = () => ( export const Aside = () => ( - }> + }>level 1, item 1 }> @@ -37,7 +38,7 @@ export const Aside = () => ( - }> + }>level 1, item 2 }> @@ -67,3 +68,11 @@ export const Aside = () => ( ); + +Aside.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx new file mode 100644 index 00000000000000..c06f819cbf1773 --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemLayoutDefault.stories.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; + +export const DefaultTreeItemLayout = () => { + return ( + + + level 1, item 1 + + + level 2, item 1 + + + level 2, item 2 + + + level 2, item 3 + + + + + level 1, item 2 + + + level 2, item 1 + + + level 3, item 1 + + + + + + + ); +}; diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.md b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.md new file mode 100644 index 00000000000000..8778ca825b31c1 --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.md @@ -0,0 +1 @@ +With `TreeItemPersonaLayout`, `TreeItem`, and `Tree`, you can create a highly customizable and flexible UI by leveraging various props like `media`, `icons`, `badges`, and `actions`. Here are some examples of how you can use these components together to achieve different layouts and appearances. diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreePersonaLayout.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx similarity index 96% rename from packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreePersonaLayout.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx index 563ceb09703b92..091de57556bdf4 100644 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreePersonaLayout.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayout.stories.tsx @@ -14,6 +14,7 @@ import { } from '@fluentui/react-components'; import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree'; import { Flag20Regular, FluentIconsProps, Important16Regular, MoreHorizontal20Regular } from '@fluentui/react-icons'; +import story from './TreeItemPersonaLayout.md'; const useBadgeStyles = makeStyles({ base: { @@ -132,3 +133,11 @@ export const TreePersonaLayout = () => { ); }; + +TreePersonaLayout.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutDefault.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDefault.stories.tsx similarity index 95% rename from packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutDefault.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDefault.stories.tsx index 8f4ded4408824d..c5e6ebf8d650e5 100644 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutDefault.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDefault.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Avatar } from '@fluentui/react-components'; import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree'; -export const Default = () => { +export const DefaultTreeItemPersonaLayout = () => { return ( diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDescription.md b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDescription.md new file mode 100644 index 00000000000000..6130dc586949aa --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutDescription.md @@ -0,0 +1 @@ +`TreeItemPersonaLayout` is a layout component used to display a `TreeItem` with a media (such as an avatar) and a description. Its purpose is to provide a more visually appealing representation of a `TreeItem`, often used to display a list of people or related topics. diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.md b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.md new file mode 100644 index 00000000000000..ae06924ccf5c82 --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.md @@ -0,0 +1,3 @@ +The `TreeItemPersonaLayout` component allows each `TreeItem` to be displayed with a persona layout, which supports a `media` prop such as an `Avatar`. + +The `Avatar` component can be customized with different sizes and shapes to suit the design needs. diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutMedia.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.stories.tsx similarity index 91% rename from packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutMedia.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.stories.tsx index 4decbda8d4598d..e8c47e1d15c2cb 100644 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutMedia.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutMedia.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Avatar } from '@fluentui/react-components'; import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree'; +import story from './TreeItemPersonaLayoutMedia.md'; export const Media = () => { return ( @@ -36,3 +37,11 @@ export const Media = () => { ); }; + +Media.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.md b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.md new file mode 100644 index 00000000000000..eff0fde898036a --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.md @@ -0,0 +1 @@ +Layout components can be customized with different styles to make it more visually appealing. In the example below, the component is used to display chat messages. We differentiate between read and unread messages by applying customized styles using the `makeStyles` hook. diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutReadUnread.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx similarity index 74% rename from packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutReadUnread.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx index fb6df6d7b88769..a3a1ddddffb7ba 100644 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutReadUnread.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutReadUnread.stories.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import { Avatar, makeStyles } from '@fluentui/react-components'; +import { Avatar, makeStyles, tokens } from '@fluentui/react-components'; import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree'; +import story from './TreeItemPersonaLayoutReadUnread.md'; const useStyles = makeStyles({ unread: { - fontWeight: 'bold', + fontWeight: tokens.fontWeightSemibold, }, }); @@ -29,3 +30,11 @@ export const ReadUnread = () => { ); }; + +ReadUnread.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.md b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.md new file mode 100644 index 00000000000000..7ce381c22ba3b9 --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.md @@ -0,0 +1 @@ +You can add a `description` prop to the `TreeItemPersonaLayout` that can be used to display secondary text content beneath the primary text content. This is useful for providing additional information or context about the primary content. diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutWithDescription.stories.tsx b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx similarity index 91% rename from packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutWithDescription.stories.tsx rename to packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx index 3beace7f217c82..feb24dad41aada 100644 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutWithDescription.stories.tsx +++ b/packages/react-components/react-tree/stories/Layouts/TreeItemPersonaLayoutWithDescription.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Avatar } from '@fluentui/react-components'; import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-tree'; +import story from './TreeItemPersonaLayoutWithDescription.md'; export const WithDescription = () => { return ( @@ -49,3 +50,11 @@ export const WithDescription = () => { ); }; + +WithDescription.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Layouts/description.md b/packages/react-components/react-tree/stories/Layouts/description.md new file mode 100644 index 00000000000000..84d5122c05da1c --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/description.md @@ -0,0 +1,5 @@ +The `TreeItem` component allows for flexible display of items in a tree structure by supporting two types of layouts: `TreeItemLayout` and `TreeItemPersonaLayout`. + +The `TreeItemLayout` component is designed to provide a consistent and functional structure for displaying a tree item. It defines the content and layout of the item in a simple and straightforward manner. This layout is ideal for displaying information about items that do not require additional visual elements, such as files or folders in a file system. + +On the other hand, the `TreeItemPersonaLayout` component provides a more visually appealing representation of a tree item by including a media element, typically an avatar, alongside a description. This layout is perfect for displaying lists of people or topics, where the media element can represent an individual or a topic icon. As with `TreeItemLayout`, `TreeItemPersonaLayout` should only be used as a direct child of TreeItem. diff --git a/packages/react-components/react-tree/stories/Layouts/index.stories.tsx b/packages/react-components/react-tree/stories/Layouts/index.stories.tsx new file mode 100644 index 00000000000000..1e6036662837c6 --- /dev/null +++ b/packages/react-components/react-tree/stories/Layouts/index.stories.tsx @@ -0,0 +1,23 @@ +import { TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-tree'; +import descriptionMd from './description.md'; + +export { DefaultTreeItemLayout } from './TreeItemLayoutDefault.stories'; +export { DefaultTreeItemPersonaLayout } from './TreeItemPersonaLayoutDefault.stories'; +export { Aside } from './TreeItemLayoutAside.stories'; +export { Media } from './TreeItemPersonaLayoutMedia.stories'; +export { WithDescription } from './TreeItemPersonaLayoutWithDescription.stories'; +export { ReadUnread } from './TreeItemPersonaLayoutReadUnread.stories'; +export { Layout } from './TreeItemLayout.stories'; +export { TreePersonaLayout } from './TreeItemPersonaLayout.stories'; + +export default { + title: 'Preview Components/Tree/Layouts', + component: [TreeItemPersonaLayout, TreeItemLayout], + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/TreeAppearance.md b/packages/react-components/react-tree/stories/Tree/TreeAppearance.md new file mode 100644 index 00000000000000..19f6bcf3eda8cd --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/TreeAppearance.md @@ -0,0 +1 @@ +The `Tree` component supports different appearances for TreeItems. The default apperance value is `subtle`. The `subtle-alpha` appearance minimizes emphasis on hovered or focused states, while the `transparent` appearance removes the background color. diff --git a/packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx index 2d5edcbaa88e67..d23aca3bf0c566 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/TreeAppearance.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; +import story from './TreeAppearance.md'; export const Appearance = () => { return ( @@ -26,10 +27,7 @@ export const Appearance = () => { Appearance.parameters = { docs: { description: { - story: - '- `(undefined)`: the tree item appears with the default style\n' + - '- `subtle`: minimizes emphasis on hovered or focused states\n' + - '- `transparent`: removes background color.\n', + story, }, }, }; diff --git a/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md b/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md index 08ff8ddeeb5f86..be393f97b2ceae 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md +++ b/packages/react-components/react-tree/stories/Tree/TreeBestPractices.md @@ -1,5 +1,14 @@ -## Best practices +
+ + Best Practices + ### Do -### Don't +- Use the `Tree` component to create a tree structure with `TreeItem` components as children. +- Organize nodes in a clear hierarchy, with parent nodes at higher levels and child nodes at lower levels. +- Use custom styles if the tree needs to support more than 10 levels of nesting. +- Provide an alternative way to represent the tree structure by flattening it into a list of items. +- Use the `aria-label` attribute on the root of the Tree component to provide an accessible name for the tree. + +
diff --git a/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.md b/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.md new file mode 100644 index 00000000000000..ec78c4c204dc7d --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.md @@ -0,0 +1,3 @@ +The `Tree` component provides a way to control the open/closed state of individual `TreeItem` components using the `openItems` and `onOpenChange` props. + +The `openItems` prop takes an array of `TreeItem` IDs that are currently open, while the `onOpenChange` callback function is called whenever a `TreeItem` is opened or closed. You can then use the callback to update the `openItems` array and keep track of which `TreeItems` are open or closed. diff --git a/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx index 3144aed6a401b9..b8b92a732088a5 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/TreeControllingOpenAndClose.stories.tsx @@ -7,6 +7,7 @@ import { TreeOpenChangeData, TreeOpenChangeEvent, } from '@fluentui/react-tree'; +import story from './TreeControllingOpenAndClose.md'; export const OpenItemsControlled = () => { const [openItems, setOpenItems] = React.useState([]); @@ -47,3 +48,11 @@ export const OpenItemsControlled = () => { ); }; + +OpenItemsControlled.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.md b/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.md new file mode 100644 index 00000000000000..af5d41a2a6d049 --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.md @@ -0,0 +1 @@ +The `Tree` component allows you to set the default open/closed state using the `defaultOpenItems` prop for expandable `TreeItem` components. This prop takes an array of `TreeItem` IDs that should be open by default. When the `Tree` is first rendered, the `TreeItem` components listed in `defaultOpenItems` will be open by default, while all other expandable `TreeItem` components will be closed. diff --git a/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx index 7e53ddac1a3967..fa3dd1181a7d41 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/TreeDefaultOpenTrees.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; +import story from './TreeDefaultOpenTrees.md'; export const DefaultOpenTrees = () => { const defaultOpenTrees = ['default-subtree-1', 'default-subtree-2', 'default-subtree-2-1']; @@ -42,3 +43,11 @@ export const DefaultOpenTrees = () => { ); }; + +DefaultOpenTrees.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/TreeDescription.md b/packages/react-components/react-tree/stories/Tree/TreeDescription.md index 73f177d09a492f..0aac5c7d2efb75 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeDescription.md +++ b/packages/react-components/react-tree/stories/Tree/TreeDescription.md @@ -1,3 +1,5 @@ +`Tree` is a hierarchical structure for displaying data in a collapsible and expandable way. It consists of a root node that branches out to child nodes, which can also have their own child nodes. Each node can have a content, which is displayed in the tree. The tree is usually used to represent a hierarchy of information, such as a file system, or organization chart. Users can interact with the tree by expanding or collapsing nodes, selecting nodes, or performing actions. + > **⚠️ Preview components are considered unstable:** diff --git a/packages/react-components/react-tree/stories/Tree/TreeSize.md b/packages/react-components/react-tree/stories/Tree/TreeSize.md new file mode 100644 index 00000000000000..5fbe0229008748 --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/TreeSize.md @@ -0,0 +1 @@ +The `size` prop is used to change the size of the `Tree` and its items. It accepts two values: `medium` (default) and `small`. You can set this prop on the `Tree` component to change the size of all items within the tree. diff --git a/packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx b/packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx index 0ef71656b7562b..7e0f313612f458 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/TreeSize.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; +import story from './TreeSize.md'; export const Size = () => { return ( @@ -44,7 +45,7 @@ export const Size = () => { Size.parameters = { docs: { description: { - story: 'A tree item supports `small` and `medium` sizes.', + story, }, }, }; diff --git a/packages/react-components/react-tree/stories/Tree/Virtualization.md b/packages/react-components/react-tree/stories/Tree/Virtualization.md new file mode 100644 index 00000000000000..4545d50951a48e --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/Virtualization.md @@ -0,0 +1,3 @@ +A `Tree` can be virtualized to optimize the rendering of a large tree structure. This technique involves creating a virtual version of the tree that only loads the visible nodes at any given time. By doing so, it reduces the number of DOM nodes that need to be rendered, which in turn improves time to interaction of large trees. + +To achieve this, one can create a `flattened` version of the tree structure that can be easily consumed by a virtualization library. This library renders only the items that are currently visible on the screen, which improves TTI metrics. diff --git a/packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx index f739173f3bf333..b3aa74eb059529 100644 --- a/packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/Virtualization.stories.tsx @@ -16,6 +16,7 @@ import { } from '@fluentui/react-tree'; import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window'; import { ForwardRefComponent, getSlots } from '@fluentui/react-components'; +import story from './Virtualization.md'; const defaultItems: FlatTreeItemProps[] = [ { @@ -103,3 +104,11 @@ export const Virtualization = () => { /> ); }; + +Virtualization.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/flattenTree.md b/packages/react-components/react-tree/stories/Tree/flattenTree.md new file mode 100644 index 00000000000000..9bf32b60f89407 --- /dev/null +++ b/packages/react-components/react-tree/stories/Tree/flattenTree.md @@ -0,0 +1,3 @@ +A `Tree` can be flattened, meaning that its nested structure is transformed into a flat list of items. This can be helpful when you need to display a tree in a linear fashion, such as in a list. + +In the code, the `defaultItems` array represents a flattened tree with each item containing the content to display. The `useFlatTree` hook transforms the flattened tree into a format that can be consumed by a `Tree` component. The `Tree` component handles rendering the nested structure, while the `useFlatTree` hook handles the logic for flattened data. diff --git a/packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx b/packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx index 0ca56473d8cfa5..60013bf4ba636d 100644 --- a/packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/flattenTree.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, flattenTree_unstable } from '@fluentui/react-tree'; +import story from './flattenTree.md'; const defaultItems = flattenTree_unstable([ { @@ -35,6 +36,7 @@ const defaultItems = flattenTree_unstable([ ], }, ]); + export const FlattenTree = () => { const flatTree = useFlatTree_unstable(defaultItems); return ( @@ -45,3 +47,11 @@ export const FlattenTree = () => { ); }; + +FlattenTree.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/index.stories.tsx b/packages/react-components/react-tree/stories/Tree/index.stories.tsx index c642b6dabeca42..efe1a3db6fb06c 100644 --- a/packages/react-components/react-tree/stories/Tree/index.stories.tsx +++ b/packages/react-components/react-tree/stories/Tree/index.stories.tsx @@ -1,28 +1,20 @@ -import { Tree } from '@fluentui/react-tree'; +import { Tree, TreeItem, TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-tree'; import descriptionMd from './TreeDescription.md'; import bestPracticesMd from './TreeBestPractices.md'; export { Default } from './TreeDefault.stories'; -export { OpenItemsControlled } from './TreeControllingOpenAndClose.stories'; -export { ExpandCollapseIconOnly } from './TreeExpandCollapseIconOnly.stories'; export { DefaultOpenTrees } from './TreeDefaultOpenTrees.stories'; -export { Actions } from './TreeActions.stories'; -export { Aside } from './TreeAside.stories'; -export { ExpandIcon } from './TreeExpandIcon.stories'; -export { IconBefore } from './TreeIconBefore.stories'; -export { IconAfter } from './TreeIconAfter.stories'; -export { Layout } from './TreeLayout.stories'; -export { Size } from './TreeSize.stories'; export { Appearance } from './TreeAppearance.stories'; -export { WithInlineStyle } from './TreeWithInlineStyle.stories'; -export { UseFlatTreeItems as useFlatTreeItems } from './useFlatTreeItems.stories'; +export { Size } from './TreeSize.stories'; +export { OpenItemsControlled } from './TreeControllingOpenAndClose.stories'; export { FlattenTree as flattenTree } from './flattenTree.stories'; export { Virtualization } from './Virtualization.stories'; export default { - title: 'Preview Components/Tree', + title: 'Preview Components/Tree/Tree', component: Tree, + subcomponents: { TreeItem, TreeItemLayout, TreeItemPersonaLayout }, parameters: { docs: { description: { diff --git a/packages/react-components/react-tree/stories/Tree/useFlatTreeItems.stories.tsx b/packages/react-components/react-tree/stories/Tree/useFlatTreeItems.stories.tsx deleted file mode 100644 index 69e0e60242a51b..00000000000000 --- a/packages/react-components/react-tree/stories/Tree/useFlatTreeItems.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import { Tree, TreeItem, TreeItemLayout, useFlatTree_unstable, FlatTreeItemProps } from '@fluentui/react-tree'; - -const defaultItems: FlatTreeItemProps[] = [ - { - id: '1', - children: Level 1, item 1, - }, - { - id: '1-1', - parentId: '1', - children: Level 2, item 1, - }, - { - id: '1-2', - parentId: '1', - children: Level 2, item 2, - }, - { - id: '1-3', - parentId: '1', - children: Level 2, item 3, - }, - { - id: '2', - children: Level 1, item 2, - }, - { - id: '2-1', - parentId: '2', - children: Level 2, item 1, - }, - { - id: '2-1-1', - parentId: '2-1', - children: Level 3, item 1, - }, - { - id: '2-2', - parentId: '2', - children: Level 2, item 2, - }, - { - id: '2-2-1', - parentId: '2-2', - children: Level 3, item 1, - }, - { - id: '2-2-2', - parentId: '2-2', - children: Level 3, item 2, - }, - { - id: '2-2-3', - parentId: '2-2', - children: Level 3, item 3, - }, - { - id: '3', - children: Level 1, item 3, - }, -]; - -export const UseFlatTreeItems = () => { - const flatTree = useFlatTree_unstable(defaultItems); - - return ( - - {Array.from(flatTree.items(), flatTreeItem => ( - - ))} - - ); -}; diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.md new file mode 100644 index 00000000000000..385a3148f42c42 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.md @@ -0,0 +1,3 @@ +Add custom actions to each `TreeItem` component to add extra functionality, such as buttons or menus. This can be done by passing a component that renders the desired actions as a prop to the `TreeItem`. + +The `actions` are hidden by default and appear on the right-side when the user hovers over the `TreeItem`. diff --git a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx similarity index 95% rename from packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx index 9c765a3172e8cd..f536e9418ae5a7 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeActions.stories.tsx +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemActions.stories.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons'; import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; +import story from './TreeItemActions.md'; const RenderActions = () => { return ( @@ -71,3 +72,11 @@ export const Actions = () => ( ); + +Actions.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemDefault.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemDefault.stories.tsx new file mode 100644 index 00000000000000..46a49dac5010e3 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemDefault.stories.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; + +export const Default = () => { + return ( + + + level 1, item 1 + + + level 2, item 1 + + + level 2, item 2 + + + level 2, item 3 + + + + + level 1, item 2 + + + level 2, item 1 + + + level 3, item 1 + + + + + + + ); +}; diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md new file mode 100644 index 00000000000000..0dc57ec18b0f55 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemDescription.md @@ -0,0 +1,3 @@ +The `TreeItem` component represents a single item in a tree. It can contain child items in the form of another `Tree` component or standalone `TreeItem`. The content and layout of a `TreeItem` can be defined using the `TreeItemLayout` or `TreeItemPersonaLayout` component, which should be used as a direct child of `TreeItem`. + +When a `TreeItem` has child items, an expand/collapse control is displayed, allowing the user to show or hide the children. diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.md new file mode 100644 index 00000000000000..f79ce0dc4eb133 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.md @@ -0,0 +1,3 @@ +By default, every `TreeItem` component that can be expanded or collapsed will respond to clicks on both the content and the expand/collapse icon. If you need to perform a different action when the `TreeItem` content is clicked, you can override this behavior. + +To do so, you can listen for the `onOpenChange` event in the root `Tree` component. When this event is triggered, you can check the type of the event data to determine whether the user clicked on the `TreeItem`'s content or the expand/collapse icon. This way, you can handle clicks on the content separately from expand/collapse events. diff --git a/packages/react-components/react-tree/stories/Tree/TreeExpandCollapseIconOnly.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx similarity index 90% rename from packages/react-components/react-tree/stories/Tree/TreeExpandCollapseIconOnly.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx index bdbdf6f2f9eced..e03f1cd330e98f 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeExpandCollapseIconOnly.stories.tsx +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandCollapseIconOnly.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; import { TreeOpenChangeData, TreeOpenChangeEvent } from '../../src/components/Tree/Tree.types'; +import story from './TreeItemExpandCollapseIconOnly.md'; export const ExpandCollapseIconOnly = () => { const onOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => { @@ -43,3 +44,11 @@ export const ExpandCollapseIconOnly = () => { ); }; + +ExpandCollapseIconOnly.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.md new file mode 100644 index 00000000000000..52316cde22ea31 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.md @@ -0,0 +1,3 @@ +If you wish to customize the open/collapse icons, you can use the `expandIcon` property provided by the `TreeItem` component. + +This example replaces the default expand/collapse arrow icons with plus and minus characters to achieve a similar behavior. diff --git a/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.stories.tsx similarity index 93% rename from packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.stories.tsx index c15fc01d1d5796..49acbe0d497aec 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeExpandIcon.stories.tsx +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemExpandIcon.stories.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; import { Add12Regular, Subtract12Regular } from '@fluentui/react-icons'; import { TreeOpenChangeData, TreeOpenChangeEvent } from '../../src/Tree'; +import story from './TreeItemExpandIcon.md'; export const ExpandIcon = () => { const [openItems, setOpenItems] = React.useState([]); @@ -51,3 +52,11 @@ export const ExpandIcon = () => { ); }; + +ExpandIcon.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/Tree/TreeIconAfter.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx similarity index 100% rename from packages/react-components/react-tree/stories/Tree/TreeIconAfter.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemIconAfter.stories.tsx diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.md new file mode 100644 index 00000000000000..45a4887f6732d9 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.md @@ -0,0 +1,3 @@ +The `TreeItemLayout` and `TreePersonaItemLayout` components allow you to add icons before or after the content of each `TreeItem` component. To add an icon before the text, use the `iconBefore` prop, and to add an icon after the text, use the `iconAfter` prop. + +You can add both at the same time. diff --git a/packages/react-components/react-tree/stories/Tree/TreeIconBefore.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx similarity index 89% rename from packages/react-components/react-tree/stories/Tree/TreeIconBefore.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx index 00bbe0e165cc2e..111fc58d95cc7c 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeIconBefore.stories.tsx +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemIconBefore.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-tree'; import { CheckboxChecked20Filled, CheckboxUnchecked20Filled } from '@fluentui/react-icons'; +import story from './TreeItemIconBefore.md'; export const IconBefore = () => { return ( @@ -35,3 +36,11 @@ export const IconBefore = () => { ); }; + +IconBefore.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.md b/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.md new file mode 100644 index 00000000000000..0cd87707272ef0 --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.md @@ -0,0 +1,3 @@ +We support nested styling for the `Tree` component up to 10 levels of nesting due to performance implications. If you need to support more than 10 levels of nesting, you should consider using dynamic styling instead. + +The example below shows how to apply custom styles to `TreeItem` using inline styles to override the default static styles. diff --git a/packages/react-components/react-tree/stories/Tree/TreeWithInlineStyle.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.stories.tsx similarity index 90% rename from packages/react-components/react-tree/stories/Tree/TreeWithInlineStyle.stories.tsx rename to packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.stories.tsx index ecaf7e95648ed4..b8535f72d223fe 100644 --- a/packages/react-components/react-tree/stories/Tree/TreeWithInlineStyle.stories.tsx +++ b/packages/react-components/react-tree/stories/TreeItem/TreeItemWithInlineStyle.stories.tsx @@ -7,6 +7,7 @@ import { TreeItemProps, useTreeContext_unstable, } from '@fluentui/react-tree'; +import story from './TreeItemWithInlineStyle.md'; const TreeItem = (props: TreeItemProps) => { const level = useTreeContext_unstable(ctx => ctx.level); @@ -46,3 +47,11 @@ export const WithInlineStyle = () => { ); }; + +WithInlineStyle.parameters = { + docs: { + description: { + story, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItem/index.stories.tsx b/packages/react-components/react-tree/stories/TreeItem/index.stories.tsx new file mode 100644 index 00000000000000..07c739a079abeb --- /dev/null +++ b/packages/react-components/react-tree/stories/TreeItem/index.stories.tsx @@ -0,0 +1,23 @@ +import { TreeItem, TreeItemLayout, TreeItemPersonaLayout } from '@fluentui/react-tree'; +import descriptionMd from './TreeItemDescription.md'; + +export { Default } from './TreeItemDefault.stories'; +export { ExpandCollapseIconOnly } from './TreeItemExpandCollapseIconOnly.stories'; +export { ExpandIcon } from './TreeItemExpandIcon.stories'; +export { IconBefore } from './TreeItemIconBefore.stories'; +export { IconAfter } from './TreeItemIconAfter.stories'; +export { Actions } from './TreeItemActions.stories'; +export { WithInlineStyle } from './TreeItemWithInlineStyle.stories'; + +export default { + title: 'Preview Components/Tree/TreeItem', + component: TreeItem, + subcomponents: { TreeItemLayout, TreeItemPersonaLayout }, + parameters: { + docs: { + description: { + component: [descriptionMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutDescription.md b/packages/react-components/react-tree/stories/TreeItemPersonaLayout/TreeItemPersonaLayoutDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/index.stories.tsx b/packages/react-components/react-tree/stories/TreeItemPersonaLayout/index.stories.tsx deleted file mode 100644 index f4134a0adaa11c..00000000000000 --- a/packages/react-components/react-tree/stories/TreeItemPersonaLayout/index.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { TreeItemPersonaLayout } from '@fluentui/react-tree'; - -import descriptionMd from './TreeItemPersonaLayoutDescription.md'; - -export { Default } from './TreeItemPersonaLayoutDefault.stories'; -export { TreePersonaLayout } from './TreePersonaLayout.stories'; -export { WithDescription } from './TreeItemPersonaLayoutWithDescription.stories'; -export { ReadUnread } from './TreeItemPersonaLayoutReadUnread.stories'; -export { Media } from './TreeItemPersonaLayoutMedia.stories'; - -export default { - title: 'Preview Components/Tree/PersonaTreeItem', - component: TreeItemPersonaLayout, - parameters: { - docs: { - description: { - component: [descriptionMd].join('\n'), - }, - }, - }, -};