feat(ListItemExpandIcon): aded usage types

gravity-ui · Aug 22, 2024 · d59a42c · d59a42c
1 parent 61b8335
commit d59a42c
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 101 deletions.
diff --git a/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx b/src/components/TreeList/__stories__/stories/WithGroupSelectionAndCustomIconStory.tsx
@@ -99,7 +99,7 @@ export const WithGroupSelectionAndCustomIconStory = ({
                                     >
                                         <ListItemExpandIcon
                                             expanded={itemProps.content.expanded}
-                                            position="end"
+                                            usageRole="action"
                                         />
                                     </Button>
                                 ) : undefined,

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

diff --git a/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx b/...ents/TreeSelect/__stories__/components/WithGroupSelectionControlledStateAndCustomIcon.tsx
@@ -94,7 +94,7 @@ export const WithGroupSelectionControlledStateAndCustomIconExample = ({
                                     >
                                         <ListItemExpandIcon
                                             expanded={props.content.expanded}
-                                            position="end"
+                                            usageRole="action"
                                         />
                                     </Button>
                                 ) : undefined,

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

diff --git a/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss b/src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss
@@ -11,16 +11,36 @@ $block: '.#{variables.$ns}list-item-expand-icon';
         transition: none;
     }
 
-    &_position_start {
+    &_usage_state {
         transform: rotate(-90deg);
+
+        &#{$block}_expanded {
+            transform: rotate(0deg);
+        }
+    }
+    &_usage_state-inverse {
+        transform: rotate(90deg);
+
+        &#{$block}_expanded {
+            transform: rotate(0deg);
+        }
     }
 
-    &_position_end {
-        transform: rotate(180deg);
+    &_usage_action {
+        transform: rotate(0deg);
         transition: transform 0.2s ease;
+
+        &#{$block}_expanded {
+            transform: rotate(180deg);
+        }
     }
 
