[DST-111]: enhance styling tabs #3250
Conversation
🦋 Changeset detectedLatest commit: 18b229b The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
Codecov Report
@@ Coverage Diff @@
## main #3250 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 112 112
Lines 7088 7108 +20
Branches 319 320 +1
=========================================
+ Hits 7088 7108 +20
|
|
@OsamaAbdellateef Tests are missing! :) |
| tab-1 content | ||
| </Tabs.Item> | ||
| <Tabs.Item title="tab2" key="2"> | ||
| <Tabs.Item key="2" title={'tab2'}> | ||
| tab-2 content |
There was a problem hiding this comment.
can I also set a variant on the <Tab.Panel> ? @OsamaAbdellateef
There was a problem hiding this comment.
no we can't , why should we pass variant for <Tabs.Item> ? @sarahgm
There was a problem hiding this comment.
don't know maybe we need this in future, or how can I set styles on the panel? @OsamaAbdellateef :)
There was a problem hiding this comment.
you can style panel like this :
<Tabs.Item className='bg-red-300'> tab panel content to be styled </Tabs.Item>
so the className here is for tab panel not for the tab button
@sarahgm
There was a problem hiding this comment.
but how would a user than style it? @OsamaAbdellateef
There was a problem hiding this comment.
you mean the tab button ?!
if that what u mean then idk
because className is for tab panel but what if you want to style the tab button ?! then you should make this className reserved for tab button instead of tab panel
what i mean here you only have one className not two then you either chose to style for tab panel or button ?
There was a problem hiding this comment.
Ehhhh Now I'm also confused :D :D @sebald you as author of the issue can you explain to me? :D
There was a problem hiding this comment.
We want the variant to be used by the container, tab, tablist and tabpanel :) Does this help?
|
@sarahgm |
| @@ -1,6 +1,11 @@ | |||
| import { createContext, useContext } from 'react'; | |||
|
|
|||
| export const TabContext = createContext<{ | |||
| classNames: { tabs: string; tab: string }; | |||
| classNames: { | |||
There was a problem hiding this comment.
do we than need this still? @OsamaAbdellateef
There was a problem hiding this comment.
@sarahgm
const classNames = useClassNames({ component: 'Tabs', size, variant, });
<TabContext.Provider value={{ classNames }}>
instead of using useClassNames multiple times
There was a problem hiding this comment.
@sarahgm
is it clear ?
| @@ -10,9 +12,12 @@ export interface TabPanelProps extends AriaTabPanelProps { | |||
| export const TabPanel = ({ state, ...props }: TabPanelProps) => { | |||
| const ref = useRef(null); | |||
| const { tabPanelProps } = useTabPanel(props, state, ref); | |||
| const selectedItemProps = state.selectedItem?.props; | |||
| const { classNames } = useTabContext(); | |||
There was a problem hiding this comment.
I think this we also don't need than, right @OsamaAbdellateef
There was a problem hiding this comment.
@sarahgm
I think we need it, these classNames for styles via theme
No description provided.