feat: implemented/added scroll-area component to design-system #1283

babblebey · 2023-06-21T17:31:36Z

What type of PR is this? (check all applicable)

Description

This PR Implements @radix-ui/react-scroll-area primitive to create the ScrollArea component which was in turn implemented in the Select component to allow scrolling of overflowing SelectItems value within the component which wasn't caught by the avoidCollisions prop because of our preferred position value i.e. popper

I had initially intended to address this with the ScrollUpButton/ScrollDownButton sub-component of the already-implemented @radix-ui/react-select primitive, but there was a certain challenge with this approach.

In order for to use the ScrollUpButton and ScrollDownButton components, we'd need to have the position prop of the Select Primitive Content set to the default item-aligned instead of our preferred popper (as seen below)

Code Sample

// components\atoms\Select\select.tsx

<SelectPrimitive.Content
    ref={ref}
    ....
    // 'popper' set as default via component props
    position="popper"
    ...
  >
  <SelectPrimitive.Viewport>
    {children}
  </SelectPrimitive.Viewport>
</SelectPrimitive.Content>

But doing this, i.e. setting the Select Primitive Content position to the default item-aligned it makes the content behave similarly to a native MacOS menu by positioning it relative to the active item as seen below on a responsive layout.

Unlike our current preferred position of popper which positions the content below the select trigger making it behave like a "dropdown menu" or "popover" as seen below on a responsive layout.

At the point when position defaults/sets to item-aligned, the ScrollUpButton and ScrollDownButton components, if implemented displays on demand when the content collides with the top/bottom of the viewport, as seen below on a responsive layout.

But this come at the expense of our preferred positioning value, enforcing the item-aligned which doesn't really seem to look aesthetically good nor great UX-wise.

The Trade-off

I thought it was a better to stick with our preferred position value of popper, coupling it with the ScrollArea component implementation, we let our Select component behave like a dropdown menu, and also improve the usability experience by enhancing its general responsiveness, as seen in screenshot below.

Related Tickets & Documents

fixes #1273

Mobile & Desktop Screenshots/Recordings

Before
screencast-localhost_3000-2023.06.21-17_53_10.webm

After
screencast-localhost_3000-2023.06.21-17_38_47.webm

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

Nothing much, Its important to note that I added a new package though i.e. @radix-ui/react-scroll-area

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-06-21T17:31:40Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`b2a2ba1`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6495a7df2c41d50008f535bb
😎 Deploy Preview	https://deploy-preview-1283--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-06-21T17:31:41Z

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`b2a2ba1`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6495a7dfc2e1c70008d84d29
😎 Deploy Preview	https://deploy-preview-1283--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

npm-shrinkwrap.json
package.json

components/atoms/ScrollArea/scroll-area.tsx

stories/atoms/scroll-area.stories.tsx

OgDev-01

LGTM 🍕🍕

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO <37635083+NsdHSO@users.noreply.github.com>

NsdHSO

LGTM

## [1.54.0-beta.2](v1.54.0-beta.1...v1.54.0-beta.2) (2023-06-26) ### 🍕 Features * add highlight prompt to design system ([#1297](#1297)) ([4a85e74](4a85e74)) * implemented/added scroll-area component to design-system ([#1283](#1283)) ([b7280ab](b7280ab))

github-actions · 2023-06-26T14:16:46Z

🎉 This PR is included in version 1.54.0-beta.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.54.0](v1.53.0...v1.54.0) (2023-06-28) ### 🐛 Bug Fixes * fix yellow color for `<Pill />` component ([#1299](#1299)) ([2f2d9f5](2f2d9f5)) ### 🍕 Features * hide highlights tab components on profiles without highlights ([#1304](#1304)) ([976739f](976739f)) * add `BillBoard` component to design system ([#1306](#1306)) ([1181cfd](1181cfd)) * add `FeaturedHighlightPanel` component to design system ([#1307](#1307)) ([452213c](452213c)) * add `UserCard` component to storybook design system ([#1295](#1295)) ([6867011](6867011)) * add highlight prompt to design system ([#1297](#1297)) ([4a85e74](4a85e74)) * add top users panel component to design system ([#1300](#1300)) ([9c05fec](9c05fec)) * add URL for collaboration requests ([#1305](#1305)) ([b3f8ea5](b3f8ea5)) * allow login flow after selecting repositories to add to insight page (close [#1132](#1132)) ([#1184](#1184)) ([21aaa0b](21aaa0b)) * implemented/added scroll-area component to design-system ([#1283](#1283)) ([b7280ab](b7280ab))

github-actions · 2023-06-28T17:56:45Z

🎉 This PR is included in version 1.54.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.54.0-beta.2](open-sauced/app@v1.54.0-beta.1...v1.54.0-beta.2) (2023-06-26) ### 🍕 Features * add highlight prompt to design system ([#1297](open-sauced/app#1297)) ([4a85e74](open-sauced/app@4a85e74)) * implemented/added scroll-area component to design-system ([#1283](open-sauced/app#1283)) ([b7280ab](open-sauced/app@b7280ab))

