feat: sidebar tabs support (#6213)

* feat: Sidebar tabs support [wip]

* tab trigger styling tweaks

* add `:hover` & `:active` states

* replace `@dwelle/tunnel-rat` with `tunnel-rat`

* make stuff more explicit

- remove `Sidebar.Header` fallback (host apps need to render manually), and stop tunneling it (render in place)
- make `docked` state explicit
- stop tunneling `Sidebar.TabTriggers` (render in place)

* redesign sidebar / library as per latest spec

* support no label on `Sidebar.Trigger`

* add Sidebar `props.onStateChange`

* style fixes

* make `appState.isSidebarDocked` into a soft user preference

* px -> rem & refactor

* remove `props.renderSidebar`

* update tests

* remove

* refactor

* rename constants

* tab triggers styling fixes

* factor out library-related logic from generic sidebar trigger

* change `props.onClose` to `onToggle`

* rename `props.value` -> `props.tab`

* add displayNames

* allow HTMLAttributes on applicable compos

* fix example App

* more styling tweaks and fixes

* fix not setting `dockable`

* more style fixes

* fix and align sidebar header button styling

* make DefaultSidebar dockable on if host apps supplies `onDock`

* stop `Sidebar.Trigger` hiding label on mobile

this should be only the default sidebar trigger behavior, and for that we don't need to use `device` hook as we handle in CSS

* fix `dockable` prop of defaultSidebar

* remove extra `typescript` dep

* remove `defaultTab` prop

in favor of explicit `tab` value in `<Sidebar.Trigger/>` and `toggleSidebar()`, to reduce API surface area and solve inconsistency of `appState.openSidebar.tab` not reflecting actual UI value if `defaultTab` was supported (without additional syncing logic which feels like the wrong solution).

* remove `onToggle` in favor of `onStateChange`

reducing API surface area

* fix restore

* comment no longer applies

* reuse `Button` component in sidebar buttons

* fix tests

* split Sidebar sub-components into files

* remove `props.dockable` in favor of `props.onDock` only

* split tests

* fix sidebar showing dock button if no `props.docked` supplied & add more tests

* reorder and group sidebar tests

* clarify

* rename classes & dedupe css

* refactor tests

* update changelog

* update changelog

---------

Co-authored-by: barnabasmolnar <barnabas@excalidraw.com>

src/components/Sidebar/SidebarHeader.tsx

@@ -4,86 +4,54 @@ import { t } from "../../i18n";
 import { useDevice } from "../App";
 import { SidebarPropsContext } from "./common";
 import { CloseIcon, PinIcon } from "../icons";
-import { withUpstreamOverride } from "../hoc/withUpstreamOverride";
 import { Tooltip } from "../Tooltip";
+import { Button } from "../Button";
 
-export const SidebarDockButton = (props: {
-  checked: boolean;
-  onChange?(): void;
-}) => {
-  return (
-    <div className="layer-ui__sidebar-dock-button" data-testid="sidebar-dock">
-      <Tooltip label={t("labels.sidebarLock")}>
-        <label
-          className={clsx(
-            "ToolIcon ToolIcon__lock ToolIcon_type_floating",
-            `ToolIcon_size_medium`,
-          )}
-        >
-          <input
-            className="ToolIcon_type_checkbox"
-            type="checkbox"
-            onChange={props.onChange}
-            checked={props.checked}
-            aria-label={t("labels.sidebarLock")}
-          />{" "}
-          <div
-            className={clsx("Sidebar__pin-btn", {
-              "Sidebar__pin-btn--pinned": props.checked,
-            })}
-            tabIndex={0}
-          >
-            {PinIcon}
-          </div>{" "}
-        </label>{" "}
-      </Tooltip>
-    </div>
-  );
-};
-
-const _SidebarHeader: React.FC<{
+export const SidebarHeader = ({
+  children,
+  className,
+}: {
   children?: React.ReactNode;
   className?: string;
-}> = ({ children, className }) => {
+}) => {
   const device = useDevice();
   const props = useContext(SidebarPropsContext);
 
-  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable);
-  const renderCloseButton = !!props.onClose;
+  const renderDockButton = !!(
+    device.canDeviceFitSidebar && props.shouldRenderDockButton
+  );
 
   return (
     <div
-      className={clsx("layer-ui__sidebar__header", className)}
+      className={clsx("sidebar__header", className)}
       data-testid="sidebar-header"
     >
       {children}
-      {(renderDockButton || renderCloseButton) && (
-        <div className="layer-ui__sidebar__header__buttons">
-          {renderDockButton && (
-            <SidebarDockButton
-              checked={!!props.docked}
-              onChange={() => {
-                props.onDock?.(!props.docked);
-              }}
-            />
-          )}
-          {renderCloseButton && (
-            <button
-              data-testid="sidebar-close"
-              className="Sidebar__close-btn"
-              onClick={props.onClose}
-              aria-label={t("buttons.close")}
+      <div className="sidebar__header__buttons">
+        {renderDockButton && (
+          <Tooltip label={t("labels.sidebarLock")}>
+            <Button
+              onSelect={() => props.onDock?.(!props.docked)}
+              selected={!!props.docked}
+              className="sidebar__dock"
+              data-testid="sidebar-dock"
+              aria-label={t("labels.sidebarLock")}
             >
-              {CloseIcon}
-            </button>
-          )}
-        </div>
-      )}
+              {PinIcon}
+            </Button>
+          </Tooltip>
+        )}
+        <Button
+          data-testid="sidebar-close"
+          className="sidebar__close"
+          onSelect={props.onCloseRequest}
+          aria-label={t("buttons.close")}
+        >
+          {CloseIcon}
+        </Button>
+      </div>
     </div>
   );
 };
 
-const [Context, Component] = withUpstreamOverride(_SidebarHeader);
-
-/** @private */
-export const SidebarHeaderComponents = { Context, Component };
+SidebarHeader.displayName = "SidebarHeader";