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

Tabs technical design NDS-187 #5

Merged
merged 4 commits into from
Apr 22, 2022
Merged

Tabs technical design NDS-187 #5

merged 4 commits into from
Apr 22, 2022

Conversation

JRebella
Copy link
Contributor

@JRebella JRebella added the WIP Work in progress label Apr 14, 2022
@JRebella JRebella self-assigned this Apr 14, 2022
@sh0ji sh0ji requested a review from Apatil15 April 18, 2022 18:26
Copy link
Contributor

@sh0ji sh0ji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great stuff. My only real concerns are about the value prop.

accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
accepted/0003-component-tabs.md Outdated Show resolved Hide resolved

### Tab

`<Tab>` extends the `React.ComponentPropsWithRef<'button'>` interface with `role="tab"`, `aria-selected="true/false"` and `aria-controls="tab-ID"` (an autogenerated unique prefix might be needed to support the case were there are multiple tab components rendered at the same time and share tab names) attributes. The values for `aria-selected` and `aria-controls` should be calculated using the state delivered by the `Tabs` wrapper
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implementation note: we probably want https://wwnorton.atlassian.net/browse/NDS-22 to be done before we finalize this since the autogenerated ids should be generated by that solution.

accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
accepted/0003-component-tabs.md Outdated Show resolved Hide resolved
@JRebella JRebella requested a review from sh0ji April 21, 2022 16:22
Copy link
Contributor

@sh0ji sh0ji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for all your work on this.

I'm going to merge it but thought of one question that we can resolve during implementation: what should happen if the <TabList> or <TabPanels> containers aren't included? I assume they're required for styling.

For instance:

<Tabs>
  <Tab>Cats</Tab>
  <Tab>Dogs</Tab>
  <Tab>Horses</Tab>
  <TabPanel>Cats content</TabPanel>
  <TabPanel>Dogs content</TabPanel>
  <TabPanel>Horses content</TabPanel>
</Tabs>

@sh0ji sh0ji merged commit a41d911 into main Apr 22, 2022
@sh0ji sh0ji deleted the tabs-juan branch April 22, 2022 19:07
@sh0ji sh0ji mentioned this pull request Aug 23, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
WIP Work in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants