fix(ListItemI): use ArrowToggle inside

gravity-ui · Sep 3, 2024 · 775dbce · 775dbce
1 parent 66027e7
commit 775dbce
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 81 deletions.
diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
@@ -97,10 +97,12 @@ export const WithGroupSelectionAndCustomIconStory = ({
                                                 : expandButtonLabel,
                                         }}
                                     >
-                                        <ListItemExpandIcon
-                                            expanded={itemProps.content.expanded}
-                                            usageRole="action"
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={itemProps.content.expanded}
+                                                kind="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : undefined,
                             }}

diff --git a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
@@ -96,10 +96,12 @@ export const WithItemLinksAndActionsStory = (props: WithItemLinksAndActionsStory
                                                 : expandButtonLabel,
                                         }}
                                     >
-                                        <ListItemExpandIcon
-                                            expanded={itemProps.content.expanded}
-                                            usageRole="action-inverse"
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={itemProps.content.expanded}
+                                                kind="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : (
                                     <Flex

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -92,10 +92,12 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                                             }));
                                         }}
                                     >
-                                        <ListItemExpandIcon
-                                            expanded={props.content.expanded}
-                                            usageRole="action"
-                                        />
+                                        <Button.Icon>
+                                            <ListItemExpandIcon
+                                                expanded={props.content.expanded}
+                                                kind="action"
+                                            />
+                                        </Button.Icon>
                                     </Button>
                                 ) : undefined,
                             }}

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -97,10 +97,12 @@ export const WithItemLinksAndActionsExample = (storyProps: WithItemLinksAndActio
                                                 }));
                                             }}
                                         >
-                                            <ListItemExpandIcon
-                                                expanded={props.content.expanded}
-                                                usageRole="state"
-                                            />
+                                            <Button.Icon>
+                                                <ListItemExpandIcon
+                                                    expanded={props.content.expanded}
+                                                    kind="state"
+                                                />
+                                            </Button.Icon>
                                         </Button>
                                     ) : (
                                         <Flex

diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss
@@ -5,42 +5,7 @@ $block: '.#{variables.$ns}list-item-expand-icon';
 #{$block} {
     flex-shrink: 0;
 
-    transition: transform 0.1s ease;
-
     &_disableTransition {
         transition: none;
     }
-
-    &_usage_state {
-        transform: rotate(-90deg);
-
-        &#{$block}_expanded {
-            transform: rotate(0deg);
-        }
-    }
-    &_usage_state-inverse {
-        transform: rotate(90deg);
-
-        &#{$block}_expanded {
-            transform: rotate(0deg);
-        }
-    }
-
-    &_usage_action {
-        transform: rotate(0deg);
-        transition: transform 0.2s ease;
-
-        &#{$block}_expanded {
-            transform: rotate(180deg);
-        }
-    }
-
-    &_usage_action-inverse {
-        transform: rotate(0deg);
-        transition: transform 0.2s ease;
-
-        &#{$block}_expanded {
-            transform: rotate(-180deg);
-        }
-    }
 }
diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import {ChevronDown} from '@gravity-ui/icons';
-
-import {Icon} from '../../../Icon';
+import type {ArrowToggleProps} from '../../../ArrowToggle';
+import {ArrowToggle} from '../../../ArrowToggle';
 import {colorText} from '../../../Text';
 import {block} from '../../../utils/cn';
 import type {ListItemExpandIconRenderProps} from '../../types';
