Skip to content

Commit f62854c

Browse files
interactivellamainteractivellama
authored
Resizing is not accessible if keyboard navigation is not present (#2)
* Make resizable require keyboardNavigation * Remove non fixed header example * Rename variables in examples * Limit resizable use to fixed layout and header
1 parent e12c55b commit f62854c

File tree

3 files changed

+158
-103
lines changed

3 files changed

+158
-103
lines changed

‎components/data-table/__examples__/interactive-elements.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ class Example extends React.Component {
150150
id="DataTableExample-column-resizable"
151151
fixedLayout
152152
fixedHeader
153-
Resizable
153+
resizable
154154
keyboardNavigation
155155
>
156156
{columns}

‎components/data-table/__examples__/resizable-columns.jsx

Lines changed: 130 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@ import React from 'react';
33
import DataTable from '~/components/data-table'; // `~` is replaced with design-system-react at runtime
44
import DataTableColumn from '~/components/data-table/column';
55
import DataTableCell from '~/components/data-table/cell';
6+
import DataTableInteractiveLink from '~/components/data-table/interactive-link';
67
import IconSettings from '~/components/icon-settings';
78

89
const CustomDataTableCell = ({ children, ...props }) => (
910
<DataTableCell {...props}>
10-
<a
11-
href="#"
12-
onClick={(event) => {
13-
event.preventDefault();
14-
}}
15-
>
16-
{children}
17-
</a>
11+
<DataTableInteractiveLink
12+
onClick={(event) => {
13+
event.preventDefault();
14+
}}>
15+
{children}
16+
</DataTableInteractiveLink>
1817
</DataTableCell>
1918
);
20-
CustomDataTableCell.displayName = DataTableCell.displayName;
19+
CustomDataTableCell.displayName = CustomDataTableCell.displayName;
2120

2221
const columns = [
2322
<DataTableColumn
@@ -50,37 +49,131 @@ const columns = [
5049
class Example extends React.Component {
5150
static displayName = 'DataTableExample';
5251

53-
state = {
52+
state = {
53+
sortColumn: 'opportunityName',
54+
sortColumnDirection: {
55+
opportunityName: 'asc',
56+
},
5457
items: [
5558
{
56-
id: '8IKZHZZV80',
57-
opportunityName: 'Cloudhub',
58-
accountName: 'Cloudhub',
59-
closeDate: '4/14/2015',
59+
id: '896a6a60',
60+
opportunityName: 'Acme - 1,200 Widgets',
61+
accountName: 'Acme',
62+
closeDate: '4/10/15',
63+
stage: 'Value Proposition',
64+
confidence: '70%',
65+
amount: '$25,000,000',
66+
contact: '[email protected]',
67+
},
68+
{
69+
id: '44da9dcd',
70+
opportunityName: 'Acme - 200 Widgets',
71+
accountName: 'Acme',
72+
closeDate: '1/31/15',
6073
stage: 'Prospecting',
61-
confidence: '20%',
62-
amount: '$25k',
63-
contact: '[email protected]',
74+
confidence: '30%',
75+
amount: '$5,000,000',
76+
contact: '[email protected]',
77+
},
78+
{
79+
id: 'f988a721',
80+
opportunityName: 'salesforce.com - 1,000 Widgets',
81+
accountName: 'salesforce.com',
82+
closeDate: '1/31/15 3:45PM',
83+
stage: 'Id. Decision Makers',
84+
confidence: '60%',
85+
amount: '$25,000',
86+
contact: '[email protected]',
6487
},
6588
{
66-
id: '5GJOOOPWU7',
67-
opportunityName: 'Cloudhub + Anypoint Connectors',
68-
accountName: 'Cloudhub',
69-
closeDate: '4/14/2015',
89+
id: 'd7679cdd',
90+
opportunityName: 'Acme - 800 Widgets',
91+
accountName: 'Acme',
92+
closeDate: '6/11/18',
93+
stage: 'Value Proposition',
94+
confidence: '85%',
95+
amount: '$970,000',
96+
contact: '[email protected]',
97+
},
98+
{
99+
id: '0085f7a0',
100+
opportunityName: 'Acme - 744 Widgets',
101+
accountName: 'Acme',
102+
closeDate: '4/15/17',
70103
stage: 'Prospecting',
71-
confidence: '20%',
72-
amount: '$25k',
73-
contact: '[email protected]',
104+
confidence: '56%',
105+
amount: '$3,110,000',
106+
contact: '[email protected]',
107+
},
108+
{
109+
id: 'b7acc778',
110+
opportunityName: 'salesforce.com - 847 Widgets',
111+
accountName: 'salesforce.com',
112+
closeDate: '5/23/18 1:02PM',
113+
stage: 'Id. Decision Makers',
114+
confidence: '62%',
115+
amount: '$18,000',
116+
contact: '[email protected]',
74117
},
75118
{
76-
id: '8IKZHZZV81',
77-
opportunityName: 'Cloudhub',
78-
accountName: 'Cloudhub',
79-
closeDate: '4/14/2015',
119+
id: '17991de5',
120+
opportunityName: 'Acme - 1,621 Widgets',
121+
accountName: 'Acme',
122+
closeDate: '5/16/17',
123+
stage: 'Value Proposition',
124+
confidence: '70%',
125+
amount: '$23,600,000',
126+
contact: '[email protected]',
127+
},
128+
{
129+
id: '09b2cee9',
130+
opportunityName: 'Acme - 430 Widgets',
131+
accountName: 'Acme',
132+
closeDate: '6/12/18',
80133
stage: 'Prospecting',
81-
confidence: '20%',
82-
amount: '$25k',
83-
contact: '[email protected]',
134+
confidence: '42%',
135+
amount: '$4,222,222',
136+
contact: '[email protected]',
137+
},
138+
{
139+
id: 'd0035700',
140+
opportunityName: 'salesforce.com - 677 Widgets',
141+
accountName: 'salesforce.com',
142+
closeDate: '7/21/17 10:11AM',
143+
stage: 'Id. Decision Makers',
144+
confidence: '42%',
145+
amount: '$24,200',
146+
contact: '[email protected]',
147+
},
148+
{
149+
id: '4a526f0c',
150+
opportunityName: 'Acme - 1,444 Widgets',
151+
accountName: 'Acme',
152+
closeDate: '3/18/18',
153+
stage: 'Value Proposition',
154+
confidence: '66%',
155+
amount: '$22,000,000',
156+
contact: '[email protected]',
157+
},
158+
{
159+
id: '9a5dbdb2',
160+
opportunityName: 'Acme - 320 Widgets',
161+
accountName: 'Acme',
162+
closeDate: '1/31/18',
163+
stage: 'Prospecting',
164+
confidence: '36%',
165+
amount: '$4,322,000',
166+
contact: '[email protected]',
167+
},
168+
{
169+
id: '356dbb52',
170+
opportunityName: 'salesforce.com - 4,000 Widgets',
171+
accountName: 'salesforce.com',
172+
closeDate: '2/21/17 8:33PM',
173+
stage: 'Id. Decision Makers',
174+
confidence: '72%',
175+
amount: '$15,000',
176+
contact: '[email protected]',
84177
},
85178
],
86179
};
@@ -90,13 +183,13 @@ class Example extends React.Component {
90183
<React.Fragment>
91184
<React.Fragment>
92185
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
93-
Fully resizable
186+
With keyboard navigation
94187
</h3>
95188
<IconSettings iconPath="/assets/icons">
96-
<div style={{ overflow: 'auto' }}>
189+
<div style={{ height: '200px' }}>
97190
<DataTable
98191
items={this.state.items}
99-
id="DataTableExample-1-resizable-cols"
192+
id="DataTableExample-4-resizable-cols"
100193
resizable
101194
resizerOptions={{
102195
resizeMode: 'overflow',
@@ -112,16 +205,15 @@ class Example extends React.Component {
112205
</React.Fragment>
113206
<React.Fragment>
114207
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
115-
Columns 0 and 3 fixed
208+
Resizeable: Columns 0 and 3 fixed
116209
</h3>
117210
<IconSettings iconPath="/assets/icons">
118-
<div style={{ overflow: 'auto' }}>
211+
<div style={{ height: '200px' }}>
119212
<DataTable
120213
items={this.state.items}
121214
id="DataTableExample-2-resizable-cols"
122215
resizable
123-
fixedLayout
124-
resizerOptions={{
216+
resizerOptions={{
125217
resizeMode: 'overflow',
126218
onResize: (columnsResized) => {
127219
console.log(JSON.stringify(columnsResized));
@@ -134,55 +226,6 @@ class Example extends React.Component {
134226
</div>
135227
</IconSettings>
136228
</React.Fragment>
137-
<React.Fragment>
138-
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
139-
With fixed header
140-
</h3>
141-
<IconSettings iconPath="/assets/icons">
142-
<div style={{ overflow: 'auto' }}>
143-
<DataTable
144-
items={this.state.items}
145-
id="DataTableExample-3-resizable-cols"
146-
fixedHeader
147-
fixedLayout
148-
resizable
149-
resizerOptions={{
150-
resizeMode: 'overflow',
151-
onResize: (columnsResized) => {
152-
console.log(JSON.stringify(columnsResized));
153-
},
154-
}}
155-
>
156-
{columns}
157-
</DataTable>
158-
</div>
159-
</IconSettings>
160-
</React.Fragment>
161-
<React.Fragment>
162-
<h3 className="slds-text-heading_medium slds-m-vertical_medium">
163-
With keyboard navigation
164-
</h3>
165-
<IconSettings iconPath="/assets/icons">
166-
<div style={{ overflow: 'auto' }}>
167-
<DataTable
168-
items={this.state.items}
169-
id="DataTableExample-4-resizable-cols"
170-
fixedHeader
171-
fixedLayout
172-
resizable
173-
keyboardNavigation
174-
resizerOptions={{
175-
resizeMode: 'overflow',
176-
onResize: (columnsResized) => {
177-
console.log(JSON.stringify(columnsResized));
178-
},
179-
}}
180-
>
181-
{columns}
182-
</DataTable>
183-
</div>
184-
</IconSettings>
185-
</React.Fragment>
186229
</React.Fragment>
187230
);
188231
}

0 commit comments

Comments
 (0)