@gooddata/sdk-ui-kit 10.26.0-alpha.9 → 10.26.0

package/src/@ui/UiButton/UiButton.scss

@@ -1,7 +1,6 @@
 // (C) 2024-2025 GoodData Corporation
 
-.gd-ui-kit-button,
-%ui-button {
+.gd-ui-kit-button {
     $root: &;
 
     font-family: var(--gd-font-family);
@@ -19,90 +18,49 @@
         cursor: default;
     }
 
-    &:not(&:disabled, &--variant-tertiary, &--variant-popout) {
-        &:active {
-            #{$root}__text {
-                // Move text inside the button on :active state.
-                padding-top: 1px;
-            }
-
-            #{$root}__icon {
-                // Move icon inside the button on :active state.
-                padding-top: 1px;
-            }
-        }
-    }
-
-    &__text,
-    %ui-button__text {
-        transition: var(--gd-transition-all);
-    }
-
-    &__icon,
-    %ui-button__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: var(--gd-transition-all);
-    }
-
-    &--isLoading {
-        #{$root}__icon {
-            // Spin icon on loading state.
-            animation: rotate 1s infinite steps(30);
-        }
-    }
-
     /**
      * Size
      */
     &--size {
         &-small {
             height: var(--gd-button-S);
-            padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
+            padding: 0 var(--gd-spacing-10px);
             font-size: 12px;
-            line-height: 14px;
 
-            &#{$root}--iconPosition {
-                &-left {
-                    padding-left: var(--gd-spacing-7px);
-                }
+            &#{$root}--hasIconBefore {
+                padding-left: var(--gd-spacing-7px);
+            }
 
-                &-right {
-                    padding-right: var(--gd-spacing-7px);
-                }
+            &#{$root}--hasIconAfter {
+                padding-right: var(--gd-spacing-7px);
             }
         }
 
         &-medium {
             height: var(--gd-button-M);
-            padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
+            padding: 0 var(--gd-spacing-15px);
             font-size: 14px;
-            line-height: 16px;
-            &#{$root}--iconPosition {
-                &-left {
-                    padding-left: var(--gd-spacing-10px);
-                }
 
-                &-right {
-                    padding-right: var(--gd-spacing-10px);
-                }
+            &#{$root}--hasIconBefore {
+                padding-left: var(--gd-spacing-10px);
+            }
+
+            &#{$root}--hasIconAfter {
+                padding-right: var(--gd-spacing-10px);
             }
         }
 
         &-large {
             height: var(--gd-button-L);
-            padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
+            padding: 0 var(--gd-spacing-20px);
             font-size: 16px;
-            line-height: 18px;
-            &#{$root}--iconPosition {
-                &-left {
-                    padding-left: var(--gd-spacing-15px);
-                }
 
-                &-right {
-                    padding-right: var(--gd-spacing-15px);
-                }
+            &#{$root}--hasIconBefore {
+                padding-left: var(--gd-spacing-15px);
+            }
+
+            &#{$root}--hasIconAfter {
+                padding-right: var(--gd-spacing-15px);
             }
         }
     }
@@ -113,27 +71,23 @@
     &--variant {
         &-primary {
             --gd-icon-fill-color: var(--gd-palette-complementary-0);
-
             color: var(--gd-palette-complementary-0);
             background-color: var(--gd-palette-primary-base);
             border-color: var(--gd-palette-complementary-9-t90);
             font-weight: 700;
 
             &:not(&:disabled) {
-                &:focus {
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85)
-                        inset;
-                }
-
+                &:focus-visible,
                 &:hover {
                     background-color: var(--gd-palette-primary-base-d06);
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85)
+
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85)
                         inset;
                 }
 
                 &:active {
-                    background: var(--gd-palette-primary-base-d12);
-                    box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85)
+                    background-color: var(--gd-palette-primary-base-d12);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
                         inset;
                 }
             }
