@gooddata/sdk-ui-dashboard 11.12.0-alpha.1 → 11.12.0-alpha.3

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/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/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 {