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.

Sign up for GitHub

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

Jump to bottom

Pass tab object to tab-panel child function #5476

Merged
merged 14 commits into from
Sep 24, 2018
Merged

Pass tab object to tab-panel child function #5476

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a75ffc7
pass tab title to tab-panel child
Mar 6, 2018
52e096c
Update Tab Panel Tests and Readme
Mar 7, 2018
2476ed7
pass entire tab object
Mar 22, 2018
a891e15
Update from master
milesdelliott Sep 13, 2018
3141a88
update to fix tests and bring branch up to date
milesdelliott Sep 13, 2018
2b7d04c
Update package-lock.json
milesdelliott Sep 13, 2018
06a636a
Update package-lock.json
milesdelliott Sep 13, 2018
cbe0374
update package-lock
milesdelliott Sep 13, 2018
a724dbb
Allow passed object to be used as string
milesdelliott Sep 18, 2018
27b4423
Add deprecation warning
milesdelliott Sep 18, 2018
9d01803
Fix double quotes
milesdelliott Sep 18, 2018
67cbccf
Update version for deprecation
milesdelliott Sep 18, 2018
e325847
Mock Deprecated Function
milesdelliott Sep 19, 2018
218fe94
Add detail to usage
milesdelliott Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions components/tab-panel/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ TabPanel

