From a1b23acfea530b43b1b694ecc948641eb66971bb Mon Sep 17 00:00:00 2001 From: Roberto Dip Date: Mon, 5 Feb 2024 13:12:18 -0300 Subject: [PATCH] fix the hover state of chevron-right icons (#16595) for #16133, pair-programmed with @ghernandez345 # Checklist for submitter If some of the following don't apply, delete the relevant line. - [x] Changes file added for user-visible changes in `changes/` or `orbit/changes/`. See [Changes files](https://fleetdm.com/docs/contributing/committing-changes#changes-files) for more information. - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Gabe Hernandez --- changes/16133-icons | 1 + frontend/components/buttons/Button/_styles.scss | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 changes/16133-icons diff --git a/changes/16133-icons b/changes/16133-icons new file mode 100644 index 0000000000..27202b9e1a --- /dev/null +++ b/changes/16133-icons @@ -0,0 +1 @@ +* Fix visual display of chevron right icons on Chrome diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index c8d842efca..c2e78a9b81 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -245,9 +245,12 @@ $base-class: "button"; } } - // These buttons use stroke color instead of fill color to darken + // The SVG icons in these buttons contain a `stroke` instead of a `fill`, + // so we need to modify that property instead. Adding a custom `fill` + // could make these icons render incorrectly. &.input-field__copy-value-button, - &.windows-details-button { + &.windows-details-button, + [data-testid="chevron-right-icon"] { svg { path { fill: none;