-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ListItemExandIcon): added new list component for expanded icon view
- Loading branch information
1 parent
1c95f75
commit 61b8335
Showing
19 changed files
with
329 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| @use '../../../variables'; | ||
|
|
||
| $block: '.#{variables.$ns}list-item-expand-icon'; | ||
|
|
||
| #{$block} { | ||
| flex-shrink: 0; | ||
|
|
||
| transition: transform 0.1s ease; | ||
|
|
||
| &_disableTransition { | ||
| transition: none; | ||
| } | ||
|
|
||
| &_position_start { | ||
| transform: rotate(-90deg); | ||
| } | ||
|
|
||
| &_position_end { | ||
| transform: rotate(180deg); | ||
| transition: transform 0.2s ease; | ||
| } | ||
|
|
||
| &_expanded { | ||
| transform: rotate(0deg); | ||
| } | ||
| } |
35 changes: 35 additions & 0 deletions
35
src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {ChevronDown} from '@gravity-ui/icons'; | ||
|
|
||
| import {Icon} from '../../../Icon'; | ||
| 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 Partial<ListItemExpandIconRenderProps> {} | ||
|
|
||
| export const ListItemExpandIcon = ({ | ||
| expanded, | ||
| disableTransition, | ||
| position = 'start', | ||
| disabled, | ||
| }: ListItemExpandIconProps) => { | ||
| return ( | ||
| <Icon | ||
| className={b( | ||
| {expanded, disableTransition, position}, | ||
| colorText({color: disabled ? 'hint' : undefined}), | ||
| )} | ||
| data={ChevronDown} | ||
| size={16} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| // For correct rendering inside `Button` component | ||
| ListItemExpandIcon.displayName = 'Icon'; |
72 changes: 72 additions & 0 deletions
72
...mponents/useList/components/ListItemExpandIcon/__stories__/ListItemExpandIcon.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| 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'; | ||
|
|
||
| const meta: Meta<typeof ListItemExpandIcon> = { | ||
| title: 'Lab/useList/ListItemExpandIcon', | ||
| component: ListItemExpandIcon, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof ListItemExpandIcon>; | ||
|
|
||
| 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> | ||
| ), | ||
| } 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> | ||
| ); | ||
| }; | ||
|
|
||
| export const InsideButton = { | ||
| render: InsideButtonExample, | ||
| } satisfies Story; |
Oops, something went wrong.