Skip to content

PLASMA-8090: refactor Slider structure - #3142

Open
TitanKuzmich wants to merge 2 commits into
devfrom
PLASMA-8090
Open

PLASMA-8090: refactor Slider structure#3142
TitanKuzmich wants to merge 2 commits into
devfrom
PLASMA-8090

Conversation

@TitanKuzmich

@TitanKuzmich TitanKuzmich commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

Core

Slider

  • исправлена верстка компонента: ползунок не выходит за границы контейнера

What/why changed

Before:
image

After:
image

  • исправлена верстка компонента: ползунок не выходит за границы контейнера
📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

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

Summary by CodeRabbit

  • Bug Fixes

    • Fixed horizontal overflow in single and double sliders, ensuring they fit within their containers.
    • Improved slider track and thumb alignment, including more consistent spacing for ticks, range values, and current values.
    • Preserved correct layout behavior for both horizontal and vertical slider orientations.
  • Tests

    • Added coverage to verify that single and double sliders do not create horizontal overflow.

@coderabbitai

coderabbitai Bot commented Sep 7, 2026

Copy link
Copy Markdown

Review Change StackReview Change Stack

📝 Walkthrough

Walkthrough

The slider layout now uses a shared track wrapper with thumb gutters. Single and double sliders apply the wrapper, and a component test verifies that neither creates horizontal overflow.

Changes

Slider overflow layout

Layer / File(s) Summary
Shared track geometry
packages/plasma-new-hope/src/components/Slider/components/SliderBase/SliderBase.styles.ts
Exports thumbGutter and BaseTrackWrapper. The range input now uses the full available width.
Single slider integration
packages/plasma-new-hope/src/components/Slider/components/Single/*
Wraps single-slider track content and applies thumb-gutter spacing to ticks and outer range labels.
Double slider integration and overflow test
packages/plasma-new-hope/src/components/Slider/components/Double/*, packages/plasma-new-hope/src/components/Slider/Slider.component-test.tsx
Wraps double-slider track content and verifies that single and double sliders do not cause horizontal overflow.

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

Suggested reviewers: oki1oki

Merge Risk: ⚪ Minimal · up to e0d73

Slider track geometry now keeps thumbs within container bounds for single and double sliders, with overflow coverage included. No concrete current-head merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the Slider layout and structure refactor. It is concise and related to the main change.
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 6…
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.
✨ 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-8090

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

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Theme Builder app deployed!

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

@github-actions

github-actions Bot commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Documentation preview deployed!

website: https://plasma.sberdevices.ru/pr/pr-3142/
asdk storybook: https://plasma.sberdevices.ru/pr/pr-3142/asdk-storybook/
b2c storybook: https://plasma.sberdevices.ru/pr/pr-3142/b2c-storybook/
giga storybook: https://plasma.sberdevices.ru/pr/pr-3142/giga-storybook/
homeds storybook: https://plasma.sberdevices.ru/pr/pr-3142/homeds-storybook/
new-hope storybook: https://plasma.sberdevices.ru/pr/pr-3142/new-hope-storybook/
web storybook: https://plasma.sberdevices.ru/pr/pr-3142/web-storybook/
sdds-bizcom storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-bizcom-storybook/
sdds-cs storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-cs-storybook/
sdds-dfa storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-dfa-storybook/
sdds-finai storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-finai-storybook/
sdds-insol storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-insol-storybook/
sdds-insol-next storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-insol-next-storybook/
sdds-netology storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-netology-storybook/
sdds-os storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-os-storybook/
sdds-platform-ai storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-platform-ai-storybook/
sdds-sbcom storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-sbcom-storybook/
sdds-scan storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-scan-storybook/
sdds-serv storybook: https://plasma.sberdevices.ru/pr/pr-3142/sdds-serv-storybook/

@TitanKuzmich
TitanKuzmich requested a review from IgorYar September 8, 2026 08:09
@TitanKuzmich
TitanKuzmich marked this pull request as ready for review September 10, 2026 07:27
@TitanKuzmich
TitanKuzmich requested review from vmytnik and removed request for Yeti-or, neretin-trike and shuga2704 September 10, 2026 07:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants