feat(scrollbar) add scrollbar component and story

[drecali]

Material UI does not have a scrollbar component. This Storybook component/story is just a prototype created to test the behavior and styling options. Please let me know if this is correct or I should change anything. It's my first time using Storybook so I'm not sure if I did this correctly.

Here are questions and challenges to keep in mind:

1. Is this Story OK? Is anything missing?
2. Is the code clear enough? Is any refactoring needed for readability?
3. Should the scrollbar always be hidden, or do we need both options? The hidden feature might impact the spacing of other elements because we need to leave empty space for the scrollbar.
4. What is the logic for applying the size? Which elements will get which size? We need to define this well and test edge cases.
5. The hidden scrollbar creates some challenges when combined with the horizontal and vertical orientations. The way I implemented it, the element that has a scrollbar needs CSS for either padding-right or padding-bottom to match the scrollbar size in pixels when the scrollbar is not displayed. When the user hovers on the element, the padding disappears and is replaced by the scrollbar that has the same pixel dimension. As far as I know, there aren't separate settings for vertical or horizontal scrollbars. If we globally create the padding-right and padding-bottom, they will be applied to all elements, even if they don't have a scrollbar. I'm not sure how to detect if an element needs a scrollbar, and apply the correct padding selectively.

It was possible to implement all the design specs in this isolated Storybook example, but it may be challenging to implement this in the actual Lunit Design System library. I think scrollbar logic might need to be applied globally because it's not always possible to know if an element needs a scrollbar or not.

In MUI, Overriding browser defaults is done in:

• themes.ts file in theme.components.MuiCssBaseline.styleOverrides.

[deminoth]

Is this Story OK? Is anything missing?

Your Story is awesome. I love all the controls.

I think scrollbar logic might need to be applied globally because it's not always possible to know if an element needs a scrollbar or not.

Totally agreed. Should we provide a custom Mui theme with the overrides(with other fundamentals like colors)?

[deminoth]

The way I implemented it, the element that has a scrollbar needs CSS for either padding-right or padding-bottom to match the scrollbar size in pixels when the scrollbar is not displayed.

I've checked the Figma scrollbars. I think the scrollbar should not 'push' the content, it just overlap. Please ask Taeryong.

[deminoth]

example in INSIGHT View project
https://github.com/lunit-io/insight-view/blob/36c0eab5010f350df4e5500a6057cfb882d42d8b/client/src/common/theme/theme.ts#L87-L103

GitHub

Build software better, together

GitHub is where people build software. More than 83 million people use GitHub to discover, fork, and contribute to over 200 million projects.

[HyejinYang]

Hello, there were two agendas about the scrollbar in Today's meeting. (2022.09.22. Design system meeting)

1. As you mentioned above, the scrollbar logic should be applied globally using the custom theme.
2. The overlapping should be reconsidered since browser compatibility can cause problems. (Check Mdn's overflow -> overlay)
   So 상엽님 (@deminoth) suggested testing how to use or not use overlay in various ways and talk to 태룡님(@taeryong1324) again.