Skip to content

добавить размеры ширины message и вариант fill - #140

Merged
AxyIX merged 4 commits into
mainfrom
message.width
Sep 7, 2026
Merged

добавить размеры ширины message и вариант fill#140
AxyIX merged 4 commits into
mainfrom
message.width

Conversation

@khaliulin

@khaliulin khaliulin commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

У <extra-message> была одна ширина — message.extend.width = 400px. Добавлены четыре размера и вариант fill (на всю ширину контейнера).

Что изменено

Семантика — новая ступень шкалы, 630px в ней не выражалось:

"2000": "{sizing.200x}",
"2200": "{sizing.315x}",   ← 630px
"max":  "{sizing.max}"

Компонентные токены — только ссылки на семантику:

"message": { "extend": { "overlayWidth": {
  "small":  "{dimension.size.1700}",
  "base":   "{dimension.size.1900}",
  "large":  "{dimension.size.2000}",
  "xlarge": "{dimension.size.2200}"
} } }

Стили (tokens/components/message.ts): .p-messageoverlayWidth.base, классы .p-message-size-{small,large,xlarge} → свои токены, .p-message-size-fillwidth: 100%.

API (message.component.ts): ExtraMessageSize = 'small' | 'base' | 'large' | 'xlarge' | 'fill', @Input() size = 'base', геттер sizeClass подставляется в [styleClass] PrimeNG-компонента. Префикс -size- выбран намеренно: p-message-sm / p-message-lg уже заняты самим PrimeNG под его собственный size.

Stories: контрол size с пятью опциями, проброс в шаблон Default.

Замеры (браузер, story Info)

size ширина
small 272px
base 336px
large 400px
xlarge 630px
fill вся ширина контейнера

Гейты: check-component.mjs message — 0 FAIL, 13 WARN (12 прежних по неиспользуемой ветке outlined + extend.width, который заменён на overlayWidth.base); prettier и tsc --noEmit чисто.

Вопросы к дизайну

  1. Значения не равны макету. Таблица Figma (sizing.width) просит 280 / 350 / 420 / 630, семантическая шкала даёт ближайшие 272 / 336 / 400 / 630 — промах 8-20px на трёх размерах из четырёх. Точные значения потребуют своих ступеней в Figma.
  2. Спецификация разошлась с кодом: docs/components-api/message.md пропа size не содержит. Нужно дописать туда строку про size (включая fill).
  3. dimension.size.2200 заведена также в ветке size.drawer.update (PR задать ширину drawer по размерам #138) — строки идентичны, при мерже обеих возможен тривиальный конфликт в этом месте.

Comment thread docs/components-api/message.md Outdated
| `caption` | пояснение сообщения | `string` |
| `icon` | класс иконки tabler icon (вместо стандартной для `severity`). значение `null` скрывает иконку | `string \| null` |
| `show-close` | кнопка закрытия | `boolean` |
| `size` | ширина сообщения: 272 / 336 / 400 / 630 px; `fill` — на всю ширину контейнера | `small \| base \| large \| xlarge \| fill` |

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

я бы убрал конкретные размеры. о них разработчикам знать не обязательно. это уже по части самой реализации.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AxyIX убрать пиксельные значения из описания пропа size 3306bf8

@AxyIX
AxyIX merged commit 2d0f2d0 into main Sep 7, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants