feat(plasma-web/b2c/new-hope): Add TextArea component with new design and core
#817
Conversation
neretin-trike
requested review from
Yeti-or,
Yakutoc and
kayman233
as code owners
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| const outerRef = innerRef && 'current' in innerRef ? innerRef : createRef<HTMLTextAreaElement>(); | ||
| const hasHelper = Boolean(leftHelper || rightHelper || helperText); | ||
| const newView = status !== undefined ? fallbackStatusMap[status] : view; |
Check warning
Code scanning / Semgrep
Semgrep Finding: gitlab.eslint.detect-object-injection
|
Theme Builder app deployed! http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-817/ |
|
Documentation preview deployed! website: http://plasma.sberdevices.ru/pr/pr-817/ |
neretin-trike
force-pushed
the
neretinaa/add-new-hope-textarea
branch
from
aaf89a3 to
7b3f9f5
Compare
|
Theme Builder app deployed! http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-817/ |
|
Documentation preview deployed! website: http://plasma.sberdevices.ru/pr/pr-817/ |
| @@ -0,0 +1,149 @@ | |||
| export const classes = { | |||
| /** Коммент */ | |||
There was a problem hiding this comment.
А зачем нам здесь везде /** Коммент */?
There was a problem hiding this comment.
по идее тут надо описать каждый токен, что он значит и для чего здесь находится, но я пока этого не сделал :(
There was a problem hiding this comment.
это мета шутка по Пелевину: коммент как бы есть, но его нет
ты его видишь но не осознаешь
и вообще если задуматься то коммент он в твоем сознании, а ты это коммент к своему сознанию, и если упростить и не задумываться то
коммент это ты, а ты это коммент
главное конeчно тут не разделять на главное и второстепенное
а то сразу ком в горле, холодок в ноздрях, а тут и мент придет
поэтому спокойней товарищ
Коммент конечен
как первый снег за окном
пора выходить
| } = classes; | ||
|
|
||
| export const applyDynamicLabel = ` | ||
| .${String(innerPlaceholderUpClass)} { |
There was a problem hiding this comment.
уточнение
а зачем везде к String приводить?
There was a problem hiding this comment.
иначе linaria при сборке ругается на строковые переменные у классов, т.к. они "могут быть undefined". Кароч бред, но без него билд не работает
There was a problem hiding this comment.
@Yeti-or Вот у Артем тоже использует приведение к строке. Это к твоему комментарию/вопросу к @TitanKuzmich
packages/plasma-new-hope/src/components/TextArea/TextArea.styles.ts
Outdated
Show resolved
Hide resolved
| font-style: var(${tokens.fontStyle}); | ||
| font-weight: var(${tokens.fontWeight}); | ||
| letter-spacing: var(${tokens.letterSpacing}); | ||
| line-height: var(${tokens.lineHeight}); |
There was a problem hiding this comment.
вот думаю было б класнно как-то так:
const StyledLabel = styled.span`
margin-bottom: var(${tokens.labelMarginBottom});
${...Typography.h4}
`не ? или тут другая типографика?
или вообще как-то так:
styled(typo.h4)`
margin-bottom: var(${tokens.labelMarginBottom});
`или может
const Label = <H4 mb={var(${tokens.labelMarginBottom});} />There was a problem hiding this comment.
ну вот теперь да, когда во многих местах появилось использование типографики кажется есть смысл вынести куда-нибудь. Но проблема в том, что там не просто Typography.h4, а токены типографики именно для конкретной части компонента. Типа TypographyHelpers.h4, TypographyInput.h4 и т.д.
| `; | ||
|
|
||
| export const StyledLeftHelper = styled.span` | ||
| ${applyEllipsis()}; |
There was a problem hiding this comment.
@TitanKuzmich а в чем разница почему теме нужно было String() везде писать а @neretin-trike нет ?
| @@ -0,0 +1,149 @@ | |||
| export const classes = { | |||
| /** Коммент */ | |||
There was a problem hiding this comment.
это мета шутка по Пелевину: коммент как бы есть, но его нет
ты его видишь но не осознаешь
и вообще если задуматься то коммент он в твоем сознании, а ты это коммент к своему сознанию, и если упростить и не задумываться то
коммент это ты, а ты это коммент
главное конeчно тут не разделять на главное и второстепенное
а то сразу ком в горле, холодок в ноздрях, а тут и мент придет
поэтому спокойней товарищ
Коммент конечен
как первый снег за окном
пора выходить
packages/plasma-new-hope/src/components/TextArea/TextArea.styles.ts
Outdated
Show resolved
Hide resolved
| minAuto?: number; | ||
| } | ||
|
|
||
| export interface TextAreaPropsExtends extends TextAreaPropsBase { |
There was a problem hiding this comment.
[Уточнение]
@neretin-trike
TextAreaPropsExtends нужен снаруже?
There was a problem hiding this comment.
не уверен, я наружу вообще не хотел типы экспортить, но тут хз
packages/plasma-new-hope/src/components/TextArea/hooks/useAutoResize.ts
Outdated
Show resolved
Hide resolved
neretin-trike
force-pushed
the
neretinaa/add-new-hope-textarea
branch
2 times, most recently
from
cb6305d to
d0f5daa
Compare
|
Theme Builder app deployed! http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-817/ |
|
Documentation preview deployed! website: http://plasma.sberdevices.ru/pr/pr-817/ |
There was a problem hiding this comment.
Я всё ещё раз посмотрел
меня конечно смущает что получилось тааак много токенов
и такие сложные селекторы
ещё смущает что мы не можем куда-то отдельно вытащить работу с resizeObserver в тот же вариант например
и не ясно в какой момент мы в plasma-web добавим размеры еще =/
Вообщем предлагаю вливать, единственный момент проверь пожалуйста состояния focus / hover у sds-enginer по макетам и надо сторис к новому формату привести
neretin-trike
force-pushed
the
neretinaa/add-new-hope-textarea
branch
from
d0f5daa to
f680554
Compare
neretin-trike
temporarily deployed
to
internal
GitHub Actions
Inactive
neretin-trike
temporarily deployed
to
internal
GitHub Actions
Inactive
neretin-trike
temporarily deployed
to
internal
GitHub Actions
Inactive
neretin-trike
temporarily deployed
to
internal
GitHub Actions
Inactive
|
Theme Builder app deployed! http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-817/ |
|
Documentation preview deployed! website: http://plasma.sberdevices.ru/pr/pr-817/ |
⚡ Component performance testingResult: 🟢 OK Detailsrender:
|
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
3 similar comments
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
5 similar comments
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
|
🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀 |
Release Notes
Добавлена реализация компонента
TextAreaв новой архитектуре.Добавлены сборки компонента для новых тем plasma_web, plasma_b2c, sds_engineer с новыми пропсами:
view,size,disabled.Добавлены сборки компонента для старых библиотек
@salutejs/plasma-web,@salutejs/plasma-b2c.Добавлен механизм динамических лейблов, которые в зависимости от различных сценариев ведёт себя по-разному.
What/why Changed
Для plasma-web:
Для plasma-b2c:
Для plasma-b2c и plasma-web
widthиheight, которые не всегда отображали реальные размеры компонентаrowsиcols, из-за которых количество строк / столбцов не всегда отображались корректноminAutoиmaxAuto, из-за которых минимальное и максимальное количество доступных строк не всегда отображались корректноОстальное
Обновлены снапшоты тестов для библиотек plasma-web и plasma-b2c в соответствии со всеми исправлениями
Сохранены старые интерфейсы для библиотек plasma-web и plasma-b2c у компонента
TextAreaУдалён компонент
TextAreaиз@salutejs/plasma-hope(за исключением типов)Обновлён workflow файл cypress-common. В scope добавлены зависимости plasma-tokens-b2c, т.к. в данном PR этот пакет затрагивается
⚡ Component performance testing
Result: 🟢 OK
Details
render:
⚡ Component performance testing
Result: 🟢 OK
Details
render:
📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via: