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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.11.0-alpha.0",
+  "version": "11.11.0-alpha.2",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -76,11 +76,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "^11.1.0",
-    "@gooddata/sdk-backend-spi": "11.11.0-alpha.0",
-    "@gooddata/sdk-model": "11.11.0-alpha.0",
-    "@gooddata/sdk-ui-theme-provider": "11.11.0-alpha.0",
-    "@gooddata/sdk-ui": "11.11.0-alpha.0",
-    "@gooddata/util": "11.11.0-alpha.0"
+    "@gooddata/sdk-backend-spi": "11.11.0-alpha.2",
+    "@gooddata/sdk-model": "11.11.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.11.0-alpha.2",
+    "@gooddata/util": "11.11.0-alpha.2",
+    "@gooddata/sdk-ui": "11.11.0-alpha.2"
   },
   "devDependencies": {
     "@gooddata/stylelint-config": "^5.0.0",
@@ -130,9 +130,9 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.11.0-alpha.0",
-    "@gooddata/sdk-backend-mockingbird": "11.11.0-alpha.0",
-    "@gooddata/reference-workspace": "11.11.0-alpha.0"
+    "@gooddata/eslint-config": "11.11.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.11.0-alpha.2",
+    "@gooddata/reference-workspace": "11.11.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiAsyncTable/asyncTable.scss

@@ -18,6 +18,10 @@
             height: var(--gd-table-row-height-large);
         }
 
+        &--active {
+            cursor: pointer;
+        }
+
         &:hover {
             #{$root}__cell {
                 background-color: var(--gd-palette-complementary-2);
@@ -278,6 +282,10 @@
         max-width: 200px;
     }
 
+    &__toolbar-custom-element {
+        margin-left: auto;
+    }
+
     &__dropdown-item-container {
         &--underlined {
             margin-top: -10px;
@@ -291,6 +299,7 @@
         font-size: var(--gd-table-dropdown-item-font-size);
         cursor: pointer;
         height: var(--gd-table-dropdown-item-height);
+        -webkit-font-smoothing: antialiased;
 
         &:hover {
             background-color: var(--gd-palette-complementary-2);
@@ -388,13 +397,14 @@
         justify-content: center;
         align-items: center;
         height: 300px;
+        gap: var(--gd-spacing-10px);
         color: var(--gd-palette-complementary-6);
     }
 
     &__empty-state-title {
         font-size: 20px;
         font-weight: 700;
-        margin-top: var(--gd-spacing-15px);
+        margin-top: var(--gd-spacing-10px);
     }
 
     &__empty-state-description {

package/src/@ui/UiMenu/UiMenu.scss

@@ -125,6 +125,14 @@
             background-color: variables.$is-focused-background;
             color: variables.$is-focused-color;
         }
+        #{$root}--controlType-mouse &:hover:not(&--isDisabled)#{$root}__item--isDestructive {
+            background-color: var(--gd-palette-error-dimmed);
+            color: var(--gd-palette-error-base);
+
+            & svg {
+                fill: var(--gd-palette-error-base);
+            }
+        }
 
         &--isDisabled {
             color: variables.$gd-color-disabled;

package/src/@ui/UiTabs/UiTabs.scss

@@ -3,6 +3,7 @@
 .gd-ui-kit-tabs {
     $root: &;
 
+    background: var(--gd-palette-complementary-0);
     font-family: var(--gd-font-family);
     display: flex;
     align-items: flex-end;
@@ -20,6 +21,10 @@
         bottom: 0;
     }
 
+    &--disable-border::after {
+        display: none;
+    }
+
     &__container {
         display: flex;
         flex: 1;
@@ -43,23 +48,37 @@
         align-self: stretch;
         flex-shrink: 0;
         border-left: 1px solid var(--gd-palette-complementary-3);
+        margin-right: calc(-1 * var(--gd-spacing-5px));
     }
 
     &__dropdown {
         display: flex;
-        padding-left: var(--gd-spacing-10px);
         border-bottom: 1px solid transparent;
     }
 
     &__dropdown .gd-dropdown-button-wrapper {
         height: 100%;
+        width: 100%;
     }
 
-    &__dropdown .gd-ui-kit-button {
+    &__dropdown .gd-ui-kit-button,
+    &__dropdown .gd-ui-kit-icon-button {
         height: 100%;
+        width: 100%;
+        color: var(--gd-palette-complementary-7);
+    }
+
+    &__dropdown .gd-ui-kit-button {
+        padding-left: var(--gd-spacing-10px);
+        padding-right: var(--gd-spacing-10px);
+    }
+
+    &__dropdown .gd-ui-kit-icon-button {
+        width: 45px;
     }
 
     &__tab-wrapper {
+        position: relative;
         display: flex;
         align-items: center;
         gap: var(--gd-spacing-10px);
@@ -95,6 +114,7 @@
     }
 
     &__tab-list-item {
+        position: relative;
         display: flex;
         cursor: pointer;
         align-items: center;
@@ -104,9 +124,43 @@
             background-color: var(--gd-palette-complementary-2);
         }
 
-        &:hover #{$root}__label {
-            transition: color 0.2s;
-            color: var(--gd-palette-complementary-9);
+        & #{$root}__label {
+            color: var(--gd-palette-complementary-8);
+        }
+
+        & #{$root}__label--selected {
+            font-weight: 700;
+            color: var(--gd-palette-primary-base);
+        }
+    }
+
+    &__tab-list-item:has(*:focus-visible)#{$root}__tab-list-item--focused,
+    &__tab-list-item--actions-open,
+    &__tab-list-item:hover {
+        #{$root}__tab-list-item-actions {
+            opacity: 1;
+        }
+    }
+
+    &__tab-wrapper:has(*:focus-visible)#{$root}__tab-wrapper--focused,
+    &__tab-wrapper--actions-open,
+    &__tab-wrapper:hover {
+        #{$root}__tabs-actions {
+            opacity: 1;
+        }
+    }
+
+    &__tabs-actions {
+        opacity: 0;
+        transition: opacity 0.2s;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+
+        & .gd-ui-kit-icon-button {
+            align-items: center;
+            justify-items: end;
         }
     }
 