@@ -16,20 +15,35 @@ export interface ListItemExpandIconProps extends ListItemExpandIconRenderProps {
 export const ListItemExpandIcon = ({
     expanded,
     disableTransition,
-    usageRole: usage = 'action',
+    kind = 'action',
     disabled,
 }: ListItemExpandIconProps) => {
     return (
-        <Icon
-            className={b(
-                {expanded, disableTransition, usage},
-                colorText({color: disabled ? 'hint' : undefined}),
-            )}
-            data={ChevronDown}
+        <ArrowToggle
+            direction={getIconDirection({kind, expanded})}
+            className={b({disableTransition}, colorText({color: disabled ? 'hint' : undefined}))}
             size={16}
         />
     );
 };
 
-// For correct rendering inside `Button` component
-ListItemExpandIcon.displayName = 'Icon';
+function getIconDirection({
+    kind,
+    expanded,
+}: Pick<ListItemExpandIconRenderProps, 'expanded' | 'kind'>): ArrowToggleProps['direction'] {
+    if (expanded && kind === 'action') {
+        return 'top';
+    } else if (expanded && kind === 'state') {
+        return 'bottom';
+    } else if (expanded && kind === 'state-inverse') {
+        return 'bottom';
+    } else if (kind === 'action') {
+        return 'bottom';
+    } else if (kind === 'state') {
+        return 'right';
+    } else if (kind === '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
@@ -28,7 +28,9 @@ const InsideButtonExample = (props: ListItemExpandIconProps) => {
 
     return (
         <Button extraProps={{'aria-label': 'toggle-button'}} onClick={() => setExpanded((x) => !x)}>
-            <ListItemExpandIcon {...props} expanded={expanded} />
+            <Button.Icon>
+                <ListItemExpandIcon {...props} expanded={expanded} />
+            </Button.Icon>
         </Button>
     );
 };

diff --git a/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md b/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md
@@ -29,7 +29,9 @@ const InsideButtonExample = (props: ListItemExpandIconProps) => {
 
     return (
         <Button onClick={() => setExpanded((x) => !x)}>
-            <ListItemExpandIcon {...props} expanded={expanded} />
+            <Button.Icon>
+                <ListItemExpandIcon {...props} expanded={expanded} />
+            </Button.Icon>
         </Button>
     );
 };
@@ -39,9 +41,9 @@ const InsideButtonExample = (props: ListItemExpandIconProps) => {
 
 #### Props
 
-| Name              | Description                                     |                         Type                         | Default |
-| :---------------- | :---------------------------------------------- | :--------------------------------------------------: | :-----: |
-| expanded          | icon state                                      |                      `boolean`                       |         |
-| disableTransition | disable animation while `expanded` state change |                      `boolean`                       |         |
-| disabled          | disabled view type                              |                      `boolean`                       |         |
-| usageRole         | The type of behavior of the component           | `state`, `action`, `state-inverse`, `action-inverse` |         |
+| Name              | Description                                     |               Type                | Default |
+| :---------------- | :---------------------------------------------- | :-------------------------------: | :-----: |
+| expanded          | icon state                                      |             `boolean`             |         |
+| disableTransition | disable animation while `expanded` state change |             `boolean`             |         |
+| disabled          | disabled view type                              |             `boolean`             |         |
+| kind              | The type of behavior of the component           | `state`, `state-inverse`,`action` |         |
diff --git a/src/components/useList/components/ListItemView/ListItemViewContent.tsx b/src/components/useList/components/ListItemView/ListItemViewContent.tsx
@@ -58,12 +58,12 @@ export const ListItemViewContent = ({
     expanded,
     selected,
     title,
-    expandIconPosition = 'start',
+    expandIconPlacement = 'start',
     renderExpandIcon: RenderExpandIcon = ListItemExpandIcon,
 }: ListItemViewContentProps) => {
     const expandIconNode = isGroup ? (
         <RenderExpandIcon
-            usageRole={expandIconPosition === 'start' ? 'state' : 'action'}
+            kind={expandIconPlacement === 'start' ? 'state' : 'action'}
             expanded={expanded}
             disabled={disabled}
         />
@@ -83,7 +83,7 @@ export const ListItemViewContent = ({
 
                 {renderSafeIndentation(indentation)}
 
-                {expandIconPosition === 'start' && expandIconNode}
+                {expandIconPlacement === 'start' && expandIconNode}
 
                 {startSlot}
 
@@ -110,7 +110,7 @@ export const ListItemViewContent = ({
             </Flex>
 
             <Flex gap="2">
-                {expandIconPosition === 'end' && expandIconNode}
+                {expandIconPlacement === 'end' && expandIconNode}
                 {endSlot}
             </Flex>
         </Flex>

diff --git a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
@@ -244,7 +244,7 @@ const stories: ListItemViewProps[] = [
             indentation: 1,
             isGroup: true,
             expanded: false,
-            expandIconPosition: 'end',
+            expandIconPlacement: 'end',
         },
     },
     {
@@ -254,10 +254,12 @@ const stories: ListItemViewProps[] = [
             title: 'Custom icon end',
             isGroup: true,
             expanded: false,
-            expandIconPosition: 'end',
+            expandIconPlacement: 'end',
             renderExpandIcon: (props) => (
                 <Button view="flat" extraProps={{'aria-label': 'toggle-button'}}>
-                    <ListItemExpandIcon {...props} />
+                    <Button.Icon>
+                        <ListItemExpandIcon {...props} />
+                    </Button.Icon>
                 </Button>
             ),
         },

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -46,9 +46,10 @@ export interface ListItemExpandIconRenderProps {
      * - action - to indicate user actions. For example, for an icon inside a button;
      * - state - to indicate the current state of the element;
      */
-    usageRole: 'state' | 'action' | 'state-inverse' | 'action-inverse';
-    expanded?: boolean;
+    kind: 'state' | 'state-inverse' | 'action';
+
     disableTransition?: boolean;
+    expanded?: boolean;
     disabled?: boolean;
 }
 
@@ -69,7 +70,7 @@ export type ListItemViewContentType = {
     /**
      * @default - 'start'
      */
-    expandIconPosition?: 'start' | 'end';
+    expandIconPlacement?: 'start' | 'end';
     /**
      * Will be applied if `isGroup` props is `true`
      */