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

package/styles/scss/sidebar.scss

@@ -11,13 +11,15 @@ $sidebar-collapsed-width: 48px;
 $sidebar-icon-size: 18px;
 $sidebar-header-height: 48px;
 $sidebar-item-size: 32px;
-$sidebar-item-inset: ($sidebar-collapsed-width - $sidebar-item-size) * 0.5;
+// Shared by the collapse toggle, the palette items and the rail search, so their icons line up.
+$sidebar-item-inset: 10px;
 $sidebar-rail-divider-offset: 10px;
 $sidebar-rail-search-gap: 10px;
 $sidebar-rail-search-offset: $sidebar-rail-divider-offset + variables.$nav-border-size +
     $sidebar-rail-search-gap;
 $sidebar-fade-length: 0.2s;
-$sidebar-fade-delay: 0.3s;
+// Delayed fades end together with the slide.
+$sidebar-fade-delay: variables.$sidebar-transition-length - $sidebar-fade-length;
 
 .gd-sidebar-container {
     --sidebar-fade-duration: #{$sidebar-fade-length};
@@ -71,7 +73,7 @@ $sidebar-fade-delay: 0.3s;
 
 .gd-sidebar-collapse-toggle {
     display: flex;
-    margin: 0 10px;
+    margin: 0 $sidebar-item-inset;
 }
 
 // Restore control in the top bar while the sidebar is hidden, placed right before the title.
@@ -101,6 +103,12 @@ $sidebar-fade-delay: 0.3s;
             background-size: $sidebar-icon-size auto;
         }
 
+        // The icon cell fills the 32px item box inside its 1px border.
+        .add-item-placeholder__icon {
+            width: $sidebar-item-size - 2px;
+            margin-right: 6px;
+        }
+
         .configuration-panel {
             padding-top: 0;
         }
@@ -133,10 +141,9 @@ $sidebar-fade-delay: 0.3s;
             flex: 0 0 auto;
         }
 
-        // Hidden mode: the whole content fades out at the start of the collapse and back in once the
-        // expand slide has nearly finished, so it never overlaps the dashboard mid-slide. Opacity only:
-        // the collapsed wrapper is already inert and clipped, and the toggle must stay focusable for the
-        // focus hand-off.
+        // Hidden mode: the whole content fades out at the start of the collapse and back in to end together
+        // with the expand slide, clipped by the panel meanwhile. Opacity only: the collapsed wrapper is
+        // already inert and clipped, and the toggle must stay focusable for the focus hand-off.
         .gd-sidebar-container--hidden & .flex-panel-full-height {
             transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
         }
@@ -150,10 +157,10 @@ $sidebar-fade-delay: 0.3s;
         // which stay in place in the 48px rail together with the toggle in front of the headline.
         .gd-sidebar-container--rail & {
             .add-item-placeholder {
-                transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+                transition: color var(--sidebar-fade-duration);
             }
 
-            .add-item-placeholder svg {
+            .add-item-placeholder svg:not(.add-item-placeholder__icon svg) {
                 transition: transform var(--sidebar-slide-duration);
             }
 
@@ -167,7 +174,7 @@ $sidebar-fade-delay: 0.3s;
 
             .gd-creation-panel-header h2,
             .gd-visualizations-list {
-                transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+                transition: opacity var(--sidebar-fade-duration);
             }
 
             .configuration-category-vis {
@@ -213,7 +220,7 @@ $sidebar-fade-delay: 0.3s;
                     padding 0s linear var(--sidebar-fade-duration);
             }
 
-            .add-item-placeholder.add-panel-item svg {
+            .add-item-placeholder.add-panel-item svg:not(.add-item-placeholder__icon svg) {
                 transform: translateX(calc(-50% + 1px));
             }
 
@@ -221,6 +228,10 @@ $sidebar-fade-delay: 0.3s;
                 width: $sidebar-collapsed-width - 16px;
             }
 
+            .add-item-placeholder:not(.disabled) .add-item-placeholder__icon {
+                --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            }
+
             .add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
                 display: none;
             }
@@ -337,7 +348,8 @@ $sidebar-fade-delay: 0.3s;
             justify-content: space-between;
         }
 
-        svg {
+        // Svg icons of custom items; the kit icon cell centers its own icon.
+        svg:not(.add-item-placeholder__icon svg) {
             margin: 0 14px;
         }
 
@@ -368,6 +380,29 @@ $sidebar-fade-delay: 0.3s;
     span {
         flex: 1 1 auto;
     }
+
+    // Items with an icon cell drop the background icon column.
+    &:has(> .add-item-placeholder__icon) {
+        padding-left: 0;
+
+        &::before {
+            content: none;
+        }
+    }
+
+    &.disabled .add-item-placeholder__icon {
+        --gd-icon-fill-color: var(--gd-palette-complementary-5, #b0beca);
+    }
+}
+
+.add-item-placeholder__icon {
+    --gd-icon-fill-color: var(--gd-palette-complementary-6, #94a1ad);
+
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
 }
 
 .gd-visualizations-related-header {

package/esm/presentation/dashboard/components/DashboardSkeleton.d.ts

@@ -1,5 +0,0 @@
-/**
- * @internal
- */
-export declare function DashboardSkeleton(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DashboardSkeleton.d.ts.map

package/esm/presentation/dashboard/components/DashboardSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DashboardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dashboard/components/DashboardSkeleton.tsx"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,iBAAiB,4CA4ChC"}

package/esm/presentation/dashboard/components/DashboardSkeleton.js

@@ -1,20 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Skeleton from "react-loading-skeleton";
-import { useScreenSize } from "./DashboardScreenSizeContext.js";
-function DashboardSkeletonWrapper({ children }) {
-    return _jsx("div", { className: "gd-skeleton-wrapper", children: children });
-}
-function DashboardSkeletonFilter({ index }) {
-    return (_jsxs("div", { className: "gd-skeleton-filter", children: [_jsx(Skeleton, { className: "gd-react-loading-skeleton", width: index % 2 === 0 ? 40 : 80, height: 14 }), _jsx(Skeleton, { className: "gd-react-loading-skeleton", width: index % 2 === 0 ? 80 : 40, height: 14 })] }));
-}
-function DashboardSkeletonFilterBar() {
-    return (_jsxs("div", { className: "gd-skeleton-filter-bar", children: [_jsx(DashboardSkeletonFilter, { index: 0 }, 0), _jsx(DashboardSkeletonFilter, { index: 1 }, 1), _jsx(DashboardSkeletonFilter, { index: 2 }, 2)] }));
-}
-/**
- * @internal
- */
-export function DashboardSkeleton() {
-    const screenSize = useScreenSize();
-    const isSmall = screenSize === "xs" || screenSize === "sm";
-    return (_jsx("div", { className: "sdk-dashboard-skeleton", children: _jsxs(DashboardSkeletonWrapper, { children: [_jsx(DashboardSkeletonFilterBar, {}), _jsx("div", { className: "gd-skeleton-content", children: isSmall ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { containerClassName: "skeleton-flex", className: "gd-react-loading-skeleton", width: "100%", height: 220 }), _jsx(Skeleton, { containerClassName: "skeleton-flex", className: "gd-react-loading-skeleton", width: "100%", height: 220 })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { containerClassName: "skeleton-flex", className: "gd-react-loading-skeleton", width: "100%", height: 440 }), _jsx(Skeleton, { containerClassName: "skeleton-flex", className: "gd-react-loading-skeleton", width: "100%", height: 440 })] })) })] }) }));
-}