@gooddata/sdk-ui-semantic-search 11.9.0-alpha.1 → 11.9.0-alpha.3

package/styles/scss/internal.scss

@@ -6,58 +6,19 @@
 @use "@gooddata/sdk-ui-kit/styles/scss/mixins" as kit-mixins;
 @use "./main.scss" as main;
 
-.gd-semantic-search {
-    &__overlay {
-        background: kit-variables.$gd-color-white;
-        margin: 10px 0;
+// Context-dependent styles that cannot be expressed in CSS modules
+// These styles apply when semantic search is used within specific containers
 
-        // Desktop view
-        .gd-header-search-dropdown & {
-            width: 440px;
-        }
-
-        // Mobile view
-        .gd-header-menu-search & {
-            .gd-semantic-search__overlay-input {
-                margin-bottom: 10px;
-            }
-        }
-    }
-
-    &__overlay-input {
-        margin: 0 10px;
-
-        input:focus-visible {
-            outline: 1px auto kit-variables.$gd-input-text-border-outline;
-            outline-offset: 0;
-        }
-    }
-
-    &__ai_assistant_button {
-        button.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--hasIconBefore {
-            padding-left: 7px;
-        }
-
-        button:focus-visible {
-            outline: 1px auto kit-variables.$gd-input-text-border-outline;
-            outline-offset: 0;
-        }
-    }
-
-    &__overlay-error,
-    &__overlay-no-results {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: kit-variables.$gd-color-state-blank;
-    }
-
-    &__overlay-error {
-        padding: 10px 10px 0;
+// Desktop header dropdown context
+.gd-header-search-dropdown {
+    .gd-semantic-search__overlay {
+        width: 440px;
     }
+}
 
-    &__overlay-no-results {
-        height: 100px;
-        padding: 0 10px;
+// Mobile header menu context
+.gd-header-menu-search {
+    .gd-semantic-search__overlay-input {
+        margin-bottom: 10px;
     }
 }

package/styles/scss/main.scss

@@ -4,221 +4,11 @@
 @use "@gooddata/sdk-ui-kit/src/@ui/defaultTheme.scss";
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
-@mixin icon($icon_size) {
-    width: $icon_size;
-    height: $icon_size;
-
-    svg {
-        // dashboard icon needs explicit size
-        width: $icon_size;
-        height: $icon_size;
-    }
-}
-
-.gd-semantic-search {
-    &__results-item {
-        $root: &;
-        cursor: pointer;
-        user-select: none;
-        width: 100%;
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        &[data-level="1"] {
-            $item-height: 50px;
-            height: $item-height;
-
-            #{$root}__content {
-                height: calc($item-height - 2px);
-            }
-            #{$root}__icon {
-                @include icon(26px);
-            }
-        }
-
-        &[data-level="2"] {
-            $item-height: 30px;
-            height: $item-height;
-            padding-left: 10px;
-
-            #{$root}__content {
-                height: calc($item-height - 2px);
-            }
-            #{$root}__icon {
-                @include icon(16px);
-            }
-        }
-
-        &--active {
-            color: kit-variables.$is-focused-color;
-            background: kit-variables.$is-focused-background;
-        }
-
-        &__content {
-            box-sizing: border-box;
-            width: 100%;
-            margin: 1px 0;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 1em;
-            padding: 5px 12px;
-            text-decoration: none;
-
-            &:hover,
-            &:focus,
-            &:active,
-            &:visited {
-                text-decoration: none;
-            }
-
-            &:focus-visible {
-                outline: revert;
-            }
-        }
-
-        &__text {
-            flex: 1;
-            min-width: 0; // A hack to make ellipsis work in flexbox
-            display: flex;
-            flex-direction: column;
-            font-weight: 400;
-            color: kit-variables.$gd-color-text;
-            font-size: 14px;
-            line-height: 20px;
-
-            &__row {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                gap: 5px;
-            }
-
-            &__row:not(:first-child) {
-                color: kit-variables.$gd-color-state-blank;
-            }
-
-            &__ellipsis {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                flex-shrink: 1;
-            }
-        }
-
-        &__details-container {
-            display: grid;
-            justify-items: end;
-            height: 100%;
-            font-size: 14px;
-            color: kit-variables.$gd-color-state-blank;
-        }
-
-        &__details {
-            width: 16px;
-            height: 16px;
-            align-self: center;
-            align-items: center;
-
-            & .gd-ellipsis-text {
-                margin: 10px 0 0;
-            }
-        }
-
-        &__details__contents {
-            width: 190px;
-            padding: 5px;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-
-            h3 {
-                font-size: 14px;
-                margin: 0;
-            }
-
-            .gd-ellipsis-text-content {
-                font-size: 12px;
-            }
-
-            h4 {
-                margin: 10px 0 0;
-                text-transform: uppercase;
-                font-size: 10px;
-                font-weight: 400;
-                color: kit-variables.$gd-color-state-blank;
-            }
-
-            hr {
-                margin: 10px 0;
-                border: 0;
-                border-top: 1px solid kit-variables.$gd-border-color;
-            }
-
-            &__match h4 {
-                text-transform: none;
-                font-size: 12px;
-            }
-        }
-
-        &__counter {
-            display: flex;
-            align-self: end;
-            align-items: center;
-            gap: 5px;
-            line-height: 16px;
-        }
-
-        &__counter__icon {
-            width: 16px;
-            height: 16px;
-            transition: rotate 0.2s;
-            transform-origin: center;
-            rotate: 0deg;
-
-            &--expanded {
-                rotate: 90deg;
-            }
-        }
-    }
-
-    &__bubble.bubble.bubble-light {
-        background: kit-variables.$gd-color-white;
-    }
-
-    &__bubble_trigger {
-        display: flex;
-    }
-
-    &__ai_assistant_button {
-        display: flex;
-        height: 50px;
-        align-items: center;
-        margin-bottom: -10px;
-        border: 1px solid kit-variables.$gd-color-white;
-        border-top-color: kit-variables.$gd-border-color;
-        background: kit-variables.$gd-color-white;
-        margin-top: 10px;
-
-        button {
-            height: 100%;
-            width: 100%;
-            justify-content: flex-start;
-        }
-    }
-
-    &__message {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: kit-variables.$gd-color-state-blank;
-        height: 100px;
-        padding: 0 10px;
-    }
-}
+// All component styles have been migrated to CSS modules
+// This file is kept for backward compatibility
+// Legacy consumers still import styles/css/main.css which needs defaultTheme
 
+// The only remaining style that hasn't been migrated, overrides a classname defined in sdk-ui-kit:
 .gd-ui-kit-treeview {
     margin: 10px 0;
 }