Skip to content

chore(Tabs): added nested Tabs demo#6645

Merged
nicolethoen merged 3 commits intopatternfly:mainfrom
gabipodolnikova:nested-tabs-demo
Dec 6, 2021
Merged

chore(Tabs): added nested Tabs demo#6645
nicolethoen merged 3 commits intopatternfly:mainfrom
gabipodolnikova:nested-tabs-demo

Conversation

@gabipodolnikova
Copy link
Copy Markdown
Contributor

What: Closes #6513

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Nov 24, 2021

Comment thread packages/react-core/src/demos/Tabs.md Outdated
<Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
</Tabs>
</PageSection>
<PageSection isWidthLimited variant={PageSectionVariants.light}>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I don't think you want a light page section variant here. If you remove it, it will make the background of the main section grey like the core demo

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Fixed, thanks!

Copy link
Copy Markdown
Collaborator

@wise-king-sullyman wise-king-sullyman left a comment

Choose a reason for hiding this comment

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

I've commented on a few small things that I think should be addressed.

Additionally, there's a handful of small formatting things that I think should be fixed (for example the multi-line but blockless fat arrow functions). I elected not to litter this PR with comments pointing them each out individually though; as I believe they will be best addressed by just running a formatter on it.

Since the formatters don't see JS in the markdown code blocks (or at least I haven't figured out a way to make them do so) I would suggest either having a separate demo file (like I did in #6661) or just copy/pasting this to/from a temp.js file to do the formatting fixes for you.

Comment thread packages/react-core/src/demos/Tabs.md Outdated
Comment on lines +459 to +460
Label,
LabelGroup,
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Seems like these components aren't being used, can they be removed from the imports?

Comment thread packages/react-core/src/demos/Tabs.md Outdated
Comment on lines +465 to +466
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Same with these.

Comment thread packages/react-core/src/demos/Tabs.md Outdated
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';

TabsOpenNestedDemo = () => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

We're missing the declaration for this variable

@gabipodolnikova
Copy link
Copy Markdown
Contributor Author

Since the formatters don't see JS in the markdown code blocks (or at least I haven't figured out a way to make them do so) I would suggest either having a separate demo file (like I did in #6661) or just copy/pasting this to/from a temp.js file to do the formatting fixes for you.

Cool thanks, I also moved it to a separate file.

@nicolethoen nicolethoen requested a review from mcarrano December 2, 2021 19:20
Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul left a comment

Choose a reason for hiding this comment

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

Looks good!

Copy link
Copy Markdown
Member

@mcarrano mcarrano left a comment

Choose a reason for hiding this comment

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

This looks good to me. @mceledonia can you also take a look?

@mceledonia
Copy link
Copy Markdown

mceledonia commented Dec 3, 2021

These look good, are we able to offer a full width bottom border for these to sit on as an option? I recall seeing that in earlier designs and I think it would be a nice option for these nested tabs, so I want to be sure we don't miss it.

Looks like this is missing from the core version too, so we can also open an issue to update both of these in the future. I don't think it needs to block this.

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.

Nested tabs

8 participants