PLASMA-7950: TextField-like components titleCaption align by vmytnik · Pull Request #3133 · salute-developers/plasma

vmytnik · 2026-09-03T16:38:46Z

Core

Combobox, DatePicker, DateTimePicker, InformationWrapper, Range, Select, TextArea, TextField, TextFieldSlider

добавлен токен для выравнивания titleCaption

What/why changed

добавлен токен для выравнивания titleCaption

Summary by CodeRabbit

New Features
- Added customizable title-caption alignment across text fields, text areas, selects, comboboxes, date pickers, ranges, sliders, and related components.
- Added component-specific styling tokens to control caption alignment consistently.
- Components now default to centered title captions when no custom alignment is provided.

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/plasma-asdk@0.393.0-canary.3133.33869327172.0
npm install @salutejs/plasma-b2c@1.635.0-canary.3133.33869327172.0
npm install @salutejs/plasma-colors@0.23.0-canary.3133.33869327172.0
npm install @salutejs/plasma-core@1.242.0-canary.3133.33869327172.0
npm install @salutejs/plasma-giga@0.362.0-canary.3133.33869327172.0
npm install @salutejs/plasma-homeds@0.362.0-canary.3133.33869327172.0
npm install @salutejs/plasma-hope@1.389.0-canary.3133.33869327172.0
npm install @salutejs/plasma-icons@1.250.0-canary.3133.33869327172.0
npm install @salutejs/plasma-new-hope@0.379.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens@1.153.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens-b2b@1.66.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens-b2c@0.77.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens-core@0.14.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens-web@1.81.0-canary.3133.33869327172.0
npm install @salutejs/plasma-typo@0.54.0-canary.3133.33869327172.0
npm install @salutejs/plasma-web@1.637.0-canary.3133.33869327172.0
npm install @salutejs/sdds-bizcom@0.367.0-canary.3133.33869327172.0
npm install @salutejs/sdds-cs@0.371.0-canary.3133.33869327172.0
npm install @salutejs/sdds-dfa@0.365.0-canary.3133.33869327172.0
npm install @salutejs/sdds-finai@0.358.0-canary.3133.33869327172.0
npm install @salutejs/sdds-icons@0.7.0-canary.3133.33869327172.0
npm install @salutejs/sdds-insol@0.362.0-canary.3133.33869327172.0
npm install @salutejs/sdds-insol-next@0.361.0-canary.3133.33869327172.0
npm install @salutejs/sdds-netology@0.366.0-canary.3133.33869327172.0
npm install @salutejs/sdds-os@0.37.0-canary.3133.33869327172.0
npm install @salutejs/sdds-platform-ai@0.366.0-canary.3133.33869327172.0
npm install @salutejs/sdds-sbcom@0.367.0-canary.3133.33869327172.0
npm install @salutejs/sdds-scan@0.365.0-canary.3133.33869327172.0
npm install @salutejs/sdds-serv@0.366.0-canary.3133.33869327172.0
npm install @salutejs/core-themes@0.42.0-canary.3133.33869327172.0
npm install @salutejs/plasma-themes@0.64.0-canary.3133.33869327172.0
npm install @salutejs/sdds-themes@0.80.0-canary.3133.33869327172.0
npm install @salutejs/sdds-api-tests@0.24.0-canary.3133.33869327172.0
npm install @salutejs/plasma-cy-utils@0.172.0-canary.3133.33869327172.0
npm install @salutejs/plasma-sb-utils@0.243.0-canary.3133.33869327172.0
npm install @salutejs/plasma-tokens-utils@0.62.0-canary.3133.33869327172.0
# or 
yarn add @salutejs/plasma-asdk@0.393.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-b2c@1.635.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-colors@0.23.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-core@1.242.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-giga@0.362.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-homeds@0.362.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-hope@1.389.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-icons@1.250.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-new-hope@0.379.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens@1.153.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens-b2b@1.66.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens-b2c@0.77.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens-core@0.14.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens-web@1.81.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-typo@0.54.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-web@1.637.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-bizcom@0.367.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-cs@0.371.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-dfa@0.365.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-finai@0.358.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-icons@0.7.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-insol@0.362.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-insol-next@0.361.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-netology@0.366.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-os@0.37.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-platform-ai@0.366.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-sbcom@0.367.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-scan@0.365.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-serv@0.366.0-canary.3133.33869327172.0
yarn add @salutejs/core-themes@0.42.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-themes@0.64.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-themes@0.80.0-canary.3133.33869327172.0
yarn add @salutejs/sdds-api-tests@0.24.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-cy-utils@0.172.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-sb-utils@0.243.0-canary.3133.33869327172.0
yarn add @salutejs/plasma-tokens-utils@0.62.0-canary.3133.33869327172.0

coderabbitai · 2026-09-03T16:40:28Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 910474a6-0d84-40e7-a2a3-a2a9dd708416

📥 Commits

Reviewing files that changed from the base of the PR and between f153b83 and 46f031b.

📒 Files selected for processing (19)

