Merge branch 'main' into beta

Author: AnnaHoege

CHANGELOG.md

@@ -1,6 +1,5 @@
 # [1.9.0-beta.2](https://github.com/otto-de/b2b-design-system/compare/v1.9.0-beta.1...v1.9.0-beta.2) (2023-11-28)
 
-
 ### Bug Fixes
 
 * **Icon:** added inheritable color for warning hint icon ([dfebdfc](https://github.com/otto-de/b2b-design-system/commit/dfebdfcbecc4f453b2cd4a83f93b9cfacfb81139))
@@ -12,6 +11,13 @@
 
 * **Icon:** added warning-hint icon ([a1823b5](https://github.com/otto-de/b2b-design-system/commit/a1823b5a7f7fa7399bb6f3f46f5e17aaf8292431))
 
+## [1.8.2](https://github.com/otto-de/b2b-design-system/compare/v1.8.1...v1.8.2) (2023-12-01)
+
+### Bug Fixes
+
+* **Anchor:** [B2BDS-237] added forced stacking context to avoid host element hiding anchor ([35d235c](https://github.com/otto-de/b2b-design-system/commit/35d235cce239afbac761db403669a77dcea289ba))
+
+
 ## [1.8.1](https://github.com/otto-de/b2b-design-system/compare/v1.8.0...v1.8.1) (2023-11-22)
 
 

packages/core-components/src/components/anchor/anchor.scss

@@ -1,22 +1,34 @@
 @use 'sass:color';
 @use '../../global/b2b-styles';
 
-.b2b-anchor {
-  font-family: var(--b2b-font-family-default);
-  color: var(--b2b-color-copy-default);
-  text-decoration: underline;
-  transition: all 0.3s ease;
+:host {
+  // related to B2BDS-237
+  z-index: 0;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
 
-  &:hover {
-    color: var(--b2b-color-red-100);
-    cursor: pointer;
-  }
+  .b2b-anchor {
+    font-family: var(--b2b-font-family-default);
+    color: var(--b2b-color-copy-default);
+    text-decoration: underline;
+    transition: all 0.3s ease;
 
-  &--100 {
-    font-size: var(--b2b-size-copy-100);
-  }
+    // related to B2BDS-237
+    z-index: 1001;
+    position: relative;
+
+    &:hover {
+      color: var(--b2b-color-red-100);
+      cursor: pointer;
+    }
+
+    &--100 {
+      font-size: var(--b2b-size-copy-100);
+    }
 
-  &--inherit {
-    font-size: inherit;
+    &--inherit {
+      font-size: inherit;
+    }
   }
 }

packages/core-components/src/components/anchor/anchor.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, Host, h } from '@stencil/core';
 
 @Component({
   tag: 'b2b-anchor',
@@ -21,16 +21,18 @@ export class AnchorComponent {
 
   render() {
     return (
-      <a
-        href={this.href}
-        download={this.download}
-        target={`_${this.target}`}
-        class={{
-          'b2b-anchor': true,
-          [`b2b-anchor--${this.size}`]: true,
-        }}>
-        <slot></slot>
-      </a>
+      <Host>
+        <a
+          href={this.href}
+          download={this.download}
+          target={`_${this.target}`}
+          class={{
+            'b2b-anchor': true,
+            [`b2b-anchor--${this.size}`]: true,
+          }}>
+          <slot></slot>
+        </a>
+      </Host>
     );
   }
 }