-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
initial commit of tabs #56
Conversation
Ratkaise noi ristiriidat, jotta chromatic buildais |
src/components/Tab/Tab.tsx
Outdated
/** | ||
* Tab styles | ||
*/ | ||
const TabContainer = styled.div<TabProps>` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mä olin figmassa käyttäny tässä buttonia, jonka olin nimenny TabButtoniksi ja vaihdoin vain tasutaväriä. Eikös sama toimis tässä, niin ei tarvi muuta tyylittelyä tehdä?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tämän tosiaan muuttaisin buttonin text-variantiksi, niin ei tarvi samaa asiaa tehdä kahteen kertaan. Toki taustaväri tarvii siihen muuttaa.
src/components/Tabs/Tabs.stories.tsx
Outdated
const Template: StoryFn<typeof Tabs> = (args) => ( | ||
<Tabs {...args} aria-label='Example tabs component'> | ||
<Tab label='Tab' /> | ||
</Tabs> | ||
); | ||
const ActiveTabTemplate: StoryFn<typeof Tabs> = (args) => ( | ||
<Tabs {...args} aria-label='Example tabs component'> | ||
<Tab active label='Tab' /> | ||
<Tab label='Tab' /> | ||
<Tab label='Tab' /> | ||
</Tabs> | ||
); | ||
const Wrapper = styled.div<TabsProps>` | ||
width: ${pxToRem(400)}; | ||
`; | ||
const ScrollTabTemplate: StoryFn<typeof Tabs> = (args) => ( | ||
<Wrapper> | ||
<Tabs {...args} aria-label='Example tabs component'> | ||
<Tab active label='Tab' /> | ||
<Tab label='Tab' /> | ||
<Tab label='Tab' /> | ||
<Tab label='Tab' /> | ||
<Tab label='Tab' /> | ||
<Tab label='Tab' /> | ||
</Tabs> | ||
</Wrapper> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Näissä vois olla tilanhallinta, jotta aktiivinen välilehti vaihtuisi klikkaamalla
src/components/Tab/Tab.tsx
Outdated
disabled={disabled} | ||
id={componentId} | ||
active={active} | ||
{...restprops} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tyylillisesti vois olla viimeisenä tässä listauksessa
src/components/Tabs/Tabs.tsx
Outdated
/** | ||
* Returned component | ||
*/ | ||
export const Tabs = ({ value, children, id, ...restprops }: TabsProps) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Täältä pitäs varmaan saada onChange ulos myös?
No description provided.