Skip to content

Commit 8199b10

Browse files
authored
fix(components): update close button focus styles (#6939)
## 📄 Description Add focus style to the `post-closebutton` component so that it is properly styled when used in a shadow DOM. ## 🚀 Demo Before: <img width="1442" height="472" alt="image" src="https://github.com/user-attachments/assets/b31d6d24-84b4-42d7-ae71-14c4277e5050" /> After: <img width="1442" height="472" alt="image" src="https://github.com/user-attachments/assets/ae2bc557-014b-4cad-95f2-8e4bdc3197b4" /> --- ## 🔮 Design review - [ ] Design review done - [x] No design review needed ## 📝 Checklist - ✅ My code follows the style guidelines of this project - 🛠️ I have performed a self-review of my own code - 📄 I have made corresponding changes to the documentation - ⚠️ My changes generate no new warnings or errors - 🧪 I have added tests that prove my fix is effective or that my feature works - ✔️ New and existing unit tests pass locally with my changes
1 parent b7acf67 commit 8199b10

File tree

2 files changed

+7
-0
lines changed

2 files changed

+7
-0
lines changed

.changeset/puny-kids-return.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@swisspost/design-system-components': patch
3+
---
4+
5+
Updated `post-closebutton` focus styles to always match other buttons, ensuring a consistent focus ring.

packages/components/src/components/post-closebutton/post-closebutton.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ post-closebutton .btn {
2828
height: tokens.get('close-icon-size');
2929
}
3030

31+
@include utilities.focus-style;
32+
3133
@include utilities.not-disabled-hover() {
3234
cursor: pointer;
3335
background-color: tokens.get('close-hover-bg');

0 commit comments

Comments
 (0)