@gooddata/sdk-ui-kit 10.40.0-alpha.6 → 10.40.0-alpha.8

package/src/@ui/UiPopover/UiPopover.scss

@@ -0,0 +1,78 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$popover_min_width: 220px;
+$popover_padding: -7px -10px;
+$popover_border_radius: 3px;
+$popover_header_padding: 10px;
+$popover_content_padding: 10px;
+$popover_content_gap: 20px;
+$popover_footer_padding: 10px;
+$popover_footer_gap: 10px;
+
+.gd-ui-kit-popover {
+    $root: &;
+
+    background: variables.$gd-color-white;
+    color: variables.$gd-medium-gray;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    margin: $popover_padding;
+    width: $popover_min_width;
+    border-radius: $popover_border_radius;
+    border: 1px solid variables.$gd-border-color;
+    box-shadow:
+        0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)),
+        0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+
+    &__header {
+        display: flex;
+        align-self: stretch;
+        align-items: center;
+        justify-content: space-between;
+        padding: $popover_header_padding;
+        background: variables.$is-focused-background;
+
+        #{$root}__header-title {
+            color: variables.$gd-color-state-blank;
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: normal;
+            text-transform: uppercase;
+        }
+
+        #{$root}__header-close {
+            margin: -$popover_header_padding;
+        }
+    }
+
+    &__content {
+        display: flex;
+        padding: $popover_content_padding;
+        gap: $popover_content_gap;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        padding: $popover_footer_padding;
+        gap: $popover_footer_gap;
+        justify-content: flex-end;
+        align-items: center;
+        align-self: stretch;
+        border-top: 1px solid variables.$gd-border-color;
+
+        &:empty {
+            display: none;
+        }
+    }
+}

package/src/@ui/UiTag/UiTag.scss

@@ -0,0 +1,158 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$tag_font_size: 12px;
+$tag_border_width: 1px;
+
+$tag_small_border_radius: 30px;
+$tag_small_height: 18px;
+$tag_small_padding_x: 7px;
+$tag_small_padding_y: 0;
+$tag_small_gap: 3px;
+
+$tag_large_border_radius: 20px;
+$tag_large_height: 25px;
+$tag_large_padding_x: 7px;
+$tag_large_padding_y: 6px;
+$tag_large_gap: 5px;
+
+.gd-ui-kit-tag {
+    $root: &;
+    font-family: variables.$gd-font-primary;
+
+    padding: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    color: variables.$gd-medium-gray;
+    font-size: $tag_font_size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .gd-ui-kit-tooltip__anchor {
+        display: inline-flex;
+        overflow: hidden;
+    }
+
+    &--size-small {
+        border-radius: $tag_small_border_radius;
+        height: $tag_small_height;
+        line-height: $tag_small_height;
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            border-radius: $tag_small_border_radius;
+        }
+
+        #{$root}__trigger {
+            padding: $tag_small_padding_y $tag_small_padding_x;
+
+            &--isDeletable:not(&--isDisabled) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                padding-right: calc($tag_small_gap / 2);
+            }
+        }
+        #{$root}__delete {
+            padding-right: $tag_small_padding_x;
+            padding-left: calc($tag_small_gap / 2);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    &--size-large {
+        border-radius: $tag_large_border_radius;
+        height: $tag_large_height;
+        line-height: $tag_large_height;
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            border-radius: $tag_large_border_radius;
+        }
+
+        #{$root}__trigger {
+            padding: $tag_large_padding_y $tag_large_padding_x;
+
+            &--isDeletable:not(&--isDisabled) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                padding-right: calc($tag_large_gap / 2);
+            }
+        }
+
+        #{$root}__delete {
+            padding-right: $tag_large_padding_x;
+            padding-left: calc($tag_large_gap / 2);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    &--variant-solid {
+        border: $tag_border_width solid variables.$is-focused-background;
+        background: variables.$is-focused-background;
+    }
+
+    &--variant-outlined {
+        border: $tag_border_width solid variables.$is-focused-background;
+        background: variables.$gd-color-white;
+    }
+
+    &--variant-decorated {
+        border: $tag_border_width solid transparent;
+        background: linear-gradient(270deg, #2637ef 0.35%, #8104ca 80.03%);
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            color: variables.$gd-color-white;
+        }
+    }
+
+    &__trigger,
+    &__delete {
+        font-family: inherit;
+        transition: var(--gd-transition-all);
+        color: variables.$gd-medium-gray;
+        background-color: transparent;
+        white-space: nowrap;
+        display: inline-flex;
+        justify-content: flex-start;
+        align-items: center;
+        cursor: pointer;
+        height: 100%;
+        min-width: 0;
+        flex-shrink: 1;
+        gap: 0;
+        text-decoration: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+
+        &:disabled {
+            cursor: default;
+            color: variables.$gd-color-disabled;
+        }
+
+        #{$root}__icon-delete {
+            display: flex;
+        }
+    }
+
+    &__delete {
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    &__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.gd-ui-kit-tag__tooltip {
+    max-width: 300px;
+}

package/src/@ui/UiTags/UiTags.scss

@@ -0,0 +1,153 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$tags_line_height: 20px;
+$tags_tooltip_max_width: 280px;
+
+@mixin tag($margin-right: 5px) {
+    .gd-ui-kit-tags__tag {
+        display: inline-flex;
+
+        .gd-ui-kit-tag {
+            margin-right: $margin-right;
+        }
+
+        &:last-child {
+            .gd-ui-kit-tag {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+@mixin tagFocused() {
+    .gd-ui-kit-tags__tag {
+        &--isFocused .gd-ui-kit-tag {
+            outline: 2px solid variables.$gd-input-text-border-outline;
+        }
+    }
+}
+
+.gd-ui-kit-tags {
+    $root: &;
+
+    font-family: variables.$gd-font-primary;
+    display: flex;
+
+    &:focus-visible {
+        outline: none;
+
+        #{$root}__tags-container {
+            @include tagFocused();
+        }
+        #{$root}__hidden-tags {
+            &--isFocused button {
+                outline: 2px solid variables.$gd-input-text-border-outline;
+            }
+        }
+    }
+
+    #{$root}__shadow-container {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+        pointer-events: none;
+        visibility: hidden;
+
+        @include tag();
+    }
+
+    &--mode-multi-line {
+        #{$root}__tags-container {
+            flex-wrap: wrap;
+            gap: 5px;
+
+            @include tag(0);
+        }
+    }
+
+    &--mode-single-line {
+        #{$root}__tags-container {
+            @include tag();
+        }
+    }
+
+    &--mode-single-line,
+    &--mode-multi-line {
+        #{$root}__tags-container {
+            flex-shrink: 1;
+            flex-grow: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            padding: 2px;
+
+            #{$root}__add-button {
+                display: flex;
+                align-items: center;
+                height: $tags_line_height;
+            }
+
+            #{$root}__add-button > .gd-ui-kit-tooltip__anchor {
+                display: flex;
+                align-items: center;
+
+                button {
+                    height: $tags_line_height;
+                    border-radius: 30px;
+                }
+
+                button:focus-visible {
+                    outline: 2px solid variables.$gd-input-text-border-outline;
+                }
+            }
+
+            #{$root}__hidden-tags {
+                button {
+                    display: inline-flex;
+                    color: variables.$gd-color-link;
+                    text-decoration: none;
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 400;
+                    cursor: pointer;
+                    line-height: $tags_line_height;
+                    height: $tags_line_height;
+                    border-radius: $tags_line_height;
+                }
+            }
+
+            #{$root}__empty-state {
+                display: inline-flex;
+                color: variables.$gd-color-text-dimmed;
+                font-size: 12px;
+                font-style: italic;
+                font-weight: 400;
+                line-height: $tags_line_height;
+            }
+        }
+    }
+}
+
+.gd-ui-kit-tags__tags-more-tooltip {
+    display: flex;
+    max-width: $tags_tooltip_max_width;
+    width: $tags_tooltip_max_width;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 5px;
+
+    @include tag(0);
+
+    &:focus-visible {
+        outline: none;
+
+        @include tagFocused();
+    }
+}
+
+.gd-ui-kit-tags__add-input {
+    width: 100%;
+}

