feat(Tearsheet): stacking tearsheet implementation using Stackprovider #8486
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nto tearsheet_initial
…s into tearsheet_initial
…s into tearsheet_initial
✅ Deploy Preview for ibm-products-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for carbon-for-ibm-products ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
amal-k-joy
changed the title
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8486 +/- ##
==========================================
+ Coverage 79.38% 84.69% +5.31%
==========================================
Files 474 383 -91
Lines 20340 17709 -2631
Branches 5006 4158 -848
==========================================
- Hits 16146 14999 -1147
+ Misses 4194 2710 -1484
🚀 New features to boost your workflow:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #8142
This implementation introduces stacking tearsheets using a new composable approach.
Unlike the current tearsheet implementation — where all stacking logic is embedded within the component — the new model externalizes that logic into a dedicated wrapper:
<StackProvider stackStepSize="lg"></StackProvider> //stackStepSize is optional and be defaulted to 1 remIn this setup, the StackProvider encapsulates all stacking behavior.
Each component simply needs to notify the provider when a tearsheet is opened. The component can then consume the calculated stacking information from the context and apply it as needed.
Styling adjustments will still be handled within the component itself, as these may vary between different components.
How did you test and verify your work?
local storybook
PR Checklist
As the author of this PR, before marking ready for review, confirm you:
More details can be found in the pull request section of
our contributing docs.