[account] [docs] Add `<Account />` in `sidebarFooter` by bharatkashyap · Pull Request #4255 · mui/toolpad

bharatkashyap · 2024-10-13T12:33:21Z

Closes [template] [core] Add new variant for Account #4102

Summary of grooming discussion

Props:

No need to add a hideToolbarAccount prop, users can pass a component which returns null into the toolbarAccount slot when using <Account /> inside the sidebar footer

Slots:

button => default = account details (condensed)
popup => header + content + footer

export composable components:

popup header => default contains account details (extended)
popup content
popup footer => default contains signout button
account details (with variant condensed/extended)

=> for the sidebar version =

slot button filled with account details (extended)
slot popup filled with content + footer

scenarios:

I want to add buttons in the footer actions
I want to add tenant switcher in content
I want extra information in the header
- I'm using the extended variant (do you want to change the button as well?)
- I'm using the condensed variant

https://deploy-preview-4255--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

…into enh/account-3

apedroferreira · 2024-10-22T16:10:17Z

Feel free to remind me to review this one once the others are merged!

aress31 · 2024-10-30T11:39:09Z

I am not sure if the following has been addressed in this pull request, but there appears to be a small space on the far right when the Avatar is placed in the SidebarFooter, which is probably due to the flex styling and ideally should not be present.

…-sidebar-variant

bharatkashyap · 2024-10-31T11:51:48Z

I am not sure if the following has been addressed in this pull request, but there appears to be a small space on the far right when the Avatar is placed in the SidebarFooter, which is probably due to the flex styling and ideally should not be present.

Gets addressed in this PR:

bharatkashyap · 2024-10-31T12:25:55Z

Feel free to remind me to review this one once the others are merged!

Should be ready to review now!

apedroferreira

Just some visual things and figuring out how we should type slots!

apedroferreira · 2024-10-31T18:56:26Z

