Skip to content
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

Merged
merged 24 commits into from
Nov 1, 2023
Merged

initial commit of tabs #56

merged 24 commits into from
Nov 1, 2023

Conversation

seagus
Copy link

@seagus seagus commented Aug 21, 2023

No description provided.

@seagus seagus requested a review from a team August 21, 2023 11:24
@seagus seagus self-assigned this Aug 21, 2023
Sebastian Gustafsson and others added 2 commits August 21, 2023 16:06
@Hartzi
Copy link
Collaborator

Hartzi commented Aug 22, 2023

Ratkaise noi ristiriidat, jotta chromatic buildais

/**
* Tab styles
*/
const TabContainer = styled.div<TabProps>`
Copy link
Collaborator

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ä?

Copy link
Collaborator

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.

Comment on lines 31 to 57
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>
);
Copy link
Collaborator

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

disabled={disabled}
id={componentId}
active={active}
{...restprops}
Copy link
Collaborator

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

/**
* Returned component
*/
export const Tabs = ({ value, children, id, ...restprops }: TabsProps) => {
Copy link
Collaborator

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?

@Hartzi Hartzi self-assigned this Nov 1, 2023
@Hartzi Hartzi merged commit f88a3cc into main Nov 1, 2023
@Hartzi Hartzi deleted the feature/tabs branch November 8, 2023 11:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants