Тост

Натисніть - тости справжні, їх будує та сама wfToast(), що й у крамниці, і зникають вони так само через 4.2 секунди.

Стос має aria-live="polite". Тому тост чують, а не тільки бачать: читач з екрана отримує текст тоді ж, коли він з'являється, і не мусить його шукати. Це єдине місце продукту, де оголошення робиться саме так.

marks.js існує заради одного правила: знак малює набір, а не шрифт машини. Проходи запускає uivChrome() останнім рядком - «щоб вони побачили кнопки, які всі проходи вище закінчили будувати». Тост будується не тоді. Він будується тоді, коли хтось зберіг адресу.

Доказом, що нічого не бракувало, крім виклику, став ручний запуск: uivMarks() по контейнеру тоста перетворив символ на знак із набору одразу. Тож 7.78 не додав нового проходу - він обгорнув будівника, як uivPatchMenus() уже обгортає три будівники каталожного оверлея з тієї самої причини.

Перше було побайтно тим самим, що правило на рядок вище. Запущено всі три типи й прочитано обчислений стиль з кожного: коло біле rgb(255,255,255) на чорному rgb(28,28,28) в ok, в error і в info однаково. Значок помилки ніколи не виглядав інакше за значок успіху.

Друге повторювало початкове значення - і воно потрапило сюди звичкою. font-style: normal у системі є ще чотири рази: .tbanners .tbx i, .addr-method .am-tx i, .oh-thumbs i. У кожному з них елемент це <i>, який браузер нахиляє за замовчуванням. А .tt-ic це <span>. Звичка переїхала, тег - ні.

Після видалення в файлі не лишилось жодного правила для .info. Це чесно: інформаційний тост і є базовий тост, і тепер це видно з коду.

Уся різниця між «збережено» і «заповніть виділені поля» - це волосина 1px білого на майже чорному і інший набраний символ. У системі є ціла родина небезпеки - --bg-danger-soft, --line-danger-soft, --text-danger, - якою вже малюються .errbox, поле з помилкою і .btn--danger. Тост не бере з неї нічого.

✓, ! та i немає в UIV_SIGN_ONLY - карті, яка перетворює символ на знак. Додати їх не однорядкова зміна: у наборі є check і alert, а знака info немає взагалі. Два з трьох лишили б інформаційний тост єдиним досі набраним, що гірше за три з трьох.

marks.js сам пише це правило про свої карти: «поза нею нічого не чіпається, і жодна з двох карт не має права рости здогадкою». Тож знак статусу - записаний, а не заметений.

Сторінка звіряє себе з файлом: 7 власних класів і 2 стани оголошено в toast.css.

Робота: ЗВ'ЯЗОК. Рухається: прихід і відхід: opacity і transform на --move-md. Тривалість --dur-slow (330ms), крива --ease-enter / --ease-exit. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Єдина молекула з роботою ЗВ'ЯЗОК, тому єдина, що бере --dur-slow. Прихід іде на --ease-enter, відхід на --ease-exit - тост іде туди ж, звідки прийшов. Тут же помер єдиний у продукті transition: all: він анімував усе, що змінилось, і перепис показав, що одне оголошення дістає 32 елементи. Тепер названі рівно дві властивості, які справді йдуть. Відстань 8px згорнулась у --move-md, тобто в те саме число, з якого тост приходить.

Крок 4, і тут знайшлись дві речі. Перша: вихід перейшов на --dur-base, і причина лежить у файлі, якого цей етап чіпати не може - wireframes/_nav.js знімає вузол через 250мс після класу .out, а крок 3 поставив вихід на 330. Тост зникав посеред власного згасання. Сірий корпус заморожений, тож рухається число: 220 вміщається в 250. Друга: тост помилки тепер рухається інакше за тост успіху - --dur-base і --move-sm замість --dur-slow і --move-md. До цього wfToast('error', ...) приходив тим самим розмахом, що й «Адресу збережено»: один рух під двома протилежними реченнями. Механізм - локальний псевдонім --tt-travel, а не перевизначений токен.

Прочитані з toast.css: 6 семантичних ролей і 9 примітивів.

Повз шкалу п'ять чисел, і всі п'ять про розміщення й рух: 22px знизу, 92% і 380px ширини, 10px появи й 8px зникання. Жодне з них не про вигляд самої смужки - фон, радіус, тінь, кегль і кроки всередині взяті з системи повністю.

У цього файлу немає блока кольору взагалі - усі 43 оголошення в секції структури. І це правда, а не пропуск: тост від початку намальований інверсною поверхнею й ролями --bg-inverse / --text-oninverse, тож кольоровому продукту нема чого тут перебивати.

Перепис цей компонент не бачить. Він обходить 40 екранів у спокої, а тоста в спокої не існує - у переписі 7.75 кожне оголошення цього файлу впало в графу «не збігається з жодним елементом», усі до одного.

Тому A/B цього кроку інший: ті самі три тости на обох серверах, на чотирьох ширинах, і чотирнадцять обчислених значень з кожного - коробка, фон, межа, радіус, відступ, тінь, значок, текст, хрестик і ярлик. Різниця рівно там, де її замовляли: спосіб малювання хрестика і його коробка. Решта - однаково.

Плюс звичайні три проходи по 40 екранах: нульовий прохід 0, різниця 0 - бо в спокої обгортка wfToast нічого не робить, і це саме те, що треба було довести.