Menu button

[viridia]

Objective

Dropdown menus and menu buttons for feathers.

Part of #19236

Solution

This implements a feathers widget for dropdown menus, including:

• Keyboard navigation (Enter, Space, Arrow Keys, Escape)
• Tab focus
• Accessibility
• Click outside to cancel
• Items highlight on hover and press

Testing

Manual testing

Showcase

[github-actions]

It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note.

Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes.

[ickshonpe]

I didn't have time to go through every system line-by-line, but the example works well and all the parts I looked at in detail made sense.

[ickshonpe]

Suggested change

	q_menu_button: Query<Has<InteractionDisabled>, With<MenuButton>>,
	q_menu_button: Query<(), (With<MenuButton>, Without<InteractionDisabled>)>

[viridia]

Good idea, but I fixed it a different way - I remembered that even when disabled, the button should consume the key events (otherwise you'd get very unpredictable behavior).

[ickshonpe]

It is really annoying having the two functions, maybe it's acceptable to box it for the nicer API we intend to support eventually anyway?

Suggested change

	/// Menu button scene function. This produces a button that has a dropdown arrow.
	///
	/// # Arguments
	/// * `props` - construction properties for the button.
	pub fn menu_button(props: MenuButtonProps) -> impl Scene {
	bsn! {
	:button(ButtonProps {
	variant: ButtonVariant::Normal,
	corners: props.corners,
	})
	ActivateOnPress
	MenuButton
	FeathersMenuButton
	Children [
	{props.label},
	Node {
	flex_grow: 1.0,
	},
	:icon(icons::CHEVRON_DOWN),
	]
	}
	}
	/// Menu button scene function. This version does not insert a dropdown arrow, the caller is
	/// expected to supply this themselves.
	///
	/// # Arguments
	/// * `props` - construction properties for the button.
	// TODO: This would be better done by a boolean flag in the props, but that would require
	// conditional children.
	pub fn menu_button_without_arrow(props: MenuButtonProps) -> impl Scene {
	/// Menu button scene function.
	///
	/// # Arguments
	/// * `props` - construction properties for the button.
	pub fn menu_button(props: MenuButtonProps) -> Box<dyn Scene> {
	if props.no_arrow {
	Box::new(menu_button_without_arrow(props))
	} else {
	Box::new(menu_button_with_arrow(props))
	}
	}
	/// Menu button scene function. This produces a button that has a dropdown arrow.
	///
	/// # Arguments
	/// * `props` - construction properties for the button.
	fn menu_button_with_arrow(props: MenuButtonProps) -> impl Scene {
	bsn! {
	:button(ButtonProps {
	variant: ButtonVariant::Normal,
	corners: props.corners,
	})
	ActivateOnPress
	MenuButton
	FeathersMenuButton
	Children [
	{props.label},
	Node {
	flex_grow: 1.0,
	},
	:icon(icons::CHEVRON_DOWN),
	]
	}
	}
	/// Menu button scene function. This version does not insert a dropdown arrow, the caller is
	/// expected to supply this themselves.
	///
	/// # Arguments
	/// * `props` - construction properties for the button.
	fn menu_button_without_arrow(props: MenuButtonProps) -> impl Scene {

[viridia]

I wrestled with this a bit and (with some help) came up with a more succinct (although still fairly ugly) solution to the problem of conditional children.

[ickshonpe]

Oh I see, yep that seems like a better solution.