packages/plasma-new-hope/src/components/Combobox/Combobox.tokens.ts
packages/plasma-new-hope/src/components/Combobox/ui/Target/Target.styles.ts
packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts
packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts
packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts
packages/plasma-new-hope/src/components/DateTimePicker/DateTimePicker.tokens.ts
packages/plasma-new-hope/src/components/DateTimePicker/ui/Input/Input.styles.ts
packages/plasma-new-hope/src/components/InformationWrapper/InformationWrapper.styles.ts
packages/plasma-new-hope/src/components/InformationWrapper/InformationWrapper.tokens.ts
packages/plasma-new-hope/src/components/Range/Range.tokens.ts
packages/plasma-new-hope/src/components/Range/ui/InformationWrapper/InformationWrapper.styles.ts
packages/plasma-new-hope/src/components/Select/Select.tokens.ts
packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx
packages/plasma-new-hope/src/components/TextArea/TextArea.styles.ts
packages/plasma-new-hope/src/components/TextArea/TextArea.tokens.ts
packages/plasma-new-hope/src/components/TextField/TextField.styles.ts
packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts
packages/plasma-new-hope/src/components/TextFieldSlider/TextFieldSlider.tokens.ts
packages/plasma-new-hope/src/components/TextFieldSlider/ui/Input/Input.styles.ts

🚧 Files skipped from review as they are similar to previous changes (3)

packages/plasma-new-hope/src/components/TextFieldSlider/TextFieldSlider.tokens.ts
packages/plasma-new-hope/src/components/InformationWrapper/InformationWrapper.styles.ts
packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

The change adds titleCaptionAlignItems tokens across TextField-based components and information wrappers. Styles now use token-driven cross-axis alignment with center as the fallback.

Changes

Title-caption alignment

Layer / File(s)	Summary
TextField caption layout `packages/plasma-new-hope/src/components/TextField/`, `packages/plasma-new-hope/src/components/TextArea/`, `packages/plasma-new-hope/src/components/TextFieldSlider/*`	TextField, TextArea, and TextFieldSlider add `titleCaptionAlignItems` tokens. Their caption wrappers use the token with a `center` fallback.
Information wrapper caption layout `packages/plasma-new-hope/src/components/InformationWrapper/`, `packages/plasma-new-hope/src/components/Range/`	InformationWrapper and Range add title-caption alignment tokens and apply them with a `center` fallback.
Composite component token wiring `packages/plasma-new-hope/src/components/Combobox/`, `packages/plasma-new-hope/src/components/DatePicker/`, `packages/plasma-new-hope/src/components/DateTimePicker/`, `packages/plasma-new-hope/src/components/Select/`	Composite components add component-specific CSS tokens and map them to TextField or Range styles. Each mapping uses `center` when the token is undefined.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 46f03

The new token preserves centered defaults and correctly controls title-caption cross-axis alignment. No actionable merge risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the ticket and the main change: adding titleCaption alignment support across TextField-like components.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch PLASMA-7950.textfield-titlecaption-align

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-09-04T11:57:42Z

Theme Builder app deployed!

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

github-actions · 2026-09-04T14:17:11Z

Documentation preview deployed!

TitanKuzmich · 2026-09-10T07:16:28Z

Точно горизонтальное, а не вертикальное выравнивание нужно?

vmytnik requested review from TitanKuzmich, Yakutoc, Yeti-or, neretin-trike and shuga2704 as code owners September 3, 2026 16:38

vmytnik temporarily deployed to internal September 3, 2026 16:38 — with GitHub Actions Inactive

vmytnik force-pushed the PLASMA-7950.textfield-titlecaption-align branch from f153b83 to 0036456 Compare September 4, 2026 11:43

vmytnik temporarily deployed to internal September 4, 2026 11:43 — with GitHub Actions Inactive

Yakutoc assigned vmytnik Sep 8, 2026

Yakutoc requested review from IgorYar and removed request for Yakutoc, Yeti-or and neretin-trike September 8, 2026 04:14

feat(new-hope): TextField-like components titleCaption align

46f031b

vmytnik force-pushed the PLASMA-7950.textfield-titlecaption-align branch from 0036456 to 46f031b Compare September 11, 2026 08:05

vmytnik deployed to internal September 11, 2026 08:05 — with GitHub Actions Active

Navigation Menu

Uh oh!

PLASMA-7950: TextField-like components titleCaption align - #3133

PLASMA-7950: TextField-like components titleCaption align#3133
vmytnik wants to merge 1 commit into
devfrom
PLASMA-7950.textfield-titlecaption-align

vmytnik commented Sep 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 3, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

github-actions Bot commented Sep 4, 2026

Uh oh!

github-actions Bot commented Sep 4, 2026

Uh oh!

TitanKuzmich commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

vmytnik commented Sep 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Core

Combobox, DatePicker, DateTimePicker, InformationWrapper, Range, Select, TextArea, TextField, TextFieldSlider

What/why changed

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Sep 4, 2026

Uh oh!

github-actions Bot commented Sep 4, 2026

Uh oh!

TitanKuzmich commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vmytnik commented Sep 3, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 3, 2026 •

edited

Loading