-
-
Notifications
You must be signed in to change notification settings - Fork 235
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implemented/added scroll-area component to design-system (#1283)
- Loading branch information
Showing
5 changed files
with
345 additions
and
10 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as React from "react"; | ||
| import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; | ||
|
|
||
| import clsx from "clsx"; | ||
|
|
||
| const ScrollArea = React.forwardRef< | ||
| React.ElementRef<typeof ScrollAreaPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <ScrollAreaPrimitive.Root | ||
| ref={ref} | ||
| className={clsx( | ||
| "relative overflow-hidden", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <ScrollViewport> | ||
| {children} | ||
| </ScrollViewport> | ||
| </ScrollAreaPrimitive.Root> | ||
| )); | ||
| ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; | ||
|
|
||
| const ScrollViewport = React.forwardRef< | ||
| React.ElementRef<typeof ScrollAreaPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <> | ||
| <ScrollAreaPrimitive.Viewport | ||
| ref={ref} | ||
| className={clsx( | ||
| "h-full w-full rounded-[inherit]", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </ScrollAreaPrimitive.Viewport> | ||
| <ScrollBar /> | ||
| <ScrollAreaPrimitive.Corner /> | ||
| </> | ||
| )); | ||
| ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName; | ||
|
|
||
| const ScrollBar = React.forwardRef< | ||
| React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>, | ||
| React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar> | ||
| >(({ className, orientation = "vertical", ...props }, ref) => ( | ||
| <ScrollAreaPrimitive.Scrollbar | ||
| ref={ref} | ||
| className={clsx( | ||
| "flex touch-none select-none p-0.5 transition-colors duration-[160ms] ease-out", | ||
| orientation === "vertical" && | ||
| "h-full w-2 border-l border-l-transparent", | ||
| orientation === "horizontal" && | ||
| "h-2 border-t border-t-transparent", | ||
| className | ||
| )} | ||
| orientation={orientation} | ||
| {...props} | ||
| > | ||
| <ScrollAreaPrimitive.Thumb className="relative bg-light-slate-5 flex-1 rounded-full bg-border" /> | ||
| </ScrollAreaPrimitive.Scrollbar> | ||
| )); | ||
| ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName; | ||
|
|
||
| export { ScrollArea, ScrollViewport, ScrollBar }; |
This file contains 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { ComponentStory } from "@storybook/react"; | ||
| import { ScrollArea } from "components/atoms/ScrollArea/scroll-area"; | ||
|
|
||
| import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "components/atoms/Select/select"; | ||
|
|
||
| const storyConfig = { | ||
| title: "Design System/Atoms/ScrollArea", | ||
| component: "ScrollArea" | ||
| }; | ||
|
|
||
| export default storyConfig; | ||
| const ScrollTemplate: ComponentStory<typeof ScrollArea> = (args) => ( | ||
| <ScrollArea | ||
| className="rounded-md border p-4" | ||
| {...args} | ||
| > | ||
| Jokester began sneaking into the castle in the middle of the night and leaving | ||
| jokes all over the place: under the king's pillow, in his soup, even in the | ||
| royal toilet. The king was furious, but he couldn't seem to stop Jokester. And | ||
| then, one day, the people of the kingdom discovered that the jokes left by | ||
| Jokester were so funny that they couldn't help but laugh. And once they | ||
| started laughing, they couldn't stop. | ||
| </ScrollArea> | ||
| ) | ||
|
|
||
| export const Default = ScrollTemplate.bind({}); | ||
|
|
||
| Default.argTypes = { | ||
| type: { | ||
| options: ["auto", "always", "scroll", "hover"], | ||
| control: { type: "select" }, | ||
| } | ||
| } | ||
| Default.args = { | ||
| type: "auto", | ||
| style: { | ||
| height: "200px", | ||
| width: "350px" | ||
| } | ||
| } | ||
|
|
||
| const SelectOptions = Array.from({ length: 50 }).map((value, index, array) => `v1.2.0-beta.${array.length - index}`); | ||
|
|
||
|
|
||
|
|
||
| const ScrollInSelectTemplate: ComponentStory<typeof Select> = (args) => ( | ||
| <Select {...args}> | ||
| <SelectTrigger> | ||
| <SelectValue placeholder="Select a Version" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {SelectOptions.map((option, i) => ( | ||
| <SelectItem value={option} key={i}> | ||
| {option} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| ); | ||
|
|
||
| export const WithSelect = ScrollInSelectTemplate.bind({}); |