PLASMA-5195: Add `h6` component by neretin-trike · Pull Request #2403 · salute-developers/plasma

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.362.0-canary.2403.21865417826.0
npm install @salutejs/plasma-b2c@1.604.0-canary.2403.21865417826.0
npm install @salutejs/plasma-giga@0.331.0-canary.2403.21865417826.0
npm install @salutejs/plasma-hope@1.361.0-canary.2403.21865417826.0
npm install @salutejs/plasma-icons@1.229.0-canary.2403.21865417826.0
npm install @salutejs/plasma-new-hope@0.348.0-canary.2403.21865417826.0
npm install @salutejs/plasma-ui@1.337.0-canary.2403.21865417826.0
npm install @salutejs/plasma-web@1.606.0-canary.2403.21865417826.0
npm install @salutejs/sdds-bizcom@0.336.0-canary.2403.21865417826.0
npm install @salutejs/sdds-crm@0.335.0-canary.2403.21865417826.0
npm install @salutejs/sdds-cs@0.340.0-canary.2403.21865417826.0
npm install @salutejs/sdds-dfa@0.334.0-canary.2403.21865417826.0
npm install @salutejs/sdds-finai@0.327.0-canary.2403.21865417826.0
npm install @salutejs/sdds-insol@0.331.0-canary.2403.21865417826.0
npm install @salutejs/sdds-netology@0.335.0-canary.2403.21865417826.0
npm install @salutejs/sdds-os@0.6.0-canary.2403.21865417826.0
npm install @salutejs/sdds-platform-ai@0.335.0-canary.2403.21865417826.0
npm install @salutejs/sdds-scan@0.334.0-canary.2403.21865417826.0
npm install @salutejs/sdds-serv@0.335.0-canary.2403.21865417826.0
npm install @salutejs/plasma-sb-utils@0.215.0-canary.2403.21865417826.0
# or 
yarn add @salutejs/plasma-asdk@0.362.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-b2c@1.604.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-giga@0.331.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-hope@1.361.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-icons@1.229.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-new-hope@0.348.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-ui@1.337.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-web@1.606.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-bizcom@0.336.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-crm@0.335.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-cs@0.340.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-dfa@0.334.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-finai@0.327.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-insol@0.331.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-netology@0.335.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-os@0.6.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-platform-ai@0.335.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-scan@0.334.0-canary.2403.21865417826.0
yarn add @salutejs/sdds-serv@0.335.0-canary.2403.21865417826.0
yarn add @salutejs/plasma-sb-utils@0.215.0-canary.2403.21865417826.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!

TitanKuzmich · 2026-02-10T12:20:15Z

cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png

Большой скрин)))

Yakutoc · 2026-02-10T14:37:12Z

packages/sdds-finai/src/components/Accordion/Accordion.config.ts

@@ -194,6 +194,26 @@ export const config = {
                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height);

+                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);


@neretin-trike Фин порталу точно нужен этот компонент H6?

ну я добавлял везде, и не добавлял туда, где это явно не нужно было, типа stards и sdds-cs.
Опирался на эту мапу с исключениями

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 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

neretin-trike added 14 commits February 9, 2026 17:30

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

8150e42

feat(plasma-asdk): Add h6 component

2da20a3

feat(plasma-b2c): Add h6 component

47270c7

feat(plasma-giga): Add h6 component

db41133

feat(plasma-web): Add h6 component

f14e92f

feat(sdds-bizcom): Add h6 component

7766c11

feat(sdds-crm): Add h6 component

89d0236

feat(sdds-dfa): Add h6 component

66cea3f

feat(sdds-finai): Add h6 component

ab5618a

feat(sdds-insol): Add h6 component

25dd537

feat(sdds-netology): Add h6 component

1df2f77

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

3207436

feat(sdds-scan): Add h6 component

e32728e

feat(sdds-serv): Add h6 component

1694e6c

feat: Add docs for h6 component in typography

72f7b8f

neretin-trike force-pushed the PLASMA-5195 branch from f53a58e to fd69449 Compare February 9, 2026 18:44

neretin-trike temporarily deployed to internal February 9, 2026 18:44 — with GitHub Actions Inactive

neretin-trike force-pushed the PLASMA-5195 branch from fd69449 to 1c352a6 Compare February 10, 2026 10:43

neretin-trike temporarily deployed to internal February 10, 2026 10:43 — with GitHub Actions Inactive

neretin-trike force-pushed the PLASMA-5195 branch from 1c352a6 to bb78930 Compare February 10, 2026 11:10

neretin-trike temporarily deployed to internal February 10, 2026 11:10 — with GitHub Actions Inactive

TitanKuzmich reviewed Feb 10, 2026

View reviewed changes

cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png

Copy link

Contributor

TitanKuzmich Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Большой скрин)))

TitanKuzmich approved these changes Feb 10, 2026

View reviewed changes

feat: Update snapshots wiht Header typography components

ea18c42

neretin-trike force-pushed the PLASMA-5195 branch from bb78930 to ea18c42 Compare February 10, 2026 12:45

neretin-trike temporarily deployed to internal February 10, 2026 12:45 — with GitHub Actions Inactive

Yakutoc reviewed Feb 10, 2026

View reviewed changes

Yakutoc approved these changes Feb 10, 2026

View reviewed changes

neretin-trike added this pull request to the merge queue Feb 10, 2026

Merged via the queue into dev with commit 0e05e4a Feb 10, 2026
42 checks passed

neretin-trike deleted the PLASMA-5195 branch February 10, 2026 15:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PLASMA-5195: Add `h6` component#2403

PLASMA-5195: Add `h6` component#2403
neretin-trike merged 16 commits intodevfrom
PLASMA-5195

neretin-trike commented Dec 23, 2025 •

edited by Salute-Eva

Loading

Uh oh!

github-actions bot commented Dec 23, 2025

Uh oh!

github-actions bot commented Dec 23, 2025 •

edited

Loading

Uh oh!

TitanKuzmich Feb 10, 2026

Uh oh!

Yakutoc Feb 10, 2026

Uh oh!

neretin-trike Feb 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

neretin-trike commented Dec 23, 2025 • edited by Salute-Eva 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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TitanKuzmich Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Yakutoc Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

neretin-trike Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

neretin-trike commented Dec 23, 2025 •

edited by Salute-Eva

Loading

github-actions bot commented Dec 23, 2025 •

edited

Loading