Статус-пілюля
Маленька пілюля, що каже, у якому стані річ зараз. Не контрол і не бейдж: її ніхто не натискає, і вона не називає річ - вона повідомляє стан, у якому річ перебуває.
::before з availability.css: та сама форма, що в мітки наявності, бо це те саме твердження про станУ чотирьох файлах на трьох рівнях, і на кроці 7.96 до них додались три коучеві - .oc-status, .co-status, .ord-status, - які до того малювались сірою рамкою без стану, тож доставлене замовлення не відрізнялось від того, що ще їде. Вони збіглися в геометрії, яку важко вгадати - рамка, --radius-pill, тонована заливка - і розійшлися в чотирьох значеннях, які легко. Це підпис того, що одну річ малювали четверо окремо.
.oh-status · 4.aord-status · 1.rbadge · 7.ci-oostag · 1.rbadge - це статус, і єдине, що робило його схожим на інший компонент, - його ім'я. «✓ Купив товар» повідомляє стан відгуку: покупка за ним підтверджена, - тим самим зеленим, що «Доставлено», через файл12px - пілюля рядка, який здебільшого про статус. 10px - пілюля, що їде всередині чогось іншого: у мета-рядку відгуку, у колонці назви в кошику. Padding іде за сходинкою, і так уже працювали двоє з чотирьох.
| Сходинка | Кегль | Padding | Хто вже був правий |
|---|---|---|---|
| рядок | 12 | 4 / 12 | .oh-status |
| всередині | 10 | 2 / 8 | .rbadge |
.aord-status була 12px з 10-піксельним padding, а .ci-oostag - 10px з 12-піксельним: дві, що перетнули драбину, кожна в свій бік.
--bg-success-soft це rgba(46,125,70,.07), і його коментар у tokens.css читається «the fill of the success pill». .rbadge заливався --bg-success (#F1F8F3, спокійна плита успіху), а рамку брав з --line-success-soft - рамки пілюлі. Половина однієї пілюлі й половина іншої, і різниця менша за відсоток яскравості. Саме тому це й вижило: побачити не міг ніхто, а система казала дві речі.
.ci-oostag каже «Немає в наявності» на рядку, який людина вже поклала в кошик, - це єдина пілюля набору з поганою новиною про власний вибір. Вона набрана моноширинним великими літерами на 500, а не на 800: назва товару над нею вже йде повною вагою, і кричати про невдачу поруч означало б зробити рядок помилкою замість факту, з яким треба щось зробити. Принцип 4 - спокійно і впевнено - записаний вагою.
Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.
| Вісь | Значення | Правило вибору |
|---|---|---|
| Стан | ок · у русі · очікує · порожньо | Зелений - завершено. Бурштиновий - рухається. Сірий - прийнято і чекає. Червоного немає жодного: невдача доставки це не стан пілюлі, а окремий екран. |
| Сходинка | 12 · 10 | Про що рядок. Якщо статус - головне, що в ньому є, - 12. Якщо їде поруч з іншим - 10. |
Тільки для стану, який змінюється сам: замовлення проходить шлях, товар з'являється і зникає, відгук підтверджується. Для роду речі - «Популярне», «Новинка» - є Бейдж, і він на фото, а не в рядку.
Правило
Форма несе «тут є стан», колір несе - який саме. Тому геометрія одна на всі чотири імені, а різняться лише три токени кольору.Антиправило
Не роби пілюлю контролом..city-badge - 272 входження на 34 екранах - має ту саму геометрію і статусом не є: це кнопка, яку натискають, вона має ховер. Спільна форма з контролом - аргумент кнопки, не цього файлу.Чотири: .ok, .go, .wait і нейтральний без класу. Ховера і натискання немає - пілюля не контрол.
Статус замовлення носить чотири різні класи в чотирьох місцях - в історії акаунта, у картці оформлення, у кабінеті тренера і в рядку замовлення - і всі чотири це ОДНА пігулка: файл пише їх одним селектором, а не чотирма редакціями. П'ятим стоїть .ord-status.way, «у дорозі», який ділить обличчя з .oh-status.go.
Різне тут лише те, що вирішує ПОВЕРХНЯ - розмір і відступ у щільному рядку; сам стан скрізь той самий, бо для людини «виконано» не залежить від того, на якому екрані воно написане.
Сторінка звіряє себе з файлом: 7 власних класів і 0 станів оголошено в status-pill.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.
Прочитані з status-pill.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (10) | Примітиви (12) |
|---|---|
--bg-bonus-soft --bg-success-soft --bg-sunken --bg-surface --line-bonus-soft --line-strong --line-success-soft --text-secondary --text-success --text-warning | --font-mono --fs-10 --fs-12 --fw-black --fw-medium --lh-snug --ls-caps --radius-pill --space-2 --space-4 --space-8 --space-12 |
Крапка в розмітці не пишеться - її малює availability.css через ::before, тією самою формою, що й мітка наявності.
Якорі: .oh-status .aord-status .rbadge .ci-oostag
Заміряно в браузері на 390 і 1280: 13 пілюль - .rbadge 7 на 3 екранах, .oh-status 4 на 1, .aord-status і .ci-oostag по 1.
Чого бракує
- Чотири імені на одну форму. Крок 6
- Немає стану «скасовано» - у коді є три, а шлях замовлення має щонайменше чотири кінці
.city-badgeділить геометрію з пілюлею, будучи контролом: 272 входження. Питання кнопки, не цього файлу, але записане тут, бо знайдено тут
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.