@gooddata/sdk-ui-kit 10.26.0-alpha.13 → 10.26.0-alpha.15

package/esm/sdk-ui-kit.d.ts

@@ -1507,7 +1507,7 @@ export declare interface IConfirmDialogBaseProps extends Omit<IDialogBaseProps,
 /**
  * @internal
  */
-export declare const iconsConfig: Record<IconType, IIconConfig>;
+export declare const iconPaths: Record<IconType, React_2.ReactNode>;
 
 /**
  * @internal
@@ -2375,14 +2375,6 @@ export declare interface IHyperlinkProps {
     onClick?: () => void;
 }
 
-/**
- * @internal
- */
-export declare interface IIconConfig {
-    content: React_2.ReactNode;
-    viewBox: string;
-}
-
 /**
  * @internal
  */
@@ -4240,6 +4232,12 @@ export declare interface ITypographyProps {
     id?: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiChipAccessibilityConfig extends IAccessibilityConfigBase, IDropdownButtonAccessibilityConfig {
+}
+
 /**
  * @internal
  */
@@ -5223,7 +5221,7 @@ export declare interface UiButtonProps {
 /**
  * @internal
  */
-export declare const UiChip: ({ label, tag, isDeletable, isActive, isLocked, iconBefore, onClick, onDelete, }: UiChipProps) => React_2.JSX.Element;
+export declare const UiChip: ({ label, tag, isDeletable, isActive, isLocked, iconBefore, onClick, onDelete, accessibilityConfig, }: UiChipProps) => React_2.JSX.Element;
 
 /**
  * @internal
@@ -5237,6 +5235,7 @@ export declare interface UiChipProps {
     iconBefore?: IconType;
     onClick?: () => void;
     onDelete?: () => void;
+    accessibilityConfig?: IUiChipAccessibilityConfig;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.26.0-alpha.13",
+  "version": "10.26.0-alpha.15",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -69,11 +69,11 @@
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
     "unified": "^11.0.5",
-    "@gooddata/sdk-backend-spi": "10.26.0-alpha.13",
-    "@gooddata/sdk-model": "10.26.0-alpha.13",
-    "@gooddata/sdk-ui": "10.26.0-alpha.13",
-    "@gooddata/util": "10.26.0-alpha.13",
-    "@gooddata/sdk-ui-theme-provider": "10.26.0-alpha.13"
+    "@gooddata/sdk-ui": "10.26.0-alpha.15",
+    "@gooddata/sdk-model": "10.26.0-alpha.15",
+    "@gooddata/sdk-backend-spi": "10.26.0-alpha.15",
+    "@gooddata/sdk-ui-theme-provider": "10.26.0-alpha.15",
+    "@gooddata/util": "10.26.0-alpha.15"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -132,8 +132,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.26.0-alpha.13",
-    "@gooddata/sdk-backend-mockingbird": "10.26.0-alpha.13"
+    "@gooddata/reference-workspace": "10.26.0-alpha.15",
+    "@gooddata/sdk-backend-mockingbird": "10.26.0-alpha.15"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

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,7 +71,6 @@
     &--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);
@@ -147,7 +104,6 @@
 
         &-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);
@@ -192,26 +148,17 @@
             }
         }
 
-        &-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,
                 &:active {
                     --gd-icon-fill-color: var(--gd-palette-primary-base);
 
@@ -223,36 +170,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,
                 &:active {
-                    color: var(--gd-palette-primary-base);
                     text-decoration: underline;
                 }
             }
@@ -260,22 +190,12 @@
             &: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: var(--gd-palette-error-base);
             border-color: var(--gd-palette-complementary-9-t90);
             font-weight: 700;
 
@@ -309,12 +229,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);
@@ -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);
     }
 }