TabPanel is a React component to render an ARIA-compliant TabPanel. It has two sections: a list of tabs, and the view to show when tabs are chosen. When the list of tabs gets focused, the active tab gets focus (the first tab if there isn't one already). Use the arrow keys to navigate between tabs AND select the newly focused tab at the same time.

TabPanel is a Function-as-Children component. The function takes `tabName` as an argument.
TabPanel is a Function-as-Children component. The function takes `tabName` and `tabTitle` as arguments.
Copy link
Member

Choose a reason for hiding this comment

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

Docs need to be updated taking into consideration we pass whole object.


## Usage

Expand Down Expand Up @@ -35,7 +35,7 @@ function MyTabPanel() {
},
] }>
{
( tabName ) => {
( tabName, tabTitle ) => {
return <p>${ tabName }</p>;
}
}
Expand Down Expand Up @@ -93,7 +93,7 @@ The class to add to the active tab

### children

A function which renders the tabviews given the selected tab. The function is passed a `tabName` as an argument.
A function which renders the tabviews given the selected tab. The function is passed a `tabName` and `tabTitle` as arguments.
The element to which the tooltip should anchor.

- Type: (`String`) => `Element`
Expand Down
2 changes: 1 addition & 1 deletion components/tab-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ class TabPanel extends Component {
id={ selectedId + '-view' }
className="components-tab-panel__tab-content"
>
{ this.props.children( selectedTab.name ) }
{ this.props.children( selectedTab ) }
</div>
) }
</div>
Expand Down
82 changes: 56 additions & 26 deletions components/tab-panel/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@ describe( 'TabPanel', () => {
}
>
{
( tabName ) => {
return <p tabIndex="0" className={ tabName + '-view' }>{ tabName }</p>;
( tab ) => {
return (
<div tabIndex="0" className={ tab.name + '-view' }>
<h3 tabIndex="0" className={ tab.name + '-title' }>{ tab.title }</h3>
<p tabIndex="0" className={ tab.name + '-text' }>{ tab.name }</p>
</div>
);
}
}
</TabPanel>
Expand All @@ -46,46 +51,71 @@ describe( 'TabPanel', () => {
const betaTab = wrapper.find( 'button.beta' );
const gammaTab = wrapper.find( 'button.gamma' );

const getAlphaView = () => wrapper.find( 'p.alpha-view' );
const getBetaView = () => wrapper.find( 'p.beta-view' );
const getGammaView = () => wrapper.find( 'p.gamma-view' );
const getAlphaTitle = () => wrapper.find( 'h3.alpha-title' );
const getBetaTitle = () => wrapper.find( 'h3.beta-title' );
const getGammaTitle = () => wrapper.find( 'h3.gamma-title' );

const getAlphaText = () => wrapper.find( 'p.alpha-text' );
const getBetaText = () => wrapper.find( 'p.beta-text' );
const getGammaText = () => wrapper.find( 'p.gamma-text' );

const getActiveTab = () => wrapper.find( 'button.active-tab' );
const getActiveView = () => wrapper.find( 'div[role="tabpanel"]' );
const getActiveText = () => wrapper.find( 'div[role="tabpanel"] p' );
const getActiveTitle = () => wrapper.find( 'div[role="tabpanel"] h3' );

expect( getActiveTab().text() ).toBe( 'Alpha' );
expect( getAlphaView() ).toHaveLength( 1 );
expect( getBetaView() ).toHaveLength( 0 );
expect( getGammaView() ).toHaveLength( 0 );
expect( getActiveView().text() ).toBe( 'alpha' );
expect( getAlphaText() ).toHaveLength( 1 );
expect( getBetaText() ).toHaveLength( 0 );
expect( getGammaText() ).toHaveLength( 0 );
expect( getAlphaTitle() ).toHaveLength( 1 );
expect( getBetaTitle() ).toHaveLength( 0 );
expect( getGammaTitle() ).toHaveLength( 0 );
expect( getActiveTitle().text() ).toBe( 'Alpha' );
expect( getActiveText().text() ).toBe( 'alpha' );

betaTab.simulate( 'click' );
expect( getActiveTab().text() ).toBe( 'Beta' );
expect( getAlphaView() ).toHaveLength( 0 );
expect( getBetaView() ).toHaveLength( 1 );
expect( getGammaView() ).toHaveLength( 0 );
expect( getActiveView().text() ).toBe( 'beta' );
expect( getAlphaText() ).toHaveLength( 0 );
expect( getBetaText() ).toHaveLength( 1 );
expect( getGammaText() ).toHaveLength( 0 );
expect( getAlphaTitle() ).toHaveLength( 0 );
expect( getBetaTitle() ).toHaveLength( 1 );
expect( getGammaTitle() ).toHaveLength( 0 );
expect( getActiveTitle().text() ).toBe( 'Beta' );
expect( getActiveText().text() ).toBe( 'beta' );

betaTab.simulate( 'click' );
expect( getActiveTab().text() ).toBe( 'Beta' );
expect( getAlphaView() ).toHaveLength( 0 );
expect( getBetaView() ).toHaveLength( 1 );
expect( getGammaView() ).toHaveLength( 0 );
expect( getActiveView().text() ).toBe( 'beta' );
expect( getAlphaText() ).toHaveLength( 0 );
expect( getBetaText() ).toHaveLength( 1 );
expect( getGammaText() ).toHaveLength( 0 );
expect( getAlphaTitle() ).toHaveLength( 0 );
expect( getBetaTitle() ).toHaveLength( 1 );
expect( getGammaTitle() ).toHaveLength( 0 );
expect( getActiveTitle().text() ).toBe( 'Beta' );
expect( getActiveText().text() ).toBe( 'beta' );

gammaTab.simulate( 'click' );
expect( getActiveTab().text() ).toBe( 'Gamma' );
expect( getAlphaView() ).toHaveLength( 0 );
expect( getBetaView() ).toHaveLength( 0 );
expect( getGammaView() ).toHaveLength( 1 );
expect( getActiveView().text() ).toBe( 'gamma' );
expect( getAlphaText() ).toHaveLength( 0 );
expect( getBetaText() ).toHaveLength( 0 );
expect( getGammaText() ).toHaveLength( 1 );
expect( getAlphaTitle() ).toHaveLength( 0 );
expect( getBetaTitle() ).toHaveLength( 0 );
expect( getGammaTitle() ).toHaveLength( 1 );
expect( getActiveTitle().text() ).toBe( 'Gamma' );
expect( getActiveText().text() ).toBe( 'gamma' );

alphaTab.simulate( 'click' );
expect( getActiveTab().text() ).toBe( 'Alpha' );
expect( getAlphaView() ).toHaveLength( 1 );
expect( getBetaView() ).toHaveLength( 0 );
expect( getGammaView() ).toHaveLength( 0 );
expect( getActiveView().text() ).toBe( 'alpha' );
expect( getAlphaText() ).toHaveLength( 1 );
expect( getBetaText() ).toHaveLength( 0 );
expect( getGammaText() ).toHaveLength( 0 );
expect( getAlphaTitle() ).toHaveLength( 1 );
expect( getBetaTitle() ).toHaveLength( 0 );
expect( getGammaTitle() ).toHaveLength( 0 );
expect( getActiveTitle().text() ).toBe( 'Alpha' );
expect( getActiveText().text() ).toBe( 'alpha' );
} );
} );
} );