(HDS-2108) remove useless @layer style, update changelog

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
 

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%;
+  }
+}