PLASMA-7077: Черновик механизма для адаптива на уровне конфигураций#2804
PLASMA-7077: Черновик механизма для адаптива на уровне конфигураций#2804Yakutoc wants to merge 3 commits into
Conversation
Yakutoc
changed the title
|
Theme Builder app deployed! https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-2804/ |
| // На экранах ≤559px компактный `m` сменяется на `s` — | ||
| // чтобы интерактивная зона стала комфортнее на мобиле. | ||
| responsive: css` | ||
| ${getResponsiveCSS([{ from: undefined, to: 559, size: sizeS }])} |
There was a problem hiding this comment.
[Note]:
- На этапе сборки пакета сборщик сканирует исходники и ищет css``. Только то, что обёрнуто этим тегом, он считает стилями для компиляции.
- Внутри обёртки лежит вызов
getResponsiveCSS([...]). Сборщик исполняет его прямо во время сборки и получает строку с готовыми@media-блоками. - Эту строку сборщик кладёт в общий файл стилей пакета как обычный CSS-класс — все
@mediaсразу оказываются в стайлшите. - В JS на месте обёртки остаётся только имя класса.
- В браузере компонент добавляет это имя к элементу - браузер применяет уже готовые правила. Ничего «на лету» в браузере не строится.
Почему обёртка css обязательна
- Без обёртки массив или строка — это обычные данные в JS-объекте.
- Сборщик стилей такие данные не трогает — он смотрит только на
css`...`. - В итоговом CSS-файле не появится ни одного
@media. - Достроить эти стили в браузере тоже не из чего — рантайм-сборщика стилей на этом пути в проекте нет.
- Итог: адаптив не сработает.
There was a problem hiding this comment.
Кажется что надо предусмотреть, чтобы под каждый размер генерились адаптивы. Условно если изначально установили size=xl, то это для него респосив. Если установили size=m, то уже будет другой респонсив
${getResponsiveCSS([
{ from: 0, to: undefined, size: sizeM },
])}
There was a problem hiding this comment.
Если мы прибиваем гвоздями адаптив, то теряется смысл пропа size. Под каждый size должна быть возможность указать свой адаптив.Кому-то может быть нужно, чтобы кнопка с размером m оставалась размера m и на мобилке, а не принимала размер xs из адаптива
Yakutoc
changed the title
| fixed: css``, | ||
| }, | ||
| }, | ||
| responsive: css` |
There was a problem hiding this comment.
[Note]: Можно ли менять breakpoint сверху?
|
Кажется, что можно реализовать через хук export const applyAdaptive = (Component, {s: [
{breakpoint: [200, 650], size: 's'},
{breakpoint: [651, 1270], size: 'm'},
{breakpoint: [1271, Infinity], size: 'l'},
]}) => {
}который бы вырезал пробрасываемый текущий |
2 participants
What/why changed
📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via:
npm install @salutejs/plasma-asdk@0.376.0-canary.2804.26410831538.0 npm install @salutejs/plasma-b2c@1.618.0-canary.2804.26410831538.0 npm install @salutejs/plasma-core@1.226.0-canary.2804.26410831538.0 npm install @salutejs/plasma-giga@0.345.0-canary.2804.26410831538.0 npm install @salutejs/plasma-homeds@0.345.0-canary.2804.26410831538.0 npm install @salutejs/plasma-hope@1.372.0-canary.2804.26410831538.0 npm install @salutejs/plasma-icons@1.238.0-canary.2804.26410831538.0 npm install @salutejs/plasma-new-hope@0.362.0-canary.2804.26410831538.0 npm install @salutejs/plasma-tokens-b2b@1.55.0-canary.2804.26410831538.0 npm install @salutejs/plasma-tokens-b2c@0.66.0-canary.2804.26410831538.0 npm install @salutejs/plasma-tokens-web@1.70.0-canary.2804.26410831538.0 npm install @salutejs/plasma-tokens@1.138.0-canary.2804.26410831538.0 npm install @salutejs/plasma-typo@0.43.0-canary.2804.26410831538.0 npm install @salutejs/plasma-ui@1.348.0-canary.2804.26410831538.0 npm install @salutejs/plasma-web@1.620.0-canary.2804.26410831538.0 npm install @salutejs/sdds-bizcom@0.350.0-canary.2804.26410831538.0 npm install @salutejs/sdds-cs@0.354.0-canary.2804.26410831538.0 npm install @salutejs/sdds-dfa@0.348.0-canary.2804.26410831538.0 npm install @salutejs/sdds-finai@0.341.0-canary.2804.26410831538.0 npm install @salutejs/sdds-insol@0.345.0-canary.2804.26410831538.0 npm install @salutejs/sdds-netology@0.349.0-canary.2804.26410831538.0 npm install @salutejs/sdds-os@0.20.0-canary.2804.26410831538.0 npm install @salutejs/sdds-platform-ai@0.349.0-canary.2804.26410831538.0 npm install @salutejs/sdds-sbcom@0.350.0-canary.2804.26410831538.0 npm install @salutejs/sdds-scan@0.348.0-canary.2804.26410831538.0 npm install @salutejs/sdds-serv@0.349.0-canary.2804.26410831538.0 npm install @salutejs/core-themes@0.30.0-canary.2804.26410831538.0 npm install @salutejs/plasma-themes@0.50.0-canary.2804.26410831538.0 npm install @salutejs/sdds-themes@0.65.0-canary.2804.26410831538.0 npm install @salutejs/sdds-api-tests@0.7.0-canary.2804.26410831538.0 npm install @salutejs/plasma-cy-utils@0.156.0-canary.2804.26410831538.0 npm install @salutejs/plasma-sb-utils@0.226.0-canary.2804.26410831538.0 npm install @salutejs/plasma-tokens-utils@0.51.0-canary.2804.26410831538.0 # or yarn add @salutejs/plasma-asdk@0.376.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-b2c@1.618.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-core@1.226.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-giga@0.345.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-homeds@0.345.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-hope@1.372.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-icons@1.238.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-new-hope@0.362.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-tokens-b2b@1.55.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-tokens-b2c@0.66.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-tokens-web@1.70.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-tokens@1.138.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-typo@0.43.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-ui@1.348.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-web@1.620.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-bizcom@0.350.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-cs@0.354.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-dfa@0.348.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-finai@0.341.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-insol@0.345.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-netology@0.349.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-os@0.20.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-platform-ai@0.349.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-sbcom@0.350.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-scan@0.348.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-serv@0.349.0-canary.2804.26410831538.0 yarn add @salutejs/core-themes@0.30.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-themes@0.50.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-themes@0.65.0-canary.2804.26410831538.0 yarn add @salutejs/sdds-api-tests@0.7.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-cy-utils@0.156.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-sb-utils@0.226.0-canary.2804.26410831538.0 yarn add @salutejs/plasma-tokens-utils@0.51.0-canary.2804.26410831538.0