Refactor: CSS handling (#2344)

* refactor(css): only load base styles, add css task, cleanup exports
* style(base): add edge label bg
* refactor(css): use css-utils
* feat(core): add Panel component
* refactor(background): cleanup
* refactor(css-handling): cleanup

packages/controls/src/ControlButton.tsx

@@ -0,0 +1,22 @@
+import React, { FC, PropsWithChildren } from 'react';
+import cc from 'classcat';
+
+import { ControlButtonProps } from './types';
+
+const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <button
+    type="button"
+    className={cc(['react-flow__controls-button', className])}
+    {...rest}
+  >
+    {children}
+  </button>
+);
+
+ControlButton.displayName = 'ControlButton';
+
+export default ControlButton;

packages/controls/src/Controls.tsx

@@ -5,31 +5,21 @@ import {
   useStoreApi,
   useReactFlow,
   ReactFlowState,
+  Panel,
 } from '@react-flow/core';
+import { injectStyle } from '@react-flow/css-utils';
 
 import PlusIcon from './Icons/Plus';
 import MinusIcon from './Icons/Minus';
 import FitviewIcon from './Icons/FitView';
 import LockIcon from './Icons/Lock';
 import UnlockIcon from './Icons/Unlock';
+import ControlButton from './ControlButton';
+import baseStyle from './style';
 
-import { ControlProps, ControlButtonProps } from './types';
+import { ControlProps } from './types';
 
-import './style.css';
-
-export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({
-  children,
-  className,
-  ...rest
-}) => (
-  <button
-    type='button'
-    className={cc(['react-flow__controls-button', className])}
-    {...rest}
-  >
-    {children}
-  </button>
-);
+injectStyle(baseStyle);
 
 const isInteractiveSelector = (s: ReactFlowState) =>
   s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
@@ -46,6 +36,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   onInteractiveChange,
   className,
   children,
+  position = 'bottom-left',
 }) => {
   const store = useStoreApi();
   const [isVisible, setIsVisible] = useState<boolean>(false);
@@ -86,22 +77,26 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
   };
 
   return (
-    <div className={cc(['react-flow__controls', className])} style={style}>
+    <Panel
+      className={cc(['react-flow__controls', className])}
+      position={position}
+      style={style}
+    >
       {showZoom && (
         <>
           <ControlButton
             onClick={onZoomInHandler}
-            className='react-flow__controls-zoomin'
-            title='zoom in'
-            aria-label='zoom in'
+            className="react-flow__controls-zoomin"
+            title="zoom in"
+            aria-label="zoom in"
           >
             <PlusIcon />
           </ControlButton>
           <ControlButton
             onClick={onZoomOutHandler}
-            className='react-flow__controls-zoomout'
-            title='zoom out'
-            aria-label='zoom out'
+            className="react-flow__controls-zoomout"
+            title="zoom out"
+            aria-label="zoom out"
           >
             <MinusIcon />
           </ControlButton>
@@ -109,26 +104,26 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
       )}
       {showFitView && (
         <ControlButton
-          className='react-flow__controls-fitview'
+          className="react-flow__controls-fitview"
           onClick={onFitViewHandler}
-          title='fit view'
-          aria-label='fit view'
+          title="fit view"
+          aria-label="fit view"
         >
           <FitviewIcon />
         </ControlButton>
       )}
       {showInteractive && (
         <ControlButton
-          className='react-flow__controls-interactive'
+          className="react-flow__controls-interactive"
           onClick={onToggleInteractivity}
-          title='toggle interactivity'
-          aria-label='toggle interactivity'
+          title="toggle interactivity"
+          aria-label="toggle interactivity"
         >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
         </ControlButton>
       )}
       {children}
-    </div>
+    </Panel>
   );
 };
 

packages/controls/src/index.tsx

@@ -1,3 +1,3 @@
-export { default as default } from './Controls';
+export { default as Controls } from './Controls';
+export { default as ControlButton } from './ControlButton';
 export * from './types';
-export * from './Controls';

packages/controls/src/style.css

@@ -1,32 +0,0 @@
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-  position: absolute;
-  z-index: 5;
-  bottom: 20px;
-  left: 15px;
-
-  &-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}

packages/controls/src/style.ts

@@ -0,0 +1,31 @@
+const style = `
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.react-flow__controls-button {
+  border: none;
+  background: #fefefe;
+  border-bottom: 1px solid #eee;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  user-select: none;
+  padding: 5px;
+}
+
+.react-flow__controls-button svg {
+  width: 100%;
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.react-flow__controls-button:hover {
+  background: #f4f4f4;
+}`;
+
+export default style;

packages/controls/src/types.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
-import { FitViewOptions } from '@react-flow/core';
+import { FitViewOptions, PanelPosition } from '@react-flow/core';
 
 export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
@@ -10,6 +10,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   onZoomOut?: () => void;
   onFitView?: () => void;
   onInteractiveChange?: (interactiveStatus: boolean) => void;
+  position?: PanelPosition;
 }
 
 export interface ControlButtonProps