fix(ListItemExpandIcon): remove disableTransition and rename behavior…

… prop
gravity-ui · Sep 6, 2024 · 62c29ac · 62c29ac
1 parent af9266c
commit 62c29ac
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 32 deletions.
diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
@@ -100,7 +100,7 @@ export const WithGroupSelectionAndCustomIconStory = ({
                                         <Button.Icon>
                                             <ListItemExpandIcon
                                                 expanded={itemProps.content.expanded}
-                                                kind="action"
+                                                behavior="action"
                                             />
                                         </Button.Icon>
                                     </Button>

diff --git a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx
@@ -99,7 +99,7 @@ export const WithItemLinksAndActionsStory = (props: WithItemLinksAndActionsStory
                                         <Button.Icon>
                                             <ListItemExpandIcon
                                                 expanded={itemProps.content.expanded}
-                                                kind="action"
+                                                behavior="action"
                                             />
                                         </Button.Icon>
                                     </Button>

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -95,7 +95,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                                         <Button.Icon>
                                             <ListItemExpandIcon
                                                 expanded={props.content.expanded}
-                                                kind="action"
+                                                behavior="action"
                                             />
                                         </Button.Icon>
                                     </Button>

diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx
@@ -100,7 +100,7 @@ export const WithItemLinksAndActionsExample = (storyProps: WithItemLinksAndActio
                                             <Button.Icon>
                                                 <ListItemExpandIcon
                                                     expanded={props.content.expanded}
-                                                    kind="state"
+                                                    behavior="state"
                                                 />
                                             </Button.Icon>
                                         </Button>

diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss
@@ -4,8 +4,4 @@ $block: '.#{variables.$ns}list-item-expand-icon';
 
 #{$block} {
     flex-shrink: 0;
-
-    &_disableTransition {
-        transition: none;
-    }
 }
diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
@@ -14,34 +14,33 @@ export interface ListItemExpandIconProps extends ListItemExpandIconRenderProps {
 
 export const ListItemExpandIcon = ({
     expanded,
-    disableTransition,
-    kind = 'action',
+    behavior = 'action',
     disabled,
 }: ListItemExpandIconProps) => {
     return (
         <ArrowToggle
-            direction={getIconDirection({kind, expanded})}
-            className={b({disableTransition}, colorText({color: disabled ? 'hint' : undefined}))}
+            direction={getIconDirection({behavior, expanded})}
+            className={b(null, colorText({color: disabled ? 'hint' : undefined}))}
             size={16}
         />
     );
 };
 
 function getIconDirection({
-    kind,
+    behavior,
     expanded,
-}: Pick<ListItemExpandIconRenderProps, 'expanded' | 'kind'>): ArrowToggleProps['direction'] {
-    if (expanded && kind === 'action') {
+}: Pick<ListItemExpandIconRenderProps, 'expanded' | 'behavior'>): ArrowToggleProps['direction'] {
+    if (expanded && behavior === 'action') {
         return 'top';
-    } else if (expanded && kind === 'state') {
+    } else if (expanded && behavior === 'state') {
         return 'bottom';
-    } else if (expanded && kind === 'state-inverse') {
+    } else if (expanded && behavior === 'state-inverse') {
         return 'bottom';
-    } else if (kind === 'action') {
+    } else if (behavior === 'action') {
         return 'bottom';
-    } else if (kind === 'state') {
+    } else if (behavior === 'state') {
         return 'right';
-    } else if (kind === 'state-inverse') {
+    } else if (behavior === 'state-inverse') {
         return 'left';
     }
 

diff --git a/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md b/...ents/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md
@@ -41,9 +41,8 @@ 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`             |         |
-| kind              | The type of behavior of the component           | `state`, `state-inverse`,`action` |         |
+| 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/ListItemView/ListItemViewContent.tsx b/src/components/useList/components/ListItemView/ListItemViewContent.tsx
@@ -63,7 +63,7 @@ export const ListItemViewContent = ({
 }: ListItemViewContentProps) => {
     const expandIconNode = isGroup ? (
         <RenderExpandIcon
-            kind={expandIconPlacement === 'start' ? 'state' : 'action'}
+            behavior={expandIconPlacement === 'start' ? 'state' : 'action'}
             expanded={expanded}
             disabled={disabled}
         />

diff --git a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
@@ -218,7 +218,6 @@ const stories: ListItemViewProps[] = [
                 </Text>
             ),
             expanded: true,
-            renderExpandIcon: (props) => <ListItemExpandIcon {...props} disableTransition />,
             isGroup: true,
             startSlot: <StartSlot />,
             indentation: 1,

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -41,14 +41,12 @@ export type ItemState = {
 
 export interface ListItemExpandIconRenderProps {
     /**
-     * The type of behavior of the component
+     * The behavior of the component:
      *
      * - action - to indicate user actions. For example, for an icon inside a button;
      * - state - to indicate the current state of the element;
      */
-    kind: 'state' | 'state-inverse' | 'action';
-
-    disableTransition?: boolean;
+    behavior: 'state' | 'state-inverse' | 'action';
     expanded?: boolean;
     disabled?: boolean;
 }