Skip to content

PLASMA-6472: Add a snap points feature - #3027

Open
vmytnik wants to merge 1 commit into
devfrom
PLASMA-6472.sheet-snap-points
Open

PLASMA-6472: Add a snap points feature#3027
vmytnik wants to merge 1 commit into
devfrom
PLASMA-6472.sheet-snap-points

Conversation

@vmytnik

@vmytnik vmytnik commented Aug 7, 2026

Copy link
Copy Markdown
Collaborator

Core

Sheet

  • добавил функционал Точек остановки (Snap Points)

What/why changed

Summary by CodeRabbit

  • New Features

    • Added configurable snap points to the Sheet component, supporting numeric and CSS-based values.
    • Added optional default snap point and change callback support.
    • Users can drag between snap points, snap to the nearest position, or close the sheet with a downward swipe.
    • Added an interactive example demonstrating multiple snap points.
  • Documentation

    • Added guidance and examples for configuring Sheet snap points.
📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/plasma-asdk@0.387.0-canary.3027.31176041121.0
npm install @salutejs/plasma-b2c@1.629.0-canary.3027.31176041121.0
npm install @salutejs/plasma-colors@0.18.0-canary.3027.31176041121.0
npm install @salutejs/plasma-core@1.236.0-canary.3027.31176041121.0
npm install @salutejs/plasma-giga@0.356.0-canary.3027.31176041121.0
npm install @salutejs/plasma-homeds@0.356.0-canary.3027.31176041121.0
npm install @salutejs/plasma-hope@1.383.0-canary.3027.31176041121.0
npm install @salutejs/plasma-icons@1.245.0-canary.3027.31176041121.0
npm install @salutejs/plasma-new-hope@0.373.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens@1.147.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens-b2b@1.61.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens-b2c@0.72.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens-core@0.9.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens-web@1.76.0-canary.3027.31176041121.0
npm install @salutejs/plasma-typo@0.49.0-canary.3027.31176041121.0
npm install @salutejs/plasma-web@1.631.0-canary.3027.31176041121.0
npm install @salutejs/sdds-bizcom@0.361.0-canary.3027.31176041121.0
npm install @salutejs/sdds-cs@0.365.0-canary.3027.31176041121.0
npm install @salutejs/sdds-dfa@0.359.0-canary.3027.31176041121.0
npm install @salutejs/sdds-finai@0.352.0-canary.3027.31176041121.0
npm install @salutejs/sdds-insol@0.356.0-canary.3027.31176041121.0
npm install @salutejs/sdds-insol-next@0.355.0-canary.3027.31176041121.0
npm install @salutejs/sdds-netology@0.360.0-canary.3027.31176041121.0
npm install @salutejs/sdds-os@0.31.0-canary.3027.31176041121.0
npm install @salutejs/sdds-platform-ai@0.360.0-canary.3027.31176041121.0
npm install @salutejs/sdds-sbcom@0.361.0-canary.3027.31176041121.0
npm install @salutejs/sdds-scan@0.359.0-canary.3027.31176041121.0
npm install @salutejs/sdds-serv@0.360.0-canary.3027.31176041121.0
npm install @salutejs/core-themes@0.37.0-canary.3027.31176041121.0
npm install @salutejs/plasma-themes@0.59.0-canary.3027.31176041121.0
npm install @salutejs/sdds-themes@0.74.0-canary.3027.31176041121.0
npm install @salutejs/sdds-api-tests@0.18.0-canary.3027.31176041121.0
npm install @salutejs/plasma-cy-utils@0.166.0-canary.3027.31176041121.0
npm install @salutejs/plasma-sb-utils@0.237.0-canary.3027.31176041121.0
npm install @salutejs/plasma-tokens-utils@0.57.0-canary.3027.31176041121.0
# or 
yarn add @salutejs/plasma-asdk@0.387.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-b2c@1.629.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-colors@0.18.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-core@1.236.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-giga@0.356.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-homeds@0.356.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-hope@1.383.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-icons@1.245.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-new-hope@0.373.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens@1.147.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens-b2b@1.61.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens-b2c@0.72.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens-core@0.9.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens-web@1.76.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-typo@0.49.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-web@1.631.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-bizcom@0.361.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-cs@0.365.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-dfa@0.359.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-finai@0.352.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-insol@0.356.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-insol-next@0.355.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-netology@0.360.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-os@0.31.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-platform-ai@0.360.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-sbcom@0.361.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-scan@0.359.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-serv@0.360.0-canary.3027.31176041121.0
yarn add @salutejs/core-themes@0.37.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-themes@0.59.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-themes@0.74.0-canary.3027.31176041121.0
yarn add @salutejs/sdds-api-tests@0.18.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-cy-utils@0.166.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-sb-utils@0.237.0-canary.3027.31176041121.0
yarn add @salutejs/plasma-tokens-utils@0.57.0-canary.3027.31176041121.0

