feat(ListItemExandIcon): added new list component for expanded icon v…

…iew (#1762)
gravity-ui · Oct 23, 2024 · b6516f4 · b6516f4
1 parent 2d9c88e
commit b6516f4
Show file tree

Hide file tree

Showing 19 changed files with 288 additions and 55 deletions.
diff --git a/src/components/TreeList/__stories__/stories/WithFiltrationAndControlsStory.tsx b/src/components/TreeList/__stories__/stories/WithFiltrationAndControlsStory.tsx
@@ -4,11 +4,10 @@ import {Button} from '../../../Button';
 import {Text} from '../../../Text';
 import {TextInput} from '../../../controls';
 import {Flex, spacing} from '../../../layout';
-import {useList, useListFilter} from '../../../useList';
+import {ListContainer, useList, useListFilter} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeList} from '../../TreeList';
 import type {TreeListContainerProps, TreeListProps} from '../../types';
-import {RenderVirtualizedContainer} from '../components/RenderVirtualizedContainer';
 
 interface Entity {
     title: string;
@@ -37,7 +36,7 @@ export const WithFiltrationAndControlsStory = ({
                 );
             }
 
-            return <RenderVirtualizedContainer {...props} />;
+            return <ListContainer {...props} />;
         };
 
         return {items: baseItems, renderContainer: containerRenderer};

diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {ChevronDown, ChevronUp, Database, PlugConnection} from '@gravity-ui/icons';
+import {Database, PlugConnection} from '@gravity-ui/icons';
 
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
-import {Flex, spacing} from '../../../layout';
-import {ListItemView, useList} from '../../../useList';
+import {Flex} from '../../../layout';
+import {ListItemExpandIcon, ListItemView, useList} from '../../../useList';
 import type {ListItemId, ListItemViewContentType} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeList} from '../../TreeList';
@@ -84,8 +84,6 @@ export const WithGroupSelectionAndCustomIconStory = ({
 
                                 endSlot: childrenIds ? (
                                     <Button
-                                        size="m"
-                                        className={spacing({mr: 1})}
                                         onClick={(e) => {
                                             e.stopPropagation();
                                             list.state.setExpanded?.((prevExpandedState) => ({
@@ -99,12 +97,12 @@ export const WithGroupSelectionAndCustomIconStory = ({
                                                 : expandButtonLabel,
                                         }}
                                     >
-                                        <Icon
-                                            data={
-                                                itemProps.content.expanded ? ChevronDown : ChevronUp
-                                            }
-                                            size={16}
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={itemProps.content.expanded}
+                                                behavior="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : undefined,
                             }}

diff --git a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {ChevronDown, ChevronUp, FolderOpen} from '@gravity-ui/icons';
+import {FolderOpen} from '@gravity-ui/icons';
 
 import {Button} from '../../../Button';
 import {DropdownMenu} from '../../../DropdownMenu';
 import {Icon} from '../../../Icon';
 import {Flex} from '../../../layout';
-import {ListItemView, useList} from '../../../useList';
+import {ListItemExpandIcon, ListItemView, useList} from '../../../useList';
 import type {ListItemId} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeList} from '../../TreeList';
@@ -96,12 +96,12 @@ export const WithItemLinksAndActionsStory = (props: WithItemLinksAndActionsStory
                                                 : expandButtonLabel,
                                         }}
                                     >
-                                        <Icon
-                                            data={
-                                                itemProps.content.expanded ? ChevronDown : ChevronUp
-                                            }
-                                            size={16}
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={itemProps.content.expanded}
+                                                behavior="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : (
                                     <Flex

diff --git a/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx b/src/components/TreeSelect/__stories__/components/WithFiltrationAndControlsExample.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 
 import {Button} from '../../../Button';
 import {Text} from '../../../Text';
-import {RenderVirtualizedContainer} from '../../../TreeList/__stories__/components/RenderVirtualizedContainer';
 import {TextInput} from '../../../controls';
 import {Flex, spacing} from '../../../layout';
-import {ListItemView, useListFilter} from '../../../useList';
+import {ListContainer, ListItemView, useListFilter} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
 import type {TreeSelectProps, TreeSelectRenderContainer} from '../../types';
@@ -37,7 +36,7 @@ export const WithFiltrationAndControlsExample = ({
                 );
             }
 
-            return <RenderVirtualizedContainer {...props} />;
+            return <ListContainer {...props} />;
         };
 
         return {items: baseItems, renderContainer: containerRenderer};

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {ChevronDown, ChevronUp, Database, PlugConnection} from '@gravity-ui/icons';
+import {Database, PlugConnection} from '@gravity-ui/icons';
 
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
 import {Flex, spacing} from '../../../layout';
-import {ListItemView} from '../../../useList';
+import {ListItemExpandIcon, ListItemView} from '../../../useList';
 import type {ListItemId, ListItemViewContentType, UseListResult} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
@@ -92,10 +92,12 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                                             }));
                                         }}
                                     >