@@ -147,29 +101,20 @@
 
         &-secondary {
             --gd-icon-fill-color: var(--gd-palette-complementary-5);
-
             color: var(--gd-palette-complementary-7);
             border-color: var(--gd-palette-complementary-4);
             background-color: var(--gd-palette-complementary-0);
             font-weight: 400;
 
             &:not(&:disabled) {
-                &:focus {
-                    --gd-icon-fill-color: var(--gd-palette-primary-base);
-
-                    color: var(--gd-palette-complementary-8);
-                    background: var(--gd-palette-complementary-1);
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40)
-                        inset;
-                }
-
+                &:focus-visible,
                 &:hover {
                     --gd-icon-fill-color: var(--gd-palette-primary-base);
 
                     color: var(--gd-palette-complementary-8);
                     border-color: var(--gd-palette-complementary-5);
-                    background: var(--gd-palette-complementary-0);
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40)
+                    background-color: var(--gd-palette-complementary-1);
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40)
                         inset;
                 }
 
@@ -178,8 +123,8 @@
 
                     color: var(--gd-palette-complementary-8);
                     border-color: var(--gd-palette-complementary-5);
-                    background: var(--gd-palette-complementary-3);
-                    box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85)
+                    background-color: var(--gd-palette-complementary-3);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
                         inset;
                 }
             }
@@ -187,31 +132,21 @@
             &:disabled {
                 color: var(--gd-palette-complementary-5);
                 border-color: var(--gd-palette-complementary-4);
-                background: var(--gd-palette-complementary-0);
                 box-shadow: none;
             }
         }
 
-        &-tertiary,
-        %ui-button--variant-tertiary {
+        &-tertiary {
             --gd-icon-fill-color: var(--gd-palette-complementary-5);
-
             color: var(--gd-palette-complementary-7);
+            padding: 0;
             text-decoration: underline;
             background-color: transparent;
             border-color: transparent;
 
             &:not(&:disabled) {
-                &:focus {
-                    --gd-icon-fill-color: var(--gd-palette-primary-base);
-
-                    color: var(--gd-palette-complementary-8);
-                }
-                &:hover {
-                    --gd-icon-fill-color: var(--gd-palette-primary-base);
-
-                    color: var(--gd-palette-complementary-8);
-                }
+                &:hover,
+                &:focus-visible,
                 &:active {
                     --gd-icon-fill-color: var(--gd-palette-primary-base);
 
@@ -223,36 +158,19 @@
                 color: var(--gd-palette-complementary-5);
                 text-decoration: none;
             }
-
-            &#{$root}--size {
-                &-small,
-                &-medium,
-                &-large {
-                    padding: 0;
-                    height: auto;
-                }
-            }
         }
 
         &-popout {
             --gd-icon-fill-color: var(--gd-palette-primary-base);
-
             color: var(--gd-palette-primary-base);
+            padding: 0;
             background-color: transparent;
             border-color: transparent;
 
             &:not(&:disabled) {
-                &:focus {
-                    text-decoration: underline;
-                }
-
-                &:hover {
-                    color: var(--gd-palette-complementary-8);
-                    text-decoration: underline;
-                }
-
+                &:hover,
+                &:focus-visible,
                 &:active {
-                    color: var(--gd-palette-primary-base);
                     text-decoration: underline;
                 }
             }
@@ -260,43 +178,28 @@
             &:disabled {
                 color: var(--gd-palette-complementary-5);
             }
-
-            &#{$root}--size {
-                &-small,
-                &-medium,
-                &-large {
-                    padding: 0;
-                    height: auto;
-                }
-            }
         }
 
         &-danger {
             --gd-icon-fill-color: var(--gd-palette-complementary-0);
-
-            background: var(--gd-palette-error-base);
             color: var(--gd-palette-complementary-0);
+            background-color: var(--gd-palette-error-base);
             border-color: var(--gd-palette-complementary-9-t90);
             font-weight: 700;
 
             &:not(&:disabled) {
-                &:focus {
-                    border-color: var(--gd-palette-complementary-9-t80);
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85)
-                        inset;
-                }
-
+                &:focus-visible,
                 &:hover {
                     border-color: var(--gd-palette-complementary-9-t80);
                     background-color: var(--gd-palette-error-base-d10);
-                    box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85)
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85)
                         inset;
                 }
 
                 &:active {
                     border-color: var(--gd-palette-complementary-9-t80);
-                    background: var(--gd-palette-error-base-d20);
-                    box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85)
+                    background-color: var(--gd-palette-error-base-d20);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
                         inset;
                 }
             }
@@ -309,12 +212,3 @@
         }
     }
 }
-
-@keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

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,9 +88,7 @@ $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);
         }
     }
 
@@ -102,9 +98,14 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
 
     &__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;
