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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.8.0-alpha.3",
+  "version": "11.8.0-alpha.5",
   "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-model": "11.8.0-alpha.3",
-    "@gooddata/sdk-ui": "11.8.0-alpha.3",
-    "@gooddata/sdk-backend-spi": "11.8.0-alpha.3",
-    "@gooddata/util": "11.8.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.8.0-alpha.3"
+    "@gooddata/sdk-backend-spi": "11.8.0-alpha.5",
+    "@gooddata/sdk-model": "11.8.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "11.8.0-alpha.5",
+    "@gooddata/sdk-ui": "11.8.0-alpha.5",
+    "@gooddata/util": "11.8.0-alpha.5"
   },
   "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.8.0-alpha.3",
-    "@gooddata/reference-workspace": "11.8.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.8.0-alpha.3"
+    "@gooddata/eslint-config": "11.8.0-alpha.5",
+    "@gooddata/reference-workspace": "11.8.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "11.8.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiCard/UiCard.scss

@@ -7,6 +7,8 @@
 
     font-family: var(--gd-font-family);
     padding: 20px;
+    background-color: variables.$default-gd-color-white;
+    border-radius: 3px;
 
     &--elevation-1 {
         border: 1px solid variables.$gd-border-color;

package/src/@ui/UiDrawer/UiDrawer.scss

@@ -72,7 +72,7 @@
 
     &__content {
         position: absolute;
-        background: variables.$gd-color-white;
+        background: var(--gd-palette-complementary-1, #f5f8fa);
         box-shadow: 0 4px 4px 0 color-mix(in sRGB, variables.$gd-color-dark 25%, transparent);
 
         #{$root}__close-button {

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

@@ -3,31 +3,38 @@
 .gd-ui-kit-tabs {
     $root: &;
 
-    border-bottom: 1px solid var(--gd-palette-complementary-3);
     font-family: var(--gd-font-family);
     display: flex;
     align-items: flex-end;
     position: relative;
+    isolation: isolate;
+
+    &::after {
+        // We need to set the bottom border this way, so the selected item can render on top of it
+        content: " ";
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: var(--gd-palette-complementary-3);
+        bottom: 0;
+    }
 
     &__container {
         display: flex;
         flex: 1;
         min-width: 0;
-    }
 
-    &--overflow {
-        #{$root}__container {
-            overflow-x: auto;
-            overflow-y: hidden;
-            // Hide scrollbar for Firefox
-            scrollbar-width: none;
-            // Hide scrollbar for IE and Edge (legacy)
-            -ms-overflow-style: none;
-
-            // Hide scrollbar for Chrome, Safari, and Opera
-            &::-webkit-scrollbar {
-                display: none;
-            }
+        overflow-x: auto;
+        overflow-y: hidden;
+        // Hide scrollbar for Firefox
+        scrollbar-width: none;
+        // Hide scrollbar for IE and Edge (legacy)
+        -ms-overflow-style: none;
+
+        // Hide scrollbar for Chrome, Safari, and Opera
+        &::-webkit-scrollbar {
+            display: none;
         }
     }
 
@@ -47,6 +54,22 @@
         margin: 0 0 -1px 0;
     }
 
+    &__tab-wrapper {
+        display: flex;
+        align-items: center;
+        gap: var(--gd-spacing-10px);
+        border-bottom: 3px solid transparent;
+        box-sizing: border-box;
+        min-width: 0;
+        flex-shrink: 0;
+        z-index: 10;
+        transition: border-color 0.1s;
+
+        &--selected {
+            border-bottom: 3px solid var(--gd-palette-primary-base);
+        }
+    }
+
     &__item {
         appearance: none;
         background: none;
@@ -60,39 +83,74 @@
         gap: var(--gd-spacing-5px);
         flex-shrink: 0;
         box-sizing: border-box;
-        border-bottom: 3px solid transparent;
-        margin: 0 0 -1px 0;
-        color: var(--gd-palette-complementary-7);
+    }
+
+    &__tab-list-item {
+        display: flex;
+        gap: var(--gd-spacing-5px);
+        padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+        cursor: pointer;
+        align-items: center;
+        transition: background-color 0.2s;
 
         &:hover {
-            border-bottom: 3px solid var(--gd-palette-complementary-3);
-            color: var(--gd-palette-complementary-8);
+            background-color: var(--gd-palette-complementary-2);
         }
 
-        &--selected {
-            border-bottom: 3px solid var(--gd-palette-primary-base);
-            color: var(--gd-palette-complementary-8);
-            font-weight: 700;
-
-            &:hover {
-                border-bottom: 3px solid var(--gd-palette-primary-base);
-            }
+        &:hover #{$root}__label {
+            transition: color 0.2s;
+            color: var(--gd-palette-complementary-9);
         }
     }
 
+    &__tab-list-item-value {
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+
+    &__tab-list-item-actions {
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: calc(-0.5 * var(--gd-spacing-10px));
+    }
+
+    &__tab-list {
+        width: 250px;
+        max-height: 400px;
+        overflow-y: auto;
+    }
+
+    &__actions-wrapper {
+        display: flex;
+        align-items: flex-end;
+    }
+
+    &__item:hover &__label {
+        color: var(--gd-palette-complementary-8);
+    }
+
     &__label {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        color: var(--gd-palette-complementary-7);
+
+        &--selected {
+            color: var(--gd-palette-complementary-8);
+            font-weight: 700;
+        }
     }
 
     &--size {
         &-large {
-            #{$root}__item {
+            #{$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));
+            }
             #{$root}__label {
                 font-size: 14px;
                 line-height: normal;
@@ -100,7 +158,7 @@
         }
 
         &-medium {
-            #{$root}__item {
+            #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-M, 27px);
                 padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px)
                     var(--gd-spacing-6px);
@@ -112,7 +170,7 @@
         }
 
         &-small {
-            #{$root}__item {
+            #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-S, 23px);
                 padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px)
                     var(--gd-spacing-6px);

package/styles/css/main.css

@@ -1481,24 +1481,31 @@
 }
 
 .gd-ui-kit-tabs {
-  border-bottom: 1px solid var(--gd-palette-complementary-3);
   font-family: var(--gd-font-family);
   display: flex;
   align-items: flex-end;
   position: relative;
+  isolation: isolate;
+}
+.gd-ui-kit-tabs::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--gd-palette-complementary-3);
+  bottom: 0;
 }
 .gd-ui-kit-tabs__container {
   display: flex;
   flex: 1;
   min-width: 0;
-}
-.gd-ui-kit-tabs--overflow .gd-ui-kit-tabs__container {
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-.gd-ui-kit-tabs--overflow .gd-ui-kit-tabs__container::-webkit-scrollbar {
+.gd-ui-kit-tabs__container::-webkit-scrollbar {
   display: none;
 }
 .gd-ui-kit-tabs__dropdown-wrapper {
@@ -1515,6 +1522,20 @@
   border-bottom: 1px solid transparent;
   margin: 0 0 -1px 0;
 }
+.gd-ui-kit-tabs__tab-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  min-width: 0;
+  flex-shrink: 0;
+  z-index: 10;
+  transition: border-color 0.1s;
+}
+.gd-ui-kit-tabs__tab-wrapper--selected {
+  border-bottom: 3px solid var(--gd-palette-primary-base);
+}
 .gd-ui-kit-tabs__item {
   appearance: none;
   background: none;
@@ -1528,36 +1549,65 @@
   gap: var(--gd-spacing-5px);
   flex-shrink: 0;
   box-sizing: border-box;
-  border-bottom: 3px solid transparent;
-  margin: 0 0 -1px 0;
-  color: var(--gd-palette-complementary-7);
 }
-.gd-ui-kit-tabs__item:hover {
-  border-bottom: 3px solid var(--gd-palette-complementary-3);
-  color: var(--gd-palette-complementary-8);
+.gd-ui-kit-tabs__tab-list-item {
+  display: flex;
+  gap: var(--gd-spacing-5px);
+  padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+  cursor: pointer;
+  align-items: center;
+  transition: background-color 0.2s;
 }
-.gd-ui-kit-tabs__item--selected {
-  border-bottom: 3px solid var(--gd-palette-primary-base);
-  color: var(--gd-palette-complementary-8);
-  font-weight: 700;
+.gd-ui-kit-tabs__tab-list-item:hover {
+  background-color: var(--gd-palette-complementary-2);
 }
-.gd-ui-kit-tabs__item--selected:hover {
-  border-bottom: 3px solid var(--gd-palette-primary-base);
+.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-value {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+.gd-ui-kit-tabs__tab-list-item-actions {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: calc(-0.5 * var(--gd-spacing-10px));
+}
+.gd-ui-kit-tabs__tab-list {
+  width: 250px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.gd-ui-kit-tabs__actions-wrapper {
+  display: flex;
+  align-items: flex-end;
+}
+.gd-ui-kit-tabs__item:hover .gd-ui-kit-tabs__label {
+  color: var(--gd-palette-complementary-8);
 }
 .gd-ui-kit-tabs__label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-tabs__label--selected {
+  color: var(--gd-palette-complementary-8);
+  font-weight: 700;
 }
-.gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__item {
+.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));
+}
 .gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__label {
   font-size: 14px;
   line-height: normal;
 }
-.gd-ui-kit-tabs--size-medium .gd-ui-kit-tabs__item {
+.gd-ui-kit-tabs--size-medium .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-M, 27px);
   padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px) var(--gd-spacing-6px);
 }
@@ -1565,7 +1615,7 @@
   font-size: 14px;
   line-height: 18px;
 }
-.gd-ui-kit-tabs--size-small .gd-ui-kit-tabs__item {
+.gd-ui-kit-tabs--size-small .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-S, 23px);
   padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px) var(--gd-spacing-6px);
 }
@@ -2463,7 +2513,7 @@
 }
 .gd-ui-kit-drawer__content {
   position: absolute;
-  background: var(--gd-palette-complementary-0, #fff);
+  background: var(--gd-palette-complementary-1, #f5f8fa);
   box-shadow: 0 4px 4px 0 color-mix(in sRGB, var(--gd-palette-complementary-9, #000) 25%, transparent);
 }
 .gd-ui-kit-drawer__content .gd-ui-kit-drawer__close-button {
@@ -2483,6 +2533,8 @@
 .gd-ui-kit-card {
   font-family: var(--gd-font-family);
   padding: 20px;
+  background-color: #fff;
+  border-radius: 3px;
 }
 .gd-ui-kit-card--elevation-1 {
   border: 1px solid var(--gd-palette-complementary-3, #dde4eb);