-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(PPDSC-2218): added Scroll storybook scenario #248
Conversation
You can preview these changes on: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good 👍
export const StoryScrollInsideTheContainer = () => ( | ||
<MainContainer> | ||
<StorybookSubHeading> | ||
Scroll elements inside the container using tab key | ||
</StorybookSubHeading> | ||
<Container width="250px" height="100px"> | ||
<Scroll scrollBar controls="static" tabIndex={-1}> | ||
<Flex> | ||
{Array.from({length: 10}, (_, i) => ( | ||
<Box key={getSSRId()} tabIndex={0}>{`Item ${i + 1}`}</Box> | ||
))} | ||
</Flex> | ||
</Scroll> | ||
</Container> | ||
</MainContainer> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
May I suggest using of Button instead of the Box, the approach can be the same as the tags
story but just use the Button component instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
…ponent-story feat(PPDSC-2218): added Scroll storybook scenario
PPDSC-2218
What
Background - why this is needed
Missing scenario in the scroll component storybook showcasing how users can scroll inside the container using tab key.
What did you do
Added a scenario to the scroll component storybook that allow the user to scroll inside of the container using the tab key.
What does the reviewers should expect
A scenario where focus moves to first interactive element inside the container and then through the other interactive elements.
I have done:
I have tested manually:
After:
Who should review this PR:
How to test:
Please check scenario 'scroll-inside-the-container-with-tab-key' in the scroll component storybook