feat: add indicator bar

propeldata · Oct 1, 2024 · 2e26c6a · 2e26c6a
1 parent de555f8
commit 2e26c6a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/ui-kit/src/components/Tabs/Tabs.stories.tsx b/packages/ui-kit/src/components/Tabs/Tabs.stories.tsx
@@ -4,10 +4,7 @@ import { Tabs } from './Tabs'
 
 const meta: Meta<typeof Tabs> = {
   title: 'Components/Tabs',
-  tags: ['devOnly'],
-  argTypes: {
-    // Define any argTypes here if needed
-  }
+  tags: ['devOnly']
 }
 
 export default meta

diff --git a/packages/ui-kit/src/components/Tabs/Tabs.tsx b/packages/ui-kit/src/components/Tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+// This component is set as a server component
+
 import React from 'react'
 import { Tabs as TabsBase } from '@radix-ui/themes'
 import { Card as CardBase } from '../Card'

diff --git a/packages/ui-kit/src/components/Tabs/TabsCSS.tsx b/packages/ui-kit/src/components/Tabs/TabsCSS.tsx
@@ -16,10 +16,16 @@ export const TabsCSS = () => {
   display: block !important;
   box-sizing: border-box;
   inline-size: 100% !important;
+  position: relative !important;
+  border-radius: var(--propel-radius-5);
 }
 
 .rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger::before {
-  display: none !important;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  border-radius: var(--propel-radius-5);
+  z-index: 1;
 }
 
 .rt-BaseTabList:has(.propel-Card) .rt-TabsTrigger > .rt-TabsTriggerInner {