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

fix(TableToolbarAction): adds forwardRef so focus management works as expected #3918

Merged
merged 10 commits into from
Sep 5, 2019
Merged

fix(TableToolbarAction): adds forwardRef so focus management works as expected #3918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
aaa4497
fix(TableToolBarAction): adds forwardsRef to fix focus managment
abbeyhrt Sep 5, 2019
6959007
Merge branch 'master' of https://github.com/carbon-design-system/carb…
abbeyhrt Sep 5, 2019
869b3bd
chore: update snapshot
abbeyhrt Sep 5, 2019
7bedb7c
Merge branch 'master' into modal-user-cant-scroll-3261
tw15egan Sep 5, 2019
f868bfc
Merge branch 'master' into modal-user-cant-scroll-3261
tw15egan Sep 5, 2019
d8aeb37
Merge branch 'master' into modal-user-cant-scroll-3261
tw15egan Sep 5, 2019
805d3b2
chore: update snapshot
abbeyhrt Sep 5, 2019
5db89f0
Merge branch 'master' of https://github.com/carbon-design-system/carb…
abbeyhrt Sep 5, 2019
4dae5ef
Merge branch 'modal-user-cant-scroll-3261' of https://github.com/abbe…
abbeyhrt Sep 5, 2019
52ce5c2
chore: update snapshot
abbeyhrt Sep 5, 2019
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
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -695,7 +695,7 @@ In practice, this looks like the following:
{/* make sure to apply getBatchActionProps so that the bar renders */}
<TableBatchActions {...getBatchActionProps()}>
{/* inside of you batch actinos, you can include selectedRows */}
<TableBatchAction onClick={batchActionClick(selectedRows)}>
<TableBatchAction primaryFocus onClick={batchActionClick(selectedRows)}>
Ghost
</TableBatchAction>
<TableBatchAction onClick={batchActionClick(selectedRows)}>
Expand Down
7 changes: 4 additions & 3 deletions packages/react/src/components/DataTable/TableToolbarAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import PropTypes from 'prop-types';
import React from 'react';
import OverflowMenuItem from '../OverflowMenuItem';

const TableToolbarAction = ({ children, ...rest }) => {
return <OverflowMenuItem itemText={children} {...rest} />;
};
const TableToolbarAction = React.forwardRef(({ children, ...rest }, ref) => {
return <OverflowMenuItem ref={ref} itemText={children} {...rest} />;
});

TableToolbarAction.displayName = 'TableToolbarAction';
TableToolbarAction.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/__tests__/DataTable-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ describe('DataTable', () => {
id="custom-id"
/>
<TableToolbarMenu>
<TableToolbarAction onClick={jest.fn()}>
<TableToolbarAction primaryFocus onClick={jest.fn()}>
Action 1
</TableToolbarAction>
<TableToolbarAction onClick={jest.fn()}>
Expand Down
13 changes: 7 additions & 6 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1816,21 +1816,22 @@ exports[`DataTable should render 1`] = `
}
}
>
<TableToolbarAction
<ForwardRef
onClick={[MockFunction]}
primaryFocus={true}
>
Action 1
</TableToolbarAction>
<TableToolbarAction
</ForwardRef>
<ForwardRef
onClick={[MockFunction]}
>
Action 2
</TableToolbarAction>
<TableToolbarAction
</ForwardRef>
<ForwardRef
onClick={[MockFunction]}
>
Action 3
</TableToolbarAction>
</ForwardRef>
</TableToolbarMenu>
<ForwardRef(Button)
disabled={false}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/stories/with-batch-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default props => (
<TableToolbarContent>
<TableToolbarSearch onChange={onInputChange} />
<TableToolbarMenu>
<TableToolbarAction onClick={() => alert('Alert 1')}>
<TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
Action 1
</TableToolbarAction>
<TableToolbarAction onClick={() => alert('Alert 2')}>
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/DataTable/stories/with-dynamic-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,9 @@ export default props => {
<TableToolbarContent>
<TableToolbarSearch onChange={onInputChange} />
<TableToolbarMenu>
<TableToolbarAction onClick={this.handleOnRowAdd}>
<TableToolbarAction
primaryFocus
onClick={this.handleOnRowAdd}>
Add row
</TableToolbarAction>
<TableToolbarAction onClick={this.handleOnHeaderAdd}>
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/DataTable/stories/with-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ export default props => (
<TableToolbarContent>
<TableToolbarSearch onChange={onInputChange} />
<TableToolbarMenu>
<TableToolbarAction onClick={action('Action 1 Click')}>
<TableToolbarAction
onClick={action('Action 1 Click')}
primaryFocus>
Action 1
</TableToolbarAction>
<TableToolbarAction onClick={action('Action 2 Click')}>
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/components/OverflowMenu/OverflowMenu-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import { withReadme } from 'storybook-readme';
import OverflowMenu from '../OverflowMenu';
import OverflowMenuItem from '../OverflowMenuItem';
import OverflowREADME from './README.md';

const directions = {
'Bottom of the trigger button (bottom)': 'bottom',
Expand Down Expand Up @@ -80,6 +82,7 @@ storiesOf('OverflowMenu', module)
.addDecorator(withKnobs)
.add(
'basic',
withReadme(OverflowREADME, () => <OverflowMenu />),
() => (
<OverflowMenuExample
overflowMenuProps={props.menu()}
Expand All @@ -97,6 +100,7 @@ storiesOf('OverflowMenu', module)
)
.add(
'with links',
withReadme(OverflowREADME, () => <OverflowMenu />),
() => (
<OverflowMenuExample
overflowMenuProps={props.menu()}
Expand All @@ -119,6 +123,7 @@ storiesOf('OverflowMenu', module)
)
.add(
'custom trigger',
withReadme(OverflowREADME, () => <OverflowMenu />),
() => (
<OverflowMenuExample
overflowMenuProps={{
Expand Down