Extract brick selector from BrickModal

[fregante]

BrickModal is an easy-to-use all-in-one component that handles the whole flow: from the opener button, to the modal, to the picker UI.

I remember maybe Todd mentioning this: passing a Button to a Modal component feels backwards:

pixiebrix-extension/src/pageEditor/panes/insert/InsertMenuItemPane.tsx

Lines 78 to 91 in 7074d26

	<BrickModal
	bricks={menuItemExtensionPoints ?? []}
	caption="Select button foundation"
	renderButton={(onClick) => (
	<Button
	variant="info"
	onClick={onClick}
	disabled={!menuItemExtensionPoints?.length}
	>
	<FontAwesomeIcon icon={faSearch} /> Search Marketplace
	</Button>
	)}
	onSelect={async (block) => addExisting(block as MenuItemWithConfig)}
	/>

The current structure has a few drawbacks:

• the brick picker UI can only be displayed in a modal
• the opener button can never itself be placed in a modal, or else you end up with nested modals
• if the opener button is not part of the following view (i.e. removed from the dom), the modal won't have a closing animation
• one BrickModal can only have one button

Suggested changes

• create modal-less BrickPicker component, then import it into BrickModal

This would still allow BrickModal usage as a shortcut component while also enabling alternative usage.

Related

• Refactor BrickModal - Split up into smaller components/files #3709
• Standardize modal hide/show logic to support transition animations #3418
• #3380 Add brick modal redesign with tag search #3541

[github-actions]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions]

This issue was closed because it has been stale for 7 days with no activity.