From da972d3833418b93e7a74833bd325a74204d634c Mon Sep 17 00:00:00 2001 From: Alfonso Valenciana Date: Thu, 6 Jan 2022 21:53:08 -0600 Subject: [PATCH 1/5] Modifies Sass to keep consistency in focus halo The outline property for the control columns of the EuiDataGrid element is modified in order to keep color theme consistent along the grid. --- CHANGELOG.md | 4 ++++ src/components/button/button_icon/_button_icon.scss | 6 ++++++ src/global_styling/mixins/_form.scss | 3 ++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 47d55dd0fe86..912ccb1a1ee8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## [`main`](https://github.com/elastic/eui/tree/main) +**Bug fixes** + +- Fixed a `EuiDataGrid` inconsistent color halo when focusing on the control columns ([#5522](https://github.com/elastic/eui/pull/5522)) + **Breaking changes** - Changed `EuiSearchBar` to preserve phrases with leading and trailing spaces, instead of dropping surrounding whitespace ([#5514](https://github.com/elastic/eui/pull/5514)) diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index b6d806ab863a..62be094ae1f5 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -50,6 +50,12 @@ text-decoration: none; } } + + &:not(.euiDataGrid__controlBtn) { + &:focus { + outline: $euiFocusRingColor solid $euiFocusRingSize; + } + } } .euiButtonIcon--xSmall { diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 710228d51cbe..8d2026b0ffa6 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -344,13 +344,14 @@ // Requires a selector to work with the Amsterdam outline styles @if ($amsterdamSelector) { + #{$amsterdamSelector} { - outline: $euiFocusRingSize solid currentColor; + outline: $euiFocusRingColor solid $euiFocusRingSize; } // Chrome &:focus-visible + #{$amsterdamSelector} { outline-style: auto; outline-offset: 3px; + outline: $euiFocusRingColor solid $euiFocusRingSize; } &:not(:focus-visible) + #{$amsterdamSelector} { From c88123441589d71157ea1a5ede56e5dcc15c4a69 Mon Sep 17 00:00:00 2001 From: Alfonso Valenciana Date: Thu, 6 Jan 2022 22:52:32 -0600 Subject: [PATCH 2/5] Change ButtonIcon focus properties The outline of euiButtonIcons is moved to the _data_grid_data_row in order to not modify outlines in buttons outside of euiDataGrids --- src/components/button/button_icon/_button_icon.scss | 6 ------ src/components/datagrid/_data_grid_data_row.scss | 7 +++++++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index 62be094ae1f5..b6d806ab863a 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -50,12 +50,6 @@ text-decoration: none; } } - - &:not(.euiDataGrid__controlBtn) { - &:focus { - outline: $euiFocusRingColor solid $euiFocusRingSize; - } - } } .euiButtonIcon--xSmall { diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 9ab28257c3f8..4664f466fd51 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -122,6 +122,13 @@ white-space: nowrap; } } + + // Ensures focus halo color consistency in ButtonIcons inside of the grid + .euiButtonIcon { + &:focus { + outline: $euiFocusRingColor solid $euiFocusRingSize; + } + } } .euiDataGridRowCell__popover { From fd3910a8e7643de449d2dd9d4a3805a6b32820fe Mon Sep 17 00:00:00 2001 From: Alfonso Valenciana Date: Thu, 6 Jan 2022 23:25:05 -0600 Subject: [PATCH 3/5] Update CHANGELOG.md Added a more complete description of the changes made. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 912ccb1a1ee8..30ada386c2e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ **Bug fixes** -- Fixed a `EuiDataGrid` inconsistent color halo when focusing on the control columns ([#5522](https://github.com/elastic/eui/pull/5522)) +- Fixed a `EuiDataGrid` inconsistent color halo when focusing on the control columns by changing outline of class `euiButtonIcon` in `euiDataGridRowCell` and mixin `euiCustomControlFocused` [#5522](https://github.com/elastic/eui/pull/5522)) **Breaking changes** From f3591086c330fddfe97478cc2e892c29dd856b76 Mon Sep 17 00:00:00 2001 From: Alfonso Valenciana Date: Tue, 11 Jan 2022 11:57:58 -0600 Subject: [PATCH 4/5] Review changes The following changes are made: * CHANGELOG.md: Title is changed to enhancements and description is updated. * _form.scss: File is restored to its original state, as it was modyfing a whole mixin. * _dara_grid_data/header_row.scss: The property from the mixin is moved to each of these files to overwrite the checkbox modifiers. --- CHANGELOG.md | 4 ++-- src/components/datagrid/_data_grid_data_row.scss | 16 +++++++++++++++- .../body/header/_data_grid_header_row.scss | 14 ++++++++++++++ src/global_styling/mixins/_form.scss | 3 +-- 4 files changed, 32 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30ada386c2e2..023cd91f1353 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,8 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -**Bug fixes** +**Enhancements** -- Fixed a `EuiDataGrid` inconsistent color halo when focusing on the control columns by changing outline of class `euiButtonIcon` in `euiDataGridRowCell` and mixin `euiCustomControlFocused` [#5522](https://github.com/elastic/eui/pull/5522)) +- Fixed `EuiDataGrid` inconsistent color halo when focusing on the control columns by changing outline of class `euiButtonIcon` and `.euiCheckbox` in `euiDataGridRowCell`, as well as `.euiCheckbox` in `euiDataGridHeaderCell` [#5522](https://github.com/elastic/eui/pull/5522)) **Breaking changes** diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 4664f466fd51..dd57bfefcfd8 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -126,7 +126,21 @@ // Ensures focus halo color consistency in ButtonIcons inside of the grid .euiButtonIcon { &:focus { - outline: $euiFocusRingColor solid $euiFocusRingSize; + outline: $euiFocusRingSize solid $euiFocusRingColor; + } + } + + // Ensures focus halo color consistency in Checkboxes inside of the grid + .euiCheckbox .euiCheckbox__input { + &:focus { + + .euiCheckbox__square { + outline: $euiFocusRingSize solid $euiFocusRingColor; + } + + // Chrome + &:focus-visible + .euiCheckbox__square { + outline: $euiFocusRingSize solid $euiFocusRingColor; + } } } } diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss index b905ae9c494a..cb5221aa815d 100644 --- a/src/components/datagrid/body/header/_data_grid_header_row.scss +++ b/src/components/datagrid/body/header/_data_grid_header_row.scss @@ -79,6 +79,20 @@ padding-left: $euiSizeXS; } } + + // Ensures focus halo color consistency in Checkboxes inside of the grid + .euiCheckbox .euiCheckbox__input { + &:focus { + + .euiCheckbox__square { + outline: $euiFocusRingSize solid $euiFocusRingColor; + } + + // Chrome + &:focus-visible + .euiCheckbox__square { + outline: $euiFocusRingSize solid $euiFocusRingColor; + } + } + } } .euiDataGridHeader__action--selected { diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 8d2026b0ffa6..710228d51cbe 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -344,14 +344,13 @@ // Requires a selector to work with the Amsterdam outline styles @if ($amsterdamSelector) { + #{$amsterdamSelector} { - outline: $euiFocusRingColor solid $euiFocusRingSize; + outline: $euiFocusRingSize solid currentColor; } // Chrome &:focus-visible + #{$amsterdamSelector} { outline-style: auto; outline-offset: 3px; - outline: $euiFocusRingColor solid $euiFocusRingSize; } &:not(:focus-visible) + #{$amsterdamSelector} { From b7a39e6a6fd30d7178852b09b9f85fa4007103ae Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 13 Jan 2022 13:04:37 +0000 Subject: [PATCH 5/5] Updated the outline color in `euiCustomControlFocused` mixin to use `$euiFocusRingColor` --- CHANGELOG.md | 4 ++-- .../datagrid/_data_grid_data_row.scss | 21 ------------------- .../body/header/_data_grid_header_row.scss | 14 ------------- src/global_styling/mixins/_form.scss | 7 ++++--- 4 files changed, 6 insertions(+), 40 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35dc26822dd1..a7a6ed423d97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -- Fixed `EuiDataGrid` inconsistent color halo when focusing on the control columns by changing outline of class `euiButtonIcon` and `.euiCheckbox` in `euiDataGridRowCell`, as well as `.euiCheckbox` in `euiDataGridHeaderCell` [#5522](https://github.com/elastic/eui/pull/5522)) - +- Updated the outline color in `euiCustomControlFocused` mixin to use +`$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479)) - Added virtulized rendering option to `EuiSelectableList` with `isVirtualized` ([#5521](https://github.com/elastic/eui/pull/5521)) - Added expanded option properties to `EuiSelectableOption` with `data` ([#5521](https://github.com/elastic/eui/pull/5521)) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index dd57bfefcfd8..9ab28257c3f8 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -122,27 +122,6 @@ white-space: nowrap; } } - - // Ensures focus halo color consistency in ButtonIcons inside of the grid - .euiButtonIcon { - &:focus { - outline: $euiFocusRingSize solid $euiFocusRingColor; - } - } - - // Ensures focus halo color consistency in Checkboxes inside of the grid - .euiCheckbox .euiCheckbox__input { - &:focus { - + .euiCheckbox__square { - outline: $euiFocusRingSize solid $euiFocusRingColor; - } - - // Chrome - &:focus-visible + .euiCheckbox__square { - outline: $euiFocusRingSize solid $euiFocusRingColor; - } - } - } } .euiDataGridRowCell__popover { diff --git a/src/components/datagrid/body/header/_data_grid_header_row.scss b/src/components/datagrid/body/header/_data_grid_header_row.scss index cb5221aa815d..b905ae9c494a 100644 --- a/src/components/datagrid/body/header/_data_grid_header_row.scss +++ b/src/components/datagrid/body/header/_data_grid_header_row.scss @@ -79,20 +79,6 @@ padding-left: $euiSizeXS; } } - - // Ensures focus halo color consistency in Checkboxes inside of the grid - .euiCheckbox .euiCheckbox__input { - &:focus { - + .euiCheckbox__square { - outline: $euiFocusRingSize solid $euiFocusRingColor; - } - - // Chrome - &:focus-visible + .euiCheckbox__square { - outline: $euiFocusRingSize solid $euiFocusRingColor; - } - } - } } .euiDataGridHeader__action--selected { diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 710228d51cbe..de91b7ed803d 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -344,13 +344,14 @@ // Requires a selector to work with the Amsterdam outline styles @if ($amsterdamSelector) { + #{$amsterdamSelector} { - outline: $euiFocusRingSize solid currentColor; + outline: $euiFocusRingSize solid $euiFocusRingColor; + outline-offset: 2px; } // Chrome &:focus-visible + #{$amsterdamSelector} { - outline-style: auto; - outline-offset: 3px; + outline: $euiFocusRingSize solid $euiFocusRingColor; + outline-offset: 2px; } &:not(:focus-visible) + #{$amsterdamSelector} {