[FRNT-532, FRNT-532] Implement box model, rewrite ButtonIcon and Chip #109
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,197 +1,96 @@ | ||
| import * as React from 'react'; | ||
| import styled, { StyledComponent } from 'styled-components'; | ||
| import { Variant } from 'lib/types'; | ||
| import { box } from 'ui/elements/quarks'; | ||
|
|
||
| interface ChipProps { | ||
| children?: string; | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. в этой ветке смотрим box-model, состояния как в макетах я не делала |
||
| className?: string; | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. ага, надо поправить, но в отдельной задаче по правке состояний чипа |
||
| disabled?: boolean; | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. да, для нулевого размера пока не знаю как cделать, в формулах gap = 0 и изза этого outline который выходит за ButtonIcon перекрывает текст There was a problem hiding this comment. тут нет outline у icon, это подсвечивается сам chip, icon-button никак не меняется There was a problem hiding this comment. тут дело не в icon-button, а в формуле компенсации для текста, у тебя текст может быть любой длины, при этом, иконка не должна залезать на него. Плюс у тебя сама иконка меньше по размерам, чем высота chip, а так не должно быть, по высоте они должны быть одинаковыми There was a problem hiding this comment. а я тут вижу что иконка в фокусе 👀 There was a problem hiding this comment. Тут надо обсудить уже подробнее и мб с дизайнерами, потому что пока что реализовано, что если фокус на иконку то вся плашка чипа тоже в фокусе, и вроде с Димой Марисоным обсуждали это и он говорил что это ок. There was a problem hiding this comment. можем втроем поглядеть, чтобы никому обидно не было )) |
||
|
There was a problem hiding this comment.
There was a problem hiding this comment. для XS размер 30, это у размера N - 24px. There was a problem hiding this comment.
|
||
|
There was a problem hiding this comment. это скрин к комменту выше |
||
|
There was a problem hiding this comment.
There was a problem hiding this comment. В нашей модели N = 24, XS = 30, S = 36, и тп There was a problem hiding this comment. ок ) выше написала коммент ) |
||
| leftIcon?: React.ReactNode; | ||
| onClick?: React.EventHandler<React.SyntheticEvent>; | ||
| rightIcon?: React.ReactNode; | ||
| } | ||
|
|
||
| const ChipBase: React.FC<ChipProps & Variant> = ({ | ||
| children, | ||
| className, | ||
| disabled, | ||
| leftIcon, | ||
|
There was a problem hiding this comment. Зачем снова переименовывать иконки? Оно так называлось, потому что иконки имели разную принадлежность. Это не просто иконка слева и справа. Это иконка чипа и иконка действия. Если вдруг добавим rtl получится криво, что leftIcon внезапно начнет отображаться справа. Мне кажется, лучше переименовать обратно, или в chipIcon, actionIcon |
||
| onClick, | ||
| rightIcon, | ||
| variant = 'secondary', | ||
| }) => { | ||
| const chipRole = onClick ? 'button' : 'div'; | ||
| const chipTabIndex = onClick ? 0 : -1; | ||
|
|
||
| const onKeyDown = React.useCallback( | ||
| (event) => { | ||
| if (event.key === 'Enter' && onClick) { | ||
| onClick(event); | ||
| } | ||
| }, | ||
| [onClick], | ||
| ); | ||
| return ( | ||
| <div className={className} data-disabled={disabled} data-variant={variant} role={chipRole}> | ||
| {leftIcon && ( | ||
| <div data-icon onClick={onClick} onKeyDown={onKeyDown}> | ||
| {leftIcon} | ||
| </div> | ||
| )} | ||
| <div data-text tabIndex={chipTabIndex} onClick={onClick} onKeyDown={onKeyDown}> | ||
| {children} | ||
| </div> | ||
| {rightIcon && <div data-icon>{rightIcon}</div>} | ||
|
There was a problem hiding this comment. Иконка справа это действие с чипом, обычно закрытие. |
||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const Chip = styled(ChipBase)` | ||
| ${box} | ||
| --local-background: var(--woly-shape-default); | ||
| --local-icon-size: var(--woly-line-height); | ||
| --local-color: var(--woly-shape-text-default); | ||
| --local-border-color: var(--woly-shape-default); | ||
|
|
||
| box-sizing: border-box; | ||
| display: flex; | ||
| align-items: center; | ||
| background-color: var(--local-background); | ||
| color: var(--local-color); | ||
| border-radius: var(--woly-rounding); | ||
| font-size: var(--woly-font-size); | ||
| outline: none; | ||
| border: var(--woly-border-width) solid var(--local-border-color); | ||
|
|
||
| [data-text] { | ||
| outline: none; | ||
| line-height: var(--woly-line-height); | ||
| } | ||
|
|
||
| &[role='button']:focus-within { | ||
| --local-background: var(--woly-focus); | ||
| --local-border-color: var(--woly-shape-active); | ||
|
|
||
| box-shadow: 0 0 0 var(--woly-border-width) var(--woly-shape-default); | ||
| } | ||
|
|
||
| &[role='button']:hover { | ||
| --local-background: var(--woly-shape-hover); | ||
| --local-border-color: var(--woly-shape-hover); | ||
| } | ||
|
|
||
| &[data-disabled='true'] { | ||
| --local-background: var(--woly-shape-disabled); | ||
| --local-text: var(--woly-shape-text-disabled); | ||
| --local-border-color: var(--woly-shape-disabled); | ||
|
|
||
| pointer-events: none; | ||
| } | ||
|
|
||
| [data-icon] { | ||
| --woly-component-level: 0; | ||
| display: flex; | ||
| } | ||
| ` as StyledComponent<'div', Record<string, unknown>, ChipProps & Variant>; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Тот же комментарий что и в https://github.com/woly-ui/woly/pull/110/files#r628142059