Skip to content

Commit

Permalink
Update class names
Browse files Browse the repository at this point in the history
  • Loading branch information
@jughosta
jughosta committed Nov 16, 2023
1 parent ff1cbe1 commit 9759255
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 50 deletions.
32 changes: 16 additions & 16 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -612,10 +612,10 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="A"
>
A
Expand Down Expand Up @@ -669,10 +669,10 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="B"
>
B
Expand Down Expand Up @@ -1082,10 +1082,10 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="A"
>
A
Expand Down Expand Up @@ -1139,10 +1139,10 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="B"
>
B
Expand Down Expand Up @@ -1813,10 +1813,10 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="A"
>
Column A
Expand Down Expand Up @@ -1870,10 +1870,10 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="B"
>
<div>
Expand Down Expand Up @@ -2263,10 +2263,10 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="A"
>
A
Expand Down Expand Up @@ -2320,10 +2320,10 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="B"
>
B
Expand Down
8 changes: 4 additions & 4 deletions src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="columnA"
>
columnA
Expand Down Expand Up @@ -92,10 +92,10 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="columnB"
>
columnB
Expand Down
8 changes: 4 additions & 4 deletions src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="columnA"
>
columnA
Expand Down Expand Up @@ -96,10 +96,10 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="columnB"
>
columnB
Expand Down
4 changes: 2 additions & 2 deletions src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
tabindex="-1"
>
<div
class="euiDataGridHeaderCell__content"
class="euiDataGridHeaderCell__content euiDataGridHeaderCell__content--withInnerTruncation"
>
<div
class="euiDataGridHeaderCell__title"
class="euiDataGridHeaderCell__innerTruncatedContent"
title="someColumn"
>
someColumn
Expand Down
22 changes: 14 additions & 8 deletions src/components/datagrid/body/header/_data_grid_header_row.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,27 +53,33 @@
}

.euiDataGridHeaderCell__content {
display: flex;
align-items: center;
@include euiTextTruncate;
overflow: hidden;
white-space: nowrap;
text-align: left;
flex-grow: 1;
align-self: baseline;

// this modifier is introduced for backwards compatability of the existing `euiDataGridHeaderCell__content` class
&--withInnerTruncation {
display: flex;
align-items: center;
}
}

&.euiDataGridHeaderCell--numeric,
&.euiDataGridHeaderCell--currency {
.euiDataGridHeaderCell__content {
.euiDataGridHeaderCell__content--withInnerTruncation {
justify-content: flex-end;
}
}

.euiDataGridHeaderCell__title {
.euiDataGridHeaderCell__innerTruncatedContent {
@include euiTextTruncate;
overflow: hidden;
white-space: nowrap;
}

.euiDataGridHeaderCell__content,
.euiDataGridHeaderCell__title,
.euiDataGridHeaderCell__content--withInnerTruncation,
.euiDataGridHeaderCell__innerTruncatedContent,
.euiPopover {
min-width: 0; // to make sure that title is truncated and all icons are still visible
}
Expand Down
35 changes: 19 additions & 16 deletions src/components/datagrid/body/header/data_grid_header_cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,23 @@ export const EuiDataGridHeaderCell: FunctionComponent<
suffix: 'actions',
});

const cellContent = (
<div
className={classnames(
'euiDataGridHeaderCell__content',
'euiDataGridHeaderCell__content--withInnerTruncation'
)}
>
<div
title={displayAsText || id}
className="euiDataGridHeaderCell__innerTruncatedContent"
>
{display || displayAsText || id}
</div>
{sortingArrow}
</div>
);

return (
<EuiDataGridHeaderCellWrapper
{...displayHeaderCellProps}
Expand All @@ -115,13 +132,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<

{!showColumnActions ? (
<>
{sortingArrow}
<div
className="euiDataGridHeaderCell__content"
title={displayAsText || id}
>
{display || displayAsText || id}
</div>
{cellContent}
{sortingScreenReaderText && (
<EuiScreenReaderOnly>
<p>{sortingScreenReaderText}</p>
Expand All @@ -147,15 +158,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
}}
aria-describedby={`${sortingAriaId} ${actionsAriaId}`}
>
<div className="euiDataGridHeaderCell__content">
<div
title={displayAsText || id}
className="euiDataGridHeaderCell__title"
>
{display || displayAsText || id}
</div>
{sortingArrow}
</div>
{cellContent}
<div className="euiDataGridHeaderCell__icon">
<EuiIcon
type="boxesVertical"
Expand Down

0 comments on commit 9759255

Please sign in to comment.