Skip to content

[ButtonMenu]: **BREAKING** Fix min-width variable and close via click outside #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[ButtonMenu]: **BREAKING** Fix min-width variable and close via click outside #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8b668f
[ButtonMenu]: Fix user provided width
fallaciousreasoning Aug 12, 2024
5af67cb
[ButtonMenu]: Fix close handler
fallaciousreasoning Aug 12, 2024
1bbc724
Changes for PR
fallaciousreasoning Aug 14, 2024
1a50ff2
Changes for PR
fallaciousreasoning Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/buttonMenu/buttonMenu.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,16 @@
title="Components/ButtonMenu"
component={ButtonMenu}
argTypes={{
'--leo-menu-control-width': {
description: '(readonly): Computed width of menu control'
'--leo-menu-control-min-width': {
control: 'text',
description: 'The user provided min width for the menu. The menu may be wider than this value depending on its contents'
},
'--leo-menu-target-width': {
description: '(readonly): Computed width of menu control',
},
'--leo-menu-max-height': {
description: 'user controlled max height'
description: 'user controlled max height',
control: 'text'
}
}}
/>
Expand Down
10 changes: 8 additions & 2 deletions src/components/buttonMenu/buttonMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</script>

<script lang="ts">
import Menu, { type CloseEvent } from '../menu/menu.svelte'
import Menu, { type CloseEvent, type CloseEventDetail } from '../menu/menu.svelte'
import type { Strategy } from '@floating-ui/dom'

export let isOpen: boolean | undefined = undefined
Expand All @@ -31,6 +31,12 @@
if (isOpen === undefined) isOpenInternal = toggleTo
onChange?.({ isOpen: toggleTo })
}

const handleClose = (e: CloseEventDetail) => {
if (isOpen === undefined) isOpenInternal = false
onClose?.(e)
onChange?.({ isOpen: false })
}
</script>

<div class="leo-button-menu">
Expand All @@ -42,7 +48,7 @@
<div bind:this={anchor} on:click|stopPropagation={toggle}>
<slot name="anchor-content"/>
</div>
<Menu {positionStrategy} isOpen={isOpenInternal} target={anchor} {onClose}>
<Menu {positionStrategy} isOpen={isOpenInternal} target={anchor} onClose={handleClose}>
<slot />
</Menu>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/menu/menu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@
id="menu"
role="menu"
tabindex="-1"
style:--leo-menu-control-width={`${minWidth}px`}
style:--leo-menu-target-width={`${minWidth}px`}
bind:this={popup}
on:keypress={(e) => {
if (e.code !== 'Enter' && e.code !== 'Space') return
Expand Down Expand Up @@ -223,6 +223,8 @@
}

.leo-menu .leo-menu-popup {
--min-width: var(--leo-menu-control-min-width, var(--leo-menu-target-width));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

brave rewards codebase uses the previous name so we will need to change it to this when updating nala

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to know!


background: var(--leo-color-container-background);
box-shadow: var(--leo-effect-elevation-03);

Expand All @@ -233,7 +235,7 @@
overflow: auto;
border: 1px solid var(--leo-color-divider-subtle);
border-radius: var(--leo-radius-m);
min-width: var(--leo-menu-control-width);
min-width: var(--min-width);
display: flex;
flex-direction: column;
}
Expand Down