feat(DefinitionList): add mobile view #205
Conversation
|
Preview is ready. |
|
|
||
| const normalizedItems = React.useMemo(() => { | ||
| return getFlattenItems(items).map((value, index) => ({...value, key: index})); | ||
| }, [items]); | ||
|
|
||
| return ( | ||
| <dl className={b({responsive}, className)} data-qa={qa}> | ||
| <dl className={b({responsive: responsive, vertical}, className)} data-qa={qa}> |
There was a problem hiding this comment.
can be a shorthand while name is the same
|
|
||
| import './DefinitionList.scss'; | ||
|
|
||
| export function DefinitionList({ | ||
| items, | ||
| responsive, | ||
| vertical, |
There was a problem hiding this comment.
We usually call it direction with horizontal and vertical values
| margin-block-start: var(--g-spacing-8); | ||
| } | ||
| #{$block}__item:is(#{$block}__item_grouped) + #{$block}__item:not(#{$block}__item_grouped) { | ||
| margin-block-start: var(--g-spacing-8); |
There was a problem hiding this comment.
These margins looks too big imo. Have been they approved by design team?
There was a problem hiding this comment.
Designers have been approved this.
| | responsive | `boolean` | | | If set to `true` list will take 100% width of its parent | | ||
| | vertical | `boolean` | | | If set to `true` content will be located under name | | ||
| | nameMaxWidth | `number` | | | Maximum width of term | | ||
| | contentMaxWidth | `number \| 'auto'` | | 'auto' | Maximum width of definition | |
There was a problem hiding this comment.
We should note that responsive, nameMaxWidth and contentMaxWidth no longer work if vertical is set
There was a problem hiding this comment.
But these props are still working (these helpers are counting styles https://github.com/gravity-ui/components/pull/205/files#diff-ab530930964e58e5719665b537aede673ed0a0384f9eab1a347f7dbeb41f47b9R53-R77).
closes #184