feat(ListItemExandIcon): added new list component for expanded icon view #1762
Conversation
IsaevAlexandr
commented
Aug 20, 2024
IsaevAlexandr
commented
- fixed expanded icon position
- expanded list icon separated by own component to reuse
- added examples in storys and docs
|
Preview is ready. |
|
Visual Tests Report is ready. |
IsaevAlexandr
force-pushed
the
fix/use-list-controlled-state
branch
2 times, most recently
from
d3d8264 to
d59a42c
Compare
|
/ping |
src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
Outdated
Show resolved
Hide resolved
src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
Outdated
Show resolved
Hide resolved
| | Name | Description | Type | Default | | ||
| | :---------------- | :---------------------------------------------- | :--------------------------------------------------: | :-----: | | ||
| | expanded | icon state | `boolean` | | | ||
| | disableTransition | disable animation while `expanded` state change | `boolean` | | |
There was a problem hiding this comment.
Why we need to disable the animatiom?
There was a problem hiding this comment.
it depends on the business logic of the application
There was a problem hiding this comment.
It's our design decision to have transitions on such arrows. Look at the ArrowToggle, we don't have it. Allowing to disable it here would feels like something is broken...
src/components/useList/components/ListItemExpandIcon/ListItemExpandIcon.tsx
Outdated
Show resolved
Hide resolved
src/components/useList/components/ListItemView/ListItemViewContent.tsx
Outdated
Show resolved
Hide resolved
| @@ -57,7 +58,17 @@ export const ListItemViewContent = ({ | |||
| expanded, | |||
| selected, | |||
| title, | |||
| expandIconPosition = 'start', | |||
| renderExpandIcon: RenderExpandIcon = ListItemExpandIcon, | |||
There was a problem hiding this comment.
What the case for custom render?
There was a problem hiding this comment.
if you wont custom icon view
There was a problem hiding this comment.
This prop called render* but it's not a function. Also it takes props of ListItemExpandIcon, so when I want custom, I should rely on this props?. Feels a bit overwhelming and hard to understand.
There was a problem hiding this comment.
this is exactly a render function with props. Here fased link to a ListItemExpandIcon withot calling. In most cases you don't need to use this prop - it's optional
IsaevAlexandr
force-pushed
the
fix/use-list-controlled-state
branch
2 times, most recently
from
73be8b9 to
775dbce
Compare
|
/fixed |
| export const ListItemExpandIcon = ({ | ||
| expanded, | ||
| disableTransition, | ||
| kind = 'action', |
There was a problem hiding this comment.
I think I find even better name for this prop, behavior
| @@ -57,7 +58,17 @@ export const ListItemViewContent = ({ | |||
| expanded, | |||
| selected, | |||
| title, | |||
| expandIconPosition = 'start', | |||
| renderExpandIcon: RenderExpandIcon = ListItemExpandIcon, | |||
There was a problem hiding this comment.
This prop called render* but it's not a function. Also it takes props of ListItemExpandIcon, so when I want custom, I should rely on this props?. Feels a bit overwhelming and hard to understand.
IsaevAlexandr
force-pushed
the
fix/use-list-controlled-state
branch
from
775dbce to
62c29ac
Compare
|
/fixed |
|
/ping |
1 similar comment
|
/ping |
