mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

[scheduler] Joy - Add navigation between views

Open rita-codes opened this issue 7 months ago • 3 comments

Issue #17697

What's included

This PR adds the HeaderToolbar component, which includes:

  • A ViewSwitcher that uses the Menubar component from Base UI.
  • The ViewSwitcher displays up to 3 views as individual buttons. If more than 3 views are provided, the extra views are grouped under a dropdown labeled "Other".
  • The ViewSwitcher accepts a variable number of views via props. If none are provided, it defaults to the 4 planned views: week, day, month, and agenda.
  • A "Today" button next to the view switcher.
  • Styling for the toolbar and dropdown UI.

Not in scope:

  • External control of the currently selected view.
  • Custom UIs for view navigation.
  • Styling or logic for additional views like numberOfDays or noWeekends, since they are not currently planned (but can be added easily later).

Design and behavior: Figma

Demo

3 views https://github.com/user-attachments/assets/f33421cd-f2d2-4eb3-85dd-498dfc05c216

4 views https://github.com/user-attachments/assets/c9619572-87a0-41ca-8f00-a4dca23fa687

rita-codes avatar May 30 '25 16:05 rita-codes

Deploy preview: https://deploy-preview-18074--material-ui-x.netlify.app/

Bundle size report

Total Size Change: 0B(0.00%) - Total Gzip Change: 0B(0.00%) Files: 120 total (0 added, 0 removed, 0 changed)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against fbf21cdfa73f3a570f8b32c780b44930f887562e

mui-bot avatar May 30 '25 16:05 mui-bot

I followed the folder structure pattern used in Base UI and placed ViewSwitcher in its own folder inside HeaderToolbar. It felt more readable and organized that way, and aligns with the direction Base UI seems to be heading. Happy to adjust if there's a preferred structure!

rita-codes avatar May 30 '25 17:05 rita-codes

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Jun 01 '25 18:06 github-actions[bot]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Jun 02 '25 10:06 github-actions[bot]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions[bot] avatar Jun 02 '25 11:06 github-actions[bot]