Skip to content

Resizing is not accessible if keyboard navigation is not present #2

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

Merged
merged 4 commits into from
Jul 29, 2021
Merged

Resizing is not accessible if keyboard navigation is not present #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d909f5
Make resizable require keyboardNavigation
interactivellama Jul 28, 2021
99e3b71
Remove non fixed header example
interactivellama Jul 28, 2021
6456300
Rename variables in examples
interactivellama Jul 29, 2021
d809d20
Limit resizable use to fixed layout and header
interactivellama Jul 29, 2021
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 components/data-table/__examples__/interactive-elements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ class Example extends React.Component {
id="DataTableExample-column-resizable"
fixedLayout
fixedHeader
Resizable
resizable
keyboardNavigation
>
{columns}
Expand Down
217 changes: 130 additions & 87 deletions components/data-table/__examples__/resizable-columns.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,20 @@ import React from 'react';
import DataTable from '~/components/data-table'; // `~` is replaced with design-system-react at runtime
import DataTableColumn from '~/components/data-table/column';
import DataTableCell from '~/components/data-table/cell';
import DataTableInteractiveLink from '~/components/data-table/interactive-link';
import IconSettings from '~/components/icon-settings';

const CustomDataTableCell = ({ children, ...props }) => (
<DataTableCell {...props}>
<a
href="#"
onClick={(event) => {
event.preventDefault();
}}
>
{children}
</a>
<DataTableInteractiveLink
onClick={(event) => {
event.preventDefault();
}}>
{children}
</DataTableInteractiveLink>
</DataTableCell>
);
CustomDataTableCell.displayName = DataTableCell.displayName;
CustomDataTableCell.displayName = CustomDataTableCell.displayName;

const columns = [
<DataTableColumn
Expand Down Expand Up @@ -50,37 +49,131 @@ const columns = [
class Example extends React.Component {
static displayName = 'DataTableExample';

state = {
state = {
sortColumn: 'opportunityName',
sortColumnDirection: {
opportunityName: 'asc',
},
items: [
{
id: '8IKZHZZV80',
opportunityName: 'Cloudhub',
accountName: 'Cloudhub',
closeDate: '4/14/2015',
id: '896a6a60',
opportunityName: 'Acme - 1,200 Widgets',
accountName: 'Acme',
closeDate: '4/10/15',
stage: 'Value Proposition',
confidence: '70%',
amount: '$25,000,000',
contact: 'jrogers@acme.com',
},
{
id: '44da9dcd',
opportunityName: 'Acme - 200 Widgets',
accountName: 'Acme',
closeDate: '1/31/15',
stage: 'Prospecting',
confidence: '20%',
amount: '$25k',
contact: 'jrogers@cloudhub.com',
confidence: '30%',
amount: '$5,000,000',
contact: 'bob@acme.com',
},
{
id: 'f988a721',
opportunityName: 'salesforce.com - 1,000 Widgets',
accountName: 'salesforce.com',
closeDate: '1/31/15 3:45PM',
stage: 'Id. Decision Makers',
confidence: '60%',
amount: '$25,000',
contact: 'nathan@salesforce.com',
},
{
id: '5GJOOOPWU7',
opportunityName: 'Cloudhub + Anypoint Connectors',
accountName: 'Cloudhub',
closeDate: '4/14/2015',
id: 'd7679cdd',
opportunityName: 'Acme - 800 Widgets',
accountName: 'Acme',
closeDate: '6/11/18',
stage: 'Value Proposition',
confidence: '85%',
amount: '$970,000',
contact: 'jrogers@acme.com',
},
{
id: '0085f7a0',
opportunityName: 'Acme - 744 Widgets',
accountName: 'Acme',
closeDate: '4/15/17',
stage: 'Prospecting',
confidence: '20%',
amount: '$25k',
contact: 'jrogers@cloudhub.com',
confidence: '56%',
amount: '$3,110,000',
contact: 'bob@acme.com',
},
{
id: 'b7acc778',
opportunityName: 'salesforce.com - 847 Widgets',
accountName: 'salesforce.com',
closeDate: '5/23/18 1:02PM',
stage: 'Id. Decision Makers',
confidence: '62%',
amount: '$18,000',
contact: 'nathan@salesforce.com',
},
{
id: '8IKZHZZV81',
opportunityName: 'Cloudhub',
accountName: 'Cloudhub',
closeDate: '4/14/2015',
id: '17991de5',
opportunityName: 'Acme - 1,621 Widgets',
accountName: 'Acme',
closeDate: '5/16/17',
stage: 'Value Proposition',
confidence: '70%',
amount: '$23,600,000',
contact: 'jrogers@acme.com',
},
{
id: '09b2cee9',
opportunityName: 'Acme - 430 Widgets',
accountName: 'Acme',
closeDate: '6/12/18',
stage: 'Prospecting',
confidence: '20%',
amount: '$25k',
contact: 'jrogers@cloudhub.com',
confidence: '42%',
amount: '$4,222,222',
contact: 'bob@acme.com',
},
{
id: 'd0035700',
opportunityName: 'salesforce.com - 677 Widgets',
accountName: 'salesforce.com',
closeDate: '7/21/17 10:11AM',
stage: 'Id. Decision Makers',
confidence: '42%',
amount: '$24,200',
contact: 'nathan@salesforce.com',
},
{
id: '4a526f0c',
opportunityName: 'Acme - 1,444 Widgets',
accountName: 'Acme',
closeDate: '3/18/18',
stage: 'Value Proposition',
confidence: '66%',
amount: '$22,000,000',
contact: 'jrogers@acme.com',
},
{
id: '9a5dbdb2',
opportunityName: 'Acme - 320 Widgets',
accountName: 'Acme',
closeDate: '1/31/18',
stage: 'Prospecting',
confidence: '36%',
amount: '$4,322,000',
contact: 'bob@acme.com',
},
{
id: '356dbb52',
opportunityName: 'salesforce.com - 4,000 Widgets',
accountName: 'salesforce.com',
closeDate: '2/21/17 8:33PM',
stage: 'Id. Decision Makers',
confidence: '72%',
amount: '$15,000',
contact: 'nathan@salesforce.com',
},
],
};
Expand All @@ -90,13 +183,13 @@ class Example extends React.Component {
<React.Fragment>
<React.Fragment>
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
Fully resizable
With keyboard navigation
</h3>
<IconSettings iconPath="/assets/icons">
<div style={{ overflow: 'auto' }}>
<div style={{ height: '200px' }}>
<DataTable
items={this.state.items}
id="DataTableExample-1-resizable-cols"
id="DataTableExample-4-resizable-cols"
resizable
resizerOptions={{
resizeMode: 'overflow',
Expand All @@ -112,16 +205,15 @@ class Example extends React.Component {
</React.Fragment>
<React.Fragment>
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
Columns 0 and 3 fixed
Resizeable: Columns 0 and 3 fixed
</h3>
<IconSettings iconPath="/assets/icons">
<div style={{ overflow: 'auto' }}>
<div style={{ height: '200px' }}>
<DataTable
items={this.state.items}
id="DataTableExample-2-resizable-cols"
resizable
fixedLayout
resizerOptions={{
resizerOptions={{
resizeMode: 'overflow',
onResize: (columnsResized) => {
console.log(JSON.stringify(columnsResized));
Expand All @@ -134,55 +226,6 @@ class Example extends React.Component {
</div>
</IconSettings>
</React.Fragment>
<React.Fragment>
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
With fixed header
</h3>
<IconSettings iconPath="/assets/icons">
<div style={{ overflow: 'auto' }}>
<DataTable
items={this.state.items}
id="DataTableExample-3-resizable-cols"
fixedHeader
fixedLayout
resizable
resizerOptions={{
resizeMode: 'overflow',
onResize: (columnsResized) => {
console.log(JSON.stringify(columnsResized));
},
}}
>
{columns}
</DataTable>
</div>
</IconSettings>
</React.Fragment>
<React.Fragment>
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
With keyboard navigation
</h3>
<IconSettings iconPath="/assets/icons">
<div style={{ overflow: 'auto' }}>
<DataTable
items={this.state.items}
id="DataTableExample-4-resizable-cols"
fixedHeader
fixedLayout
resizable
keyboardNavigation
resizerOptions={{
resizeMode: 'overflow',
onResize: (columnsResized) => {
console.log(JSON.stringify(columnsResized));
},
}}
>
{columns}
</DataTable>
</div>
</IconSettings>
</React.Fragment>
</React.Fragment>
);
}
Expand Down
Loading