@gooddata/sdk-ui-dashboard 11.12.0-alpha.2 → 11.12.0-alpha.4

package/styles/css/toolbar.css

@@ -1,5 +1,5 @@
 .gd-dashboard-toolbar {
-  z-index: 102;
+  z-index: 108;
   position: fixed;
   right: 20px;
   bottom: 20px;

package/styles/css/visualization.css

@@ -23,11 +23,11 @@
   font-size: 14px;
   font-weight: bold;
   line-height: normal;
-  color: var(--gd-palette-complementary-6, #94a1ad);
 }
 .visualization .info-label h2,
-.visualization .info-label p {
-  color: inherit;
+.visualization .info-label p,
+.visualization .info-label div {
+  color: var(--gd-palette-complementary-8, #464e56);
 }
 .visualization .info-label h2 {
   font-size: 20px;
@@ -40,6 +40,7 @@
 .visualization .info-label-icon {
   margin-bottom: 10px;
   font-size: 40px;
+  color: var(--gd-palette-complementary-8, #464e56);
 }
 .visualization .info-label-icon-empty {
   margin-bottom: 7px;

package/styles/css/visualization.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualization.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/_variables.scss"],"names":[],"mappings":";AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACAA;EACI;;AAEA;EFqOA;EACA;EACA;EErOI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCDe;;ADGf;AAAA;EAEI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,YClDS;EDmDT;EACA;EACA;;AAGJ;EACI;EAGA;;;AAKJ;EACI;EACA;EACA;;;AAKJ;EACI;;AAGJ;EACI,ME0D2B;EFzD3B;;;AAIR;EACI;IACI;;EAGJ;IACI","file":"visualization.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../scss/visualization.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss","../scss/_variables.scss"],"names":[],"mappings":";AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACAA;EACI;;AAEA;EFqOA;EACA;EACA;EErOI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGI,OCEI;;ADCR;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCfQ;;ADkBZ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,YCnDS;EDoDT;EACA;EACA;;AAGJ;EACI;EAGA;;;AAKJ;EACI;EACA;EACA;;;AAKJ;EACI;;AAGJ;EACI,MEyD2B;EFxD3B;;;AAIR;EACI;IACI;;EAGJ;IACI","file":"visualization.css"}

package/styles/scss/_zIndexes.scss

@@ -36,8 +36,8 @@ $layout-fluidlayout-item-changed: $resize-basic-overlay-text + 1;
 $scheduled-email-mask: 5001;
 $scheduled-email-mask-small: $scheduled-email-mask + 1;
 
-//toolbar need to be on top of resize and draggable wrapper
-$toolbar-basic: $resize-basic + 1;
+//toolbar need to be on top of resize and draggable wrapper and plugin overlay
+$toolbar-basic: $layout-fluidlayout-item-changed + 1;
 
 $dashboard-canvas-tooltip: $filterbar-sdk-8-12 + 1;
 

package/styles/scss/automationFilters.scss

@@ -5,15 +5,41 @@
 .gd-automation-filters {
     width: 100%;
 
+    &__wrapper {
+        position: relative;
+
+        &--disabled {
+            pointer-events: none;
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 255, 0.4);
+        z-index: 1;
+        pointer-events: none;
+    }
+
     &__list {
         display: flex;
         flex-wrap: wrap;
         gap: 5px;
         align-items: center;
+
+        // Override for tab sections - nested to ensure higher specificity
+        &--tabbed {
+            flex-direction: column;
+            gap: 0;
+            align-items: stretch;
+        }
     }
 
     &__message {
-        color: var(--gd-palette-complementary-7, #6d7680);
+        color: var(--gd-palette-complementary-7);
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
@@ -72,4 +98,53 @@
         margin-left: 5px;
         top: 3px;
     }
+
+    &__tab-section {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: flex-start;
+        padding: 20px 0;
+    }
+
+    &__tab-header {
+        display: flex;
+        flex-direction: column;
+        width: 140px;
+        flex-shrink: 0;
+    }
+
+    &__tab-label {
+        color: var(--gd-palette-complementary-6);
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 16px;
+        letter-spacing: 0.5px;
+    }
+
+    &__tab-title {
+        color: var(--gd-palette-complementary-8);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+    }
+
+    &__tab-filters {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        align-items: center;
+        flex: 1;
+    }
+
+    &__tab-divider {
+        height: 1px;
+        background-color: var(--gd-palette-complementary-3);
+        width: 100%;
+    }
 }

package/styles/scss/dashboard.scss

@@ -94,7 +94,6 @@ $dashboard-menu-item-icon-color: var(--gd-palette-complementary-5-from-theme, #b
     // Provides sizing for the rename input
     &__rename-ghost-value {
         visibility: hidden;
-        min-width: 30px;
     }
 
     // Rename input wrapper

package/styles/scss/filterBar.scss

@@ -528,7 +528,7 @@ $attribute-filter-drag-handle-left: 10px;
 .gd-button-primary.gd-filter-views-button {
     border: 0;
     box-shadow: none;
-    color: kit-variables.$gd-color-state-blank;
+    color: var(--gd-palette-complementary-6);
     background: variables.$gd-dashboards-content-backgroundColor;
     font-size: 14px;
 
@@ -551,10 +551,27 @@ $attribute-filter-drag-handle-left: 10px;
 
             .gd-button-icon {
                 margin-top: 1px;
+                color: var(--gd-palette-primary-base);
             }
         }
     }
 
+    &:not(.disabled):not(.gd-button-link):hover {
+        .gd-button-icon {
+            color: var(--gd-palette-primary-base);
+        }
+
+        color: var(--gd-palette-complementary-8);
+    }
+
+    .gd-button-icon {
+        color: var(--gd-palette-complementary-5);
+        // A little hack. The My views button is using the outdated <Button> component.
+        // This brings the visuals in line with the <UiButton> used in the All tabs component.
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: 0 -8px 0 6px !important;
+    }
+
     .gd-filter-views-button__label {
         text-decoration: underline;
     }

package/styles/scss/kdaDialog.scss

@@ -21,6 +21,9 @@
         &-content {
             flex: 1 1 auto;
             overflow: hidden;
+            margin: -20px;
+            padding: 20px;
+            background: var(--gd-palette-complementary-0-from-theme, #fcfcfd);
         }
 
         &-footer {
@@ -94,6 +97,10 @@
         &__metric {
             display: flex;
             max-width: 300px;
+
+            svg.gd-ui-kit-icon {
+                fill: #00c18d;
+            }
         }
 
         &__date {
@@ -451,14 +458,6 @@
             line-height: 26px;
         }
 
-        &-description {
-            color: var(--gd-palette-complementary-7);
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 23px;
-        }
-
         &-visualisation {
             width: 100%;
             display: flex;
@@ -468,6 +467,10 @@
         &-visualisation-container {
             width: 100%;
             height: 100%;
+
+            rect.highcharts-background {
+                fill: var(--gd-palette-complementary-0-from-theme, #fcfcfd);
+            }
         }
 
         &-info {
@@ -590,6 +593,13 @@
     margin-top: 6px;
 }
 
+.gd-list-item span.gd-kda-attributes-dropdown__key_drivers {
+    flex: 0 0 auto;
+    font-weight: bold;
+    color: var(--gd-palette-complementary-7);
+    margin-left: 5px;
+}
+
 //kda dialog is over drill modal
 /* stylelint-disable declaration-no-important */
 body.gd-kda-dialog-opened .highcharts-tooltip-container {

package/styles/scss/layout.scss

@@ -495,6 +495,7 @@ $gd-dashboards-section-description-color: var(
 }
 
 .gd-grid-layout__section {
+    position: relative; // necessary to contain plugin overlay inside of the element
     display: grid;
     grid-template-columns: subgrid;
 }

package/styles/scss/notifications_channels_dialog.scss

@@ -776,6 +776,11 @@ $min-content-height: 110px;
         flex-direction: column;
         flex: 1 1 auto;
     }
+
+    .gd-schedule-dialog-tab-content-info {
+        width: 100%;
+        margin-bottom: 20px;
+    }
 }
 
 .gd-divider-with-margin {

package/styles/scss/visualization.scss

@@ -22,11 +22,11 @@
         font-size: 14px;
         font-weight: bold;
         line-height: normal;
-        color: kit-variables.$gd-color-state-blank;
 
         h2,
-        p {
-            color: inherit;
+        p,
+        div {
+            color: kit-variables.$gd-color-text;
         }
 
         h2 {
@@ -43,6 +43,7 @@
     .info-label-icon {
         margin-bottom: 10px;
         font-size: 40px;
+        color: kit-variables.$gd-color-text;
     }
 
     .info-label-icon-empty {