Панель Pro
«Ви досягли ліміту тарифу Free». Єдине місце, де система просить грошей, - і тому єдине, де кожне рішення про наголос коштує довіри. Компонент народився не з макета, а з двох приватних блоків, які малювали одне й те саме під двома іменами, і один із них цитував другий у коментарі.
Розмітка звідси - та сама, що на coach-clients-cap.html. Це повна форма: заголовок, смуга, речення, список, дії, дрібний підпис.
- Необмежена кількість клієнтів
- Мультиклієнтська сесія без обмежень
- Максимальна гуртова ціна
І коротка форма - coach-tariff-free.html. Заголовок тут <h2>, речення <p>: компонент бере обидві пари імен, бо один екран прийшов із класами, а другий з елементами, і жодна з двох редакцій не варта того, щоб переписувати розмітку.
Перейдіть на Pro
Зніміть ліміт на кількість клієнтів у сесії й отримайте максимальну гуртову ціну та пріоритетну підтримку.
Ціна тут не компонентова: .tf-price2 живе в plan-card.css поруч із .tf-col-p (крок 8.29 переніс їх туди з coach-tariff.css), бо це ціна ТАРИФУ, а панель лише її показує. Частини опційні - панель із самим заголовком, реченням і дією все одно ця панель.
І вона йшла не тим шрифтом. Крок 8.28 переніс .tf-price2 у правило .tf-col-p по розміру, вазі й маргіну - і не пішов за родиною, яка живе в price.css, за файл звідти. Панель показувала «99 ₴ / міс [?]» шрифтом Inter, коли той самий рядок за два екрани звідси стоїть у IBM Plex Mono. Полагоджено на 8.29, одним іменем у наявний список; мій недогляд, знайдений четвертим екраном.
.upsell на coach-clients-cap і .tf-upsell на coach-tariff-free - обидва рамка з акцентною гранню, що каже «ви вперлись у стелю Free, ось Pro», обидва закінчуються тим самим btn--accent на ту саму адресу. І приватний коментар тарифного екрана називав сусіда вголос:
.upsell on coach-clients-cap.htmlДва файли, що погоджуються прозою й розходяться числами, - це визначення компонента, якого ніхто не написав.
Правило
Грань несе наголос, заливка лишається поверхнею. Панель уже тримає акцентну кнопку, заради якої вона існує. Акцентна ПЛИТА поставила б колір «дій тут» водночас на блок і на дію всередині нього, і людина не знала б, куди тиснути.Антиправило
Не роби з ліміту поразки. Ні червоного, ні лічильника, ні «залишилось». Смуга показує факт (3 з 3), список показує, що дає Pro, підпис чесно каже[?] там, де числа ще немає. Принцип 4: спокійно й упевнено.| Що | Було | Стало | Чому |
|---|---|---|---|
| падінг | 18px проти 20/22 | 18px | старша редакція і квадратна; жодне з трьох не на драбині, тож вибирали не рунґ, а простіше число |
| тло | прозоре проти --bg-surface | --bg-surface | панель, що просить грошей, має лежати НА сторінці, а не бути діркою в ній. Прозорою вона була лише тому, що в сірого прототипу не було ролі поверхні |
| заголовок | 16px проти 17px | --fs-16 | 17 не на драбині взагалі |
Жодне з трьох не рухає більш ніж на 2px. Записані рядком «змінна -> значення -> чому» в docs/decisions.md, крок 6, дев'ятнадцятий прохід.
Станів не має, не інтерактивний. Панель це блок, а не контрол: наводять і натискають кнопки всередині неї, і вони відповідають своїм фінішем із button.css. Наведення на саму панель було б вигаданою роллю.
Єдине, що в ній рухається, - ширина заливки .ubar i, і це вимір, а не стан: скільки клієнтів із ліміту вже зайнято. Сьогодні вона стоїть на 100%, бо екран показує момент, коли ліміт вичерпано.
Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій панелі береться патерном .actions.
Сторінка звіряє себе з файлом: 7 власних класів оголошено в upsell.css.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу: жодного. Блок допродажу плинний: він ставить сітку карток, а колонки рахуєproduct-grid.css. Раунд організмів його не чіпав.Прочитані з upsell.css: 8 семантичних ролей і 11 примітивів.
| Семантичні ролі (8) | Примітиви (11) |
|---|---|
--bg-action --bg-sunken --bg-surface --line-action --text-body --text-muted --text-primary --text-secondary | --container-text --fs-12 --fs-14 --fs-16 --fw-black --lh-airy --radius-12 --space-12 --space-2 --space-4 --space-8 |
Повз шкалу тут чотири числа, і всі позначені [?] у файлі: 1.5px грань (набір 1 / 2), 14px радіус (драбина 12 / 16), 18px падінг і маргін (16 / 24), 6px радіус смуги і два маргіни (4 / 8). Це успадкований дрейф двох приватних блоків, а не нові значення - етап 09 їх або пристібне до драбини, або залишить із написаною причиною.
Чого бракує
- Смуга не має варіантів заповнення.
.ubar iстоїть наwidth: 100%жорстко. Щойно ліміт стане справжнім числом, ширина має приходити з розмітки -style="width:66%"або токен-змінна, і це рішення про механізм, а не про вигляд. - Чотири числа повз драбину - див. розділ токенів.
- Панель ніде не показує, ЩО саме вичерпано, крім тексту. Смуга без підпису «3 з 3» - це форма без числа; сьогодні число живе в реченні. Чи має воно стояти на смузі - питання етапу 09.