[account] New slots and sub-components

[bharatkashyap]

• Closes [Account] Rename menuItems slot to popoverContent #4179
• Closes [account] Add demo for account-switcher #4180

https://deploy-preview-4181--mui-toolpad-docs.netlify.app/toolpad/core/react-account/#customization
https://deploy-preview-4181--mui-toolpad-docs.netlify.app/toolpad/core/api/account-preview/

To Do

• we change the slot structure of the <Account /> component to to have preview and popoverContent
• we add an AccountPreview component with condensed and expanded variants
• we export composable components:
  • popup header => default contains account details (extended)
  • popup footer => default contains signout button
  • account preview (with variant condensed/extended)
  • sign in button
  • sign out button
• add an internal localeContext between all sub-components to have the localeText prop work on Account /> without prop drilling

Breaking Change

• This removes the menuItems slot on the Account component and adds popoverContent instead

[Janpot]

Assuming you're still working on the content of that second demo, I noticed that the justification of the header should probably be to the left:

=>

[Janpot]

I think we should probably have a userDetailsContainer slot (and accompanying slotProps) to customise this section or override it completely.

Can we just make it the default behavior and work on more slots in a separate PR?

[bharatkashyap]

From the backlog grooming:

• we change the slot structure of the <Account /> component to to have iconButton, signInButton, signOutButton and content
• The content slot will be able to override the entirety of the <Account /> popover except the signOutButton section
• The content slot will have a <AccountUserDetails/> as the default component
• The content slot will be overridable to make more complex UIs
• Users will be able to pass a custom component to the content slot containing complex UIs composed with <AccountUserDetails />
• The default <AccountUserDetails /> should just work without the session prop, getting the session from a context
• We will export a useSession() hook for user to be able to extend it

Default	Custom content
<Account />	import AccountUserDetails from "@toolpad/Core" function UserDetailsContainer({ session }: UserDetailsContainerProps) { return ( <Stack> <AccountUserDetails /> <Stack> <Typography> This account is managed by </Typography> {session.org && (<Box> // Custom session details </Box>) : null} </Stack> </Stack> ) } <Account slots={{ content: UserDetailsContainer, }} />

[apedroferreira]

The content slot will by default take a component which takes a session prop

I guess that if we add a useSession hook this will not be needed?

Everything looks fine here to me but this is without having checked #4227 yet.

Also it seems like the content slot would make some other slots not do anything when used? Not sure if that's something to avoid, but if X for example is using the same kind of logic for some of their slots I guess it's fine. After checking the other PR it seems like this isn't the case so nevermind!

[apedroferreira]

I've added more comments than usual but in general I think it looks good!

The usage for AccountPreview and the preview slot for the condensed/expanded variants seem good to me, as well as the SignOutButton that can be used.

[Janpot]

Is this a breaking change?

[bharatkashyap]

Is this a breaking change?

Yes, since it removes menuItems on <Account />

[apedroferreira]

Looks great, thanks for addressing the previous comments!
Approving already not to block as I have nothing else that should be a major issue.

About the popover and popoverContent slots, not sure if we usually have slots where one wraps / can override the other like that, but I guess that X must have some cases like it too?
So it's probably fine, mentioning it just in case! I guess there's not a much better way to allow full customization there.

[apedroferreira]

This is the only one of these 4 components that's actually just a standard Material UI component, right?
Not sure if that can be confusing in any way.

[bharatkashyap]

Yes, not sure if I need to clarify that in any way? Perhaps okay to leave it as it is and see if that inspires any confusion

[apedroferreira]

Should it spread slotProps.popover in this line too?

[apedroferreira]

Oh and here not sure if it should spread slotProps.popoverContent too.

[Janpot]

• The alignment of the email line looks off:

  

  vs.

  

  That menu button should probably also be centered

• The projects submenu on the account switcher looks a bit too much IMO, I'd just keep the accounts and instead add a button at the bottom of the list to link another account

• for the account switcher demo and the crypto wallet demo, the code preview is nearly identical. IMO the crypto wallet demo is a bit too much, I would consider leaving it out. The demo preview should probably also not include those context providers.