fix: canvas panel and floating panel renamed to side and bottom panel (…

…#4231) * docs: canvas tabs story removed * fix: canvas floating panel renamed to bottom panel * fix: canvas panel renamed to side panel
lumada-design · Jul 16, 2024 · e5f4f84 · e5f4f84
1 parent a580a01
commit e5f4f84
Show file tree

Hide file tree

Showing 21 changed files with 313 additions and 349 deletions.
diff --git a/docs/templates/Canvas.stories.tsx b/docs/templates/Canvas.stories.tsx
@@ -1,7 +1,7 @@
 import { css } from "@emotion/css";
 import { StoryObj } from "@storybook/react";
 import {
-  canvasPanelClasses,
+  canvasSidePanelClasses,
   canvasToolbarClasses,
 } from "@hitachivantara/uikit-react-pentaho";
 
@@ -17,7 +17,10 @@ const classes = {
   root: css({
     "& > div": { height: "calc(100vh - 40px)" },
     [`& .${canvasToolbarClasses.root}`]: { top: 8 },
-    [`& .${canvasPanelClasses.root}`]: { top: 8, height: "calc(100% - 8px)" },
+    [`& .${canvasSidePanelClasses.root}`]: {
+      top: 8,
+      height: "calc(100% - 8px)",
+    },
   }),
 };
 

diff --git a/packages/cli/src/templates/Canvas/Sidebar.tsx b/packages/cli/src/templates/Canvas/Sidebar.tsx
@@ -8,14 +8,14 @@ import {
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { useTheme, useUniqueId } from "@hitachivantara/uikit-react-core";
 import {
-  HvCanvasPanel,
-  HvCanvasPanelProps,
+  HvCanvasSidePanel,
+  HvCanvasSidePanelProps,
 } from "@hitachivantara/uikit-react-pentaho";
 
 import { classes } from "./styles";
 import { restrictToSample } from "./utils";
 
-export const CanvasSidebar = (props: HvCanvasPanelProps) => {
+export const CanvasSidebar = (props: HvCanvasSidePanelProps) => {
   const { rootId } = useTheme();
 
   const [overlay, setOverlay] = useState<React.ReactNode>();
@@ -43,7 +43,7 @@ export const CanvasSidebar = (props: HvCanvasPanelProps) => {
 
   return (
     <>
-      <HvCanvasPanel
+      <HvCanvasSidePanel
         id={elementId}
         ref={setNodeRef}
         className={classes.panel}

diff --git a/packages/cli/src/templates/Canvas/index.tsx b/packages/cli/src/templates/Canvas/index.tsx
@@ -25,8 +25,8 @@ import {
   HvFlowEmpty,
 } from "@hitachivantara/uikit-react-lab";
 import {
-  HvCanvasFloatingPanel,
-  HvCanvasFloatingPanelProps,
+  HvCanvasBottomPanel,
+  HvCanvasBottomPanelProps,
   HvCanvasToolbar,
 } from "@hitachivantara/uikit-react-pentaho";
 
@@ -85,7 +85,7 @@ const Page = () => {
   const { selectedTable, openedTables, setOpenedTables, setSelectedTable } =
     useCanvasContext();
 
-  const floatingTabs = useMemo(
+  const bottomTabs = useMemo(
     () =>
       openedTables?.map((table) => ({
         id: table.id,
@@ -111,14 +111,14 @@ const Page = () => {
     }
   };
 
-  const handleChangeTab: HvCanvasFloatingPanelProps["onTabChange"] = (
+  const handleChangeTab: HvCanvasBottomPanelProps["onTabChange"] = (
     event,
     value,
   ) => {
     setSelectedTable?.(value as string);
   };
 
-  const handleAction: HvCanvasFloatingPanelProps["onAction"] = (
+  const handleAction: HvCanvasBottomPanelProps["onAction"] = (
     event,
     action,
     tabId,
@@ -170,13 +170,13 @@ const Page = () => {
     );
   };
 
-  const floatingPanelOpen = useMemo(
+  const bottomPanelOpen = useMemo(
     () =>
       !!openedTables &&
       openedTables.length > 0 &&
-      floatingTabs &&
-      floatingTabs.length > 0,
-    [floatingTabs, openedTables],
+      bottomTabs &&
+      bottomTabs.length > 0,
+    [bottomTabs, openedTables],
   );
 
   return (
@@ -188,7 +188,7 @@ const Page = () => {
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         onInit={setFlowInstance}
-        /** Flow sidebar passed as prop to access the flow's Dnd context inside CanvasPanel */
+        /** Flow sidebar passed as prop to access the flow's Dnd context inside CanvasSidePanel */
         sidebar={
           <CanvasSidebar
             tabs={sidePanelTabs}
@@ -233,15 +233,15 @@ const Page = () => {
           Execute
         </HvButton>
       </HvCanvasToolbar>
-      {floatingTabs && floatingPanelOpen && (
-        <HvCanvasFloatingPanel
+      {bottomTabs && bottomPanelOpen && (
+        <HvCanvasBottomPanel
           className={cx({
             [classes.fullWidth]: !sidePanelOpen,
             [classes.minWidth]: sidePanelOpen,
           })}
-          open={floatingPanelOpen}
+          open={bottomPanelOpen}
           minimize={minimize}
-          tabs={floatingTabs}
+          tabs={bottomTabs}
           tab={selectedTable}
           leftActions={[
             {
@@ -271,17 +271,17 @@ const Page = () => {
           onAction={handleAction}
         >
           <DataTable id={selectedTable} />
-        </HvCanvasFloatingPanel>
+        </HvCanvasBottomPanel>
       )}
-      {floatingPanelOpen && (
+      {bottomPanelOpen && (
         <HvDialog
           fullWidth
           maxWidth="lg"
           open={fullscreen}
           onClose={() => setFullscreen((prev) => !prev)}
         >
           <HvDialogTitle className={classes.dialogTitle}>
-            {floatingTabs?.find((x) => x.id === selectedTable)?.title}
+            {bottomTabs?.find((x) => x.id === selectedTable)?.title}
           </HvDialogTitle>
           <HvDialogContent>
             <DataTable id={selectedTable} />

diff --git a/...s/FloatingPanel/FloatingPanel.stories.tsx → ...anvas/BottomPanel/BottomPanel.stories.tsx b/...s/FloatingPanel/FloatingPanel.stories.tsx → ...anvas/BottomPanel/BottomPanel.stories.tsx
@@ -1,19 +1,19 @@
 import { Meta, StoryObj } from "@storybook/react";
 import {
-  HvCanvasFloatingPanel,
-  HvCanvasFloatingPanelProps,
+  HvCanvasBottomPanel,
+  HvCanvasBottomPanelProps,
 } from "@hitachivantara/uikit-react-pentaho";
 
 import { MainStory } from "./stories/Main";
 import MainRaw from "./stories/Main?raw";
 
-const meta: Meta<typeof HvCanvasFloatingPanel> = {
-  title: "Pentaho/Canvas/Floating Panel",
-  component: HvCanvasFloatingPanel,
+const meta: Meta<typeof HvCanvasBottomPanel> = {
+  title: "Pentaho/Canvas/Bottom Panel",
+  component: HvCanvasBottomPanel,
 };
 export default meta;
 
-export const Main: StoryObj<HvCanvasFloatingPanelProps> = {
+export const Main: StoryObj<HvCanvasBottomPanelProps> = {
   args: { open: true },
   argTypes: {
     tabs: { control: { disable: true } },

diff --git a/...as/FloatingPanel/FloatingPanel.styles.tsx → ...Canvas/BottomPanel/BottomPanel.styles.tsx b/...as/FloatingPanel/FloatingPanel.styles.tsx → ...Canvas/BottomPanel/BottomPanel.styles.tsx
@@ -1,7 +1,7 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 
 export const { staticClasses, useClasses } = createClasses(
-  "HvCanvasFloatingPanel",
+  "HvCanvasBottomPanel",
   {
     root: {
       position: "absolute",

diff --git a/...nvas/FloatingPanel/FloatingPanel.test.tsx → ...c/Canvas/BottomPanel/BottomPanel.test.tsx b/...nvas/FloatingPanel/FloatingPanel.test.tsx → ...c/Canvas/BottomPanel/BottomPanel.test.tsx
@@ -5,10 +5,7 @@ import { describe, it, vi } from "vitest";
 import { HvButton } from "@hitachivantara/uikit-react-core";
 import { Close, DropUpXS } from "@hitachivantara/uikit-react-icons";
 
-import {
-  HvCanvasFloatingPanel,
-  HvCanvasFloatingPanelProps,
-} from "./FloatingPanel";
+import { HvCanvasBottomPanel, HvCanvasBottomPanelProps } from "./BottomPanel";
 
 const panelTabs = [
   {
@@ -21,29 +18,29 @@ const panelTabs = [
   },
 ];
 
-const renderSimplePanel = (props?: Partial<HvCanvasFloatingPanelProps>) =>
+const renderSimplePanel = (props?: Partial<HvCanvasBottomPanelProps>) =>
   render(
-    <HvCanvasFloatingPanel {...props} tabs={panelTabs}>
+    <HvCanvasBottomPanel {...props} tabs={panelTabs}>
       Content
-    </HvCanvasFloatingPanel>,
+    </HvCanvasBottomPanel>,
   );
 
 const ControlledOpen = () => {
   const [open, setOpen] = useState(false);
   return (
     <>
       <HvButton onClick={() => setOpen((prev) => !prev)}>Toggle</HvButton>
-      <HvCanvasFloatingPanel tabs={panelTabs} open={open}>
+      <HvCanvasBottomPanel tabs={panelTabs} open={open}>
         Content
-      </HvCanvasFloatingPanel>
+      </HvCanvasBottomPanel>
     </>
   );
 };
 
-const ControlledTab = (props?: Partial<HvCanvasFloatingPanelProps>) => {
+const ControlledTab = (props?: Partial<HvCanvasBottomPanelProps>) => {
   const [tab, setTab] = useState(panelTabs[1].id);
   return (
-    <HvCanvasFloatingPanel
+    <HvCanvasBottomPanel
       {...props}
       tabs={panelTabs}
       tab={tab}
@@ -53,18 +50,18 @@ const ControlledTab = (props?: Partial<HvCanvasFloatingPanelProps>) => {
       }}
     >
       Content
-    </HvCanvasFloatingPanel>
+    </HvCanvasBottomPanel>
   );
 };
 
-const ControlledMinimize = (props?: Partial<HvCanvasFloatingPanelProps>) => {
+const ControlledMinimize = (props?: Partial<HvCanvasBottomPanelProps>) => {
   const [minimize, setMinimize] = useState(false);
   return (
     <>
       <HvButton onClick={() => setMinimize((prev) => !prev)}>Toggle</HvButton>
-      <HvCanvasFloatingPanel {...props} tabs={panelTabs} minimize={minimize}>
+      <HvCanvasBottomPanel {...props} tabs={panelTabs} minimize={minimize}>
         Content
-      </HvCanvasFloatingPanel>
+      </HvCanvasBottomPanel>
     </>
   );
 };
@@ -91,7 +88,7 @@ const expectPanelClosed = () => {
   expect(tabPanel).toBeNull();
 };
 
-describe("CanvasFloatingPanel", () => {
+describe("CanvasBottomPanel", () => {
   it("renders all components when opened", () => {
     renderSimplePanel({
       open: true,

diff --git a/...rc/Canvas/FloatingPanel/FloatingPanel.tsx → ...ho/src/Canvas/BottomPanel/BottomPanel.tsx b/...rc/Canvas/FloatingPanel/FloatingPanel.tsx → ...ho/src/Canvas/BottomPanel/BottomPanel.tsx
@@ -14,16 +14,16 @@ import {
 
 import { HvCanvasTab } from "../Tab";
 import { HvCanvasTabs, HvCanvasTabsProps } from "../Tabs";
-import { staticClasses, useClasses } from "./FloatingPanel.styles";
+import { staticClasses, useClasses } from "./BottomPanel.styles";
 
-export { staticClasses as floatingPanelClasses };
+export { staticClasses as canvasBottomPanelClasses };
 
-export type HvCanvasFloatingPanelClasses = ExtractNames<typeof useClasses>;
+export type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;
 
-export interface HvCanvasFloatingPanelProps extends HvBaseProps {
-  /** Open state of the floating panel. */
+export interface HvCanvasBottomPanelProps extends HvBaseProps {
+  /** Open state of the bottom panel. */
   open?: boolean;
-  /** Minimize state of the floating panel tabs'. */
+  /** Minimize state of the bottom panel tabs'. */
   minimize?: boolean;
   /** List of tabs visible on the panel. */
   tabs: {
@@ -48,15 +48,15 @@ export interface HvCanvasFloatingPanelProps extends HvBaseProps {
     tabId: string | number,
   ) => void;
   /** A Jss Object used to override or extend the styles applied. */
-  classes?: HvCanvasFloatingPanelClasses;
+  classes?: HvCanvasBottomPanelClasses;
 }
 
 /**
- * A floating panel component to use in a canvas context.
+ * A bottom panel component to use in a canvas context.
  */
-export const HvCanvasFloatingPanel = forwardRef<
+export const HvCanvasBottomPanel = forwardRef<
   HTMLDivElement,
-  HvCanvasFloatingPanelProps
+  HvCanvasBottomPanelProps
 >((props, ref) => {
   const {
     id: idProp,
@@ -72,7 +72,7 @@ export const HvCanvasFloatingPanel = forwardRef<
     onTabChange,
     onAction,
     ...others
-  } = useDefaultProps("HvCanvasFloatingPanel", props);
+  } = useDefaultProps("HvCanvasBottomPanel", props);
 
   const { classes, cx } = useClasses(classesProp);
 

diff --git a/packages/pentaho/src/Canvas/BottomPanel/index.ts b/packages/pentaho/src/Canvas/BottomPanel/index.ts
@@ -0,0 +1 @@
+export * from "./BottomPanel";
diff --git a/...src/Canvas/FloatingPanel/stories/Main.tsx → ...o/src/Canvas/BottomPanel/stories/Main.tsx b/...src/Canvas/FloatingPanel/stories/Main.tsx → ...o/src/Canvas/BottomPanel/stories/Main.tsx
@@ -1,7 +1,7 @@
 import { css } from "@emotion/css";
 import {
-  HvCanvasFloatingPanel,
-  HvCanvasFloatingPanelProps,
+  HvCanvasBottomPanel,
+  HvCanvasBottomPanelProps,
 } from "@hitachivantara/uikit-react-pentaho";
 
 const tabs = [
@@ -17,8 +17,8 @@ const tabs = [
 
 const classes = { root: css({ position: "relative" }) }; // for Storybook purposes
 
-export const MainStory = (props: HvCanvasFloatingPanelProps) => (
-  <HvCanvasFloatingPanel {...props} className={classes.root} tabs={tabs}>
+export const MainStory = (props: HvCanvasBottomPanelProps) => (
+  <HvCanvasBottomPanel {...props} className={classes.root} tabs={tabs}>
     Content
-  </HvCanvasFloatingPanel>
+  </HvCanvasBottomPanel>
 );
diff --git a/packages/pentaho/src/Canvas/Canvas.mdx b/packages/pentaho/src/Canvas/Canvas.mdx
@@ -6,9 +6,8 @@ import { Meta } from "@storybook/addon-docs";
 
 This section showcases all the Pentaho+ canvas components. At the moment, the following components are available:
 
-- [Floating Panel](./?path=/docs/pentaho-canvas-floating-panel--docs)
-- [Panel](./?path=/docs/pentaho-canvas-panel--docs)
-- [Tabs and Tab](./?path=/docs/pentaho-canvas-tabs--docs)
+- [Bottom Panel](./?path=/docs/pentaho-canvas-bottom-panel--docs)
+- [Side Panel](./?path=/docs/pentaho-canvas-side-panel--docs)
 - [Toolbar](./?path=/docs/pentaho-canvas-toolbar--docs)
 
 As a disclaimer, it's important to note that all canvas components are a work in progress and there might be breaking changes.

diff --git a/packages/pentaho/src/Canvas/FloatingPanel/index.ts b/packages/pentaho/src/Canvas/FloatingPanel/index.ts