feat(checkbox, radio): добавление переменных для label и hint [DS-17714]

[dHIM24]

• Добавлены typography-токены для label и hint в Checkbox и Radio.

Чек лист

• Задача сформулирована и описана в JIRA
• В названии ветки есть айдишник задачи в JIRA (fix/DS-1234), ссылку прикреплять не надо
• У реквеста осмысленное название feat(...) или fix(...) по conventional commits (https://www.conventionalcommits.org)
• Код покрыт тестами и протестирован в различных браузерах
• Добавленные пропсы добавлены в демки и описаны в документации
• К реквесту добавлен changeset

Код для песочницы:

Checkbox

render(() => {
    return (
        <div
            style={{
                width: document.body.clientWidth < 450 ? '100%' : 320,
                // label
                '--checkbox-label-size-20-font-size': '14px',
                '--checkbox-label-size-20-line-height': '20px',
                '--checkbox-label-size-20-font-weight': 400,

                // hint
                '--checkbox-hint-font-size': '12px',
                '--checkbox-hint-line-height': '16px',
                '--checkbox-hint-font-weight': 400,
            }}
        >
            <Checkbox
                size={20}
                label='Неопределён'
                hint='Hint message'
                indeterminate={true}
                block={true}
            />
            <Gap size={20} />
            <Checkbox size={20} label='Выбран' hint='Hint message' checked={true} block={true} />
            <Gap size={20} />
            <Checkbox
                size={20}
                label='Выбран и недоступен'
                hint='Hint message'
                disabled={true}
                checked={true}
                block={true}
            />
            <Gap size={20} />
            <Checkbox size={20} label='По умолчанию' hint='Hint message' checked={false} block={true} />
            <Gap size={20} />
            <Checkbox
                size={20}
                label='По умолчанию и недоступен'
                hint='Hint message'
                checked={false}
                disabled={true}
                block={true}
            />
        </div>
    );
});

Radio

render(() => {
    return (
        <div
            style={{
                width: document.body.clientWidth < 450 ? '100%' : 320,
                // label
                '--radio-label-size-20-font-size': '14px',
                '--radio-label-size-20-line-height': '20px',
                '--radio-label-size-20-font-weight': 400,

                // hint
                '--radio-hint-font-size': '12px',
                '--radio-hint-line-height': '16px',
                '--radio-hint-font-weight': 400,
            }}
        >
            <Radio size={20} label='Выбрана' hint='Hint message' checked={true} block={true} />
            <Gap size={20} />
            <Radio
                size={20}
                label='Выбрана и недоступна'
                hint='Hint message'
                disabled={true}
                checked={true}
                block={true}
            />
            <Gap size={20} />
            <Radio size={20} label='По умолчанию' hint='Hint message' block={true} />
            <Gap size={20} />
            <Radio
                size={20}
                label='По умолчанию и недоступна'
                hint='Hint message'
                disabled={true}
                block={true}
            />
        </div>
    );
});

[changeset-bot]

🦋 Changeset detected

Latest commit: 5789930

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@alfalab/core-components-checkbox	Minor
@alfalab/core-components-radio	Minor
@alfalab/core-components	Patch
@alfalab/core-components-select	Patch
@alfalab/core-components-custom-picker-button	Patch
@alfalab/core-components-input-autocomplete	Patch
@alfalab/core-components-international-phone-input	Patch
@alfalab/core-components-intl-phone-input	Patch
@alfalab/core-components-picker-button	Patch
@alfalab/core-components-select-with-tags	Patch
@alfalab/core-components-table	Patch
@alfalab/core-components-tabs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coveralls]

Coverage Report for CI Build 29569273162

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 82.22%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• 3 coverage regressions across 1 file.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

3 previously-covered lines in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
packages/status/src/Component.tsx	3	61.54%

---

Coverage Stats

Relevant Lines:	11789
Covered Lines:	9765
Line Coverage:	82.83%
Relevant Branches:	2244
Covered Branches:	1773
Branch Coverage:	79.01%
Branches in Coverage %:	Yes
Coverage Strength:	237.23 hits per line

---

💛 - Coveralls

[github-actions]

Demo build (default)

https://core-ds.github.io/core-components/2273

[github-actions]

Demo build (alfasans)

https://core-ds.github.io/core-components/2273-alfasans

[Oladii]

пока на паузе

Сейчас у нас из коробки для 20х размеров контролов используется 16 лейбл и 14 кэпшен. В этом реквесте вы получаете переменные чтобы их переопределить. Но всё равно у вас остаётся большой отступ до самого чекбокса и между текстом. Поэтому я бы предложил дождаться вот реквеста где мы можем добавить 20й свитч и пропсу которая бы для 20 размера контролов уменьшала лейбл с хинтом и меняла отступы.

Мы подождем)