diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx index 2494df10..77c746b8 100644 --- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx +++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx @@ -38,6 +38,7 @@ To render an item, its recommended to use `MainMenu.Item`. | Prop | Type | Required | Default | Description | | --- | --- | :-: | :-: | --- | | `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. | +| `selected` | `boolean` | No | `false` | Whether item is active | | `children` | `React.ReactNode` | Yes | - | The content of the menu item | | `icon` | `JSX.Element` | No | - | The icon used in the menu item | | `shortcut` | `string` | No | - | The shortcut to be shown for the menu item | @@ -70,6 +71,7 @@ function App() { | Prop | Type | Required | Default | Description | | --- | --- | :-: | :-: | --- | | `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. | +| `selected` | `boolean` | No | `false` | Whether item is active | | `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. | | `children` | `React.ReactNode` | Yes | - | The content of the menu item | | `icon` | `JSX.Element` | No | - | The icon used in the menu item | diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx index e9483eac..47c8df46 100644 --- a/src/components/Actions.tsx +++ b/src/components/Actions.tsx @@ -318,6 +318,7 @@ export const ShapesSwitcher = ({ activeEmbeddable: null, }); }} + selected={activeTool.type === "frame"} /> ) : ( @@ -378,6 +380,7 @@ export const ShapesSwitcher = ({ icon={frameToolIcon} shortcut={KEYS.F.toLocaleUpperCase()} data-testid="toolbar-frame" + selected={activeTool.type === "frame"} > {t("toolBar.frame")} @@ -394,6 +397,7 @@ export const ShapesSwitcher = ({ }} icon={EmbedIcon} data-testid="toolbar-embeddable" + selected={activeTool.type === "embeddable"} > {t("toolBar.embeddable")} diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss index 6e628736..1df90fd4 100644 --- a/src/components/dropdownMenu/DropdownMenu.scss +++ b/src/components/dropdownMenu/DropdownMenu.scss @@ -59,6 +59,11 @@ height: 2.25rem; } + &--selected { + background: var(--color-primary-light); + --icon-fill-color: var(--color-primary-darker); + } + &__text { text-overflow: ellipsis; overflow: hidden; diff --git a/src/components/dropdownMenu/DropdownMenuItem.tsx b/src/components/dropdownMenu/DropdownMenuItem.tsx index 5532dbaa..93108a9f 100644 --- a/src/components/dropdownMenu/DropdownMenuItem.tsx +++ b/src/components/dropdownMenu/DropdownMenuItem.tsx @@ -11,12 +11,14 @@ const DropdownMenuItem = ({ children, shortcut, className, + selected, ...rest }: { icon?: JSX.Element; onSelect: (event: Event) => void; children: React.ReactNode; shortcut?: string; + selected?: boolean; className?: string; } & Omit, "onSelect">) => { const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect); @@ -26,7 +28,7 @@ const DropdownMenuItem = ({ {...rest} onClick={handleClick} type="button" - className={getDropdownMenuItemClassName(className)} + className={getDropdownMenuItemClassName(className, selected)} title={rest.title ?? rest["aria-label"]} > diff --git a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx index 323f3109..795c5c79 100644 --- a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx +++ b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx @@ -3,15 +3,19 @@ import React from "react"; const DropdownMenuItemCustom = ({ children, className = "", + selected, ...rest }: { children: React.ReactNode; className?: string; + selected?: boolean; } & React.HTMLAttributes) => { return (
{children}
diff --git a/src/components/dropdownMenu/DropdownMenuItemLink.tsx b/src/components/dropdownMenu/DropdownMenuItemLink.tsx index c93749ac..0dacaebf 100644 --- a/src/components/dropdownMenu/DropdownMenuItemLink.tsx +++ b/src/components/dropdownMenu/DropdownMenuItemLink.tsx @@ -12,6 +12,7 @@ const DropdownMenuItemLink = ({ children, onSelect, className = "", + selected, ...rest }: { href: string; @@ -19,6 +20,7 @@ const DropdownMenuItemLink = ({ children: React.ReactNode; shortcut?: string; className?: string; + selected?: boolean; onSelect?: (event: Event) => void; } & React.AnchorHTMLAttributes) => { const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect); @@ -29,7 +31,7 @@ const DropdownMenuItemLink = ({ href={href} target="_blank" rel="noreferrer" - className={getDropdownMenuItemClassName(className)} + className={getDropdownMenuItemClassName(className, selected)} title={rest.title ?? rest["aria-label"]} onClick={handleClick} > diff --git a/src/components/dropdownMenu/common.ts b/src/components/dropdownMenu/common.ts index 9b5e7bfe..c5958458 100644 --- a/src/components/dropdownMenu/common.ts +++ b/src/components/dropdownMenu/common.ts @@ -6,8 +6,13 @@ export const DropdownMenuContentPropsContext = React.createContext<{ onSelect?: (event: Event) => void; }>({}); -export const getDropdownMenuItemClassName = (className = "") => { - return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim(); +export const getDropdownMenuItemClassName = ( + className = "", + selected = false, +) => { + return `dropdown-menu-item dropdown-menu-item-base ${className} ${ + selected ? "dropdown-menu-item--selected" : "" + }`.trim(); }; export const useHandleDropdownMenuItemClick = ( diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index c3e8be9a..b852757d 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -11,6 +11,12 @@ The change should be grouped under one of the below section and must contain PR Please add the latest change on the top under the correct section. --> +## Unreleased + +### Features + +- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078) + ## 0.16.1 (2023-09-21) ## Excalidraw Library