Skip to content

Commit

Permalink
[cleanup] Remove .euiDataGrid__controlBtn className
Browse files Browse the repository at this point in the history 
- in favor of `.euiDataGridToolbarControl` (now that we have a specific component for this)

- remove the active `font-weight` as well, since it's no longer being used

- remove `.euiDataGrid__controlBtn` from the icon buttons as well - they're not consistently applied and they're not really doing anything, nor are they being hooked into in Kibana for the icon buttons

- replace fullscreen hook with `aria-pressed` instead

+ snapshot updates
  • Loading branch information
@cee-chen
cee-chen committed Nov 21, 2023
1 parent 184f1b7 commit f467443
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 153 deletions.
148 changes: 52 additions & 96 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridColumnSelectorPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
Expand All @@ -488,28 +488,16 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-euiicon-type="tableDensityNormal"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Columns
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 2"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
2
</span>
</div>
</div>
Columns
</span>
<span
aria-label="- Active: 2"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
2
</span>
</span>
</button>
Expand Down Expand Up @@ -552,7 +540,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
<button
aria-label="Display options"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridDisplaySelectorButton"
type="button"
>
Expand All @@ -570,7 +558,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
<button
aria-label="Enter fullscreen"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
aria-pressed="false"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridFullScreenButton"
type="button"
>
Expand Down Expand Up @@ -914,7 +903,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridColumnSelectorPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
Expand All @@ -926,28 +915,16 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-euiicon-type="tableDensityNormal"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Columns
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 2"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
2
</span>
</div>
</div>
Columns
</span>
<span
aria-label="- Active: 2"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
2
</span>
</span>
</button>
Expand Down Expand Up @@ -990,7 +967,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
<button
aria-label="Display options"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridDisplaySelectorButton"
type="button"
>
Expand All @@ -1008,7 +985,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
<button
aria-label="Enter fullscreen"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
aria-pressed="false"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridFullScreenButton"
type="button"
>
Expand Down Expand Up @@ -1630,7 +1608,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridColumnSelectorPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
Expand All @@ -1642,28 +1620,16 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-euiicon-type="tableDensityNormal"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Columns
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 2"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
2
</span>
</div>
</div>
Columns
</span>
<span
aria-label="- Active: 2"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
2
</span>
</span>
</button>
Expand Down Expand Up @@ -1703,7 +1669,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
<button
aria-label="Display options"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridDisplaySelectorButton"
type="button"
>
Expand All @@ -1721,7 +1687,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
<button
aria-label="Enter fullscreen"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
aria-pressed="false"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridFullScreenButton"
type="button"
>
Expand Down Expand Up @@ -2067,7 +2034,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridColumnSelectorPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
Expand All @@ -2079,28 +2046,16 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-euiicon-type="tableDensityNormal"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Columns
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 2"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
2
</span>
</div>
</div>
Columns
</span>
<span
aria-label="- Active: 2"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
2
</span>
</span>
</button>
Expand Down Expand Up @@ -2140,7 +2095,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
<button
aria-label="Display options"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridDisplaySelectorButton"
type="button"
>
Expand All @@ -2158,7 +2113,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
<button
aria-label="Enter fullscreen"
class="euiButtonIcon euiDataGrid__controlBtn emotion-euiButtonIcon-xs-empty-text"
aria-pressed="false"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
data-test-subj="dataGridFullScreenButton"
type="button"
>
Expand Down
32 changes: 10 additions & 22 deletions src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -614,7 +614,7 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
data-test-subj="dataGridColumnSelectorPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSelectorButton"
type="button"
>
Expand All @@ -626,28 +626,16 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
data-euiicon-type="tableDensityNormal"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Columns
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 2"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
2
</span>
</div>
</div>
Columns
</span>
<span
aria-label="- Active: 2"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
2
</span>
</span>
</button>
Expand Down
32 changes: 10 additions & 22 deletions src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
data-test-subj="dataGridColumnSortingPopover"
>
<button
class="euiButtonEmpty euiDataGrid__controlBtn emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text"
class="euiButtonEmpty euiDataGridToolbarControl emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-text-EuiDataGridToolbarControl"
data-test-subj="dataGridColumnSortingButton"
type="button"
>
Expand All @@ -582,28 +582,16 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
data-euiicon-type="sortable"
/>
<span
class="eui-textTruncate euiButtonEmpty__text"
class="euiDataGridToolbarControl__text eui-textTruncate"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
Sort fields
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<span
aria-label="Active: 1"
class="euiNotificationBadge emotion-euiNotificationBadge-s-subdued"
role="marquee"
>
1
</span>
</div>
</div>
Sort fields
</span>
<span
aria-label="- Active: 1"
class="euiNotificationBadge euiDataGridToolbarControl__badge emotion-euiNotificationBadge-s-subdued-EuiDataGridToolbarControl"
role="marquee"
>
1
</span>
</span>
</button>
Expand Down
1 change: 0 additions & 1 deletion src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
>
<EuiButtonIcon
aria-label="Display options"
className="euiDataGrid__controlBtn"
color="text"
data-test-subj="dataGridDisplaySelectorButton"
iconType="controlsHorizontal"
Expand Down
5 changes: 0 additions & 5 deletions src/components/datagrid/controls/_data_grid_toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,6 @@
}
}

.euiDataGrid__controlBtn--active,
.euiDataGrid__controlBtn--active:focus {
font-weight: $euiFontWeightSemiBold;
}

@include euiDataGridStyles(bordersNone) {
.euiDataGrid__controls {
border: none;
Expand Down
1 change: 0 additions & 1 deletion src/components/datagrid/controls/display_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,6 @@ export const useDataGridDisplaySelector = (
<EuiButtonIcon
size="xs"
iconType="controlsHorizontal"
className="euiDataGrid__controlBtn"
color="text"
data-test-subj="dataGridDisplaySelectorButton"
onClick={() => setIsOpen(!isOpen)}
Expand Down
Loading

0 comments on commit f467443

Please sign in to comment.