-
Notifications
You must be signed in to change notification settings - Fork 526
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[UnderlineNav2]: Follow new storybook documentation format & improvem…
…ents (#2485) * Follow new storybook doc format * add example stories * add subcomponent * improvement on stories * add a helper for icon selection on controls * remove theme and style wrappers * don't worry calling overflowEffect function if the navwidth is 0 * add some interaction stories * disable chromatic snapshot * do not rely on storybook's viewport resize * refactor some interaction tests * wait after resizing the window * add changeset * rename stories * update keyboard navigation interaction tests
- Loading branch information
1 parent
8c764f6
commit e2a2d78
Showing
8 changed files
with
510 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@primer/react': patch | ||
| --- | ||
|
|
||
| UnderlineNav2: Only run overflow layout function when nav item has a width |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react' | ||
| import {Meta, Story} from '@storybook/react' | ||
| import {UnderlineNav} from './index' | ||
| import {UnderlineNavItem} from './UnderlineNavItem' | ||
| import {CodeIcon, GitPullRequestIcon, PeopleIcon} from '@primer/octicons-react' | ||
| import {OcticonArgType} from '../utils/story-helpers' | ||
|
|
||
| export default { | ||
| title: 'Drafts/Components/UnderlineNav/UnderlineNav.Item', | ||
| component: UnderlineNavItem, | ||
| decorators: [ | ||
| Story => { | ||
| return ( | ||
| <UnderlineNav aria-label="Repository"> | ||
| <Story /> | ||
| </UnderlineNav> | ||
| ) | ||
| } | ||
| ], | ||
| parameters: { | ||
| controls: { | ||
| expanded: true, | ||
| exclude: ['as'] | ||
| } | ||
| }, | ||
| args: { | ||
| children: 'Code', | ||
| counter: '12K', | ||
| icon: PeopleIcon | ||
| }, | ||
| argTypes: { | ||
| children: { | ||
| type: 'string' | ||
| }, | ||
| counter: { | ||
| type: 'string' | ||
| }, | ||
| icon: OcticonArgType([CodeIcon, GitPullRequestIcon, PeopleIcon]) | ||
| } | ||
| } as Meta<typeof UnderlineNavItem> | ||
|
|
||
| // UnderlineNav.Item controls only work on the "Docs" tab. Because UnderlineNav children don't get re-rendered when they are changed. | ||
| // This is an intentional behaviour of UnderlineNav for keeping a selected menu item visible. I will update here once I find a better solution. | ||
| // In the meantime, you can use the "Docs" tab to see the controls. | ||
|
|
||
| export const Playground: Story = args => { | ||
| return ( | ||
| <UnderlineNavItem selected {...args}> | ||
| {args.children} | ||
| </UnderlineNavItem> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react' | ||
| import {Meta, Story} from '@storybook/react' | ||
| import {UnderlineNav} from './index' | ||
| import {UnderlineNavItem} from './UnderlineNavItem' | ||
|
|
||
| const excludedControlKeys = ['sx', 'as', 'variant', 'align', 'afterSelect'] | ||
|
|
||
| export default { | ||
| title: 'Drafts/Components/UnderlineNav', | ||
| component: UnderlineNav, | ||
| subcomponents: {UnderlineNavItem}, | ||
| parameters: { | ||
| controls: { | ||
| expanded: true, | ||
| // variant and size are developed in the first design iteration but then they are abondened. | ||
| // Still keeping them on the source code for future reference but they are not exposed as props. | ||
| exclude: excludedControlKeys | ||
| } | ||
| }, | ||
| argTypes: { | ||
| 'aria-label': { | ||
| type: { | ||
| name: 'string' | ||
| } | ||
| }, | ||
| loadingCounters: { | ||
| control: { | ||
| type: 'boolean' | ||
| } | ||
| } | ||
| }, | ||
| args: { | ||
| 'aria-label': 'Repository', | ||
| loadingCounters: false | ||
| } | ||
| } as Meta<typeof UnderlineNav> | ||
|
|
||
| export const Playground: Story = args => { | ||
| const children = ['Code', 'Pull requests', 'Actions', 'Projects', 'Wiki'] | ||
| return ( | ||
| <UnderlineNav {...args}> | ||
| {children.map((child: string, index: number) => ( | ||
| <UnderlineNavItem key={index} href="#" selected={index === 0}> | ||
| {child} | ||
| </UnderlineNavItem> | ||
| ))} | ||
| </UnderlineNav> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.