chore(Tabs): ability to customize scrollArea

sikka-software · May 29, 2024 · 24c96ed · 24c96ed
1 parent bf778e8
commit 24c96ed
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/packages/components/elements/tabs/Tabs.tsx b/packages/components/elements/tabs/Tabs.tsx
@@ -111,12 +111,17 @@ const Tabs = React.forwardRef<
 
 type TabsListProps = React.ComponentPropsWithoutRef<
  typeof TabsPrimitive.List
-> & { scrollable?: boolean };
+> & {
+ scrollable?: boolean;
+ classNames?: {
+ scrollArea?: string;
+ };
+};
 
 const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  TabsListProps
->(({ className, ...props }, ref) => {
+>(({ className, classNames, ...props }, ref) => {
  const { orientation, variant } = React.useContext(TabsContext);
  const [size, setSize] = React.useState(
  (typeof window !== "undefined" && window.innerWidth) || 1200,
@@ -134,9 +139,9 @@ const TabsList = React.forwardRef<
  }
  }, []);
 
- if ((props.scrollable && size < 768) && orientation === "horizontal") {
+ if (props.scrollable && size < 768 && orientation === "horizontal") {
  return (
- <ScrollArea orientation="horizontal">
+ <ScrollArea orientation="horizontal" className={classNames?.scrollArea}>
  <TabsPrimitive.List
  ref={ref}
  className={cn(

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.38.13",
+ "version": "0.38.14",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

diff --git a/packages/storybook/stories/ElementsStories/Tabs.stories.tsx b/packages/storybook/stories/ElementsStories/Tabs.stories.tsx
@@ -36,10 +36,7 @@ export const Default: Story = {
  dir={direction}
  onValueChange={() => setTest(false)}
  >
- <TabsList
- scrollable
- className="hawa-w-full"
- >
+ <TabsList scrollable className="hawa-w-full">
  <TabsTrigger
  value="account"
  showPopover={test}
@@ -53,13 +50,13 @@ export const Default: Story = {
  </TabsTrigger>
  <TabsTrigger value="password">{t("password")}</TabsTrigger>
  <TabsTrigger value="password1">{t("password")}</TabsTrigger>
- <TabsTrigger value="password2">{t("password")}</TabsTrigger>
- <TabsTrigger value="password3">{t("password")}</TabsTrigger>
+ {/* <TabsTrigger value="password2">{t("password")}</TabsTrigger> */}
+ {/* <TabsTrigger value="password3">{t("password")}</TabsTrigger>
  <TabsTrigger value="password4">{t("password")}</TabsTrigger>
  <TabsTrigger value="password5">{t("password")}</TabsTrigger>
  <TabsTrigger value="password6">{t("password")}</TabsTrigger>
- <TabsTrigger value="password7">{t("password")}</TabsTrigger>
- <TabsTrigger
+ <TabsTrigger value="password7">{t("password")}</TabsTrigger> */}
+ {/* <TabsTrigger
  value="settings"
  chipProps={{ label: "", color: "red", size: "small" }}
  >
@@ -70,7 +67,7 @@ export const Default: Story = {
  chipProps={{ label: t("new"), color: "red", size: "small" }}
  >
  {t("display")}
- </TabsTrigger>
+ </TabsTrigger> */}
  </TabsList>
  <TabsContent value="account">
  <Card>