Компонент · рівень 1

Обране

Серце в куті картки. Один дотик - товар у списку бажань, ще один - геть.

рівень 1design/system/components/favourite.css47 рядків30 екранів
Анатомія
1Кут картки - верхній правий - той самий слот на всіх екранах
2Гліф - контур · заповнений і в акценті у стані .on
3Той самий кут, інша робота - .wlrm у списку бажань видаляє, і саме тому має кошик, а не серце

Три коробки вище - розмітка продукту, не її зображення: btn--text btn--icon fav, як на картці в каталозі. До кроку 7.13 тут стояла <button class="fav"> без класів фінішу і без гліфа всередині, тож анатомія показувала порожню рамку. Компонент цей сам про це й попереджає: favourite.css тримає де мітка стоїть і що вона каже кольором, а її коробку і зону дотику оголошує button.css - тож без btn--icon показувати нема чого.

Варіанти і розміри

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

ВісьЗначенняПравило вибору
Станпорожнє · .on в обраномуСтан приходить з акаунта, а не з розмітки.
Роль слотаобране · .wlrm прибрати зі спискуНа екрані списку бажань той самий кут тримає видалення. Це інша робота, а не варіант: однаковий вигляд у двох робіт - найдорожча помилка цієї сітки, і вона названа тут навмисно.
Коли вживати

На картці товару в каталозі та в списку бажань. Job 3 - регулярний покупець: обране це чернетка повторного замовлення.

Правило і антиправило

Правило

Один слот - одна робота на екран. У каталозі кут додає, у списку бажань той самий кут видаляє, і на одному екрані обидві дії ніколи не зустрічаються.

Антиправило

Не став видалення поруч з обраним. Два серця з різним змістом в одному куті - це пастка. Якщо треба обидві дії, друга йде в Рядок посилань під карткою.
Стани, що є в коді

У коді є :hover і .on.

Натиск крок 7.33

.fav і .wlrm - це btn--text btn--icon, тож землю під пальцем їм дає .btn--icon.btn--text:active у button.css: одне правило на всі 92 позначки.

А знайшлось воно так. .btn--text відмовляється від стану натиску, і причина, яку він називає, - про слово: рухати лишалось би тільки шрифт. Іконкова кнопка не слово, і button.css сам це каже там, де видає --text --icon короб 44px під палець. Тобто відмова, написана для підпису, тихо керувала 92 позначками, яким є чим відповісти: 86 сердець на картках і 6 хрестиків у списку обраного. 86 з них - на лістингу, екрані, де телефон проводить найбільше часу.

Третя редакція серця мовчить

.lfav, серце в картці-рядку, не відповідає нічим - ні курсору, ні пальцю. Зміряно на listing-list.html: .fav і .wlrm обидва беруть --text-action під курсором із .btn--text:hover, а .lfav не рушить, бо product-card.css прив'язує його колір п'ятьма правилами і вантажиться після button.css.

І землі йому теж правильно не дісталось

Це btn--text без btn--icon: короба в нього немає, бо в рядку списку 12px проміжку і взяти 44px нізвідки. Тож правило його не дістає - і це правильно. Сім екземплярів на одному екрані, і це крок картки товару, а не цього файлу.
Зміряно дотиком: серце на картці прозоре -> #FFF9F5
Холостий контроль

Сторінка звіряє себе з файлом: 3 власних класів і 2 станів оголошено в favourite.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. Чужий контекст (.pcard) не рахується: у цих селекторах компонент не є підметом, він лише стоїть усередині когось.

Рух

Робота: ВІДПОВІДЬ. Рухається: нічого власного. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var() з tokens.css: підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Серце не оголошує жодного переходу і не мусить: воно носить btn--text btn--icon, тобто рух приходить із button.css одним записом на всі 92 позначки. Той самий перепис спершу назвав його «має стан і не рухається», і це було хибно.

Токени

Прочитані з favourite.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Семантичні ролі (0)Примітиви (1)
---size-44
Розмітка
<button class="btn--text btn--icon fav" aria-label="В обране">♡</button> <button class="btn--text btn--icon fav on" aria-label="Прибрати з обраного">♡</button> <button class="btn--text btn--icon wlrm" aria-label="Видалити з обраного" title="Видалити з обраного">🗑</button>

Розмітка взята з account-wishlist.html як є, усі шість входжень однакові. Знак у html, а гліф на екрані - це не суперечність, а правило кроку 7.11: контрол, чия мітка і є весь його підпис, віддає знак наборові. Серце малює heart, кошик - trash, обидва з icons.js.

Де вживається

Якорі: .fav .wlrm

30 екранів у wireframes/: 404.html, account-wishlist-many.html, account-wishlist.html, account.html, catalog-page.html, checkout-loggedin.html, checkout-noaddr.html, checkout.html, coach-home-free.html, coach-home.html, coach-wishlist.html, content-article.html, goal.html, home-buyer.html ...

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

Чого бракує

  • Немає незакладеного правила - лише .pcard .fav
  • Немає стану очікування - дія мережева, а відповіді в інтерфейсі немає

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