Ряд дій

Композицію знайшов tools/pattern.mjs по 142 сірих і 88 кольорових екранах. Вона стоїть на 70 сірих екранах - і робить це під 53 різними іменами контейнера.

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

Живий патерн, з реальними рядками з продукту. Розмітка взята з account-addresses.html, не намальована для стенда.

Три, і кожен вичитаний з екранів, а не придуманий тут.

У трьох місцях шляху, і всі три - момент рішення, а не момент перегляду.

Головний тест - «One orange per view» з DESIGN.md: акцент означає рівно одне, «тут натиснути». Ряд дій - це місце, де правило перевіряється найчастіше, бо в ньому дві кнопки поруч. Залита - одна.

Коли патерн НЕ береться: коли композиція одноразова або відрізняється порядком. Підвал шухляди кошика (.cd-foot) - це grid з підказкою під кнопками, а не ряд; смуга покупки (.buyrow) вирівнює вміст по центру і тримає лічильник між кнопками. Обидві лишились собою і це правильно: патерн - стала композиція, а не будь-які дві кнопки в одному батькові.

Правила вживання, які називають саме цей патерн: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Новий ряд дій пише class="actions". Відхилення пишеться .x.actions{ } у власному файлі компонента, ніколи на екрані - і саме тут крок 9.1 помилився вперше: .actions і голий клас контейнера важать однаково (0,1,0), а патерни імпортуються останніми, тож відступ патерна тихо перебивав власний відступ контейнера і зсував розкладку на 4px. Скоупнуті .coach .x вижили при (0,2,0), і дефект вилетів рівно на чотирьох нескоупнутих.

Два ряди дій ще не переведені, і це сказано вголос. .ceact і .cedlg .act - власний ряд діалогу клієнта, вісім сірих екранів і два кольорові: його розмітку будує wireframes/_nav.js, спільний скрипт ОБОХ корпусів, а сірий корпус цей етап не редагує. .sys-acts - ряд службової сторінки, нуль кольорових входжень, тож доводити пікселями нема чого. Обидва в беклозі для етапу 12.

Доказ існування патерна, а не ілюстрація: 15 кольорових екранів поіменно, і кожен відкривається.

Переведення доведено пікселями: tools/tree-diff.mjs проти дерева до правки, 30 порівнянь на 360 і 1280, зрушило 0, перейменовано 240 рядків. Позитивний контроль у приладу є: перший прогін цього ж набору казав «зрушило 10» і назвав рід кожного зсуву.

Вирізано звідти, вставлено сюди - не скопійовано. Правило, що лишилось одночасно у двох місцях, це дефект, а не підстраховка.

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

Сторінка звіряє себе з файлом: 3 власні класи. Станів патерн не має і не може мати - він не інтерактивний: інтерактивні тут кнопки всередині, і їхні чотири стани показує їхня сторінка.

Патернів у системі один, і власного переходу композиції він не отримує. Це відповідь, а не пропуск, і вона називається числом: action-row.css не оголошує жодного transition, а рух, який на ньому видно, приходить з button.css - двох контролів, з яких ряд складено. Той самий клас, що icon.css на кроці 3: стан в одному файлі, рух в іншому.

Чому композиції тут нема що дати. Перехід патерна відповідає на питання «що з'являється, звідки і в якому порядку». Ряд дій ніколи не з'являється сам: він приходить разом із блоком, який його тримає - підвалом діалогу, ногою картки, порожнім станом, - і цей блок уже має свою роботу ЗВ'ЯЗОК. Дати ряду власний вихід означало б анімувати момент, для якого не називається жодна з трьох робіт, тобто рівно те, що пак називає сиротою на виліт. Черговість появи двох кнопок - найдешевший спосіб завести конфеті поруч із джерелом, яке його виправдовує.

Прочитані з action-row.css, не переписані руками. Кольору тут немає жодного, і це не випадковість: патерн збирається з компонентів і токенів, а колір несе роль, яку оголошує компонент.

Файл: design/system/patterns/action-row.css, підключений у design/system/index.css після компонентів - патерн збирається з них, тож у каскаді стоїть нижче.