@@ -119,13 +173,20 @@
     &__tab-list-item-actions {
         flex-grow: 0;
         flex-shrink: 0;
-        margin-right: calc(-0.5 * var(--gd-spacing-10px));
+        opacity: 0;
+        transition: opacity 0.2s;
     }
 
     &__tab-list {
         width: 250px;
         max-height: 400px;
         overflow-y: auto;
+        overflow-x: hidden;
+
+        &--mobile {
+            width: unset;
+            height: unset;
+        }
     }
 
     &__actions-wrapper {
@@ -137,7 +198,7 @@
         color: var(--gd-palette-complementary-8);
     }
 
-    &__label {
+    &__container #{$root}__label {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -150,7 +211,7 @@
             color: var(--gd-palette-complementary-7);
         }
 
-        &--variant-default#{&}--selected {
+        &--variant-default#{$root}__label--selected {
             color: var(--gd-palette-complementary-8);
         }
 
@@ -158,7 +219,7 @@
             color: var(--gd-palette-complementary-3);
         }
 
-        &--variant-placeholder#{&}--selected {
+        &--variant-placeholder#{$root}__label--selected {
             color: var(--gd-palette-complementary-3);
         }
     }
@@ -167,11 +228,8 @@
         &-large {
             #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-L, 56px);
-                padding: var(--gd-spacing-16px) var(--gd-spacing-10px) var(--gd-spacing-14px)
-                    var(--gd-spacing-10px);
-            }
-            #{$root}__actions-wrapper {
-                margin-right: calc(-0.5 * var(--gd-spacing-10px));
+                padding: var(--gd-spacing-16px) var(--gd-spacing-20px) var(--gd-spacing-14px)
+                    var(--gd-spacing-20px);
             }
             #{$root}__label {
                 font-size: 14px;

package/styles/css/main.css

