Skip to content

Commit 2247d9f

Browse files
cee-chencee-chen
committed
🔥 Clean up cell content CSS classes
- remove extremely confusing `__expand` class names in favor of using the height type (that determines the kind of behavior the content has, e.g. flex vs absolutely positioned, etc) - Make sure only the heights that need certain CSS have that CSS (the non-default-height cells don't need display flex)
1 parent 2f6a07b commit 2247d9f

3 files changed

Lines changed: 34 additions & 63 deletions

File tree

‎src/components/datagrid/_data_grid_data_row.scss‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
*
4747
* TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
4848
*/
49-
.euiDataGridRowCell__expandContent {
49+
.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content {
5050
animation-name: euiDataGridCellActionsSafariWorkaround;
5151
animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲
5252
animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish
@@ -95,11 +95,6 @@
9595
&.euiDataGridRowCell--capitalize {
9696
text-transform: capitalize;
9797
}
98-
99-
.euiDataGridRowCell__numericalHeight {
100-
height: 100%;
101-
overflow: hidden;
102-
}
10398
}
10499

105100
.euiDataGridRowCell__popover {
@@ -118,28 +113,27 @@
118113
@include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
119114
}
120115

121-
.euiDataGridRowCell__expandFlex {
122-
position: relative; // for positioning expand button
116+
.euiDataGridRowCell__contentWrapper {
117+
position: relative; // Needed for .euiDataGridRowCell__actions--overlay
118+
height: 100%;
119+
overflow: hidden;
120+
}
121+
122+
.euiDataGridRowCell__defaultHeight {
123123
display: flex;
124124
align-items: baseline;
125-
height: 100%;
125+
max-width: 100%;
126+
127+
.euiDataGridRowCell__content {
128+
flex-grow: 1;
129+
}
126130

127131
.euiDataGridRowCell--controlColumn & {
132+
height: 100%;
128133
align-items: center;
129134
}
130135
}
131136

132-
.euiDataGridRowCell__expandContent {
133-
flex-grow: 1;
134-
max-width: 100%;
135-
overflow: hidden;
136-
}
137-
138-
.euiDataGridRowCell__contentByHeight {
139-
flex-grow: 1;
140-
height: 100%;
141-
}
142-
143137
// Cell actions
144138
.euiDataGridRowCell__actions {
145139
display: flex;

‎src/components/datagrid/body/data_grid_cell.test.tsx‎

Lines changed: 15 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -727,19 +727,9 @@ describe('EuiDataGridCell', () => {
727727
);
728728

729729
expect(
730-
component.find('.euiDataGridRowCell__expandContent').exists()
730+
component.find('.euiDataGridRowCell__defaultHeight').exists()
731731
).toBe(true);
732-
expect(
733-
component.find('.euiDataGridRowCell__contentByHeight').exists()
734-
).not.toBe(true);
735-
736-
expect(component.find('.euiDataGridRowCell__defaultHeight').render())
737-
.toMatchInlineSnapshot(`
738-
<div
739-
class="euiDataGridRowCell__defaultHeight eui-textTruncate"
740-
data-datagrid-cellcontent="true"
741-
/>
742-
`);
732+
expect(component.find('.eui-textTruncate').exists()).toBe(true);
743733
});
744734

745735
test('auto', () => {
@@ -750,20 +740,10 @@ describe('EuiDataGridCell', () => {
750740
/>
751741
);
752742

753-
expect(
754-
component.find('.euiDataGridRowCell__expandContent').exists()
755-
).not.toBe(true);
756-
expect(
757-
component.find('.euiDataGridRowCell__contentByHeight').exists()
758-
).toBe(true);
759-
760-
expect(component.find('.euiDataGridRowCell__autoHeight').render())
761-
.toMatchInlineSnapshot(`
762-
<div
763-
class="euiDataGridRowCell__autoHeight eui-textBreakWord"
764-
data-datagrid-cellcontent="true"
765-
/>
766-
`);
743+
expect(component.find('.euiDataGridRowCell__autoHeight').exists()).toBe(
744+
true
745+
);
746+
expect(component.find('.eui-textBreakWord').exists()).toBe(true);
767747
});
768748

769749
test('numerical', () => {
@@ -774,13 +754,10 @@ describe('EuiDataGridCell', () => {
774754
/>
775755
);
776756

777-
expect(component.find('.euiDataGridRowCell__numericalHeight').render())
778-
.toMatchInlineSnapshot(`
779-
<div
780-
class="euiDataGridRowCell__numericalHeight eui-textBreakWord"
781-
data-datagrid-cellcontent="true"
782-
/>
783-
`);
757+
expect(
758+
component.find('.euiDataGridRowCell__numericalHeight').exists()
759+
).toBe(true);
760+
expect(component.find('.eui-textBreakWord').exists()).toBe(true);
784761
});
785762

786763
test('lineCount', () => {
@@ -791,13 +768,11 @@ describe('EuiDataGridCell', () => {
791768
/>
792769
);
793770

794-
expect(component.find('div.euiDataGridRowCell__lineCountHeight').render())
795-
.toMatchInlineSnapshot(`
796-
<div
797-
class="euiDataGridRowCell__lineCountHeight eui-textBreakWord euiTextBlockTruncate emotion-euiTextBlockTruncate"
798-
data-datagrid-cellcontent="true"
799-
/>
800-
`);
771+
expect(
772+
component.find('.euiDataGridRowCell__lineCountHeight').exists()
773+
).toBe(true);
774+
expect(component.find('.eui-textBreakWord').exists()).toBe(true);
775+
expect(component.find('.euiTextBlockTruncate').exists()).toBe(true);
801776
});
802777
});
803778
});

‎src/components/datagrid/body/data_grid_cell.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,13 @@ const EuiDataGridCellContent: FunctionComponent<
7979
const CellElement =
8080
renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
8181

82-
// TODO: Clean up expand/content by height shenanigans
83-
const wrapperClasses = classNames();
82+
const wrapperClasses = classNames(
83+
'euiDataGridRowCell__contentWrapper',
84+
`euiDataGridRowCell__${cellHeightType}Height`
85+
);
8486

8587
const classes = classNames(
86-
`euiDataGridRowCell__${cellHeightType}Height`,
88+
'euiDataGridRowCell__content',
8789
!isControlColumn && {
8890
'eui-textBreakWord': cellHeightType !== 'default',
8991
'eui-textTruncate': cellHeightType === 'default',

0 commit comments

Comments
 (0)