@gooddata/sdk-ui-kit 10.36.0-alpha.3 → 10.36.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.36.0-alpha.3",
+  "version": "10.36.0-alpha.5",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -75,11 +75,11 @@
     "@floating-ui/dom": "1.6.13",
     "@floating-ui/react-dom": "2.1.2",
     "@floating-ui/react": "~0.27.12",
-    "@gooddata/sdk-backend-spi": "10.36.0-alpha.3",
-    "@gooddata/sdk-model": "10.36.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "10.36.0-alpha.3",
-    "@gooddata/sdk-ui": "10.36.0-alpha.3",
-    "@gooddata/util": "10.36.0-alpha.3"
+    "@gooddata/sdk-backend-spi": "10.36.0-alpha.5",
+    "@gooddata/sdk-model": "10.36.0-alpha.5",
+    "@gooddata/sdk-ui": "10.36.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "10.36.0-alpha.5",
+    "@gooddata/util": "10.36.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -135,8 +135,8 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.36.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "10.36.0-alpha.3"
+    "@gooddata/reference-workspace": "10.36.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "10.36.0-alpha.5"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

package/{styles/scss → src/@ui/UiAsyncTable}/asyncTable.scss

@@ -1,5 +1,5 @@
 // (C) 2025 GoodData Corporation
-@use "./mixins";
+@use "../../../styles/scss/mixins";
 
 .gd-ui-kit-async-table {
     $root: &;
@@ -88,10 +88,6 @@
         box-sizing: border-box;
         border-bottom: 1px solid var(--gd-palette-complementary-2);
 
-        > * {
-            flex: 0 0 auto;
-        }
-
         &--bold {
             font-weight: 700;
         }
@@ -103,6 +99,10 @@
         }
     }
 
+    &__link {
+        width: 100%;
+    }
+
     &__text {
         flex: 0 1 auto;
         text-overflow: ellipsis;
@@ -114,12 +114,18 @@
             flex-direction: column;
             font-size: var(--gd-table-multi-line-font-size);
             line-height: var(--gd-table-multi-line-line-height);
+        }
+    }
 
-            > span:first-child {
-                font-size: var(--gd-table-multi-line-font-size-large);
-                line-height: var(--gd-table-multi-line-line-height-large);
-                font-weight: 700;
-            }
+    &__text-line {
+        text-overflow: inherit;
+        overflow: inherit;
+        white-space: inherit;
+
+        &--first {
+            font-size: var(--gd-table-multi-line-font-size-large);
+            line-height: var(--gd-table-multi-line-line-height-large);
+            font-weight: 700;
         }
     }
 
@@ -129,6 +135,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        flex: none;
     }
 
     &__role-icon {
@@ -139,10 +146,15 @@
         margin-right: var(--gd-spacing-5px);
     }
 
-    &__suffix-icon {
+    &__suffix-icon,
+    &__badge {
         margin-left: var(--gd-spacing-5px);
     }
 
+    &__badge {
+        flex: none;
+    }
+
     &__sort {
         padding: 0 var(--gd-spacing-5px);
         display: none;
@@ -152,10 +164,6 @@
         }
     }
 
-    &__badge {
-        margin-left: var(--gd-spacing-5px);
-    }
-
     &__toolbar {
         padding: 0;
         height: var(--gd-table-row-height-small);
@@ -194,6 +202,10 @@
         padding-right: var(--gd-spacing-20px);
     }
 
+    &__toolbar-search {
+        margin-left: auto;
+    }
+
     &__dropdown-item {
         display: flex;
         align-items: center;

package/src/@ui/UiCheckbox/UiCheckbox.scss

@@ -24,7 +24,7 @@
             border-color 0.2s;
         background-color: var(--gd-palette-complementary-0);
 
-        &:hover {
+        &:hover:not(&--disabled) {
             border-color: var(--gd-palette-complementary-6);
             box-shadow: 0 1px 2px 0 rgba(31, 53, 74, 0.15) inset;
         }
@@ -65,6 +65,10 @@
                 transform: scale(1) rotate(0deg);
             }
         }
