Skip to content

Commit

Permalink
[EuiDataGrid] Fix inconsistent focus halo (#5522)
Browse files Browse the repository at this point in the history
* 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.

* 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

* Update CHANGELOG.md

Added a more complete description of the changes made.

* 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.

* Updated the outline color in `euiCustomControlFocused` mixin to use
`$euiFocusRingColor`

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@gmail.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
  • Loading branch information
3 people authored Jan 14, 2022
1 parent 58c780c commit 3f617e1
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 4 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## [`main`](https://github.com/elastic/eui/tree/main)

No public interface changes since `45.0.0`.
- Updated the outline color in `euiCustomControlFocused` mixin to use
`$euiFocusRingColor` instead of `currentColor` ([#5479](https://github.com/elastic/eui/pull/5479))

## [`45.0.0`](https://github.com/elastic/eui/tree/v45.0.0)

Expand Down
7 changes: 4 additions & 3 deletions src/global_styling/mixins/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down

0 comments on commit 3f617e1

Please sign in to comment.