## [1.54.0](open-sauced/app@v1.53.0...v1.54.0) (2023-06-28) ### 🐛 Bug Fixes * fix yellow color for `<Pill />` component ([#1299](open-sauced/app#1299)) ([2f2d9f5](open-sauced/app@2f2d9f5)) ### 🍕 Features * hide highlights tab components on profiles without highlights ([#1304](open-sauced/app#1304)) ([976739f](open-sauced/app@976739f)) * add `BillBoard` component to design system ([#1306](open-sauced/app#1306)) ([1181cfd](open-sauced/app@1181cfd)) * add `FeaturedHighlightPanel` component to design system ([#1307](open-sauced/app#1307)) ([452213c](open-sauced/app@452213c)) * add `UserCard` component to storybook design system ([#1295](open-sauced/app#1295)) ([6867011](open-sauced/app@6867011)) * add highlight prompt to design system ([#1297](open-sauced/app#1297)) ([4a85e74](open-sauced/app@4a85e74)) * add top users panel component to design system ([#1300](open-sauced/app#1300)) ([9c05fec](open-sauced/app@9c05fec)) * add URL for collaboration requests ([#1305](open-sauced/app#1305)) ([b3f8ea5](open-sauced/app@b3f8ea5)) * allow login flow after selecting repositories to add to insight page (close [#1132](open-sauced/app#1132)) ([#1184](open-sauced/app#1184)) ([21aaa0b](open-sauced/app@21aaa0b)) * implemented/added scroll-area component to design-system ([#1283](open-sauced/app#1283)) ([b7280ab](open-sauced/app@b7280ab))

babblebey added 3 commits June 21, 2023 17:17

added @radix-ui/react-scroll-area primitive

3f07ab4

feat: created ScrollArea components/atoms

8ffd4fa

refactor!: implemented ScrollArea into Select component

f48e49d

babblebey added 3 commits June 22, 2023 15:30

Merge branch 'beta' into feat--implement-scroll-area

5524c7e

feat: added stories for ScrollArea component

89ac045

fix: corrected file linting

8c3e1e8

babblebey marked this pull request as ready for review June 22, 2023 17:29

babblebey changed the title ~~feat: implemented design-system scroll-area component~~ feat: implemented/added scroll-area component to design-system Jun 22, 2023

github-actions bot reviewed Jun 22, 2023

View reviewed changes

NsdHSO reviewed Jun 23, 2023

View reviewed changes

components/atoms/ScrollArea/scroll-area.tsx Outdated Show resolved Hide resolved

NsdHSO reviewed Jun 23, 2023

View reviewed changes

stories/atoms/scroll-area.stories.tsx Outdated Show resolved Hide resolved

brandonroberts requested a review from OgDev-01 June 23, 2023 13:34

OgDev-01 approved these changes Jun 23, 2023

View reviewed changes

babblebey and others added 2 commits June 23, 2023 15:10

fix: updated components/atoms/ScrollArea/scroll-area.tsx

f569771

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO <37635083+NsdHSO@users.noreply.github.com>

fix: updated stories/atoms/scroll-area.stories.tsx

b2a2ba1

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO <37635083+NsdHSO@users.noreply.github.com>

babblebey requested a review from NsdHSO June 23, 2023 14:15

NsdHSO approved these changes Jun 23, 2023

View reviewed changes

brandonroberts approved these changes Jun 26, 2023

View reviewed changes

brandonroberts merged commit b7280ab into open-sauced:beta Jun 26, 2023

github-actions bot added the released on @beta label Jun 26, 2023

github-actions bot added the released label Jun 28, 2023

This was referenced Jul 17, 2023

Bug: Not all suggestions are being displayed on insight page #1374

Closed

bug: Search component suggestion div is without ScrollArea #1378

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implemented/added scroll-area component to design-system #1283

feat: implemented/added scroll-area component to design-system #1283

babblebey commented Jun 21, 2023 •

edited

Loading

netlify bot commented Jun 21, 2023 •

edited

Loading

netlify bot commented Jun 21, 2023 •

edited

Loading

github-actions bot left a comment

OgDev-01 left a comment

NsdHSO left a comment

github-actions bot commented Jun 26, 2023

github-actions bot commented Jun 28, 2023

feat: implemented/added scroll-area component to design-system #1283

feat: implemented/added scroll-area component to design-system #1283

Conversation

babblebey commented Jun 21, 2023 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Jun 21, 2023 • edited Loading

✅ Deploy Preview for design-insights ready!

netlify bot commented Jun 21, 2023 • edited Loading

✅ Deploy Preview for oss-insights ready!

github-actions bot left a comment

Choose a reason for hiding this comment

PR Compliance Checks

Watched Files

OgDev-01 left a comment

Choose a reason for hiding this comment

NsdHSO left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 26, 2023

github-actions bot commented Jun 28, 2023

babblebey commented Jun 21, 2023 •

edited

Loading

netlify bot commented Jun 21, 2023 •

edited

Loading

netlify bot commented Jun 21, 2023 •

edited

Loading