+
+        &--disabled {
+            border-color: var(--gd-palette-complementary-3);
+        }
     }
 
     &__input:focus-visible + &__box {

package/src/@ui/UiIcon/UiIcon.scss

@@ -1,4 +1,6 @@
 // (C) 2024-2025 GoodData Corporation
+@use "../themeColorsMap";
+
 .gd-ui-kit-icon {
     fill: var(--gd-icon-fill-color);
 
@@ -13,60 +15,46 @@
     }
 
     &--color {
-        &-primary {
-            --gd-icon-fill-color: var(--gd-palette-primary-base);
-        }
-
-        &-warning {
-            --gd-icon-fill-color: var(--gd-palette-warning-base);
-        }
-
-        &-error {
-            --gd-icon-fill-color: var(--gd-palette-error-base);
-        }
-
-        &-complementary-0 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-0);
-        }
-
-        &-complementary-1 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-1);
-        }
-
-        &-complementary-2 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-2);
-        }
-
-        &-complementary-3 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-3);
+        @each $key, $value in themeColorsMap.$theme-colors-map {
+            &-#{$key} {
+                --gd-icon-fill-color: var(--gd-palette-#{$value});
+            }
         }
+    }
 
-        &-complementary-4 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-4);
-        }
+    path {
+        transition: var(--gd-transition-all);
+    }
+}
 
-        &-complementary-5 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-5);
-        }
+.gd-ui-kit-icon-background {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    fill: var(--gd-icon-background-color);
+    $root: &;
 
-        &-complementary-6 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-6);
+    &--shape {
+        &-circle {
+            border-radius: 50%;
         }
+    }
 
-        &-complementary-7 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-7);
+    &--color {
+        @each $key, $value in themeColorsMap.$theme-colors-map {
+            &-#{$key} {
+                --gd-icon-background-color: var(--gd-palette-#{$value});
+            }
         }
+    }
 
-        &-complementary-8 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-8);
+    &--type {
+        &-fill {
+            background-color: var(--gd-icon-background-color);
         }
 
-        &-complementary-9 {
-            --gd-icon-fill-color: var(--gd-palette-complementary-9);
+        &-border {
+            border: 1px solid var(--gd-icon-background-color);
         }
     }
-
-    path {
-        transition: var(--gd-transition-all);
-    }
 }

package/src/@ui/defaultTheme.scss

@@ -225,6 +225,7 @@
     --gd-button-M: 32px;
     --gd-button-S: 27px;
     --gd-icon-fill-color: var(--gd-palette-complementary-9);
+    --gd-icon-background-color: var(--gd-palette-complementary-2);
     --gd-tabs-height-L: 56px;
     --gd-tabs-height-M: 27px;
     --gd-tabs-height-S: 23px;

package/src/@ui/index.scss

@@ -15,3 +15,4 @@
 @use "./UiNavigationBypass/UiNavigationBypass.scss";
 @use "./UiBadge/UiBadge.scss";
 @use "./UiCheckbox/UiCheckbox.scss";
+@use "./UiAsyncTable/asyncTable.scss";

package/src/@ui/themeColorsMap.scss

@@ -0,0 +1,17 @@
+// (C) 2024-2025 GoodData Corporation
+
+$theme-colors-map: (
+    "primary": "primary-base",
+    "warning": "warning-base",
+    "error": "error-base",
+    "complementary-0": "complementary-0",
+    "complementary-1": "complementary-1",
+    "complementary-2": "complementary-2",
+    "complementary-3": "complementary-3",
+    "complementary-4": "complementary-4",
+    "complementary-5": "complementary-5",
+    "complementary-6": "complementary-6",
+    "complementary-7": "complementary-7",
+    "complementary-8": "complementary-8",
+    "complementary-9": "complementary-9",
+);