From 2e0307aa14e9639347f945c3b2e33d316db3b702 Mon Sep 17 00:00:00 2001
From: Tuomo Kivinen <mrtuomok@gmail.com>
Date: Thu, 8 Feb 2024 14:58:00 +0200
Subject: [PATCH] (HDS-2108) remove useless @layer style, update changelog

---
 CHANGELOG.md                                  |   1 +
 ...eaderActionBarItemWithDropdown.module.scss | 118 +++++++++---------
 2 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13e40be6b8..3b5253de89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ Changes that are not related to specific components
 #### Fixed
 
 - [Component] What bugs/typos are fixed?
+- [HeaderActionBarItemWithDropdown] Removed useless `@layer` css style which caused Jest/jsdom tests output errors.
 
 ### Core
 
diff --git a/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.module.scss b/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.module.scss
index ab1f80efeb..1ac2107557 100644
--- a/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.module.scss
+++ b/packages/react/src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.module.scss
@@ -1,73 +1,71 @@
-@layer actionBar {
-  .dropdownWrapper {
-    bottom: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    transform: translateY(100%) translateY(1px);
-    transition-duration: 0ms;
-    transition-property: max-height, padding-bottom;
-    z-index: 20;
-  }
-
-  .container {
-    display: flex;
+.dropdownWrapper {
+  bottom: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  transform: translateY(100%) translateY(1px);
+  transition-duration: 0ms;
+  transition-property: max-height, padding-bottom;
+  z-index: 20;
+}
 
-    .dropdownWrapper {
-      max-height: 0;
-      min-width: 300px;
-      padding-bottom: 0;
-      transition-delay: calc(var(--animation-duration-dropwdown) + var(--animation-close-delay-dropdown));
-    }
+.container {
+  display: flex;
 
-    &.visible .dropdownWrapper {
-      max-height: 1000vh;
-      padding-bottom: 20px;
-      transition-delay: 0ms;
-    }
+  .dropdownWrapper {
+    max-height: 0;
+    min-width: 300px;
+    padding-bottom: 0;
+    transition-delay: calc(var(--animation-duration-dropwdown) + var(--animation-close-delay-dropdown));
+  }
 
-    &:not(.hasContent) {
-      display: none;
-    }
+  &.visible .dropdownWrapper {
+    max-height: 1000vh;
+    padding-bottom: 20px;
+    transition-delay: 0ms;
+  }
 
-    &:not(.fullWidth) {
-      display: flex;
-      position: relative;
-    }
+  &:not(.hasContent) {
+    display: none;
+  }
 
-    &.fullWidth > .dropdownWrapper {
-      left: 0;
-    }
+  &:not(.fullWidth) {
+    display: flex;
+    position: relative;
   }
 
-  .icon {
-    display: block;
+  &.fullWidth>.dropdownWrapper {
+    left: 0;
   }
+}
 
-  .dropdown {
-    background: white;
-    border: 1px solid var(--color-black-10);
-    margin-top: -1px;
-    position: relative;
-    right: 0;
-    transform: translateY(-100%);
-    transition: var(--animation-duration-dropwdown) transform var(--animation-close-delay-dropdown),
-      0ms visibility calc((var(--animation-duration-dropwdown) + var(--animation-close-delay-dropdown)));
-    visibility: hidden;
+.icon {
+  display: block;
+}
 
-    &.fullWidth {
-      left: 0;
-    }
+.dropdown {
+  background: white;
+  border: 1px solid var(--color-black-10);
+  margin-top: -1px;
+  position: relative;
+  right: 0;
+  transform: translateY(-100%);
+  transition: var(--animation-duration-dropwdown) transform var(--animation-close-delay-dropdown),
+    0ms visibility calc((var(--animation-duration-dropwdown) + var(--animation-close-delay-dropdown)));
+  visibility: hidden;
 
-    &.visible {
-      transform: translateY(0%);
-      transition: var(--animation-duration-dropwdown) transform 0ms, 0ms visibility 0ms;
-      visibility: visible;
-    }
+  &.fullWidth {
+    left: 0;
+  }
 
-    > * {
-      padding: var(--spacing-xs) var(--spacing-s);
-      width: 100%;
-    }
+  &.visible {
+    transform: translateY(0%);
+    transition: var(--animation-duration-dropwdown) transform 0ms, 0ms visibility 0ms;
+    visibility: visible;
   }
-}
+
+  >* {
+    padding: var(--spacing-xs) var(--spacing-s);
+    width: 100%;
+  }
+}
\ No newline at end of file