@gooddata/sdk-ui-dashboard 10.17.0-alpha.9 → 10.17.0

package/styles/scss/dashboardNestedLayoutWidget.scss

@@ -107,22 +107,42 @@
         }
     }
 
-    .gd-hotspot-border {
+    .gd-hotspot-border__container {
+        display: none;
         position: absolute;
+        padding: 10px 0;
+        width: 10px;
         height: 100%;
     }
 
+    .gd-hotspot-border__drop-target {
+        width: 100%;
+        height: 100%;
+        padding: 2px;
+        border: 1px dashed kit-variables.$gd-palette-primary-base;
+        border-radius: 15px;
+        background-color: kit-variables.$gd-palette-primary-dimmed;
+
+        .drop-target-inner {
+            width: 4px;
+            height: 100%;
+            padding: 0;
+            border-radius: 2px;
+            background-color: kit-variables.$gd-palette-primary-base;
+        }
+    }
+
     .dropzone.prev.active {
-        .gd-hotspot-border {
-            left: -12px;
-            border-left: 4px dashed kit-variables.$gd-palette-primary-base;
+        .gd-hotspot-border__container {
+            left: -15px;
+            display: block;
         }
     }
 
     .dropzone.next.active {
-        .gd-hotspot-border {
-            right: -12px;
-            border-right: 4px dashed kit-variables.$gd-palette-primary-base;
+        .gd-hotspot-border__container {
+            right: -15px;
+            display: block;
         }
     }
 }

package/styles/scss/dragAndDrop.scss

@@ -820,5 +820,21 @@
 
     .gd-fluidlayout-column-row-end-hotspot {
         min-height: unset;
+        .widget-dropzone-box {
+            padding: 10px 0;
+        }
+        .drag-info-placeholder-inner {
+            padding: 0;
+        }
+        .drag-info-placeholder-drop-target,
+        .drop-target-inner {
+            position: unset;
+            height: 100%;
+        }
+    }
+    .gd-fluidlayout-column-row-end-hotspot.gd-fluidlayout-column-dropzone__text--hidden {
+        .drop-target-message.kpi-drop-target {
+            display: none;
+        }
     }
 }

package/styles/scss/layout.scss

@@ -123,7 +123,8 @@ $gd-dashboards-section-description-color: var(
     .gd-row-header-title-wrapper {
         display: flex;
 
-        h2 {
+        h2,
+        h3 {
             color: $gd-dashboards-section-title-color;
         }
 
@@ -419,6 +420,45 @@ $gd-dashboards-section-description-color: var(
 
     .gd-fluid-layout-row-header {
         position: relative;
+
+        .gd-row-header-edit--nested {
+            .title {
+                @include typo-mixins.gd-heading-3;
+
+                color: $gd-dashboards-section-title-color;
+            }
+
+            .placeholder {
+                color: kit-variables.$gd-color-state-blank;
+            }
+        }
+
+        .gd-editable-label {
+            @include mixins.active-states {
+                border-color: variables.$editable-label-border;
+                border-radius: 3px;
+            }
+
+            &.is-editing {
+                border-radius: 3px;
+            }
+        }
+
+        .gd-editable-label-richtext {
+            padding: 2px 5px;
+            border-radius: 3px;
+        }
+    }
+
+    .gd-fluid-layout-row-header-container--no-headers,
+    .gd-fluid-layout-row-header-container--with-headers {
+        margin-top: 16px;
+    }
+
+    .gd-dashboard-nested-layout-content:not(.is-dragging-widget) {
+        .gd-fluid-layout-row-header-container--no-headers {
+            margin-top: 0;
+        }
     }
 
     .gd-fluidlayout-column-container {

package/esm/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-/**
- * @alpha
- */
-export interface IDashboardLayoutSectionHeaderProps {
-    title?: string;
-    description?: string;
-    /**
-     * This prop is here to allow rendering row hotspots in gdc-dashboards edit mode
-     * in the same DOM location as before without duplicating css classes / DOM structure,
-     * because we want to have all the logic and styling of the dashboard layout in one place,
-     * to keep the look of Dashboard component in sync with gdc-dashboards.
-     */
-    renderBeforeHeader?: React.ReactNode;
-    /**
-     * This prop is here to allow rendering editable row header in gdc-dashboards edit mode
-     * in the same DOM location as before without duplicating css classes / DOM structure,
-     * because we want to have all the logic and styling of the dashboard layout in one place,
-     * to keep the look of Dashboard component in sync with gdc-dashboards.
-     */
-    renderHeader?: React.ReactNode;
-}
-export declare const DashboardLayoutSectionHeader: React.FC<IDashboardLayoutSectionHeaderProps>;
-//# sourceMappingURL=DashboardLayoutSectionHeader.d.ts.map

package/esm/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardLayoutSectionHeader.d.ts","sourceRoot":"","sources":["../../../../src/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,MAAM,WAAW,kCAAkC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,kCAAkC,CA+BrF,CAAC"}

package/esm/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.js

@@ -1,14 +0,0 @@
-// (C) 2019-2024 GoodData Corporation
-import React from "react";
-import { Typography } from "@gooddata/sdk-ui-kit";
-import { DashboardLayoutSectionHeaderDescription } from "./DashboardLayoutSectionHeaderDescription.js";
-export const DashboardLayoutSectionHeader = ({ title, description, renderBeforeHeader, renderHeader, }) => {
-    return (React.createElement("div", { className: "gd-fluid-layout-row-header s-fluid-layout-row-header" },
-        renderBeforeHeader,
-        title || description || renderHeader ? (React.createElement("div", { className: "gd-fluid-layout-row-header-container" }, renderHeader ?? (React.createElement("div", { className: "gd-row-header-view" },
-            title ? (React.createElement("div", { className: "gd-row-header-title-wrapper" },
-                React.createElement("span", { className: "title" },
-                    React.createElement(Typography, { tagName: "h2", className: "s-fluid-layout-row-title" }, title)))) : null,
-            description ? (React.createElement(DashboardLayoutSectionHeaderDescription, { description: description })) : null)))) : null));
-};
-//# sourceMappingURL=DashboardLayoutSectionHeader.js.map

package/esm/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardLayoutSectionHeader.js","sourceRoot":"","sources":["../../../../src/presentation/flexibleLayout/DefaultDashboardLayoutRenderer/DashboardLayoutSectionHeader.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,uCAAuC,EAAE,MAAM,8CAA8C,CAAC;AA0BvG,MAAM,CAAC,MAAM,4BAA4B,GAAiD,CAAC,EACvF,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,YAAY,GACf,EAAE,EAAE;IACD,OAAO,CACH,6BAAK,SAAS,EAAC,sDAAsD;QAChE,kBAAkB;QAClB,KAAK,IAAI,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CACpC,6BAAK,SAAS,EAAC,sCAAsC,IAChD,YAAY,IAAI,CACb,6BAAK,SAAS,EAAC,oBAAoB;YAC9B,KAAK,CAAC,CAAC,CAAC,CACL,6BAAK,SAAS,EAAC,6BAA6B;gBACxC,8BAAM,SAAS,EAAC,OAAO;oBACnB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,0BAA0B,IACxD,KAAK,CACG,CACV,CACL,CACT,CAAC,CAAC,CAAC,IAAI;YACP,WAAW,CAAC,CAAC,CAAC,CACX,oBAAC,uCAAuC,IAAC,WAAW,EAAE,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,IAAI,CACN,CACT,CACC,CACT,CAAC,CAAC,CAAC,IAAI,CACN,CACT,CAAC;AACN,CAAC,CAAC"}