Організм · рівень 3

Модалка відгуку

.pm - це не одна модалка, а дві: «Залишити відгук» і «Поставити запитання» це та сама оболонка, яку wfPdpModals() будує однією функцією. Тому три екрани товару несуть шість екземплярів. Зірку, якою її знають, файл не малює: .pm-stars і .pmst поїхали в rating.css на кроці 7.27, і тут лишилося тільки те, де стоїть вибиралка.

рівень 3design/system/components/review-modal.css88 рядків36 селекторів99 оголошень5 екранів, модалка на 3

З чого складається

Складає три файли, і поділ між ними - це поділ між місцем і виглядом: рейтинг каже, яка зірка, поле каже, який інпут, а цей файл каже, де вони стоять.

Файл	Класів	Які саме
`rating.css`	2	`.pm-stars` `.pmst`
`button.css`	2	`.btn--icon` `.btn--s`
`field.css`	1	`.field`

4 класи всередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .btn--accent .btn--ghost .btn--outline .uiv-ic

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/product-reviews.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.

Показано в рамці шириною 390, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 520px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.

1Корпус .pm - position:fixed, 520 завширшки, не більше 94vw і 88vh, z-index:61, --radius-16, --elevation-4. Затемнення в нього чуже: #pm-ov це .wf-ov з overlay.css

2Шапка .pm-h і закриття .x 32x32 - дисплейний шрифт 20 з --ls-lead. .x - те саме ім'я, яке називають п'ять файлів

3Оцінка .pm-rhead .pm-rate .pm-rv .pm-rw - ряд не нижчий за --size-40, цифра дисплейна на 30, слово-вирок мале. Крок 7.63 зняв із .pm-rw розрядку --ls-eyebrow (це .08em, відстані моноширинної підписи) і дав --ls-caps: напис Inter не мав носити розрядку моно, а всі інші користувачі .08em - моноширинні

4Помилка поля .pm-e - display:none, вмикається класом .on. .on називають 18 файлів компонентів, і це найгірше ім'я шару; ця коробка тримає два його значення одночасно: тут воно означає «помилку видно», а на .pmst поруч - «зірка горить»

5Лічильник .pm-cnt - моноширинний, праворуч. Ліміти 600 і 400 написані в розмітці атрибутом maxlength, у файлі про них немає нічого

6Підвал .pm-f - > * { flex:1 }, те саме «два контроли й нічого більше», що й .ceact та .cedlg .act. Одне речення, три місця

Чим цей файл перестав бути

Чотири колірні правила вибиралки зірок - спокій, наведення, .on і кільце фокуса - поїхали в rating.css разом із формою (7.27). Правило розміру полів на телефоні поїхало в base.css, де воно накриває всі інпути сторінки, а не тільки свої, і крок 7.3 прибрав порожній @media, що по собі лишився. Тепер у файлі жодної медіа-умови і 59 рядків замість того, чим він був. Організм, який віддав вигляд і лишив собі композицію, - це і є те, чим організм має бути.

Стани

Стан	Що робить	Чому так
закрито	`.pm{display:none}`	стан спокою на всіх трьох екранах товару
відкрито	`.pm.open` - `display:flex`	вирішувач: не збіглося з жодним елементом
помилка	`.pm-e.on` - `display:block`, `--text-danger`	теж жодного збігу: обидва стани файлу існують лише в русі
перший лейбл	`.pm-b label:first-child{margin-top:0}`	єдине оголошення файлу, яке збігається й не виграє: `.pm-rhead label{margin:0}` збіглося з 6 елементами й віддало `margin-top`. Два правила обнуляють один відступ і згодні між собою - тим гірше, бо змінять їх колись поодинці
надіслано	немає	`wfPmSubmitReview()` закриває модалку й кидає тост; редакції «відгук відправлено» в самій модалці не існує
фокус	кільце браузера	файл не називає жодного фокусного стану; з псевдокласів у ньому тільки `:first-child`

Межі

У файлі жодної медіа-умови: одна редакція на всі ширини.

Холостий контроль

Сторінка звіряє себе з файлом: 11 власних класів і 0 станів.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: жодного. Модал відгуку тримається контейнером - max-width і центрування - а не точкою. Раунд організмів його не чіпав.

Рух

Дві поверхні, і друга написана з voice.md, а не з драбини. Модалка - центрований діалог тієї самої форми, що city-dialog: підйом вписано всередину центрувального transform. А .pm-e - це повідомлення валідації під полем, і таблиця тону для помилки називає чотири речі: коротко, без пружини, мала амплітуда, і жодного святкування поруч. Тому --dur-fast, проста крива і --move-sm - дві точки, найменша відстань у наборі. Помилка, яка вилітає з розмахом, просить, щоб на неї дивились; ця просить, щоб її прочитали.

Токени

Прочитані з review-modal.css: 9 семантичних ролей і 22 примітиви.

Семантичні ролі (9)	Примітиви (22)
`--bg-page` `--bg-surface` `--elevation-4` `--line-hair` `--text-body` `--text-danger` `--text-muted` `--text-primary` `--text-secondary`	`--font-display` `--font-mono` `--fs-12` `--fs-14` `--fs-20` `--fs-30` `--fw-black` `--fw-bold` `--fw-medium` `--fw-semibold` `--lh-airy` `--lh-flat` `--ls-caps` `--ls-lead` `--radius-16` `--radius-8` `--size-40` `--space-12` `--space-16` `--space-24` `--space-4` `--space-8`
–	`--dur-fast` `--dur-slow` `--ease-enter` `--ease-exit` `--ease-standard` `--move-md` `--move-sm`

Що знайшов вирішувач

19 селекторів, 84 оголошення. Одне збігається й не виграє - подвійне обнулення верхнього відступу лейбла, розібране вище. Два не збігаються ні з чим: .pm.open і .pm-e.on. Тобто обидва стани, які файл узагалі оголошує, невидимі для перепису в спокої - продукт малює їх лише тоді, коли людина щось зробила. Це не дефект файлу, це межа приладу: перепис ходить по екранах, а не по діях, і кожен «стан не знайдено» тут треба читати як «замір не туди дивився».

Немає в коді -> етап 09

Чого бракує

.on у 18 файлах, і два його значення в одній коробці. Найдорожче ім'я шару, і починати треба з нього
Немає стану «відгук надіслано» - модалка виглядає однаково до і після
Ліміт 600/400 живе в розмітці: файл малює лічильник і не знає, що робити на межі
520 сирим числом - ширина модалки не читає жодного токена
Свого кільця фокуса немає

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.