diff --git a/package.json b/package.json index c1649ea..70fc3cf 100644 --- 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 index 6a754dc..4c2c42b 100644 --- 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 = ({ 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 = ({ 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 = ({ id, label }) => { } as Partial, }; + const BUTTON_TEXT = `Current ${id} colour is `; + return ( -