Skip to content

Commit d1b54f6

Browse files
cee-chencee-chen
authored
[Emotion] Convert EuiDroppable & EuiDraggable (#7187)
1 parent d456136 commit d1b54f6

22 files changed

+447
-469
lines changed

‎src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,20 +80,20 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
8080
class="euiDataGrid__controlScroll"
8181
>
8282
<div
83-
class="euiDroppable euiDroppable--noGrow"
83+
class="euiDroppable emotion-euiDroppable-noGrow"
8484
data-rfd-droppable-context-id="0"
8585
data-rfd-droppable-id="columnOrder"
8686
data-test-subj="droppable"
8787
>
8888
<div
89-
class="euiDraggable euiDraggable--hasCustomDragHandle"
89+
class="euiDraggable emotion-euiDraggable"
9090
data-rfd-draggable-context-id="0"
9191
data-rfd-draggable-id="columnA"
9292
data-test-subj="draggable"
9393
role="group"
9494
>
9595
<div
96-
class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
96+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
9797
data-test-subj="dataGridColumnSelectorColumnItem-columnA"
9898
>
9999
<div
@@ -163,14 +163,14 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
163163
</div>
164164
</div>
165165
<div
166-
class="euiDraggable euiDraggable--hasCustomDragHandle"
166+
class="euiDraggable emotion-euiDraggable"
167167
data-rfd-draggable-context-id="0"
168168
data-rfd-draggable-id="columnB"
169169
data-test-subj="draggable"
170170
role="group"
171171
>
172172
<div
173-
class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
173+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
174174
data-test-subj="dataGridColumnSelectorColumnItem-columnB"
175175
>
176176
<div
@@ -375,20 +375,20 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
375375
class="euiDataGrid__controlScroll"
376376
>
377377
<div
378-
class="euiDroppable euiDroppable--noGrow"
378+
class="euiDroppable emotion-euiDroppable-noGrow"
379379
data-rfd-droppable-context-id=":r0:"
380380
data-rfd-droppable-id="columnOrder"
381381
data-test-subj="droppable"
382382
>
383383
<div
384-
class="euiDraggable euiDraggable--hasCustomDragHandle"
384+
class="euiDraggable emotion-euiDraggable"
385385
data-rfd-draggable-context-id=":r0:"
386386
data-rfd-draggable-id="columnA"
387387
data-test-subj="draggable"
388388
role="group"
389389
>
390390
<div
391-
class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
391+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
392392
data-test-subj="dataGridColumnSelectorColumnItem-columnA"
393393
>
394394
<div
@@ -458,14 +458,14 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
458458
</div>
459459
</div>
460460
<div
461-
class="euiDraggable euiDraggable--hasCustomDragHandle"
461+
class="euiDraggable emotion-euiDraggable"
462462
data-rfd-draggable-context-id=":r0:"
463463
data-rfd-draggable-id="columnB"
464464
data-test-subj="draggable"
465465
role="group"
466466
>
467467
<div
468-
class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
468+
class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
469469
data-test-subj="dataGridColumnSelectorColumnItem-columnB"
470470
>
471471
<div

‎src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,20 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
6161
role="region"
6262
>
6363
<div
64-
class="euiDroppable euiDroppable--noGrow"
64+
class="euiDroppable emotion-euiDroppable-noGrow"
6565
data-rfd-droppable-context-id="0"
6666
data-rfd-droppable-id="columnSorting"
6767
data-test-subj="droppable"
6868
>
6969
<div
70-
class="euiDraggable euiDraggable--hasCustomDragHandle"
70+
class="euiDraggable emotion-euiDraggable"
7171
data-rfd-draggable-context-id="0"
7272
data-rfd-draggable-id="columnA"
7373
data-test-subj="draggable"
7474
role="group"
7575
>
7676
<div
77-
class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
77+
class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
7878
>
7979
<p
8080
class="emotion-euiScreenReaderOnly"
@@ -351,20 +351,20 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
351351
role="region"
352352
>
353353
<div
354-
class="euiDroppable euiDroppable--noGrow"
354+
class="euiDroppable emotion-euiDroppable-noGrow"
355355
data-rfd-droppable-context-id=":r0:"
356356
data-rfd-droppable-id="columnSorting"
357357
data-test-subj="droppable"
358358
>
359359
<div
360-
class="euiDraggable euiDraggable--hasCustomDragHandle"
360+
class="euiDraggable emotion-euiDraggable"
361361
data-rfd-draggable-context-id=":r0:"
362362
data-rfd-draggable-id="columnA"
363363
data-test-subj="draggable"
364364
role="group"
365365
>
366366
<div
367-
class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
367+
class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
368368
>
369369
<p
370370
class="emotion-euiScreenReaderOnly"

‎src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
44
<div
5-
class="euiDraggable euiDraggable--hasCustomDragHandle"
5+
class="euiDraggable emotion-euiDraggable"
66
data-rfd-draggable-context-id="0"
77
data-rfd-draggable-id="columnA"
88
data-test-subj="draggable"
99
role="group"
1010
>
1111
<div
12-
class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
12+
class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
1313
>
1414
<p
1515
class="emotion-euiScreenReaderOnly"
@@ -161,14 +161,14 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co
161161

162162
exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
163163
<div
164-
class="euiDraggable euiDraggable--hasCustomDragHandle"
164+
class="euiDraggable emotion-euiDraggable"
165165
data-rfd-draggable-context-id=":r0:"
166166
data-rfd-draggable-id="columnA"
167167
data-test-subj="draggable"
168168
role="group"
169169
>
170170
<div
171-
class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
171+
class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
172172
>
173173
<p
174174
class="emotion-euiScreenReaderOnly"

‎src/components/datagrid/controls/column_selector.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
*/
88

99
import React, {
10-
Fragment,
1110
useState,
1211
useMemo,
1312
useCallback,
1413
ReactNode,
1514
ChangeEvent,
1615
} from 'react';
1716
import classNames from 'classnames';
17+
1818
import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
1919
import { EuiI18n, useEuiI18n } from '../../i18n';
2020
import { EuiButtonEmpty } from '../../button';
@@ -197,7 +197,7 @@ export const useDataGridColumnSelector = (
197197
droppableId="columnOrder"
198198
isDropDisabled={!isDragEnabled}
199199
>
200-
<Fragment>
200+
<>
201201
{filteredColumns.map((id, index) => (
202202
<EuiDraggable
203203
key={id}
@@ -209,10 +209,13 @@ export const useDataGridColumnSelector = (
209209
>
210210
{(provided, state) => (
211211
<div
212-
className={`euiDataGridColumnSelector__item ${
213-
state.isDragging &&
214-
'euiDataGridColumnSelector__item-isDragging'
215-
}`}
212+
className={classNames(
213+
'euiDataGridColumnSelector__item',
214+
{
215+
'euiDataGridColumnSelector__item-isDragging':
216+
state.isDragging,
217+
}
218+
)}
216219
data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
217220
>
218221
<EuiFlexGroup
@@ -272,7 +275,7 @@ export const useDataGridColumnSelector = (
272275
)}
273276
</EuiDraggable>
274277
))}
275-
</Fragment>
278+
</>
276279
</EuiDroppable>
277280
</EuiDragDropContext>
278281
</div>

‎src/components/datagrid/controls/column_sorting_draggable.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
*/
88

99
import React, { FunctionComponent } from 'react';
10+
import classNames from 'classnames';
11+
1012
import { EuiScreenReaderOnly } from '../../accessibility';
1113
import { EuiButtonGroup, EuiButtonIcon } from '../../button';
1214
import { EuiDraggable } from '../../drag_and_drop';
@@ -78,9 +80,9 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<
7880
>
7981
{(provided, state) => (
8082
<div
81-
className={`euiDataGridColumnSorting__item ${
82-
state.isDragging && 'euiDataGridColumnSorting__item-isDragging'
83-
}`}
83+
className={classNames('euiDataGridColumnSorting__item', {
84+
'euiDataGridColumnSorting__item-isDragging': state.isDragging,
85+
})}
8486
>
8587
<EuiScreenReaderOnly>
8688
<p>

‎src/components/datagrid/data_grid.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1813,7 +1813,7 @@ describe('EuiDataGrid', () => {
18131813
let popover = openColumnSelector(component);
18141814
expect(
18151815
popover
1816-
.find('.euiDataGridColumnSelector__item')
1816+
.find('div.euiDataGridColumnSelector__item')
18171817
.map((item) => item.text())
18181818
).toEqual(['A', 'B']);
18191819
closeColumnSelector(component);
@@ -1831,7 +1831,7 @@ describe('EuiDataGrid', () => {
18311831
popover = openColumnSelector(component);
18321832
expect(
18331833
popover
1834-
.find('.euiDataGridColumnSelector__item')
1834+
.find('div.euiDataGridColumnSelector__item')
18351835
.map((item) => item.text())
18361836
).toEqual(['A', 'C']);
18371837
closeColumnSelector(component);

‎src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`EuiDragDropContext is rendered 1`] = `<div />`;
3+
exports[`EuiDragDropContext renders 1`] = `<div />`;

‎src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22

33
exports[`[React 17] EuiDraggable renders 1`] = `
44
<div
5-
class="euiDroppable euiDroppable--noGrow"
6-
data-rfd-droppable-context-id="0"
5+
class="euiDroppable emotion-euiDroppable-noGrow"
6+
data-rfd-droppable-context-id="2"
77
data-rfd-droppable-id="testDroppable"
88
data-test-subj="droppable"
99
>
1010
<div
11-
aria-describedby="rfd-hidden-text-0-hidden-text-0"
12-
class="euiDraggable"
13-
data-rfd-drag-handle-context-id="0"
11+
aria-describedby="rfd-hidden-text-2-hidden-text-6"
12+
class="euiDraggable testClass1 testClass2 emotion-euiDraggable-euiTestCss"
13+
data-rfd-drag-handle-context-id="2"
1414
data-rfd-drag-handle-draggable-id="testDraggable"
15-
data-rfd-draggable-context-id="0"
15+
data-rfd-draggable-context-id="2"
1616
data-rfd-draggable-id="testDraggable"
17-
data-test-subj="draggable"
17+
data-test-subj="test subject string"
1818
draggable="false"
1919
role="button"
2020
tabindex="0"
2121
>
2222
<div
23-
class="euiDraggable__item"
23+
class="euiDraggable__item emotion-euiDraggable__item"
2424
>
2525
Hello
2626
</div>
@@ -33,25 +33,25 @@ exports[`[React 17] EuiDraggable renders 1`] = `
3333

3434
exports[`[React 18] EuiDraggable renders 1`] = `
3535
<div
36-
class="euiDroppable euiDroppable--noGrow"
37-
data-rfd-droppable-context-id=":r0:"
36+
class="euiDroppable emotion-euiDroppable-noGrow"
37+
data-rfd-droppable-context-id=":r8:"
3838
data-rfd-droppable-id="testDroppable"
3939
data-test-subj="droppable"
4040
>
4141
<div
42-
aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
43-
class="euiDraggable"
44-
data-rfd-drag-handle-context-id=":r0:"
42+
aria-describedby="rfd-hidden-text-:r8:-hidden-text-:r9:"
43+
class="euiDraggable testClass1 testClass2 emotion-euiDraggable-euiTestCss"
44+
data-rfd-drag-handle-context-id=":r8:"
4545
data-rfd-drag-handle-draggable-id="testDraggable"
46-
data-rfd-draggable-context-id=":r0:"
46+
data-rfd-draggable-context-id=":r8:"
4747
data-rfd-draggable-id="testDraggable"
48-
data-test-subj="draggable"
48+
data-test-subj="test subject string"
4949
draggable="false"
5050
role="button"
5151
tabindex="0"
5252
>
5353
<div
54-
class="euiDraggable__item"
54+
class="euiDraggable__item emotion-euiDraggable__item"
5555
>
5656
Hello
5757
</div>

0 commit comments

Comments
 (0)