@gooddata/sdk-ui-ext 11.55.0-alpha.2 → 11.55.0-alpha.4

package/styles/internal/css/conditional_formatting.css

@@ -165,6 +165,7 @@
 }
 
 .gd-cf-rule--semantic {
+  gap: 8px;
   border: 1px dashed var(--gd-palette-complementary-3);
 }
 .gd-cf-rule--semantic:hover {
@@ -177,6 +178,14 @@
   color: var(--gd-palette-complementary-6);
 }
 
+.gd-cf-rule--off {
+  opacity: 0.6;
+}
+
+.gd-cf-rule__toggle {
+  flex: 0 0 auto;
+}
+
 .gd-cf-rule__view {
   flex: 0 0 auto;
 }
@@ -261,14 +270,29 @@
 .gd-cf-dialog__editable--readonly .gd-cf-dialog__add-condition {
   display: none;
 }
+.gd-cf-dialog__use-default {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.gd-cf-dialog__use-default-info {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--gd-palette-complementary-6);
+  cursor: help;
+}
 .gd-cf-dialog__footer {
   display: flex;
   flex: 0 0 auto;
-  justify-content: flex-end;
+  align-items: center;
   gap: 10px;
   padding: 10px;
   border-top: 1px solid var(--gd-palette-complementary-3);
 }
+.gd-cf-dialog__delete {
+  margin-right: auto;
+}
 .gd-cf-dialog .gd-input-field {
   width: 100%;
 }
@@ -361,7 +385,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px;
+  padding: 7px;
   border: 1px solid var(--gd-palette-complementary-3);
   border-radius: 3px;
   background: var(--gd-palette-complementary-0);
@@ -372,19 +396,29 @@
   font-size: 12px;
 }
 
+.gd-cf-scope-toggle {
+  padding-left: 8px;
+  border-left: 1px solid var(--gd-palette-complementary-3);
+}
+
 button.gd-cf-date-value--error {
   border-color: var(--gd-palette-error-base);
 }
 
 .gd-cf-swatch {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.gd-cf-swatch__box {
   width: 20px;
   height: 20px;
   border: 1px solid var(--gd-palette-complementary-4);
   border-radius: 2px;
   background: var(--gd-palette-complementary-0);
 }
-.gd-cf-swatch--none {
+.gd-cf-swatch__box--none {
   background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--gd-palette-error-base) calc(50% - 1px), var(--gd-palette-error-base) calc(50% + 1px), transparent calc(50% + 1px));
 }
 

package/styles/internal/css/conditional_formatting.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/conditional_formatting.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAKJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACI;;;AAKR;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAaJ;EACI;EACA;EACA;EACA;EACA;EACA,YACI;;AAKJ;EACI;EACA;EACA;;AAKJ;EA3BA;EACA;EACA,YACI;EA2BA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;;;AAOR;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;;AAIA;EACI;;AAIR;EACI;EACA;EACA;;AAIA;AAAA;AAAA;EAGI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACI;;AAMJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EAlPA;EACA;EACA,YACI;EAkPA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAMR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI","file":"conditional_formatting.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/conditional_formatting.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAKJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;;AAMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACI;;;AAKR;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAaJ;EACI;EACA;EACA;EACA;EACA;EACA,YACI;;AAKJ;EACI;EACA;EACA;;AAKJ;EA3BA;EACA;EACA,YACI;EA2BA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;;;AAOR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;;;AAMR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;;AAIA;EACI;;AAIR;EACI;EACA;EACA;;AAIA;AAAA;AAAA;EAGI;;AAIR;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACI;;AAMJ;EACI;;AAGJ;EACI;EACA;;AAKJ;EAjRA;EACA;EACA,YACI;EAiRA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAOR;EACI;EACA;;;AAKJ;EACI;;;AAOJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI","file":"conditional_formatting.css"}

package/styles/internal/css/insightPicker.css

@@ -2,6 +2,31 @@
   font-size: 12px;
 }
 