-                                        <Icon
-                                            data={props.content.expanded ? ChevronDown : ChevronUp}
-                                            size={16}
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={props.content.expanded}
+                                                behavior="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : undefined,
                             }}

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {ChevronDown, ChevronUp, FolderOpen} from '@gravity-ui/icons';
+import {FolderOpen} from '@gravity-ui/icons';
 
 import {Button} from '../../../Button';
 import {DropdownMenu} from '../../../DropdownMenu';
 import {Icon} from '../../../Icon';
 import {Flex} from '../../../layout';
-import {ListItemView} from '../../../useList';
+import {ListItemExpandIcon, ListItemView} from '../../../useList';
 import type {ListItemId, UseListResult} from '../../../useList';
 import {createRandomizedData} from '../../../useList/__stories__/utils/makeData';
 import {TreeSelect} from '../../TreeSelect';
@@ -97,12 +97,12 @@ export const WithItemLinksAndActionsExample = (storyProps: WithItemLinksAndActio
                                                 }));
                                             }}
                                         >
-                                            <Icon
-                                                data={
-                                                    props.content.expanded ? ChevronDown : ChevronUp
-                                                }
-                                                size={16}
-                                            />
+                                            <Button.Icon>
+                                                <ListItemExpandIcon
+                                                    expanded={props.content.expanded}
+                                                    behavior="state"
+                                                />
+                                            </Button.Icon>
                                         </Button>
                                     ) : (
                                         <Flex

diff --git a/src/components/useList/__stories__/Docs.mdx b/src/components/useList/__stories__/Docs.mdx
@@ -1,4 +1,11 @@
-import {Meta, Markdown} from '@storybook/addon-docs';
+import {
+    Meta,
+    Markdown,
+    Canvas,
+    AnchorMdx,
+    CodeOrSourceMdx,
+    HeadersMdx,
+} from '@storybook/addon-docs';
 
 import UseListHook from './docs/use-list.md?raw';
 import UseListKeydownHook from './docs/use-list-keydown.md?raw';
@@ -13,6 +20,9 @@ import getItemRenderState from './docs/get-item-render-state.md?raw';
 import getListParsedState from './docs/get-list-parsed-state.md?raw';
 import getListItemQa from './docs/get-list-item-qa.md?raw';
 
+import ListItemExpandIcon from '../components/ListItemExpandIcon/__stories__/list-item-expand-icon.md?raw';
+import * as ListItemExpandIconStories from '../components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories';
+
 <Meta title="Lab/useList" />
 
 # UseList hooks and components
@@ -32,6 +42,7 @@ The basic idea is that hooks take all the complex logic on themselves, and all y
 ### Components (View only):
 
 -   [ListItemView](#listitemview);
+-   [ListItemExpandIcon](#listitemexpandicon);
 -   [ListContainerView](#listcontainerview);
 -   [ListRecursiveRenderer](#listrecursiverenderer);
 
@@ -144,6 +155,24 @@ function List() {
 
 <Markdown>{ListRecursiveRenderer}</Markdown>
 
+<Markdown
+    options={{
+        overrides: {
+            code: CodeOrSourceMdx,
+            a: AnchorMdx,
+            ...HeadersMdx,
+            ListItemExpandIconDefault: () => (
+                <Canvas of={ListItemExpandIconStories.Default} sourceState="none" />
+            ),
+            ListItemExpandIconInsideButton: () => (
+                <Canvas of={ListItemExpandIconStories.InsideButton} sourceState="none" />
+            ),
+        },
+    }}
+>
+    {ListItemExpandIcon}
+</Markdown>
+
 ## Utilities
 
 <Markdown>{GetListItemClickHandler}</Markdown>

diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss
@@ -0,0 +1,7 @@
+@use '../../../variables';
+
+$block: '.#{variables.$ns}list-item-expand-icon';
+
+#{$block} {
+    flex-shrink: 0;
+}
diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type {ArrowToggleProps} from '../../../ArrowToggle';
+import {ArrowToggle} from '../../../ArrowToggle';
+import {colorText} from '../../../Text';
+import {block} from '../../../utils/cn';
+import type {ListItemExpandIconRenderProps} from '../../types';
+
+import './ListItemExpandIcon.scss';
+
+const b = block('list-item-expand-icon');
+
+export interface ListItemExpandIconProps extends ListItemExpandIconRenderProps {}
+
+export const ListItemExpandIcon = ({
+    expanded,
+    behavior = 'action',
+    disabled,
+}: ListItemExpandIconProps) => {
+    return (
+        <ArrowToggle
+            direction={getIconDirection({behavior, expanded})}
+            className={b(null, colorText({color: disabled ? 'hint' : undefined}))}
+            size={16}
+        />
+    );
+};
+
+function getIconDirection({
+    behavior,
+    expanded,
+}: Pick<ListItemExpandIconRenderProps, 'expanded' | 'behavior'>): ArrowToggleProps['direction'] {
+    if (expanded && behavior === 'action') {
+        return 'top';
+    } else if (expanded && behavior === 'state') {
+        return 'bottom';
+    } else if (expanded && behavior === 'state-inverse') {
+        return 'bottom';
+    } else if (behavior === 'action') {
+        return 'bottom';
+    } else if (behavior === 'state') {
+        return 'right';
+    } else if (behavior === 'state-inverse') {
+        return 'left';
+    }
+
+    return 'bottom';
+}
diff --git a/...mponents/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx b/...mponents/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {Button} from '../../../../Button';
+import type {ListItemExpandIconProps} from '../ListItemExpandIcon';
+import {ListItemExpandIcon} from '../ListItemExpandIcon';
+
+const meta: Meta<typeof ListItemExpandIcon> = {
+    title: 'Lab/useList/ListItemExpandIcon',
+    component: ListItemExpandIcon,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItemExpandIcon>;
+
+const DefaultExample = (props: ListItemExpandIconProps) => {
+    return <ListItemExpandIcon {...props} />;
+};
+
+export const Default = {
+    render: DefaultExample,
+} satisfies Story;
+
+const InsideButtonExample = (props: ListItemExpandIconProps) => {
+    const [expanded, setExpanded] = React.useState(false);
+
+    return (
+        <Button extraProps={{'aria-label': 'toggle-button'}} onClick={() => setExpanded((x) => !x)}>
+            <Button.Icon>
+                <ListItemExpandIcon {...props} expanded={expanded} />
+            </Button.Icon>
+        </Button>
+    );
+};
+
+export const InsideButton = {
+    render: InsideButtonExample,
+} satisfies Story;
diff --git a/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md b/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md
@@ -0,0 +1,48 @@
+### ListItemExpandIcon
+
+Base group expand icon view
+
+#### Import
+
+```tsx
+import {
+  type unstable_ListItemExpandIconProps as ListItemExpandIconProps,
+  unstable_ListItemExpandIcon as ListItemExpandIcon,
+} from '@gravity-ui/uikit/unstable';
+```
+
+#### Base example:
+
+```jsx
+const DefaultExample = (props: ListItemExpandIconProps) => {
+    return <ListItemExpandIcon {...props} />;
+};
+```
+
+<ListItemExpandIconDefault />
+
+#### Render icon inside Button component:
+
+```jsx
+const InsideButtonExample = (props: ListItemExpandIconProps) => {
+    const [expanded, setExpanded] = React.useState(false);
+
+    return (
+        <Button onClick={() => setExpanded((x) => !x)}>
+            <Button.Icon>
+                <ListItemExpandIcon {...props} expanded={expanded} />
+            </Button.Icon>
+        </Button>
+    );
+};
+```
+
+<ListItemExpandIconInsideButton />
+
+#### Props
+
+| Name     | Description                   |               Type                | Default |
+| :------- | :---------------------------- | :-------------------------------: | :-----: |
+| expanded | icon state                    |             `boolean`             |         |
+| disabled | disabled view type            |             `boolean`             |         |
+| behavior | The behavior of the component | `state`, `state-inverse`,`action` |         |
diff --git a/src/components/useList/components/ListItemExpandIcon/index.ts b/src/components/useList/components/ListItemExpandIcon/index.ts
@@ -0,0 +1,2 @@
+export {ListItemExpandIcon} from './ListItemExpandIcon';
+export type {ListItemExpandIconProps} from './ListItemExpandIcon';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export {ListItemExpandIcon} from './ListItemExpandIcon';
		export type {ListItemExpandIconProps} from './ListItemExpandIcon';