From 62c29aceea876a724e957ffd39decc250c946620 Mon Sep 17 00:00:00 2001 From: Alexandr Isaev Date: Fri, 6 Sep 2024 17:29:09 +0300 Subject: [PATCH] fix(ListItemExpandIcon): remove disableTransition and rename behavior prop --- .../WithGroupSelectionAndCustomIconStory.tsx | 2 +- .../stories/WithItemLinksAndActionsStory.tsx | 2 +- ...pSelectionControlledStateAndCustomIcon.tsx | 2 +- .../WithItemLinksAndActionsExample.tsx | 2 +- .../ListItemExpandIcon.scss | 4 ---- .../ListItemExpandIcon/ListItemExpandIcon.tsx | 23 +++++++++---------- .../__stories__/list-item-expand-icon.md | 11 ++++----- .../ListItemView/ListItemViewContent.tsx | 2 +- .../__stories__/ListItemView.stories.tsx | 1 - src/components/useList/types.ts | 6 ++--- 10 files changed, 23 insertions(+), 32 deletions(-) diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx index f5003e04a0..09665d3617 100644 --- a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx +++ b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx @@ -100,7 +100,7 @@ export const WithGroupSelectionAndCustomIconStory = ({ diff --git a/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx b/src/components/TreeList/__stories__/stories/WithItemLinksAndActionsStory.tsx index caed3f9f40..c0eb89795c 100644 --- 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 diff --git a/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx index b0f116a1ad..7ae8af00b1 100644 --- a/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx +++ b/src/components/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx @@ -95,7 +95,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({ diff --git a/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx b/src/components/TreeSelect/__stories__/components/WithItemLinksAndActionsExample.tsx index fc15d491e9..ef37079c37 100644 --- 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 diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss index 2a4f756765..0054cd1597 100644 --- 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 index ad57ab73dd..70c2a5f097 100644 --- 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 ( ); }; function getIconDirection({ - kind, + behavior, expanded, -}: Pick): ArrowToggleProps['direction'] { - if (expanded && kind === 'action') { +}: Pick): 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/src/components/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md b/src/components/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md index ad23c42fd6..e25b6502bf 100644 --- a/src/components/useList/components/ListItemExpandIcon/__stories__/list-item-expand-icon.md +++ b/src/components/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 index 8c0ff41e1f..38332fcb45 100644 --- 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 ? ( diff --git a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx index 0412881670..7b95681e4d 100644 --- 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[] = [ ), expanded: true, - renderExpandIcon: (props) => , isGroup: true, startSlot: , indentation: 1, diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts index 1914462aae..9ecbe3d0f6 100644 --- 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; }