@gooddata/sdk-ui-kit 11.39.0-alpha.2 → 11.39.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.39.0-alpha.2",
+  "version": "11.39.0-alpha.4",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -75,11 +75,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.0",
-    "@gooddata/sdk-backend-spi": "11.39.0-alpha.2",
-    "@gooddata/sdk-model": "11.39.0-alpha.2",
-    "@gooddata/sdk-ui": "11.39.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "11.39.0-alpha.2",
-    "@gooddata/util": "11.39.0-alpha.2"
+    "@gooddata/sdk-backend-spi": "11.39.0-alpha.4",
+    "@gooddata/sdk-model": "11.39.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.39.0-alpha.4",
+    "@gooddata/util": "11.39.0-alpha.4",
+    "@gooddata/sdk-ui": "11.39.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.0",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.39.0-alpha.2",
-    "@gooddata/reference-workspace": "11.39.0-alpha.2",
-    "@gooddata/oxlint-config": "11.39.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "11.39.0-alpha.2",
-    "@gooddata/stylelint-config": "11.39.0-alpha.2"
+    "@gooddata/eslint-config": "11.39.0-alpha.4",
+    "@gooddata/oxlint-config": "11.39.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.39.0-alpha.4",
+    "@gooddata/stylelint-config": "11.39.0-alpha.4",
+    "@gooddata/reference-workspace": "11.39.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiAddGranteeDialog/UiAddGranteeDialog.scss

@@ -0,0 +1,22 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-add-grantee-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gd-spacing-10px);
+    padding-bottom: var(--gd-spacing-5px);
+
+    &__preview {
+        display: flex;
+        align-items: center;
+        min-height: 50px;
+    }
+
+    &__empty-state {
+        flex: 1 1 auto;
+        text-align: center;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-6);
+    }
+}

package/src/@ui/UiAvatar/UiAvatar.scss

@@ -0,0 +1,22 @@
+// (C) 2026 GoodData Corporation
+
+@use "../themeColorsMap" as themeColorsMap;
+
+.gd-ui-kit-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 50%;
+    width: var(--gd-avatar-size);
+    height: var(--gd-avatar-size);
+    background-color: var(--gd-avatar-background-color);
+
+    &--background {
+        @each $key, $value in themeColorsMap.$theme-colors-map {
+            &-#{$key} {
+                --gd-avatar-background-color: var(--gd-palette-#{$value});
+            }
+        }
+    }
+}

package/src/@ui/UiConfirmDialog/UiConfirmDialog.scss

@@ -0,0 +1,13 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-confirm-dialog {
+    display: flex;
+    flex-direction: column;
+
+    &__body {
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-7);
+        margin-bottom: var(--gd-spacing-20px);
+    }
+}

package/src/@ui/UiDialogShell/UiDialogShell.scss

@@ -0,0 +1,56 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-dialog-shell {
+    display: flex;
+    flex-direction: column;
+    padding: var(--gd-spacing-20px);
+    background-color: var(--gd-palette-complementary-0);
+    border-radius: var(--gd-modal-borderRadius);
+    box-shadow: 0 2px 8px var(--gd-shadow-color);
+}
+
+.gd-ui-kit-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-15px);
+    margin-bottom: var(--gd-spacing-20px);
+
+    &__leading {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    &__title {
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--size-default {
+            font-size: 18px;
+            line-height: 26px;
+        }
+
+        &--size-large {
+            font-size: 20px;
+            line-height: 26px;
+        }
+    }
+}
+
+.gd-ui-kit-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--gd-spacing-10px);
+
+    &--divider {
+        margin-top: var(--gd-spacing-15px);
+        padding-top: var(--gd-spacing-15px);
+        border-top: 1px solid var(--gd-palette-complementary-3);
+    }
+}

package/src/@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.scss

@@ -0,0 +1,8 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-general-access-radio {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+}

package/src/@ui/UiGranteeRow/UiGranteeRow.scss

@@ -0,0 +1,36 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-grantee-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    width: 100%;
+    min-height: 50px;
+    padding: var(--gd-spacing-5px) 0;
+    box-sizing: border-box;
+
+    &__text {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        line-height: 20px;
+    }
+
+    &__name {
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__email {
+        font-size: 14px;
+        color: var(--gd-palette-complementary-6);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/src/@ui/UiObjectShareDialog/UiObjectShareDialog.scss

@@ -0,0 +1,12 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-object-share-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gd-spacing-10px);
+
+    &__grantees {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/@ui/UiRadio/UiRadio.scss

@@ -0,0 +1,63 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gd-spacing-5px);
+
+    &__control {
+        position: relative;
+        display: inline-flex;
+        flex-shrink: 0;
+        width: 14px;
+        height: 14px;
+    }
+
+    &__input {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+        cursor: pointer;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__circle {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid var(--gd-palette-complementary-5);
+        background-color: var(--gd-palette-complementary-0);
+        box-sizing: border-box;
+        pointer-events: none;
+        transition:
+            border-width 60ms ease-out,
+            border-color 60ms ease-out;
+
+        &--checked {
+            border-color: var(--gd-palette-primary-base);
+            border-width: 4px;
+        }
+
+        &--disabled {
+            border-color: var(--gd-palette-complementary-4);
+            background-color: var(--gd-palette-complementary-2);
+        }
+    }
+
+    &__input:focus-visible + &__circle {
+        box-shadow: 0 0 0 2px var(--gd-palette-primary-focus);
+    }
+
+    &__label {
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-8);
+        cursor: pointer;
+    }
+}

package/src/@ui/UiRadioRow/UiRadioRow.scss

