[manager-components]: Make the Drawer composable

[mathieumousnier]

Have you already checked if a similar item is present on manager-components?

• Yes, I have already checked the existing components/hooks/utils.

What do you expect from this request?

Component

Description

The Drawer component has a monolithic design that already shows its limitations.

Example of a problematic implementation

For example, it is hard to use the Drawer with react-hooks-form when you do this:

<Drawer
  isOpen
  onDismiss={handleDismiss}
  primaryButtonLabel={"Submit"}
  onPrimaryButtonClick={handleSubmit}
>
  <form>
    {....}
  </form>
</Drawer>

You need to declare all the form state on the parent component that contains the drawer, because the handleSubmit has to be set as a prop of the Drawer.

Sometimes, all the data needed to display the form is not available without a fetch, so you would want to :

• Fetch the data with a loader inside the drawer
• Display the content of the drawer with the form when the data is available, and declare the form with useForm in this inner component
• This would allow a better separation of concerns
• This would then also allow a better testability

→ This is not possible with the current design

Proposition

A better approach would be to expose the different parts of the Drawer to be able to compose it has needed.

<Drawer.Root
  isOpen
  onDismiss={handleDismiss}
  isLoading={isLoading
>
  <Drawer.Header title="This is the drawer title" />
  <Drawer.Content>
    <WhatEverIWantHere />
  </Drawer.Content>
  <Drawer.Footer
    primaryButtonLabel="Submit"
    isPrimaryButtonDisabled={isDisabled}
    isPrimaryButtonLoading={isSubmiting}
    onPrimaryButtonClick={handleSubmit}
    secondaryButtonLabel="Close"
    onSecondaryButtonClick={handleDismiss}
  />
</Drawer.Root>

Where do you expect to use this?

okms project

Do you have mock-up?

No response

When do you expect this to be delivered?

No response

Additional Information

No response