package/src/@ui/UiTooltip/UiTooltip.scss

@@ -32,5 +32,10 @@
             --bg-color: var(--gd-palette-error-base);
             --text-color: var(--gd-palette-complementary-0);
         }
+
+        &-none {
+            --bg-color: transparent;
+            --text-color: var(--gd-palette-complementary-7-from-theme);
+        }
     }
 }

package/src/@ui/index.scss

@@ -1,6 +1,7 @@
 // (C) 2024-2025 GoodData Corporation
 
 @use "./UiButton/UiButton.scss";
+@use "./UiButtonSegmentedControl/UiButtonSegmentedControl.scss";
 @use "./UiIconButton/UiIconButton.scss";
 @use "./UiIcon/UiIcon.scss";
 @use "./UiSkeleton/UiSkeleton.scss";
@@ -16,3 +17,6 @@
 @use "./UiBadge/UiBadge.scss";
 @use "./UiCheckbox/UiCheckbox.scss";
 @use "./UiAsyncTable/asyncTable.scss";
+@use "./UiTags/UiTags.scss";
+@use "./UiTag/UiTag.scss";
+@use "./UiPopover/UiPopover.scss";

package/styles/css/invertableSelect.css

@@ -122,6 +122,7 @@ input[type=search]::-webkit-search-cancel-button {
   justify-content: flex-end;
   align-items: center;
   padding: 10px 0;
+  gap: 10px;
 }
 
 /*# sourceMappingURL=invertableSelect.css.map */

package/styles/css/invertableSelect.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/invertableSelect.scss","../scss/variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;;AAIA;AAAA;EAEI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aCsBc;;ADpBd;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA","file":"invertableSelect.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/invertableSelect.scss","../scss/variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;EAII;EACA;EACA;;;AAIA;AAAA;EAEI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aCsBc;;ADpBd;AAAA;EAEI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"invertableSelect.css"}