@gooddata/sdk-ui-kit 10.26.0-alpha.5 → 10.26.0-alpha.50

package/src/@ui/UiChip/UiChip.scss

@@ -1,7 +1,5 @@
 // (C) 2025 GoodData Corporation
 
-@use "../UiButton//UiButton.scss";
-
 $border-radius: 20px;
 $background-color: var(--gd-palette-complementary-0);
 $border-color: var(--gd-palette-complementary-4);
@@ -19,7 +17,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
     height: 27px;
     max-width: 245px;
 
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
@@ -90,17 +88,24 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         }
 
         #{$root}__delete {
-            svg {
-                --gd-icon-fill-color: var(--gd-palette-error-base);
-            }
+            color: var(--gd-palette-error-base);
         }
     }
 
+    #{$root}__trigger--isDeletable {
+        border-right: 1px solid transparent;
+    }
+
     &__trigger,
     &__delete {
-        @extend %ui-button;
-        @extend %ui-button--variant-tertiary;
-
+        color: var(--gd-palette-complementary-7);
+        background-color: transparent;
+        border-radius: var(--gd-button-borderRadius);
+        transition: var(--gd-transition-all);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
         height: 100%;
         min-width: 0;
         flex-shrink: 1;
@@ -108,6 +113,11 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         text-decoration: none;
         padding: 0 10px;
         border: none;
+
+        &:disabled {
+            cursor: default;
+            color: var(--gd-palette-complementary-5);
+        }
     }
 
     &__trigger {
@@ -132,6 +142,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
             }
         }
 
+        &:not(&:disabled) {
+            &:hover,
+            &:focus,
+            &:active {
+                svg {
+                    color: var(--gd-palette-primary-base);
+                }
+
+                color: var(--gd-palette-complementary-8);
+            }
+        }
+
         &:not(&--isDeletable) {
             border-radius: $border-radius;
             border: none;
@@ -142,31 +164,44 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         flex-shrink: 0;
         border-radius: 0 $border-radius $border-radius 0;
         padding: 0 7px 0 5px;
+
+        &:not(&:disabled) {
+            &:hover,
+            &:focus,
+            &:active {
+                svg {
+                    color: var(--gd-palette-error-base);
+                }
+
+                color: var(--gd-palette-complementary-8);
+            }
+        }
     }
 
     &__label {
-        @extend %ui-button__text;
-
+        transition: var(--gd-transition-all);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
     &__tag {
-        @extend %ui-button__text;
-
+        transition: var(--gd-transition-all);
         margin-left: 2px;
     }
 
     &__icon-before {
-        @extend %ui-button__icon;
-
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--gd-transition-all);
         margin-right: 5px;
     }
 
     &__icon-chevron {
-        @extend %ui-button__icon;
-
+        align-items: center;
+        justify-content: center;
+        transition: var(--gd-transition-all);
         display: none;
         margin-left: 5px;
 
@@ -181,12 +216,18 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
     }
 
     &__icon-lock {
-        @extend %ui-button__icon;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--gd-transition-all);
 
         margin-left: 5px;
     }
 
     &__icon-delete {
-        @extend %ui-button__icon;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--gd-transition-all);
     }
 }

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

@@ -1,5 +1,6 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 .gd-ui-kit-icon {
+    fill: var(--gd-icon-fill-color);
     &--color {
         &-primary {
             --gd-icon-fill-color: var(--gd-palette-primary-base);
@@ -54,8 +55,7 @@
         }
     }
 
-    &__fill {
+    path {
         transition: var(--gd-transition-all);
-        fill: var(--gd-icon-fill-color);
     }
 }

package/src/@ui/UiListbox/UiListbox.scss

@@ -0,0 +1,79 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+.gd-ui-kit-listbox {
+    $root: &;
+
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    min-width: 200px;
+
+    @media #{variables.$small-only} {
+        // !important to override inline style from maxWidth prop
+        /* stylelint-disable-next-line declaration-no-important */
+        max-width: 100vw !important;
+        max-height: 100vh;
+        width: 100vw;
+    }
+
+    &__items {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        outline: none;
+
+        &:focus-visible #{$root}__item--isFocused {
+            outline-offset: -2px;
+            outline: auto 5px Highlight; /* For Firefox */
+            // stylelint-disable-next-line declaration-block-no-duplicate-properties
+            outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+        }
+    }
+
+    &__item {
+        padding: 8px 10px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        line-height: 20px;
+        color: variables.$gd-color-text;
+        transition: background-color 0.2s;
+
+        &:hover:not(&--isDisabled):not(&--isSelected) {
+            background-color: variables.$is-focused-background;
+            color: variables.$is-focused-color;
+        }
+
+        &--isFocused {
+            background-color: variables.$is-focused-background;
+            color: variables.$is-focused-color;
+        }
+
+        &--isSelected {
+            font-weight: bold;
+            background-color: variables.$is-selected-background;
+            color: variables.$is-selected-color;
+        }
+
+        &--isSelected#{&}--isFocused,
+        &:hover#{&}--isSelected {
+            font-weight: bold;
+            background-color: variables.$is-selected-focused-background;
+            color: variables.$is-selected-focused-color;
+        }
+
+        &--isDisabled {
+            color: variables.$gd-color-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    &__item-title {
+        width: 100%;
+        white-space: nowrap;
+    }
+}

package/src/@ui/index.scss

@@ -5,3 +5,4 @@
 @use "./UiSkeleton/UiSkeleton.scss";
 @use "./UiPagedVirtualList/UiPagedVirtualList.scss";
 @use "./UiChip/UiChip.scss";
+@use "./UiListbox/UiListbox.scss";