+  );
+}
+
+function SidebarFooterAccount() {


This needs some logic to handle the mini-drawer variant, not to overflow.
The mini prop should always be available in this slot, it's just a boolean.

Missed that! I've modified the demo to be able to handle the mini state

apedroferreira · 2024-10-31T18:58:56Z

+    <Account
+      slots={{
+        preview: AccountSidebarPreview,
+        popoverContent: SidebarFooterAccountPopover,


In these docs demos, opening and closing the popover automatically scrolls unless they have the disableAutoFocus prop, maybe we could have that somehow?

Great find! I've added disableAutoFocus as true by default on the Account popover, but overridable by users through the slotProps

Ok, I'm not 100% sure if we'd need it in a normal app though, maybe it's just a problem in the demo iframes.

apedroferreira · 2024-10-31T19:02:05Z

@@ -0,0 +1,247 @@
+import * as React from 'react';


The 3 dots icon doesn't seem vertically centered.

Also the popover isn't pointing to / coming from the 3 dots icon, I guess it should?

Agree, I've tweaked the demo to reflect this in both states:

For the expanded variant, could there be an option to choose whether the popup appears on the right or the top side?

You should be able to customize the popover's position (as well as the placement of the arrow) using the slotProps - the demo on the docs will showcase this using the transformOrigin and anchorOrigin props

apedroferreira · 2024-10-31T19:04:39Z


 {{"demo": "DashboardLayoutSlots.js", "height": 400, "iframe": true}}
+
+Through this, you can also modify the position of the `<Account />` component and use it inside the sidebar:


In #4340 I'm adding an Examples section here, I guess that we can just have this under that section once it gets added.

apedroferreira · 2024-10-31T19:09:26Z

   * @default null
   */
-  sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
+  sidebarFooter?: React.ElementType;


So the SignInPage slots are typed as React.JSXElementConstructor<Props> but the slots in Account are React.ElementType?
Shouldn't it be consistent all around? What do the other MUI component use?

Also the SidebarFooterProps have a mini boolean prop that can be useful, so we need the types to be aware of it...

I've updated the sidebarFooter type as well as the types of the Account slots; agree on the need for consistency - we can probably discuss this and raise a PR separately to bring consistency across all other components

…ap/mui-toolpad into feat/account-sidebar-variant

apedroferreira

Awesome!! Thanks for the changes!

apedroferreira · 2024-11-01T19:04:45Z

+  /**
+   * To override the default `sx` value on the `Stack` component in the "expanded" variant
+   */
+  sx?: SxProps;


So it applies to the expanded variant only? Probably ideally it would apply to any variant to be less confusing.
If you're not using it yet maybe we can skip this prop for now?

Fair enough, we can leave it out for now, adding it will not be a breaking change later

…ap/mui-toolpad into feat/account-sidebar-variant

bharatkashyap added 30 commits October 2, 2024 13:39

fix: Improve docs and make API clearer

38ecc17

Merge branch 'master' into enh/account-3

7fea561

fix: lint

01c7fa6

Merge branch 'enh/account-3' of github.com:bharatkashyap/mui-toolpad …

49d756a

…into enh/account-3

fix: Incorrect default

8098608

fix: Add userDetailsContainer proposal

6c1c073

Merge branch 'master' into enh/account-3

f5edc05

fix: No default sx in the slot

43a0978

fix: CI

7277cbf

Merge branch 'enh/account-3' of github.com:bharatkashyap/mui-toolpad …

129b679

…into enh/account-3

fix: Readability

f909067

fix: typo

e337ac0

fix: More clarification

2e321ba

fix: CI

1086869

fix: WIP menuItems -> content

7938e3f

wip: Move demos over

6807254

fix: Move demos to new API

c2703a7

wip: Better account switcher

884ad56

fix: CI

d76eebf

Merge branch 'master' into enh/account-3

840362c

fix: Complete better account switcher

c71f5ba

fix: CI

6e34be8

fix: dedupe

a80df48

Merge branch 'master' into enh/account-4

882b07b

Merge branch 'master' into enh/account-3

0b2e4f8

Merge branch 'master' of github.com:mui/mui-toolpad into enh/account-3

77d8eb7

fix: Redesign solution

cb9debf

fix: CI

986298c

Merge branch 'master' of github.com:mui/mui-toolpad into enh/account-3

eee948a

fix: CI

b93270a

bharatkashyap added 3 commits October 21, 2024 18:59

fix: Incorrect merge

4b5f4de

fix: CI

6f1499c

Merge branch 'master' into feat/account-sidebar-variant

ef3f403

bharatkashyap added 2 commits October 30, 2024 02:47

Merge branch 'master' into feat/account-sidebar-variant

d8fa6be

fix: Fine tune demo

8603a43

bharatkashyap mentioned this pull request Oct 29, 2024

[DashboardLayout and Account] A Few Issues #4332

Closed

Merge branch 'master' into feat/account-sidebar-variant

fd826b3

Merge branch 'master' into feat/account-sidebar-variant

7b86697

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 30, 2024

bharatkashyap added 2 commits October 30, 2024 21:30

Merge branch 'master' of github.com:mui/mui-toolpad into feat/account…

299eb7f

…-sidebar-variant

fix: CI

81f6346

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 31, 2024

apedroferreira requested changes Oct 31, 2024

View reviewed changes

bharatkashyap added 3 commits November 1, 2024 18:24

Merge branch 'master' into feat/account-sidebar-variant

2aa87b7

fix: Pedro review

64acd1d

Merge branch 'feat/account-sidebar-variant' of github.com:bharatkashy…

5b21e45

…ap/mui-toolpad into feat/account-sidebar-variant

apedroferreira approved these changes Nov 1, 2024

View reviewed changes

bharatkashyap added 8 commits November 2, 2024 16:30

fix: Pedro review 2

01194bc

fix: CI

45f0499

Merge branch 'master' into feat/account-sidebar-variant

cbe1024

fix: CI

d64ffae

Merge branch 'feat/account-sidebar-variant' of github.com:bharatkashy…

c7949d3

…ap/mui-toolpad into feat/account-sidebar-variant

Merge branch 'master' into feat/account-sidebar-variant

f9a5297

Merge branch 'master' into feat/account-sidebar-variant

7dd2eb3

Merge branch 'master' into feat/account-sidebar-variant

1615ae1

bharatkashyap merged commit 6d7afcc into mui:master Nov 5, 2024


		{{"demo": "DashboardLayoutSlots.js", "height": 400, "iframe": true}}

		Through this, you can also modify the position of the `<Account />` component and use it inside the sidebar:

Uh oh!

Uh oh!

Conversation

bharatkashyap commented Oct 13, 2024 • edited by apedroferreira Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of grooming discussion

Props:

Slots:

Uh oh!

apedroferreira commented Oct 22, 2024

Uh oh!

aress31 commented Oct 30, 2024

Uh oh!

bharatkashyap commented Oct 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bharatkashyap commented Oct 31, 2024

Uh oh!

apedroferreira left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bharatkashyap Nov 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bharatkashyap Nov 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apedroferreira left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bharatkashyap commented Oct 13, 2024 •

edited by apedroferreira

Loading

bharatkashyap commented Oct 31, 2024 •

edited

Loading

bharatkashyap Nov 1, 2024 •

edited

Loading

bharatkashyap Nov 1, 2024 •

edited

Loading