feat: color picker (WIP)

JoaoTMDias · Jun 16, 2024 · 581acbe · 581acbe
1 parent 13046c6
commit 581acbe
Show file tree

Hide file tree

Showing 4 changed files with 778 additions and 663 deletions.
diff --git a/package.json b/package.json
@@ -13,32 +13,32 @@
     "test:run": "playwright test"
   },
   "dependencies": {
-    "@fluentui/react": "^8.115.7",
-    "@tauri-apps/api": "^1.5.3",
-    "clsx": "^2.1.0",
+    "@fluentui/react": "^8.118.8",
+    "@tauri-apps/api": "^1.5.6",
+    "clsx": "^2.1.1",
     "coffee-colors": "^1.0.1",
     "get-contrast": "^3.0.0",
     "history": "^5.3.0",
     "polished": "^4.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "react-use": "^17.5.0",
     "use-eye-dropper": "^1.6.1"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.5",
-    "@playwright/test": "^1.42.1",
-    "@tauri-apps/cli": "^1.5.11",
-    "@types/node": "^20.11.28",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@axe-core/playwright": "^4.9.1",
+    "@playwright/test": "^1.44.1",
+    "@tauri-apps/cli": "^1.5.14",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "cross-env": "^7.0.3",
-    "rimraf": "^5.0.5",
-    "sass": "^1.72.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "rimraf": "^5.0.7",
+    "sass": "^1.77.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1",
     "wait-on": "^7.2.0"
   }
 }
diff --git a/src/renderer/components/picker-form/colour/index.tsx b/src/renderer/components/picker-form/colour/index.tsx
@@ -1,4 +1,4 @@
-import { TooltipDelay } from "@fluentui/react";
+import { Callout, Link, Text, TooltipDelay } from "@fluentui/react";
 import { useId } from "@fluentui/react-hooks";
 import {
   Dropdown,
@@ -12,6 +12,7 @@ import { usePickerState } from "../../../containers/picker-state";
 import { Tooltip } from "../../common";
 import Preview from "./preview";
 import styles from "./styles.module.scss";
+import { useBoolean } from "react-use";
 
 const options: IDropdownOption[] = [
   { key: "hex", text: "Hex" },
@@ -25,8 +26,11 @@ interface Props {
 }
 
 const Colour: FC<Props> = ({ id, label }) => {
+  const [isCalloutVisible, toggleIsCalloutVisible] = useBoolean(false);
   const [state, dispatch] = usePickerState();
-  const textFieldId = useId(id);
+  const TEXTFIELD_ID = useId(id);
+  const GENERATED_ID = useId();
+  const BUTTON_ID = `${GENERATED_ID}--${id}`;
 
   const handleOnPickColor = useCallback(
     (newColour: string) => {
@@ -76,7 +80,7 @@ const Colour: FC<Props> = ({ id, label }) => {
     [dispatch, id]
   );
 
-  const pickedColour = state.values[id];
+  const { value } = state.values[id];
   const tooltipProps = {
     id: `a05383f4-3cc3-4788-9ca5-9340c754818d-${id}`,
     description: `Choose a new ${label.toLowerCase()} colour`,
@@ -99,25 +103,49 @@ const Colour: FC<Props> = ({ id, label }) => {
     } as Partial<IDropdownStyles>,
   };
 
+  const BUTTON_TEXT = `Current ${id} colour is `;
+
   return (
-    <Label className={styles.label} htmlFor={textFieldId}>
+    <Label className={styles.label} htmlFor={BUTTON_ID}>
       {label}
       <div className={styles.container}>
-        <span className={styles.data}>
-          <Tooltip
-            id={tooltipProps.id}
-            description={tooltipProps.description}
-            delay={TooltipDelay.long}
-          >
-            <Preview type={id} onSelect={handleOnPickColor} />
-          </Tooltip>
-          <TextField
-            id={textFieldId}
-            value={pickedColour.value}
-            className={styles.valueInput}
-            onChange={handleOnChangeColourOnInput}
-          />
-        </span>
+        <div className={styles.data}>
+          <button type="button" id={BUTTON_ID} onClick={toggleIsCalloutVisible}>
+            <span className="sr-only">{BUTTON_TEXT}</span>
+            {value}
+          </button>
+          {isCalloutVisible ? (
+            <Callout
+              className={styles.callout}
+              role="dialog"
+              gapSpace={8}
+              target={`#${BUTTON_ID}`}
+              onDismiss={toggleIsCalloutVisible}
+              setInitialFocus
+            >
+              <Text as="h1" block variant="xLarge" className={styles.title}>
+                Callout title here
+              </Text>
+              <Text block variant="small">
+                Message body is optional. If help documentation is available,
+                consider adding a link to learn more at the bottom.
+              </Text>
+              <Tooltip
+                id={tooltipProps.id}
+                description={tooltipProps.description}
+                delay={TooltipDelay.long}
+              >
+                <Preview type={id} onSelect={handleOnPickColor} />
+              </Tooltip>
+              <TextField
+                id={TEXTFIELD_ID}
+                value={value}
+                className={styles.valueInput}
+                onChange={handleOnChangeColourOnInput}
+              />
+            </Callout>
+          ) : null}
+        </div>
         <Tooltip
           id={dropdownProps.id}
           description={dropdownProps.description}

diff --git a/src/renderer/components/picker-form/colour/styles.module.scss b/src/renderer/components/picker-form/colour/styles.module.scss
@@ -153,3 +153,14 @@
     outline-color: currentColor;
   }
 }
+
+.callout {
+  padding: 2rem;
+
+  [role="dialog"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 1rem;
+  }
+}