[account] [docs] Add `<Account />` in `sidebarFooter` #4255

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

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js

+  );
+}
+
+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

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js

+    <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

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js

@@ -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

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -146,3 +146,7 @@ This allows you to add, for example:
 - footer content in the sidebar.

 {{"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

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -66,7 +66,7 @@ export interface DashboardLayoutSlots {
   * Optional footer component used in the layout sidebar.
   * @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

packages/toolpad-core/src/Account/AccountPreview.tsx

+  /**
+   * 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
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[account] [docs] Add `<Account />` in `sidebarFooter` #4255

[account] [docs] Add `<Account />` in `sidebarFooter` #4255

bharatkashyap commented Oct 13, 2024 •

edited by apedroferreira

Loading

apedroferreira commented Oct 22, 2024

aress31 commented Oct 30, 2024

bharatkashyap commented Oct 31, 2024 •

edited

Loading

bharatkashyap commented Oct 31, 2024

apedroferreira left a comment

apedroferreira Oct 31, 2024

bharatkashyap Nov 1, 2024

apedroferreira Oct 31, 2024

bharatkashyap Nov 1, 2024

apedroferreira Nov 1, 2024

apedroferreira Oct 31, 2024

apedroferreira Oct 31, 2024

bharatkashyap Nov 1, 2024

aress31 Nov 1, 2024

bharatkashyap Nov 1, 2024 •

edited

Loading

apedroferreira Oct 31, 2024

apedroferreira Oct 31, 2024

bharatkashyap Nov 1, 2024 •

edited

Loading

apedroferreira left a comment

apedroferreira Nov 1, 2024

bharatkashyap Nov 2, 2024

[account] [docs] Add <Account /> in sidebarFooter #4255

[account] [docs] Add <Account /> in sidebarFooter #4255

Conversation

bharatkashyap commented Oct 13, 2024 • edited by apedroferreira Loading

Summary of grooming discussion

Props:

Slots:

apedroferreira commented Oct 22, 2024

aress31 commented Oct 30, 2024

bharatkashyap commented Oct 31, 2024 • edited Loading

bharatkashyap commented Oct 31, 2024

apedroferreira left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bharatkashyap Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bharatkashyap Nov 1, 2024 • edited Loading

Choose a reason for hiding this comment

apedroferreira left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

[account] [docs] Add `<Account />` in `sidebarFooter` #4255

[account] [docs] Add `<Account />` in `sidebarFooter` #4255

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