@@ -112,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 {
@@ -136,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;
@@ -146,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;
 
@@ -185,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/UiIconButton/UiIconButton.scss

@@ -0,0 +1,164 @@
+// (C) 2024-2025 GoodData Corporation
+
+.gd-ui-kit-icon-button {
+    border-radius: var(--gd-button-borderRadius);
+    transition: var(--gd-transition-all);
+    cursor: pointer;
+    border-style: solid;
+    border-width: 1px;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+
+    &:disabled {
+        cursor: default;
+    }
+
+    /**
+     * Size
+     */
+    &--size {
+        &-small {
+            height: var(--gd-button-S);
+            width: var(--gd-button-S);
+        }
+
+        &-medium {
+            height: var(--gd-button-M);
+            width: var(--gd-button-M);
+        }
+
+        &-large {
+            height: var(--gd-button-L);
+            width: var(--gd-button-L);
+        }
+    }
+
+    /**
+     * Variant
+     */
+    &--variant {
+        &-primary {
+            --gd-icon-fill-color: var(--gd-palette-complementary-0);
+            background-color: var(--gd-palette-primary-base);
+            border-color: var(--gd-palette-complementary-9-t90);
+
+            &:not(&:disabled) {
+                &:focus-visible,
+                &:hover {
+                    background-color: var(--gd-palette-primary-base-d06);
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85)
+                        inset;
+                }
+
+                &:active {
+                    background-color: var(--gd-palette-primary-base-d12);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
+                        inset;
+                }
+            }
+
+            &:disabled {
+                background-color: var(--gd-palette-primary-disabled);
+                box-shadow: none;
+                border-color: transparent;
+            }
+        }
+
+        &-secondary {
+            --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            border-color: var(--gd-palette-complementary-4);
+            background-color: var(--gd-palette-complementary-0);
+
+            &:not(&:disabled) {
+                &:focus-visible,
+                &:hover {
+                    --gd-icon-fill-color: var(--gd-palette-primary-base);
+                    border-color: var(--gd-palette-complementary-5);
+                    background-color: var(--gd-palette-complementary-1);
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40)
+                        inset;
+                }
+
+                &:active {
+                    --gd-icon-fill-color: var(--gd-palette-primary-base);
+                    border-color: var(--gd-palette-complementary-5);
+                    background-color: var(--gd-palette-complementary-3);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
+                        inset;
+                }
+            }
+
+            &:disabled {
+                --gd-icon-fill-color: var(--gd-palette-complementary-5);
+                border-color: var(--gd-palette-complementary-4);
+                box-shadow: none;
+            }
+        }
+
+        &-tertiary {
+            --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            background-color: transparent;
+            border-color: transparent;
+
+            &:not(&:disabled) {
+                &:hover,
+                &:focus-visible,
+                &:active {
+                    --gd-icon-fill-color: var(--gd-palette-primary-base);
+                }
+            }
+
+            &:disabled {
+                --gd-icon-fill-color: var(--gd-palette-complementary-5);
+            }
+        }
+
+        &-popout {
+            --gd-icon-fill-color: var(--gd-palette-primary-base);
+            background-color: transparent;
+            border-color: transparent;
+
+            &:not(&:disabled) {
+                &:hover,
+                &:focus-visible,
+                &:active {
+                    --gd-icon-fill-color: var(--gd-palette-complementary-8);
+                }
+            }
+
+            &:disabled {
+                --gd-icon-fill-color: var(--gd-palette-complementary-5);
+            }
+        }
+
+        &-danger {
+            --gd-icon-fill-color: var(--gd-palette-complementary-0);
+            background-color: var(--gd-palette-error-base);
+            border-color: var(--gd-palette-complementary-9-t90);
+
+            &:not(&:disabled) {
+                &:focus-visible,
+                &:hover {
+                    border-color: var(--gd-palette-complementary-9-t80);
+                    background-color: var(--gd-palette-error-base-d10);
+                    box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-9-t85)
+                        inset;
+                }
+
+                &:active {
+                    border-color: var(--gd-palette-complementary-9-t80);
+                    background-color: var(--gd-palette-error-base-d20);
+                    box-shadow: var(--gd-button-dropShadow, 0 1px 0 0) var(--gd-palette-complementary-9-t85)
+                        inset;
+                }
+            }
+
+            &:disabled {
+                background-color: var(--gd-palette-error-disabled);
+                box-shadow: none;
+                border-color: transparent;
+            }
+        }
+    }
+}