@@ -1454,6 +1454,13 @@
   background-color: var(--gd-palette-complementary-2, #ebeff4);
   color: var(--gd-palette-complementary-9, #000);
 }
+.gd-ui-kit-menu--controlType-mouse .gd-ui-kit-menu__item:hover:not(.gd-ui-kit-menu__item--isDisabled).gd-ui-kit-menu__item--isDestructive {
+  background-color: var(--gd-palette-error-dimmed);
+  color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-menu--controlType-mouse .gd-ui-kit-menu__item:hover:not(.gd-ui-kit-menu__item--isDisabled).gd-ui-kit-menu__item--isDestructive svg {
+  fill: var(--gd-palette-error-base);
+}
 .gd-ui-kit-menu__item--isDisabled {
   color: var(--gd-palette-complementary-5, #b0beca);
   cursor: not-allowed;
@@ -1481,6 +1488,7 @@
 }
 
 .gd-ui-kit-tabs {
+  background: var(--gd-palette-complementary-0);
   font-family: var(--gd-font-family);
   display: flex;
   align-items: flex-end;
@@ -1496,6 +1504,9 @@
   background: var(--gd-palette-complementary-3);
   bottom: 0;
 }
+.gd-ui-kit-tabs--disable-border::after {
+  display: none;
+}
 .gd-ui-kit-tabs__container {
   display: flex;
   flex: 1;
@@ -1513,19 +1524,30 @@
   align-self: stretch;
   flex-shrink: 0;
   border-left: 1px solid var(--gd-palette-complementary-3);
+  margin-right: calc(-1 * var(--gd-spacing-5px));
 }
 .gd-ui-kit-tabs__dropdown {
   display: flex;
-  padding-left: var(--gd-spacing-10px);
   border-bottom: 1px solid transparent;
 }
 .gd-ui-kit-tabs__dropdown .gd-dropdown-button-wrapper {
   height: 100%;
+  width: 100%;
 }
-.gd-ui-kit-tabs__dropdown .gd-ui-kit-button {
+.gd-ui-kit-tabs__dropdown .gd-ui-kit-button, .gd-ui-kit-tabs__dropdown .gd-ui-kit-icon-button {
   height: 100%;
+  width: 100%;
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-tabs__dropdown .gd-ui-kit-button {
+  padding-left: var(--gd-spacing-10px);
+  padding-right: var(--gd-spacing-10px);
+}
+.gd-ui-kit-tabs__dropdown .gd-ui-kit-icon-button {
+  width: 45px;
 }
 .gd-ui-kit-tabs__tab-wrapper {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--gd-spacing-10px);
@@ -1557,6 +1579,7 @@
   box-sizing: border-box;
 }
 .gd-ui-kit-tabs__tab-list-item {
+  position: relative;
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -1565,9 +1588,30 @@
 .gd-ui-kit-tabs__tab-list-item:hover {
   background-color: var(--gd-palette-complementary-2);
 }
-.gd-ui-kit-tabs__tab-list-item:hover .gd-ui-kit-tabs__label {
-  transition: color 0.2s;
-  color: var(--gd-palette-complementary-9);
+.gd-ui-kit-tabs__tab-list-item .gd-ui-kit-tabs__label {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-tabs__tab-list-item .gd-ui-kit-tabs__label--selected {
+  font-weight: 700;
+  color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-tabs__tab-list-item:has(*:focus-visible).gd-ui-kit-tabs__tab-list-item--focused .gd-ui-kit-tabs__tab-list-item-actions, .gd-ui-kit-tabs__tab-list-item--actions-open .gd-ui-kit-tabs__tab-list-item-actions, .gd-ui-kit-tabs__tab-list-item:hover .gd-ui-kit-tabs__tab-list-item-actions {
+  opacity: 1;
+}
+.gd-ui-kit-tabs__tab-wrapper:has(*:focus-visible).gd-ui-kit-tabs__tab-wrapper--focused .gd-ui-kit-tabs__tabs-actions, .gd-ui-kit-tabs__tab-wrapper--actions-open .gd-ui-kit-tabs__tabs-actions, .gd-ui-kit-tabs__tab-wrapper:hover .gd-ui-kit-tabs__tabs-actions {
+  opacity: 1;
+}
+.gd-ui-kit-tabs__tabs-actions {
+  opacity: 0;
+  transition: opacity 0.2s;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.gd-ui-kit-tabs__tabs-actions .gd-ui-kit-icon-button {
+  align-items: center;
+  justify-items: end;
 }
 .gd-ui-kit-tabs__tab-list-item-value {
   padding: var(--gd-spacing-10px) var(--gd-spacing-10px);
@@ -1577,12 +1621,18 @@
 .gd-ui-kit-tabs__tab-list-item-actions {
   flex-grow: 0;
   flex-shrink: 0;
-  margin-right: calc(-0.5 * var(--gd-spacing-10px));
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 .gd-ui-kit-tabs__tab-list {
   width: 250px;
   max-height: 400px;
   overflow-y: auto;
+  overflow-x: hidden;
+}
+.gd-ui-kit-tabs__tab-list--mobile {
+  width: unset;
+  height: unset;
 }
 .gd-ui-kit-tabs__actions-wrapper {
   display: flex;
@@ -1591,32 +1641,29 @@
 .gd-ui-kit-tabs__item:hover .gd-ui-kit-tabs__label {
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-tabs__label {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.gd-ui-kit-tabs__label--selected {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--selected {
   font-weight: 700;
 }
-.gd-ui-kit-tabs__label--variant-default {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--variant-default {
   color: var(--gd-palette-complementary-7);
 }
-.gd-ui-kit-tabs__label--variant-default.gd-ui-kit-tabs__label--selected {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--variant-default.gd-ui-kit-tabs__label--selected {
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-tabs__label--variant-placeholder {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--variant-placeholder {
   color: var(--gd-palette-complementary-3);
 }
-.gd-ui-kit-tabs__label--variant-placeholder.gd-ui-kit-tabs__label--selected {
+.gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--variant-placeholder.gd-ui-kit-tabs__label--selected {
   color: var(--gd-palette-complementary-3);
 }
 .gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-L, 56px);
-  padding: var(--gd-spacing-16px) var(--gd-spacing-10px) var(--gd-spacing-14px) var(--gd-spacing-10px);
-}
-.gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__actions-wrapper {
-  margin-right: calc(-0.5 * var(--gd-spacing-10px));
+  padding: var(--gd-spacing-16px) var(--gd-spacing-20px) var(--gd-spacing-14px) var(--gd-spacing-20px);
 }
 .gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__label {
   font-size: 14px;
@@ -1865,6 +1912,9 @@
 .gd-ui-kit-async-table__row--large {
   height: var(--gd-table-row-height-large);
 }
+.gd-ui-kit-async-table__row--active {
+  cursor: pointer;
+}
 .gd-ui-kit-async-table__row:hover .gd-ui-kit-async-table__cell {
   background-color: var(--gd-palette-complementary-2);
 }
@@ -2072,6 +2122,9 @@
   margin-left: auto;
   max-width: 200px;
 }
+.gd-ui-kit-async-table__toolbar-custom-element {
+  margin-left: auto;
+}
 .gd-ui-kit-async-table__dropdown-item-container--underlined {
   margin-top: -10px;
 }
@@ -2082,6 +2135,7 @@
   font-size: var(--gd-table-dropdown-item-font-size);
   cursor: pointer;
   height: var(--gd-table-dropdown-item-height);
+  -webkit-font-smoothing: antialiased;
 }
 .gd-ui-kit-async-table__dropdown-item:hover {
   background-color: var(--gd-palette-complementary-2);
@@ -2154,12 +2208,13 @@
   justify-content: center;
   align-items: center;
   height: 300px;
+  gap: var(--gd-spacing-10px);
   color: var(--gd-palette-complementary-6);
 }
 .gd-ui-kit-async-table__empty-state-title {
   font-size: 20px;
   font-weight: 700;
-  margin-top: var(--gd-spacing-15px);
+  margin-top: var(--gd-spacing-10px);
 }
 .gd-ui-kit-async-table__empty-state-description {
   font-size: 14px;