feat(controls): add orientation, style and class props closes #4069

packages/react/src/additional-components/Controls/Controls.tsx

@@ -34,6 +34,7 @@ function ControlsComponent({
   className,
   children,
   position = 'bottom-left',
+  orientation = 'vertical',
   'aria-label': ariaLabel = 'React Flow controls',
 }: ControlProps) {
   const store = useStoreApi();
@@ -65,9 +66,11 @@ function ControlsComponent({
     onInteractiveChange?.(!isInteractive);
   };
 
+  const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
+
   return (
     <Panel
-      className={cc(['react-flow__controls', className])}
+      className={cc(['react-flow__controls', orientationClass, className])}
       position={position}
       style={style}
       data-testid="rf__controls"

packages/react/src/additional-components/Controls/types.ts

@@ -31,6 +31,7 @@ export type ControlProps = {
   /** ClassName applied to container */
   className?: string;
   'aria-label'?: string;
+  orientation?: 'horizontal' | 'vertical';
 };
 
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;