-    &_expanded {
+    &_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
@@ -11,18 +11,18 @@ import './ListItemExpandIcon.scss';
 
 const b = block('list-item-expand-icon');
 
-export interface ListItemExpandIconProps extends Partial<ListItemExpandIconRenderProps> {}
+export interface ListItemExpandIconProps extends ListItemExpandIconRenderProps {}
 
 export const ListItemExpandIcon = ({
     expanded,
     disableTransition,
-    position = 'start',
+    usageRole: usage = 'action',
     disabled,
 }: ListItemExpandIconProps) => {
     return (
         <Icon
             className={b(
-                {expanded, disableTransition, position},
+                {expanded, disableTransition, usage},
                 colorText({color: disabled ? 'hint' : undefined}),
             )}
             data={ChevronDown}

diff --git a/...mponents/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx b/...mponents/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
@@ -3,9 +3,6 @@ import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Button} from '../../../../Button';
-import {RadioButton} from '../../../../RadioButton';
-import {Text} from '../../../../Text';
-import {Flex} from '../../../../layout';
 import type {ListItemExpandIconProps} from '../ListItemExpandIcon';
 import {ListItemExpandIcon} from '../ListItemExpandIcon';
 
@@ -18,52 +15,21 @@ export default meta;
 
 type Story = StoryObj<typeof ListItemExpandIcon>;
 
+const DefaultExample = (props: ListItemExpandIconProps) => {
+    return <ListItemExpandIcon {...props} />;
+};
+
 export const Default = {
-    render: (args) => (
-        <Flex gap="5">
-            <Flex direction="column" gap="2">
-                <Text>Position: start</Text>
-                <Flex gap="2">
-                    <ListItemExpandIcon {...args} expanded={true} />
-                    <ListItemExpandIcon {...args} expanded={false} />
-                </Flex>
-            </Flex>
-            <Flex direction="column" gap="2">
-                <Text>Position: start</Text>
-                <Flex gap="2">
-                    <ListItemExpandIcon {...args} expanded={true} position="end" />
-                    <ListItemExpandIcon {...args} expanded={false} position="end" />
-                </Flex>
-            </Flex>
-        </Flex>
-    ),
+    render: DefaultExample,
 } satisfies Story;
 
 const InsideButtonExample = (props: ListItemExpandIconProps) => {
     const [expanded, setExpanded] = React.useState(false);
-    const [position, setPosition] = React.useState<'start' | 'end'>('start');
 
     return (
-        <Flex direction="column" gap="3">
-            <Flex gap="3" alignItems="center">
-                <Text>Icon position: </Text>
-                <RadioButton
-                    size="m"
-                    value={position}
-                    onUpdate={setPosition}
-                    options={[
-                        {value: 'start', content: 'Start'},
-                        {value: 'end', content: 'End'},
-                    ]}
-                />
-            </Flex>
-
-            <Text>Click on button to change state:</Text>
-
-            <Button onClick={() => setExpanded((x) => !x)}>
-                <ListItemExpandIcon {...props} expanded={expanded} position={position} />
-            </Button>
-        </Flex>
+        <Button extraProps={{'aria-label': 'toggle-button'}} onClick={() => setExpanded((x) => !x)}>
+            <ListItemExpandIcon {...props} expanded={expanded} />
+        </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
@@ -14,57 +14,34 @@ import {
 #### Base example:
 
 ```jsx
-<Flex gap="5">
-  <Flex direction="column" gap="2">
-    <Text>Position: start</Text>
-    <Flex gap="2">
-      <ListItemExpandIcon expanded={true} />
-      <ListItemExpandIcon expanded={false} />
-    </Flex>
-  </Flex>
-  <Flex direction="column" gap="2">
-    <Text>Position: start</Text>
-    <Flex gap="2">
-      <ListItemExpandIcon expanded={true} position="end" />
-      <ListItemExpandIcon expanded={false} position="end" />
-    </Flex>
-  </Flex>
-</Flex>
+const DefaultExample = (props: ListItemExpandIconProps) => {
+    return <ListItemExpandIcon {...props} />;
+};
 ```
 
 <ListItemExpandIconDefault />
 
 #### Render icon inside Button component:
 
 ```jsx
-
 const InsideButtonExample = (props: ListItemExpandIconProps) => {
     const [expanded, setExpanded] = React.useState(false);
-    const [position, setPosition] = React.useState<'start' | 'end'>('start');
 
     return (
-        <Flex direction="column" gap="3">
-            <Flex gap="3" alignItems="center">
-                <Text>Icon position: </Text>
-                <RadioButton
-                    size="m"
-                    value={position}
-                    onUpdate={setPosition}
-                    options={[
-                        {value: 'start', content: 'Start'},
-                        {value: 'end', content: 'End'},
-                    ]}
-                />
-            </Flex>
-
-            <Text>Click on button to change state:</Text>
-
-            <Button onClick={() => setExpanded((x) => !x)}>
-                <ListItemExpandIcon expanded={expanded} position={position} />
-            </Button>
-        </Flex>
+        <Button onClick={() => setExpanded((x) => !x)}>
+            <ListItemExpandIcon {...props} expanded={expanded} />
+        </Button>
     );
 };
 ```
 
 <ListItemExpandIconInsideButton />
+
+#### 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` |         |
diff --git a/src/components/useList/components/ListItemView/ListItemViewContent.tsx b/src/components/useList/components/ListItemView/ListItemViewContent.tsx
@@ -63,10 +63,9 @@ export const ListItemViewContent = ({
 }: ListItemViewContentProps) => {
     const expandIconNode = isGroup ? (
         <RenderExpandIcon
-            position={expandIconPosition}
+            usageRole={expandIconPosition === 'start' ? 'state' : 'action'}
             expanded={expanded}
             disabled={disabled}
-            disableTransition={undefined}
         />
     ) : null;
 

diff --git a/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx b/src/components/useList/components/ListItemView/__stories__/ListItemView.stories.tsx
@@ -256,7 +256,7 @@ const stories: ListItemViewProps[] = [
             expanded: false,
             expandIconPosition: 'end',
             renderExpandIcon: (props) => (
-                <Button view="flat">
+                <Button view="flat" extraProps={{'aria-label': 'toggle-button'}}>
                     <ListItemExpandIcon {...props} />
                 </Button>
             ),

diff --git a/src/components/useList/types.ts b/src/components/useList/types.ts
@@ -39,13 +39,17 @@ export type ItemState = {
     indentation: number;
 };
 
-type ExpandIconPositionType = 'start' | 'end';
-
 export interface ListItemExpandIconRenderProps {
-    position: ExpandIconPositionType;
-    expanded: boolean | undefined;
-    disableTransition: boolean | undefined;
-    disabled: boolean | undefined;
+    /**
+     * The type of 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;
+     */
+    usageRole: 'state' | 'action' | 'state-inverse' | 'action-inverse';
+    expanded?: boolean;
+    disableTransition?: boolean;
+    disabled?: boolean;
 }
 
 export type ListItemViewContentType = {
@@ -65,7 +69,7 @@ export type ListItemViewContentType = {
     /**
      * @default - 'start'
      */
-    expandIconPosition?: ExpandIconPositionType;
+    expandIconPosition?: 'start' | 'end';
     /**
      * Will be applied if `isGroup` props is `true`
      */