@gooddata/sdk-ui-kit 11.51.0-alpha.0 → 11.51.0-alpha.2

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

package/styles/scss/main.scss

@@ -56,3 +56,4 @@
 @use "../../src/FileUpload/UploadFileList/UploadFileList";
 @use "../../src/FileUpload/UploadStatusDialog/UploadStatusDialog";
 @use "../../src/WidgetNotice/WidgetNotice.scss";
+@use "../../src/Timezone/TimezoneSelect.scss";

package/esm/@ui/UiMoreOptionsMenu/UiMoreOptionsMenu.d.ts

@@ -1,28 +0,0 @@
-import { type IUiLabelsChecklistItem } from "../UiLabelsChecklist/UiLabelsChecklist.js";
-/**
- * @internal
- */
-export interface IUiMoreOptionsMenuProps {
-    /** Empty/omitted hides the "Manage labels access" row (e.g. facts have no labels). */
-    labels?: ReadonlyArray<IUiLabelsChecklistItem>;
-    /** Locked items are always treated as selected. */
-    selectedLabelIds?: ReadonlyArray<string>;
-    onLabelsChange?: (selectedIds: string[]) => void;
-    /**
-     * Omit to hide the row. Used for read-only permission rows (e.g. EDIT), whose
-     * level control has no dropdown to host Remove access — so the action lives here.
-     */
-    onRemoveAccess?: () => void;
-    isDisabled?: boolean;
-    dataTestId?: string;
-}
-/**
- * Per-grantee "⋯" menu: "Manage labels access" (drills into {@link UiLabelsChecklist})
- * and "Remove access". Each row shows only when its data/handler is given. Remove
- * access appears here for read-only permission rows whose level control has no
- * dropdown to host it.
- *
- * @internal
- */
-export declare function UiMoreOptionsMenu({ labels, selectedLabelIds, onLabelsChange, onRemoveAccess, isDisabled, dataTestId }: IUiMoreOptionsMenuProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=UiMoreOptionsMenu.d.ts.map

package/esm/@ui/UiMoreOptionsMenu/UiMoreOptionsMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UiMoreOptionsMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiMoreOptionsMenu/UiMoreOptionsMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,sBAAsB,EAAqB,MAAM,2CAA2C,CAAC;AAO3G;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC,sFAAsF;IACtF,MAAM,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC/C,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAuCD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,UAAU,EACV,UAAU,EACb,EAAE,uBAAuB,2CAwFzB"}

package/esm/@ui/UiMoreOptionsMenu/UiMoreOptionsMenu.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2026 GoodData Corporation
-import { useId, useMemo, useRef } from "react";
-import { useIntl } from "react-intl";
-import { olpPermissionMessages } from "../../locales.js";
-import { bem } from "../@utils/bem.js";
-import { UiIcon } from "../UiIcon/UiIcon.js";
-import { UiIconButton } from "../UiIconButton/UiIconButton.js";
-import { UiLabelsChecklist } from "../UiLabelsChecklist/UiLabelsChecklist.js";
-import { UiMenu } from "../UiMenu/UiMenu.js";
-import { UiPopover } from "../UiPopover/UiPopover.js";
-const { b } = bem("gd-ui-kit-more-options-menu");
-// Defined at module scope, and reading data through a ref, so its identity never
-// changes across renders — UiMenu remounts the drill-in on a new component type,
-// which would drop the checklist's staged edits.
-function LabelsChecklistContent({ onBack, onClose, dataRef }) {
-    const data = dataRef.current;
-    return (_jsx(UiLabelsChecklist, { items: data.labels, defaultSelectedIds: data.selectedLabelIds, onApply: (ids) => data.onLabelsChange?.(ids), onBack: onBack, onClose: onClose, dataTestId: data.dataTestId }));
-}
-/**
- * Per-grantee "⋯" menu: "Manage labels access" (drills into {@link UiLabelsChecklist})
- * and "Remove access". Each row shows only when its data/handler is given. Remove
- * access appears here for read-only permission rows whose level control has no
- * dropdown to host it.
- *
- * @internal
- */
-export function UiMoreOptionsMenu({ labels, selectedLabelIds, onLabelsChange, onRemoveAccess, isDisabled, dataTestId, }) {
-    const intl = useIntl();
-    const menuId = useId();
-    const hasLabels = (labels?.length ?? 0) > 0;
-    // Feed the live inputs to the stable content component through a ref so the
-    // component itself never has to change (see LabelsChecklistContent).
-    const dataRef = useRef({
-        labels: labels ?? [],
-        selectedLabelIds: selectedLabelIds ?? [],
-        onLabelsChange,
-        dataTestId,
-    });
-    dataRef.current = {
-        labels: labels ?? [],
-        selectedLabelIds: selectedLabelIds ?? [],
-        onLabelsChange,
-        dataTestId,
-    };
-    const labelsContentRef = useRef(undefined);
-    if (!labelsContentRef.current) {
-        labelsContentRef.current = (props) => _jsx(LabelsChecklistContent, { ...props, dataRef: dataRef });
-    }
-    const items = useMemo(() => {
-        const result = [];
-        if (hasLabels) {
-            result.push({
-                type: "content",
-                id: "labels",
-                stringTitle: intl.formatMessage(olpPermissionMessages.labels),
-                showComponentOnly: true,
-                // UiMenu adds the trailing drill-in chevron itself; we only set the leading icon.
-                iconLeft: _jsx(UiIcon, { type: "ldmLabel", size: 16, color: "complementary-7" }),
-                data: undefined,
-                Component: labelsContentRef.current,
-            });
-        }
-        if (onRemoveAccess) {
-            result.push({
-                type: "interactive",
-                id: "remove",
-                stringTitle: intl.formatMessage(olpPermissionMessages.removeAccess),
-                iconLeft: _jsx(UiIcon, { type: "trash", size: 16, color: "complementary-7" }),
-                data: undefined,
-            });
-        }
-        return result;
-    }, [hasLabels, onRemoveAccess, intl]);
-    return (_jsx(UiPopover, { anchor: _jsx(UiIconButton, { icon: "ellipsis", variant: "tertiary", size: "large", iconColor: "complementary-6", isDisabled: isDisabled, accessibilityConfig: {
-                ariaLabel: intl.formatMessage(olpPermissionMessages.moreOptionsAriaLabel),
-            } }), anchorAccessibilityConfig: { ariaHaspopup: "menu" }, width: 200, content: ({ onClose }) => (_jsx("div", { className: b(), "data-testid": dataTestId, children: _jsx(UiMenu, { items: items, size: "small", onSelect: (item) => {
-                    if (item.id === "remove") {
-                        onRemoveAccess?.();
-                    }
-                }, onClose: onClose, ariaAttributes: {
-                    id: menuId,
-                    "aria-label": intl.formatMessage(olpPermissionMessages.moreOptionsMenuLabel),
-                } }) })) }));
-}

package/src/@ui/UiMoreOptionsMenu/UiMoreOptionsMenu.scss

@@ -1,10 +0,0 @@
-// (C) 2026 GoodData Corporation
-
-// Cancel UiPopover.__content's 10px padding so the menu spans edge-to-edge.
-
-.gd-ui-kit-more-options-menu {
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    margin: calc(-1 * var(--gd-spacing-10px));
-}