From a6d0ba6be0e2d7b7640c0d4468adca606cae45a7 Mon Sep 17 00:00:00 2001
From: Daniel Tsanev <127101685+dtsanevmw@users.noreply.github.com>
Date: Wed, 19 Jun 2024 16:05:56 +0300
Subject: [PATCH] fix(dropdown): add negative offset to item focus outline
 (#1454)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [X] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

Focus outline is hard to be seen in tab overflow due to being cut

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

Outline have offset and it's clearly visible

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information
---
 projects/angular/src/popover/dropdown/_dropdown.clarity.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/projects/angular/src/popover/dropdown/_dropdown.clarity.scss b/projects/angular/src/popover/dropdown/_dropdown.clarity.scss
index a178f262cb..71ee6757ba 100644
--- a/projects/angular/src/popover/dropdown/_dropdown.clarity.scss
+++ b/projects/angular/src/popover/dropdown/_dropdown.clarity.scss
@@ -176,6 +176,9 @@
           }
         }
       }
+      &:focus {
+        outline-offset: calc(-1 * tokens.$cds-global-space-2);
+      }
     }
 
     .btn,