Add Tabs navigation #535
Add Tabs navigation #535
Conversation
🔍 Visual review for your branch is published 🔍Here are the links to: |
lib/ui/tab-navigation.tsx
Outdated
| // base | ||
| "flex items-center justify-center whitespace-nowrap rounded-xl px-3 py-1.5 font-medium transition-all", | ||
| // background | ||
| type === "primary" |
There was a problem hiding this comment.
let's maybe gather all the classes for primary and secondary to an object and inject it all together?
const classes = {
primary: "bg-f1-background-transparent group-hover:bg-f1-background-secondary group-hover:text-f1-foreground",
secondary: "bg-f1-background/60 group-hover:border-f1-border"
}Then we can get it by the type variable
There was a problem hiding this comment.
Done with cva, not sure if it looks cleaner now though that secondary is a boolean 😅
| component: Tabs, | ||
| tags: ["autodocs"], | ||
| argTypes: { | ||
| type: { |
There was a problem hiding this comment.
looks like this control does not work, I don't see it in the storybook of the PR
There was a problem hiding this comment.
I changed this now that I switched secondary to a boolean. Can you check again?
| } | ||
|
|
||
| const tabNavigationVariants = cva( | ||
| "flex items-center justify-start gap-1 overflow-x-auto whitespace-nowrap border-b border-b-f1-border-secondary px-6 py-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", |
There was a problem hiding this comment.
@nlopin not sure what's going on here, if I set the border this way, it is not displayed (that's why I was doing this weird thing with border-transparent etc earlier) 😅
There was a problem hiding this comment.
are you sure border-b does something?
🚪 Why?
Tabs are part of the navigation components for Factorial One. This is one of the components we need for this first stage.
🔑 What?
tab-navigationto ui folder (base component for this one).Tabsto experimental.Screen.Recording.2024-09-18.at.15.22.18.mov
Tabs motion example
Tabs has a
typeprop that changes the style of the tab bar, as there's an option to have two tabs bars in some sections.Tabs with secondary type
🏡 Context
🎨 Tokens
border-secondary, used in non-interactive elements and separators.Note
PD: There is already a Tabs component in our codebase, that is based on the Radix Tab component, which is meant for tab panels. However, our Tabs function more like a Navigation Menu, and that's what I based this component on. This way, it adheres to the navigation role requirements.
We can remove the Tabs one, and adapt the Employee Profile to use this one.