@gooddata/sdk-ui-kit 11.50.0 → 11.51.0-alpha.1

package/styles/scss/Button/_placeholders.scss

@@ -0,0 +1,169 @@
+// (C) 2007-2026 GoodData Corporation
+@use "../mixins.scss";
+@use "_variables" as button-variables;
+@use "../variables";
+
+// ==========================================================================
+// Silent classes - more clever mixins
+// ==========================================================================
+//
+// Keep placeholders out of Button/_mixins.scss. A stylesheet that is pulled in through
+// legacy `@import` gets its own import context, and every module `@use`d below it is
+// re-evaluated in that context — so a placeholder extended by button.scss is emitted once
+// per import context. In an entry point that `@import`s several SDK packages (the Modeler's
+// app.scss) the extra copies land after the variant rules and reset them at equal
+// specificity, e.g. `border: 1px solid transparent` overriding `.gd-button-secondary`'s
+// border-color (LX-2773). Only button.scss should load this file; anything that needs a
+// button mixin loads Button/mixins, which stays placeholder-free and therefore emits no CSS.
+
+%btn {
+    position: relative;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 14px;
+    border: 1px solid transparent;
+    font: 400 14px/20px variables.$gd-font-primary;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    text-align: left;
+    border-radius: button-variables.$button-border-radius;
+    text-transform: button-variables.$button-text-capitalization;
+
+    @include mixins.transition(all, 0.25s, ease-in-out);
+
+    &::before,
+    &::after {
+        position: absolute;
+        top: 50%;
+        height: 20px;
+        line-height: 20px;
+        color: variables.$gd-color-text-dimmed;
+        transform: translateY(-50%);
+        font-size: 18px;
+        text-align: center;
+
+        @include mixins.transition(color, 0.25s, ease-in-out);
+    }
+
+    &::before {
+        left: 10px;
+        margin-right: 0.5em;
+    }
+
+    &::after {
+        right: 7px;
+        margin-left: 0.5em;
+    }
+
+    .gd-button-text,
+    .gd-button-icon {
+        position: relative;
+        display: block;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .gd-button-text {
+        top: 1px;
+        flex: 1 1 auto;
+        overflow: hidden;
+        width: 100%;
+        text-overflow: ellipsis;
+    }
+
+    .gd-button-icon {
+        flex: 0 0 auto;
+        width: button-variables.$button-icon-width;
+        height: button-variables.$button-icon-width;
+        margin: 0 0.5em;
+        line-height: button-variables.$button-icon-width;
+        color: variables.$gd-color-text-dimmed;
+        font-size: button-variables.$button-icon-width;
+        text-align: center;
+        text-decoration: none;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &::before,
+        &::after {
+            color: inherit;
+
+            @include mixins.transition(color, 0.25s, ease-in-out);
+        }
+    }
+
+    &:not(.gd-button-link) .gd-button-icon {
+        &:first-child {
+            margin-left: -4px;
+        }
+
+        &:last-child {
+            margin-right: -4px;
+        }
+
+        &:only-child {
+            width: 19px;
+            height: 17px;
+            line-height: 17px;
+            margin-right: -9px;
+            margin-left: -9px;
+            font-size: 16px;
+        }
+    }
+
+    &:not(.disabled):not(.gd-button-link) {
+        &:active {
+            &::before,
+            &::after {
+                top: calc(50% + 1px);
+            }
+
+            .gd-button-text {
+                top: 2px;
+            }
+
+            .gd-button-icon {
+                margin-top: 2px;
+            }
+        }
+
+        .gd-button-icon {
+            &:only-child {
+                color: button-variables.$button-normal-color;
+            }
+        }
+    }
+
+    &:hover {
+        &::before,
+        &::after,
+        .gd-button-icon {
+            color: button-variables.$button-action-color;
+        }
+    }
+
+    &:focus-visible {
+        transition: none;
+    }
+
+    &[class*="gd-icon-"] {
+        padding-left: 37px;
+
+        &.gd-icon-right {
+            padding-left: 11px;
+            padding-right: 32px;
+        }
+    }
+}
+
+// Temporary:
+// refactor
+// stylelint-disable-next-line no-duplicate-selectors
+%btn {
+    .ss-icon {
+        vertical-align: middle;
+    }
+}

package/styles/scss/button.scss

@@ -1,6 +1,7 @@
 // (C) 2007-2025 GoodData Corporation
 @use "sass:color";
 @use "Button/_mixins" as button-mixins;
+@use "Button/placeholders"; // defines %btn, extended below
 @use "Button/variables" as button-variables;
 @use "mixins";
 @use "variables";

package/styles/scss/header.scss

@@ -519,7 +519,10 @@ a.gd-list-help-menu-item.gd-list-item {
 }
 
 .gd-header-chat {
-    --gd-icon-fill-color: #fff;
+    // Follow the header foreground colour instead of hardcoding white, which was only correct
+    // while the header was always black. `.gd-header-button` sets `color: inherit`, so this
+    // resolves to the (themeable) colour AppHeader puts on the header root.
+    --gd-icon-fill-color: currentColor;
     height: 100%;
     margin: 0;
     width: 32px;
@@ -685,12 +688,14 @@ a.gd-list-help-menu-item.gd-list-item {
 .anchor-tag-header-help,
 .anchor-tag-header-help:active,
 .anchor-tag-header-help:focus {
-    color: #fff;
+    // Inherit the themeable header foreground rather than hardcoding white. Applies only when
+    // `helpRedirectUrl` is configured (see HeaderHelp.tsx); the dropdown variant never had this rule.
+    color: inherit;
     opacity: 0.8;
     text-decoration: none;
 
     &:hover {
-        color: #fff;
+        color: inherit;
         text-decoration: none;
         opacity: 1;
     }