PLASMA-5195: Add `h6` component #2403

neretin-trike · 2025-12-23T08:04:25Z

Core

Typography

Добавлен компонент типографики h6

What/why changed

Какие были выявлены проблемы:

Сейчас при запуски тестов, которые имеют кастомный вьюпорт, не появляется дифф, даже если было какое-то изменение в коде самого теста. И вообще поведение довольно странное, т.к. в одном случае диффы (если закоммитить часть тестов) повляется, в иных (если оставить комменты) - нет. Так же наличие диффов зависит от высоты вьюпорта.
Методом подбора выяснили, что на одном из тестов высота вьюпорта напрямую влияет на то, будут ли отображены изменения в снапшотах.
Так же пробовали применить синтаксис it('H @375px', { viewportWidth: 375, viewportHeight: 667 }, () => {вместо вызова функицииcy.viewport(375, 667);`. На тесты это никак не повлияло
Теоретически проблема может быть в библиотеке, которая занимается скриншотами тестов. Необходимо поставить новую версию или попробовать другой инструмент.
При запуске тестов через оболочку cypress проблем никаких нет, и рендер срабатывает корректно.

Куда не были добавлены компоненты:

@salutejs/plasma-typo - Т.к. это легаси библиотека, которая больше не поддерживается
@salutejs/plasma-ui - Старая библиотека, в которой не поддерживаются новые способы подключения тем
В тесты @salutejs/plasma-web и @salutejs/plasma-b2c, т.к. там используется старый способ подключения типографики

Что нужно будет сделать:

Пройтись по всем конфигам связанных компонент и проставить значения в соответствии с дизайном
Актуализировать типографику во всех токенах и библиотеках. Для этого нужно будет перенести все значения из plasma_ACTUAL_TYPOGRAPHY в пакете theme-converter во все библиотеки и обновить zip архивы с поднятием версии на мажор, поскольку это изменение затронет большое количество компонент и очень сильно повлияет на визуальный регресс.

Изменения которые нужно внести при добавлении "типографического" компонента в ядро

Миксин:
Файл: packages/plasma-new-hope/src/mixins/typography.ts

Добавить <component_name>, <component_name>Bold, <component_name>Medium по аналогии с h6:
Использовать соответствующие CSS‑переменные --plasma-typo-<component_name>-*.

Типы:
Файл: utils/plasma-sb-utils/src/helpers/typographyTokens.ts

Добавить новый компонент в типы

type TypographySize = 'l' | 'm' | 's' | 'xs' | 'xxs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | '<component_name>';

Документация:
Файл: packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx

import { ..., H5, <component_name> } from '@salutejs/{{ package }}';

export function App() {
    return (
            ...
            <component_name bold={false}>component_name</component_name>
            <component_name>component_name Bold</component_name>
            <component_name medium>component_name Medium</component_name>
            ...
        </div>
    );
}

Минимальный набор изменений, чтобы "типографический" компонент появился и работал в конечных библиотеках:

Конфигурация компонента
Файл: packages/*/src/components/Typography/<component_name>.config.ts

Два варианта:
Вариант A: один общий config

export const config = {
    variations: {
        size: {
            // ... существующие типографические компоненты 
            <component_name>: css`
                ${typographyTokens.typoFontFamily}: var(--plasma-typo-<component_name>-font-family);
                ${typographyTokens.typoFontSize}: var(--plasma-typo-<component_name>-font-size);
                ${typographyTokens.typoFontStyle}: var(--plasma-typo-<component_name>-font-style);
                ${typographyTokens.typoFontWeight}: var(--plasma-typo-<component_name>-font-weight);
                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-<component_name>-bold-font-weight);
                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-<component_name>-medium-font-weight);
                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-<component_name>-letter-spacing);
                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-<component_name>-line-height);
            `,
        },
    },
};

Вариант B: отдельный config<component_name>

export const config<component_name> = {
    defaults: {
        size: '<component_name>',
    },
    variations: {
        size: {
            <component_name>: css`
                ${typographyTokens.typoFontFamily}: var(--plasma-typo-<component_name>-font-family);
                ${typographyTokens.typoFontSize}: var(--plasma-typo-<component_name>-font-size);
                ${typographyTokens.typoFontStyle}: var(--plasma-typo-<component_name>-font-style);
                ${typographyTokens.typoFontWeight}: var(--plasma-typo-<component_name>-font-weight);
                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-<component_name>-bold-font-weight);
                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-<component_name>-medium-font-weight);
                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-<component_name>-letter-spacing);
                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-<component_name>-line-height);
            `,
        },
    },
};

Создание компонента
Файл: packages/*/src/components/Typography/Typography.tsx

// Импорт (если вариант B)
import {
    // ... другие импорты
    config<component_name> as headingConfig<component_name>Custom,
} from './<component_name>.config';

// Создание компонента (если вариант B)
const <component_name>Config = mergeConfig(headingConfig, headingConfig<component_name>Custom);
const <component_name>Component = component(<component_name>Config);

// Экспорт
export const <component_name> = <component_name>Component;

Экспорт компонента
Файл: packages/*/src/components/Typography/index.ts

export {
    // ... другие экспорты
    H6,
    <component_name>, // добавить
    TextL,
    // ...
} from './Typography';

Пример в Storybook
Файл: packages/*/src/components/Typography/Typography.stories.tsx

import {
    // ... другие импорты
    H6,
    <component_name>, // добавить
} from '.';

// В секции с заголовками добавить:
<component_name> bold={false} {...props}><component_name></component_name>
<component_name> {...props}><component_name> Bold</<component_name>>
<component_name> medium {...props}><component_name> Medium</component_name>

Тесты
Файл: packages/*/src/components/Typography/Typography.Responsive.component-test.tsx

    ...
    const H5 = getComponent('H5');
    const <component_name> = getComponent('<component_name>');
    const TextL = getComponent('TextL');
    ...

    const headings (или другая группа) = (
        <CypressTestDecorator>
            ...
            <H5 bold={false}>H5</H5>
            <H5>H5 Semibold</H5>
            <component_name bold={false}>component_name</component_name>
            <component_name>component_name Semibold</component_name>
            ...
        </CypressTestDecorator>
    );

Добавить токены в соотвествующие библиотеки
Поискать смежные компоненты, которые переиспользуют типографику и добавить её туда (например в Rating, Tab и т.д.)

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/plasma-asdk@0.358.0-canary.2403.20455152253.0
npm install @salutejs/plasma-b2c@1.600.0-canary.2403.20455152253.0
npm install @salutejs/plasma-core@1.212.0-canary.2403.20455152253.0
npm install @salutejs/plasma-giga@0.327.0-canary.2403.20455152253.0
npm install @salutejs/plasma-hope@1.358.0-canary.2403.20455152253.0
npm install @salutejs/plasma-new-hope@0.344.0-canary.2403.20455152253.0
npm install @salutejs/plasma-tokens@1.126.0-canary.2403.20455152253.0
npm install @salutejs/plasma-ui@1.334.0-canary.2403.20455152253.0
npm install @salutejs/plasma-web@1.602.0-canary.2403.20455152253.0
npm install @salutejs/sdds-bizcom@0.332.0-canary.2403.20455152253.0
npm install @salutejs/sdds-crm@0.331.0-canary.2403.20455152253.0
npm install @salutejs/sdds-cs@0.336.0-canary.2403.20455152253.0
npm install @salutejs/sdds-dfa@0.330.0-canary.2403.20455152253.0
npm install @salutejs/sdds-finai@0.323.0-canary.2403.20455152253.0
npm install @salutejs/sdds-insol@0.327.0-canary.2403.20455152253.0
npm install @salutejs/sdds-netology@0.331.0-canary.2403.20455152253.0
npm install @salutejs/sdds-platform-ai@0.331.0-canary.2403.20455152253.0
npm install @salutejs/sdds-scan@0.330.0-canary.2403.20455152253.0
npm install @salutejs/sdds-serv@0.331.0-canary.2403.20455152253.0
npm install @salutejs/sdds-themes@0.51.0-canary.2403.20455152253.0
npm install @salutejs/plasma-cy-utils@0.142.0-canary.2403.20455152253.0
npm install @salutejs/plasma-sb-utils@0.212.0-canary.2403.20455152253.0
# or 
yarn add @salutejs/plasma-asdk@0.358.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-b2c@1.600.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-core@1.212.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-giga@0.327.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-hope@1.358.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-new-hope@0.344.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-tokens@1.126.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-ui@1.334.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-web@1.602.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-bizcom@0.332.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-crm@0.331.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-cs@0.336.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-dfa@0.330.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-finai@0.323.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-insol@0.327.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-netology@0.331.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-platform-ai@0.331.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-scan@0.330.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-serv@0.331.0-canary.2403.20455152253.0
yarn add @salutejs/sdds-themes@0.51.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-cy-utils@0.142.0-canary.2403.20455152253.0
yarn add @salutejs/plasma-sb-utils@0.212.0-canary.2403.20455152253.0

github-actions · 2025-12-23T08:08:58Z

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-2403/

github-actions · 2025-12-23T08:28:22Z

Documentation preview deployed!

neretin-trike self-assigned this Dec 23, 2025

neretin-trike requested review from TitanKuzmich, Yakutoc, Yeti-or and shuga2704 as code owners December 23, 2025 08:04

neretin-trike temporarily deployed to internal December 23, 2025 08:04 — with GitHub Actions Inactive

neretin-trike removed request for Yeti-or and shuga2704 December 23, 2025 08:04

neretin-trike added 16 commits December 23, 2025 13:04

feat(plasma-new-hope): Add h6 component

cbfae0a

feat(plasma-asdk): Add h6 component

8c71f6f

feat(plasma-b2c): Add h6 component

6f99576

feat(plasma-giga): Add h6 component

8eca9e4

feat(plasma-web): Add h6 component

764241c

feat(sdds-bizcom): Add h6 component

134ba1c

feat(sdds-crm): Add h6 component

2aba664

feat(sdds-cs): Add h6 component

17c7ca2

feat(sdds-dfa): Add h6 component

9a18e8d

feat(sdds-finai): Add h6 component

0c3f105

feat(sdds-insol): Add h6 component

e58973b

feat(sdds-netology): Add h6 component

9794098

feat(sdds-platform-ai): Add h6 component

5333057

feat(sdds-scan): Add h6 component

564f3d8

feat(sdds-serv): Add h6 component

2579a13

feat(sdds-...-docs,plasam-...-docs): Add h6 component to docs

f53a58e

neretin-trike force-pushed the PLASMA-5195 branch from 214c0ea to f53a58e Compare December 23, 2025 08:06

neretin-trike temporarily deployed to internal December 23, 2025 08:06 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

PLASMA-5195: Add `h6` component #2403

PLASMA-5195: Add `h6` component #2403

Uh oh!

neretin-trike commented Dec 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PLASMA-5195: Add h6 component #2403

Are you sure you want to change the base?

PLASMA-5195: Add h6 component #2403

Uh oh!

Conversation

neretin-trike commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Core

Typography

What/why changed

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PLASMA-5195: Add `h6` component #2403

PLASMA-5195: Add `h6` component #2403

neretin-trike commented Dec 23, 2025 •

edited

Loading