@@ -0,0 +1,44 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-radio-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    width: 100%;
+    min-height: 50px;
+    padding: var(--gd-spacing-5px) 0;
+    box-sizing: border-box;
+
+    &__text {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        line-height: 20px;
+    }
+
+    &__title {
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        cursor: pointer;
+    }
+
+    &--disabled &__title {
+        cursor: not-allowed;
+    }
+
+    &__description {
+        font-size: 14px;
+        color: var(--gd-palette-complementary-6);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__trailing {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+}

package/src/@ui/UiSectionHeading/UiSectionHeading.scss

@@ -0,0 +1,28 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-section-heading {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-15px);
+
+    &__label {
+        font-size: 11px;
+        line-height: 23px;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--gd-palette-complementary-6);
+        flex-shrink: 0;
+    }
+
+    &__rule {
+        flex: 1 1 auto;
+        height: 1px;
+        background-color: var(--gd-palette-complementary-3);
+    }
+
+    &__action {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+}

package/src/@ui/UiTextInput/UiTextInput.scss

@@ -0,0 +1,68 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-text-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gd-spacing-5px);
+
+    &__label {
+        font-size: 14px;
+        line-height: 21px;
+        color: var(--gd-palette-complementary-7);
+    }
+
+    &__field {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 var(--gd-spacing-7px);
+        border: 1px solid var(--gd-palette-complementary-4);
+        border-radius: 3px;
+        background-color: var(--gd-palette-complementary-0);
+        box-shadow: inset 0 1px 2px var(--gd-shadow-color);
+
+        &:focus-within {
+            border-color: var(--gd-palette-primary-base);
+        }
+
+        &--disabled {
+            background-color: var(--gd-palette-complementary-2);
+            cursor: not-allowed;
+        }
+    }
+
+    &__icon-before {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-right: var(--gd-spacing-5px);
+    }
+
+    &__icon-after {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-left: var(--gd-spacing-5px);
+    }
+
+    &__input {
+        flex: 1 1 auto;
+        min-width: 0;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        font-family: inherit;
+        font-size: 14px;
+        color: var(--gd-palette-complementary-8);
+        outline: none;
+
+        &::placeholder {
+            color: var(--gd-palette-complementary-5);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+}

package/src/@ui/index.scss

@@ -30,3 +30,23 @@
 @use "./UiBreadcrumb/UiBreadcrumb.scss";
 @use "./UiInlineTextGenerator/UiInlineTextGenerator.scss";
 @use "./UiErrorPage/UiErrorPage.scss";
+@use "./UiSectionHeading/UiSectionHeading.scss";
+@use "./UiDialogShell/UiDialogShell.scss";
+@use "./UiConfirmDialog/UiConfirmDialog.scss";
+@use "./UiTextInput/UiTextInput.scss";
+@use "./UiRadio/UiRadio.scss";
+@use "./UiRadioRow/UiRadioRow.scss";
+@use "./UiAvatar/UiAvatar.scss";
+@use "./UiGranteeRow/UiGranteeRow.scss";
+@use "./UiObjectShareDialog/UiObjectShareDialog.scss";
+@use "./UiAddGranteeDialog/UiAddGranteeDialog.scss";
+@use "./UiGeneralAccessRadio/UiGeneralAccessRadio.scss";
+
+// `--gd-font-family` is a `:root` variable only; there is no global `body` font
+// declaration. Apply it once to every kit root so standalone components don't
+// fall back to the browser default (e.g. Times New Roman), rather than each
+// component redeclaring it.
+[class^="gd-ui-kit-"],
+[class*=" gd-ui-kit-"] {
+    font-family: var(--gd-font-family);
+}

package/src/FilterGroupItem/FilterGroupItem.scss

@@ -20,7 +20,6 @@
     }
 
     .gd-filter-group-item-chevron {
-        transition: transform 0.8s ease;
         padding-right: 4px;
         color: variables.$gd-color-state-blank;
     }
@@ -28,11 +27,10 @@
     &:not(.error, .gd-is-disabled):hover,
     &.gd-is-active {
         background-color: variables.$is-focused-background;
+    }
 
-        &::before {
-            transform: translateX(0) scaleX(1);
-            opacity: 1;
-        }
+    &.gd-is-active:not(.gd-is-disabled):hover {
+        background-color: variables.$gd-palette-primary-dimmed;
     }
 
     &::before {
@@ -43,30 +41,16 @@
         width: 4px;
         height: 100%;
         background-color: variables.$gd-palette-primary-base;
-        transform: translateX(-2px) scaleX(0);
         opacity: 0;
-        transition:
-            transform 0.2s ease,
-            opacity 0.2s ease;
     }
 
-    &:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron,
-    &.gd-is-active .gd-filter-group-item-chevron {
-        transform: translateX(4px);
+    &.gd-is-active::before {
+        opacity: 1;
     }
 
-    &.gd-is-active:not(.error, .gd-is-disabled):hover {
-        background-color: variables.$gd-palette-primary-dimmed;
-
-        &::before {
-            transform: translateX(-2px) scaleX(0);
-            opacity: 0;
-        }
-
-        .gd-filter-group-item-chevron {
-            transform: translateX(0);
-            animation: none;
-        }
+    &:not(.error, .gd-is-active, .gd-is-disabled):hover::before {
+        background-color: var(--gd-palette-complementary-5-t40, rgba(176, 190, 202, 0.6));
+        opacity: 1;
     }
 
     &.error:not(.gd-is-active) {
@@ -75,6 +59,11 @@
         .gd-filter-group-item-icon {
             color: variables.$gd-palette-error-base;
         }
+
+        &:not(.gd-is-disabled):hover::before {
+            background-color: var(--gd-palette-error-base-t85, rgba(229, 77, 66, 0.15));
+            opacity: 1;
+        }
     }
 
     &.error.gd-is-active .gd-filter-group-item-icon {