style: improve controls

packages/ladle/generate-icons.js

@@ -32,6 +32,7 @@ async function main() {
         .replace(/stroke-linejoin/g, "strokeLinejoin")
         .replace(/clip-path/g, "clipPath")
         .replace(/fill-opacity/g, "fillOpacity")
+        .replace(/<svg(\s+(width|height)="\w+")+/g, "<svg ")
         .replace(">", "{...props}>")
         .replace(/black/g, "currentcolor");
 

packages/ladle/lib/app/src/addon-panel.tsx

@@ -6,7 +6,6 @@ import { Button as ModeButton } from "./addons/mode";
 import { Button as RtlButton } from "./addons/rtl";
 import { Button as LadleButton } from "./addons/ladle";
 import config from "./get-config";
-import { ChevronRight, Circle } from "./icons";
 import { StoryName } from "./addons/story-name";
 
 type AddonNames = keyof Config["addons"];

packages/ladle/lib/app/src/addons/control.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Controls } from "../icons";
+import { Controls, Refresh } from "../icons";
 import { Modal } from "../ui";
 import queryString from "query-string";
 import type { AddonProps } from "../../../shared/types";
@@ -10,6 +10,7 @@ import {
   GlobalAction,
   ControlState,
 } from "../../../shared/types";
+import { isAnyControlValuePreSet } from "../utils/controls";
 
 const getInputType = (type?: ControlType) => {
   switch (type) {
@@ -116,12 +117,13 @@ const Control: React.FC<{
         <td>{controlKey}</td>
         <td>
           {(globalState.control[controlKey].options || []).map((option) => (
-            <span key={option}>
+            <span key={option} className="ladle-control-radio-option">
               <input
                 id={`${controlKey}-${option}`}
                 type="radio"
                 name={controlKey}
                 value={option}
+                className="ladle-input"
                 onChange={(e) => {
                   dispatch({
                     type: ActionType.UpdateControl,
@@ -249,23 +251,67 @@ const Control: React.FC<{
 };
 
 export const Button: React.FC<AddonProps> = ({ globalState, dispatch }) => {
-  const [open, setOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = React.useState(isAnyControlValuePreSet());
+  const [isDirty, setIsDirty] = React.useState(isAnyControlValuePreSet());
   const text = "Explore different versions of this story through controls.";
+  const handleResetToDefaults = () => {
+    setIsDirty(false);
+    const controls: ControlState = {};
+    Object.keys(globalState.control).forEach((control) => {
+      controls[control] = {
+        ...globalState.control[control],
+        value: globalState.control[control].defaultValue,
+      };
+    });
+    dispatch({
+      type: ActionType.UpdateControl,
+      value: controls,
+    });
+  };
+
+  const controlledDispatch = React.useCallback(
+    (...args: Parameters<React.Dispatch<GlobalAction>>) => {
+      if (args[0].type === ActionType.UpdateControl) {
+        setIsDirty(true);
+      }
+
+      dispatch(...args);
+    },
+    [dispatch],
+  );
+
   return (
     <li>
       <button
         aria-label={text}
         title={text}
-        onClick={() => setOpen(true)}
-        className={open ? "ladle-active" : ""}
+        onClick={() => setIsOpen(true)}
+        data-active={isOpen || undefined}
         data-testid="addon-control"
       >
         <Controls />
-        <span className="ladle-addon-tooltip">{text}</span>
-        <label>Story Controls</label>
         <Modal
-          isOpen={open}
-          close={() => setOpen(false)}
+          title={
+            <>
+              <Controls />
+              Controls
+            </>
+          }
+          nav={
+            isDirty && (
+              <>
+                <button
+                  className="ladle-control-reset"
+                  onClick={handleResetToDefaults}
+                >
+                  <Refresh />
+                  Reset to defaults
+                </button>
+              </>
+            )
+          }
+          isOpen={isOpen}
+          close={() => setIsOpen(false)}
           label="Toggle different controls to update the story."
         >
           <table className="ladle-controls-table">
@@ -277,30 +323,13 @@ export const Button: React.FC<AddonProps> = ({ globalState, dispatch }) => {
                     <Control
                       key={controlKey}
                       globalState={globalState}
-                      dispatch={dispatch}
+                      dispatch={controlledDispatch}
                       controlKey={controlKey}
                     />
                   );
                 })}
             </tbody>
           </table>
-          <button
-            onClick={() => {
-              const controls: ControlState = {};
-              Object.keys(globalState.control).forEach((control) => {
-                controls[control] = {
-                  ...globalState.control[control],
-                  value: globalState.control[control].defaultValue,
-                };
-              });
-              dispatch({
-                type: ActionType.UpdateControl,
-                value: controls,
-              });
-            }}
-          >
-            Reset to defaults
-          </button>
         </Modal>
       </button>
     </li>

packages/ladle/lib/app/src/addons/ladle.tsx

@@ -1,54 +1,63 @@
+import Tooltip from "@reach/tooltip";
 import * as React from "react";
 import { Ladle } from "../icons";
 import { Modal, Code } from "../ui";
 
 export const Button: React.FC<{}> = () => {
-  const [open, setOpen] = React.useState(false);
-  const text = "Get more information about Ladle.";
+  const [isOpen, setIsOpen] = React.useState(false);
+  const handleButtonClick = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
   return (
     <li>
-      <button
-        aria-label={text}
-        title={text}
-        onClick={() => setOpen(true)}
-        className={open ? "ladle-active" : ""}
-      >
-        <Ladle />
-        <span className="ladle-addon-tooltip">{text}</span>
-        <label>About Ladle</label>
-        <Modal
-          isOpen={open}
-          close={() => setOpen(false)}
-          label="Dialog with information about Ladle."
+      <Tooltip label="Get more information about Ladle">
+        <button
+          type="button"
+          onClick={handleButtonClick}
+          data-active={isOpen || undefined}
         >
-          <p>
-            Ladle is a modern and very fast playground for React components
-            powered by Vite. For more information:
+          <Ladle />
+          <Modal
+            title={
+              <>
+                <Ladle />
+                About Ladle
+              </>
+            }
+            isOpen={isOpen}
+            close={() => setIsOpen(false)}
+            label="Dialog with information about Ladle."
+          >
+            <p>
+              Ladle is a modern and very fast playground for React components
+              powered by Vite. For more information:
+              <ul>
+                <li>
+                  <a href="https://www.ladle.dev/">Ladle.dev</a>
+                </li>
+                <li>
+                  <a href="https://github.com/tajo/ladle">GitHub</a>
+                </li>
+                <li>
+                  <a href="https://node.new/ladle">StackBlitz</a>
+                </li>
+                <li>
+                  <a href="https://discord.gg/H6FSHjyW7e">Discord</a>
+                </li>
+              </ul>
+            </p>
+            <p>
+              <strong>Shortcuts</strong>
+            </p>
             <ul>
               <li>
-                <a href="https://www.ladle.dev/">Ladle.dev</a>
-              </li>
-              <li>
-                <a href="https://github.com/tajo/ladle">GitHub</a>
-              </li>
-              <li>
-                <a href="https://node.new/ladle">StackBlitz</a>
-              </li>
-              <li>
-                <a href="https://discord.gg/H6FSHjyW7e">Discord</a>
+                <Code>/</Code> or <Code>cmd+p</Code> - search stories
               </li>
             </ul>
-          </p>
-          <p>
-            <strong>Shortcuts</strong>
-          </p>
-          <ul>
-            <li>
-              <Code>/</Code> or <Code>cmd+p</Code> - search stories
-            </li>
-          </ul>
-        </Modal>
-      </button>
+          </Modal>
+        </button>
+      </Tooltip>
     </li>
   );
 };

packages/ladle/lib/app/src/addons/mode.tsx

@@ -3,6 +3,7 @@ import queryString from "query-string";
 import { Maximize } from "../icons";
 import { ModeState, AddonProps, ActionType } from "../../../shared/types";
 import config from "../get-config";
+import Tooltip from "@reach/tooltip";
 
 export const getQuery = (locationSearch: string) => {
   const mode = queryString.parse(locationSearch).mode as string;
@@ -17,21 +18,21 @@ export const getQuery = (locationSearch: string) => {
 };
 
 export const Button: React.FC<AddonProps> = ({ dispatch }) => {
-  const text =
+  const label =
     "Open fullscreen mode. It removes all other styles and wrappers.";
   return (
     <li>
-      <button
-        aria-label={text}
-        title={text}
-        onClick={() =>
-          dispatch({ type: ActionType.UpdateMode, value: ModeState.Preview })
-        }
-      >
-        <Maximize />
-        <span className="ladle-addon-tooltip">{text}</span>
-        <label>Open fullscreen mode</label>
-      </button>
+      <Tooltip label={label}>
+        <button
+          aria-label={label}
+          type="button"
+          onClick={() =>
+            dispatch({ type: ActionType.UpdateMode, value: ModeState.Preview })
+          }
+        >
+          <Maximize />
+        </button>
+      </Tooltip>
     </li>
   );
 };

packages/ladle/lib/app/src/addons/rtl.tsx

@@ -3,6 +3,7 @@ import queryString from "query-string";
 import { Rtl } from "../icons";
 import { AddonProps, ActionType } from "../../../shared/types";
 import config from "../get-config";
+import Tooltip from "@reach/tooltip";
 
 export const getQuery = (locationSearch: string) => {
   const urlVal = queryString.parse(locationSearch).rtl;
@@ -14,22 +15,19 @@ export const getQuery = (locationSearch: string) => {
 export const Button: React.FC<AddonProps> = ({ dispatch, globalState }) => {
   const rtlText = "Switch text direction to right to left.";
   const ltrText = "Switch text direction to left to right.";
+  const label = globalState.rtl ? ltrText : rtlText;
   return (
     <li>
-      <button
-        aria-label={globalState.rtl ? ltrText : rtlText}
-        title={globalState.rtl ? ltrText : rtlText}
-        className={globalState.rtl ? "ladle-active" : ""}
-        onClick={() =>
-          dispatch({ type: ActionType.UpdateRtl, value: !globalState.rtl })
-        }
-      >
-        <Rtl />
-        <span className="ladle-addon-tooltip">
-          {globalState.rtl ? ltrText : rtlText}
-        </span>
-        <label>Right to left</label>
-      </button>
+      <Tooltip label={label}>
+        <button
+          aria-label={label}
+          onClick={() =>
+            dispatch({ type: ActionType.UpdateRtl, value: !globalState.rtl })
+          }
+        >
+          <Rtl />
+        </button>
+      </Tooltip>
     </li>
   );
 };