@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Changes

Sheet snap-point support

Layer / File(s) Summary
Snap-point contracts and resolution utilities
packages/plasma-new-hope/src/components/Sheet/Sheet.types.ts, packages/plasma-new-hope/src/components/Sheet/utils/*, packages/plasma-new-hope/src/components/Sheet/index.ts
The public API now defines snap-point values, configuration, callbacks, and utilities for resolving and sorting snap points.
Snap-point swipe state and gestures
packages/plasma-new-hope/src/components/Sheet/hooks/useSheetSwipe.ts
useSheetSwipe tracks snap points, changes sheet height during touch movement, snaps to the nearest point, and closes below the minimum threshold.
Sheet wiring and snap-point layout
packages/plasma-new-hope/src/components/Sheet/Sheet.tsx, packages/plasma-new-hope/src/components/Sheet/Sheet.styles.ts
Sheet passes snap-point state to the swipe hook and styled content. Snap-enabled content uses stretch alignment, flex growth, and zero minimum height.
Snap-point documentation and example
packages/plasma-new-hope/src/components/Sheet/Sheet.template-doc.mdx, packages/plasma-new-hope/src/examples/components/Sheet/Sheet.stories.tsx
Documentation and Storybook now describe and demonstrate three configurable snap points.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Sheet
  participant useSheetSwipe
  participant SnapPointUtils
  participant StyledSheetContent
  Sheet->>useSheetSwipe: pass snapPoints and defaultSnapPoint
  useSheetSwipe->>SnapPointUtils: resolve and sort snap points
  Sheet->>useSheetSwipe: forward touch movement
  useSheetSwipe->>StyledSheetContent: apply bounded sheet height
  useSheetSwipe-->>Sheet: report onSnapPointChange
Loading

Suggested reviewers: neretin-trike, yakutoc

🚥 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.
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 and concisely describes the main change: adding snap points functionality to the Sheet component.
✨ 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-6472.sheet-snap-points

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 Aug 7, 2026

Copy link
Copy Markdown
Contributor

Theme Builder app deployed!

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/plasma-new-hope/src/components/Sheet/hooks/useSheetSwipe.ts`:
- Around line 57-59: Normalize the initial `activeSnapPoint` in `useSheetSwipe`
so `defaultSnapPoint` is used only when it belongs to `snapPoints`; otherwise
use the first snap point. Apply this same membership-based fallback during
reopening and all related state synchronization paths around
`setActiveSnapPoint`, keeping the rendered point and stored state consistent.
- Around line 152-162: Update the isSnapEnabled touch-move logic in
useSheetSwipe so upward gestures are intercepted only when a larger resolved
snap height exists. Clamp nextHeight to the largest effective snap height, and
allow the browser’s native scrolling when the sheet is already at that height;
preserve existing handling for downward gestures and valid expansion.
- Around line 196-210: Update the close-threshold check in the snap-enabled
swipe logic around getSortedSnapPoints to use the unclamped height,
startHeight.current - offsetY, instead of currentHeight, while retaining the
clamped value for nearest snap-point selection and height application.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 00ef2ee6-465a-4546-b8ff-5428eb4a76c7

📥 Commits

Reviewing files that changed from the base of the PR and between 9549268 and 206169e.

📒 Files selected for processing (9)
  • packages/plasma-new-hope/src/components/Sheet/Sheet.styles.ts
  • packages/plasma-new-hope/src/components/Sheet/Sheet.template-doc.mdx
  • packages/plasma-new-hope/src/components/Sheet/Sheet.tsx
  • packages/plasma-new-hope/src/components/Sheet/Sheet.types.ts
  • packages/plasma-new-hope/src/components/Sheet/hooks/useSheetSwipe.ts
  • packages/plasma-new-hope/src/components/Sheet/index.ts
  • packages/plasma-new-hope/src/components/Sheet/utils/index.ts
  • packages/plasma-new-hope/src/components/Sheet/utils/resolveSnapPoint.ts
  • packages/plasma-new-hope/src/examples/components/Sheet/Sheet.stories.tsx

Comment thread packages/plasma-new-hope/src/components/Sheet/hooks/useSheetSwipe.ts Outdated
Comment thread packages/plasma-new-hope/src/components/Sheet/hooks/useSheetSwipe.ts Outdated
@github-actions

github-actions Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Documentation preview deployed!

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

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.

1 participant