toast: стилизация и сторисы#145
Conversation
|
как-то неправильно отрабатывают сторизы. Друг на друга наслаиваются и тд |
проблема так и не решена
|
| <Controls of={ToastStories.WithContent} /> | ||
|
|
||
| ### Width | ||
| Доступные размеры ширины тоста: sm (20rem), base (25rem), lg (30rem), xlg (45rem). |
There was a problem hiding this comment.
каким образом они доступны? Что с ними сделать надо? Как мне получить размер?
|
решить конфликты |
khaliulin
force-pushed
the
messages/toast
branch
from
418079a to
1a1ba46
Compare
| <Controls of={ToastStories.WithContent} /> | ||
|
|
||
| ### Width | ||
| Ширина тоста задаётся через CSS-переменную `--p-toast-width` с помощью пропа `pt`. Доступные значения: |
There was a problem hiding this comment.
Может имеет смысл через класс прокидывать эти размеры? Или обертки? Вариант с перезаписью переменной не очень удобен для использования
Заменены захардкоженные значения 20rem/30rem/45rem в классах .p-toast-sm/.p-toast-lg/.p-toast-xlg на обращения к дизайн-токенам messages.sm.width/messages.lg.width/messages.xlg.width через функцию dt(), как это сделано в dialog.ts и confirmdialog.ts.
khaliulin
force-pushed
the
messages/toast
branch
from
f192b82 to
f6989d1
Compare
| import { usePBlockToast } from '@/primeBlocks/PBlockToast/usePBlockToast'; | ||
| import PBlockToast from '@/primeBlocks/PBlockToast/PBlockToast.vue'; |
There was a problem hiding this comment.
импорты из либы по идее должны быть, ну и везде поправить
| } | ||
|
|
||
| .p-toast-message-error .p-toast-detail { | ||
| color: ${dt('toast.colorScheme.light.info.detailColor')}; |
There was a problem hiding this comment.
toast.colorScheme.light.info.detailColor одинаковый у всех severity
-error
-warn
-success и тд
это нормально?
There was a problem hiding this comment.
@esipenko Такие токены в Figma.
@khaliulin Данил, это баг/фича?
There was a problem hiding this comment.
@anatoly-rodin баг — copy-paste: detailColor для success/warn/error ссылался на info вместо своего severity. Визуально не проявлялось, т.к. в tokens.json все detailColor = {text.color}. Исправлено. f493c3b
There was a problem hiding this comment.
@esipenko Данил поправил баг. Теперь они разные.
| </template> | ||
| <template v-else #message="slotProps"> | ||
| <div class="p-toast-accent-line"></div> | ||
| <i :class="`p-icon p-toast-message-icon ti ${slotProps.message.icon}`" /> |
There was a problem hiding this comment.
Давай попробуем свг иконку сюда засунуть из пакета таблер для вью, потому что шрифтовые зависят от сети и не тришейкаются
в сториках тоже можно это показать
| <Canvas of={ToastStories.Default} /> | ||
|
|
||
| #### Полный список аргументов и событий компонента. | ||
| <Controls of={ToastStories.Default} /> |
There was a problem hiding this comment.
тут можно сделать width селектором? Чтобы рукчами не вводить
There was a problem hiding this comment.
@Skosov Доработал этот момент. Теперь интерактивно на всех Story можно менять размер Toast.
4 participants
No description provided.