fix: Added option to disable cursor/hover in css (#13826)

Co-authored-by: JamalAlabdullah <[email protected]>
Altinn · Oct 22, 2024 · 420a7d8 · 420a7d8
1 parent 72389f8
commit 420a7d8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/...dioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.test.tsx b/...dioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.test.tsx
@@ -5,14 +5,14 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { StudioResizableLayoutElement } from '../StudioResizableLayoutElement/StudioResizableLayoutElement';
 
 describe('StudioResizableLayoutContainer', () => {
-  it('should render just one handle with two elements', () => {
+  it('should render two handles with three elements', () => {
     renderStudioResizableLayoutContainer();
-    expect(screen.getAllByRole('separator').length).toBe(1);
+    expect(screen.getAllByRole('separator').length).toBe(2);
   });
 
   it('should resize containers', () => {
     renderStudioResizableLayoutContainer();
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 200 });
 
@@ -23,7 +23,7 @@ describe('StudioResizableLayoutContainer', () => {
   it('should not resize containers below minimum size', () => {
     // minimum flexgrow should be minimumSize/containerSize=0.25
     renderStudioResizableLayoutContainer();
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 0 });
     expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('0.25');
@@ -36,12 +36,29 @@ describe('StudioResizableLayoutContainer', () => {
 
   it('should not resize containers above maximum size', () => {
     renderStudioResizableLayoutContainer(600);
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 800 });
     expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('1.5');
     expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('0.5');
   });
+
+  it('should render StudioResizableLayoutHandle with base CSS classes', () => {
+    renderStudioResizableLayoutContainer();
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[1]).toHaveClass('resizeHandle');
+  });
+
+  it('should render StudioResizableLayoutHandle with multiple CSS classes', () => {
+    renderStudioResizableLayoutContainer();
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandleH');
+    expect(screen.getAllByRole('separator')[0]).not.toHaveClass('hideLeftSide');
+
+    expect(screen.getAllByRole('separator')[1]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[1]).not.toHaveClass('resizeHandleH');
+    expect(screen.getAllByRole('separator')[1]).not.toHaveClass('hideLeftSide');
+  });
 });
 
 const dragHandle = (
@@ -73,6 +90,7 @@ const renderStudioResizableLayoutContainer = (
         maximumSize={maximumSize}
         collapsed={collapsed}
         collapsedSize={400}
+        hasNeighbour={true}
       >
         <div>test1</div>
       </StudioResizableLayoutElement>
@@ -81,8 +99,18 @@ const renderStudioResizableLayoutContainer = (
         maximumSize={maximumSize}
         collapsed={collapsed}
         collapsedSize={400}
+        hasNeighbour={true}
+        disableRightHandle={true}
       >
-        <div>test1</div>
+        <div>test2</div>
+      </StudioResizableLayoutElement>
+      <StudioResizableLayoutElement
+        minimumSize={100}
+        maximumSize={maximumSize}
+        collapsed={collapsed}
+        collapsedSize={400}
+      >
+        <div>test3</div>
       </StudioResizableLayoutElement>
     </StudioResizableLayoutContainer>,
   );

diff --git a/...nents/StudioResizableLayout/StudioResizableLayoutElement/StudioResizableLayoutElement.tsx b/...nents/StudioResizableLayout/StudioResizableLayoutElement/StudioResizableLayoutElement.tsx
@@ -12,6 +12,7 @@ export type StudioResizableLayoutElementProps = {
   style?: React.CSSProperties;
 
   onResizing?: (resizing: boolean) => void;
+  disableRightHandle?: boolean;
 
   //** supplied from container **//
   resize?: (size: number) => void;
@@ -24,15 +25,16 @@ export type StudioResizableLayoutElementProps = {
 const StudioResizableLayoutElement = forwardRef<HTMLDivElement, StudioResizableLayoutElementProps>(
   (
     {
-      index,
       minimumSize = 0,
       maximumSize,
       collapsedSize,
       collapsed,
-      children,
-      hasNeighbour = false,
       style,
+      disableRightHandle,
+      index,
       onResizing,
+      hasNeighbour = false,
+      children,
     }: StudioResizableLayoutElementProps,
     ref,
   ): ReactElement => {
@@ -58,6 +60,7 @@ const StudioResizableLayoutElement = forwardRef<HTMLDivElement, StudioResizableL
             orientation={orientation}
             index={index}
             onResizing={onResizing}
+            disableRightHandle={disableRightHandle}
           />
         )}
       </>

diff --git a/...ponents/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx b/...ponents/StudioResizableLayout/StudioResizableLayoutHandle/StudioResizableLayoutHandle.tsx
@@ -10,12 +10,14 @@ export type StudioResizableLayoutHandleProps = {
   orientation: StudioResizableOrientation;
   index: number;
   onResizing?: (resizing: boolean) => void;
+  disableRightHandle?: boolean;
 };
 
 export const StudioResizableLayoutHandle = ({
   orientation,
   index,
   onResizing,
+  disableRightHandle,
 }: StudioResizableLayoutHandleProps): ReactElement => {
   const { resizeDelta, containerSize } = useStudioResizableLayoutContext(index);
   const { onMouseDown, isResizing } = useStudioResizableLayoutMouseMovement(
@@ -30,6 +32,17 @@ export const StudioResizableLayoutHandle = ({
     onResizing?.(isResizing);
   }, [isResizing, onResizing]);
 
+  if (disableRightHandle) {
+    return (
+      <div
+        role='separator'
+        tabIndex={0}
+        className={`${classes.resizeHandle}
+                  ${containerSize < 0.05 ? classes.hideLeftSide : ''}`}
+      ></div>
+    );
+  }
+
   return (
     <div
       role='separator'

diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
@@ -164,6 +164,7 @@ export const FormDesigner = (): JSX.Element => {
                 collapsedSize={50}
                 minimumSize={300}
                 maximumSize={300}
+                disableRightHandle={true}
               >
                 <Elements
                   collapsed={elementsCollapsed}