+.gd-ui-ext-insight-picker .gd-visualizations-list-item {
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item:hover {
+  box-shadow: none;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item .gd-visualizations-list-item-content {
+  padding: 5px 0;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item .gd-visualizations-list-item-content .gd-visualizations-list-item-content-name {
+  font-size: 14px;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item .gd-visualizations-list-item-actions {
+  padding: 5px 10px 5px 0;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item .gd-visualizations-list-item-description {
+  padding: 13px 0 5px 2px;
+}
+.gd-ui-ext-insight-picker .gd-visualizations-list-item .gd-vis-type-container {
+  padding: 5px 0 5px 10px;
+}
+
 .gd-ui-ext-insight-picker-search {
   padding: 0 10px 10px;
 }
@@ -12,6 +37,7 @@
   align-items: center;
   cursor: pointer;
   padding-right: 10px;
+  height: 100%;
 }
 .gd-ui-ext-insight-picker-row--with-menu {
   grid-template-columns: 1fr auto;
@@ -63,6 +89,7 @@
   display: flex;
   align-items: center;
   gap: 5px;
+  font: inherit;
   padding: 4px 8px;
   border: none;
   border-radius: 3px;

package/styles/internal/css/insightPicker.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/insightPicker.scss"],"names":[],"mappings":"AAEA;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGA;EACI;;AAMR;EACI;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAIA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA,YACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EAEI;EACA","file":"insightPicker.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/insightPicker.scss"],"names":[],"mappings":"AAEA;EACI;;;AAOA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AAKZ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACI;;AAGJ;EACI;;AAGA;EACI;;AAMR;EACI;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;;;AAIA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA,YACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EAEI;EACA","file":"insightPicker.css"}

package/styles/internal/scss/conditional_formatting.scss

@@ -201,10 +201,11 @@
     }
 }
 
-// Read-only row: nothing on the row itself is editable (only the View button), so the base
+// Nothing on the row itself is editable (only the toggle and the Edit button), so the base
 // hover's "pop card" bleed — which signals "click me to edit" — doesn't apply here; the dashed
 // border + muted title read as "inherited, not yours to edit here" instead.
 .gd-cf-rule--semantic {
+    gap: 8px;
     border: 1px dashed var(--gd-palette-complementary-3);
 
     &:hover {
@@ -219,6 +220,16 @@
     }
 }
 
+// Suppressed (Custom-with-zero-rules, via `suppressedTargets`) — further muted than a plain Inherited
+// row on top of the shared dashed treatment, so "off" reads as visually quieter than "inherited".
+.gd-cf-rule--off {
+    opacity: 0.6;
+}
+
+.gd-cf-rule__toggle {
+    flex: 0 0 auto;
+}
+
 .gd-cf-rule__view {
     flex: 0 0 auto;
 }
@@ -319,15 +330,35 @@
         }
     }
 
+    &__use-default {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    // A real <button> (for keyboard/screen-reader focus) reset back to look like the plain icon
+    // the span it replaced used to.
+    &__use-default-info {
+        padding: 0;
+        border: none;
+        background: none;
+        color: var(--gd-palette-complementary-6);
+        cursor: help;
+    }
+
     &__footer {
         display: flex;
         flex: 0 0 auto;
-        justify-content: flex-end;
+        align-items: center;
         gap: 10px;
         padding: 10px;
         border-top: 1px solid var(--gd-palette-complementary-3);
     }
 
+    &__delete {
+        margin-right: auto;
+    }
+
     .gd-input-field {
         width: 100%;
     }
@@ -440,7 +471,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 10px;
+    padding: 7px;
     border: 1px solid var(--gd-palette-complementary-3);
     border-radius: 3px;
     background: var(--gd-palette-complementary-0);
@@ -452,27 +483,45 @@
     }
 }
 
+// Separates the Cell/Row scope toggle from the color pickers, matching the design. Our own wrapper
+// around the kit's UiButtonSegmentedControl — this is popover layout between siblings, not something
+// to style via the kit's internal root class (rename-prone, not part of its public contract).
+.gd-cf-scope-toggle {
+    padding-left: 8px;
+    border-left: 1px solid var(--gd-palette-complementary-3);
+}
+
 // The class sits on the trigger button element itself (DropdownButton's className), so the
 // element+class selector outranks the kit's single-class button styling without naming it.
 button.gd-cf-date-value--error {
     border-color: var(--gd-palette-error-base);
 }
 
+// Fills and centers within whatever height ColorDropdown's own trigger wrapper ends up with — its
+// per-instance dynamic class can't be targeted reliably (substring-matching it broke on any rename,
+// and stylelint wouldn't catch that), so this makes OUR OWN markup self-centering instead of
+// reaching into theirs. `__box` is the actual fixed-size visible chip.
 .gd-cf-swatch {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 1px solid var(--gd-palette-complementary-4);
-    border-radius: 2px;
-    background: var(--gd-palette-complementary-0);
-
-    &--none {
-        background-image: linear-gradient(
-            to top right,
-            transparent calc(50% - 1px),
-            var(--gd-palette-error-base) calc(50% - 1px),
-            var(--gd-palette-error-base) calc(50% + 1px),
-            transparent calc(50% + 1px)
-        );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &__box {
+        width: 20px;
+        height: 20px;
+        border: 1px solid var(--gd-palette-complementary-4);
+        border-radius: 2px;
+        background: var(--gd-palette-complementary-0);
+
+        &--none {
+            background-image: linear-gradient(
+                to top right,
+                transparent calc(50% - 1px),
+                var(--gd-palette-error-base) calc(50% - 1px),
+                var(--gd-palette-error-base) calc(50% + 1px),
+                transparent calc(50% + 1px)
+            );
+        }
     }
 }

package/styles/internal/scss/insightPicker.scss

@@ -4,6 +4,42 @@
     font-size: 12px;
 }
 
+// The rows render sdk-ui-kit's insight list item, which is drawn for a dropdown: an inset margin, a
+// rounded border and a lifted hover, all of which fight the flat row-wide highlight painted below
+// it. Flattening the item hands the whole row back to that highlight.
+.gd-ui-ext-insight-picker {
+    .gd-visualizations-list-item {
+        margin: 0;
+        padding: 0;
+        border: none;
+        border-radius: 0;
+
+        &:hover {
+            box-shadow: none;
+        }
+
+        .gd-visualizations-list-item-content {
+            padding: 5px 0;
+
+            .gd-visualizations-list-item-content-name {
+                font-size: 14px;
+            }
+        }
+
+        .gd-visualizations-list-item-actions {
+            padding: 5px 10px 5px 0;
+        }
+
+        .gd-visualizations-list-item-description {
+            padding: 13px 0 5px 2px;
+        }
+
+        .gd-vis-type-container {
+            padding: 5px 0 5px 10px;
+        }
+    }
+}
+
 .gd-ui-ext-insight-picker-search {
     padding: 0 10px 10px;
 }
@@ -14,6 +50,9 @@
     align-items: center;
     cursor: pointer;
     padding-right: 10px;
+    // The virtualized list gives every row a fixed-height slot. Anything the row leaves unclaimed
+    // is a strip its highlight cannot reach.
+    height: 100%;
 
     &--with-menu {
         grid-template-columns: 1fr auto;
@@ -76,6 +115,8 @@
     display: flex;
     align-items: center;
     gap: 5px;
+    // A native button takes the browser's own font rather than the one around it.
+    font: inherit;
     padding: 4px 8px;
     border: none;
     border-radius: 3px;