Move the ScopeIndicator from the ToolbarBreadcrumbs to the Toolbar (#…

…2220) This makes more sense because the ScopeIndicator doesn't really have anything to do with the Breadcrumbs. Also, it makes it possible to render a ScopeIndicator without breadcrumbs (outside of a Stack).
vivid-planet · Jun 28, 2024 · ce5eaed · ce5eaed
1 parent ef575da
commit ce5eaed
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/.changeset/unlucky-hats-exist.md b/.changeset/unlucky-hats-exist.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": major
+---
+
+Move the `ScopeIndicator` from the `ToolbarBreadcrumbs` to the `Toolbar`
diff --git a/packages/admin/admin/src/common/toolbar/Toolbar.tsx b/packages/admin/admin/src/common/toolbar/Toolbar.tsx
@@ -7,7 +7,7 @@ import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps
 import { MasterLayoutContext } from "../../mui/MasterLayoutContext";
 import { ToolbarBreadcrumbs } from "./ToolbarBreadcrumbs";
 
-export type ToolbarClassKey = "root" | "topBar" | "bottomBar" | "mainContentContainer" | "breadcrumbs";
+export type ToolbarClassKey = "root" | "topBar" | "bottomBar" | "mainContentContainer" | "breadcrumbs" | "scopeIndicator";
 
 export interface ToolbarProps
     extends ThemedComponentBaseProps<{
@@ -16,6 +16,7 @@ export interface ToolbarProps
         mainContentContainer: "div";
         topBar: "div";
         breadcrumbs: typeof ToolbarBreadcrumbs;
+        scopeIndicator: "div";
     }> {
     elevation?: number;
     children?: React.ReactNode;
@@ -45,9 +46,21 @@ const Root = createComponentSlot(Paper)<ToolbarClassKey, OwnerState>({
 const TopBar = createComponentSlot("div")<ToolbarClassKey>({
     componentName: "Toolbar",
     slotName: "topBar",
-})(css`
-    min-height: 40px;
-`);
+})(
+    ({ theme }) => css`
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+        gap: ${theme.spacing(2)};
+        padding-left: ${theme.spacing(2)};
+        padding-right: ${theme.spacing(2)};
+    `,
+);
+
+const ScopeIndicator = createComponentSlot("div")<ToolbarClassKey>({
+    componentName: "Toolbar",
+    slotName: "scopeIndicator",
+})();
 
 const BottomBar = createComponentSlot(MuiToolbar)<ToolbarClassKey>({
     componentName: "Toolbar",
@@ -106,7 +119,8 @@ export const Toolbar = (inProps: ToolbarProps) => {
         <Root elevation={elevation} ownerState={ownerState} {...slotProps?.root} {...restProps}>
             {!hideTopBar && (
                 <TopBar {...slotProps?.topBar}>
-                    <Breadcrumbs scopeIndicator={scopeIndicator} {...slotProps?.breadcrumbs} />
+                    {Boolean(scopeIndicator) && <ScopeIndicator {...slotProps?.scopeIndicator}>{scopeIndicator}</ScopeIndicator>}
+                    <Breadcrumbs {...slotProps?.breadcrumbs} />
                 </TopBar>
             )}
             {children && (

diff --git a/packages/admin/admin/src/common/toolbar/ToolbarBreadcrumbs.tsx b/packages/admin/admin/src/common/toolbar/ToolbarBreadcrumbs.tsx
@@ -26,7 +26,6 @@ const __DEBUG__useDebugBreadcrumbData = false;
 
 type ToolbarBreadcrumbsClassKey =
     | "root"
-    | "scopeIndicator"
     | "breadcrumbsList"
     | "mobileBreadcrumbsButton"
     | "currentBreadcrumbsItem"
@@ -42,7 +41,6 @@ type ToolbarBreadcrumbsClassKey =
 interface ToolbarBreadcrumbsProps
     extends ThemedComponentBaseProps<{
         root: "div";
-        scopeIndicator: "div";
         breadcrumbsList: "div";
         mobileBreadcrumbsButton: typeof ButtonBase;
         currentBreadcrumbsItem: typeof Typography;
@@ -55,7 +53,6 @@ interface ToolbarBreadcrumbsProps
         mobileMenuItemText: typeof ListItemText;
         mobileMenuItemNestingIndicator: "div";
     }> {
-    scopeIndicator?: React.ReactNode;
     iconMapping?: {
         itemSeparator?: React.ReactNode;
         openMobileMenu?: React.ReactNode;
@@ -64,7 +61,7 @@ interface ToolbarBreadcrumbsProps
 }
 
 export const ToolbarBreadcrumbs = (inProps: ToolbarBreadcrumbsProps) => {
-    const { scopeIndicator, iconMapping = {}, slotProps, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminToolbarBreadcrumbs" });
+    const { iconMapping = {}, slotProps, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminToolbarBreadcrumbs" });
     const {
         itemSeparator: itemSeparatorIcon = <ChevronRight />,
         openMobileMenu: openMobileMenuIcon = <ChevronDown />,
@@ -92,7 +89,6 @@ export const ToolbarBreadcrumbs = (inProps: ToolbarBreadcrumbsProps) => {
     return (
         <>
             <Root ref={rootRef} {...slotProps?.root} {...restProps}>
-                {Boolean(scopeIndicator) && <ScopeIndicator {...slotProps?.scopeIndicator}>{scopeIndicator}</ScopeIndicator>}
                 <BreadcrumbsList {...slotProps?.breadcrumbsList}>
                     {breadcrumbs.map(({ title, url }, index) => {
                         const isCurrentPage = index === breadcrumbs.length - 1;
@@ -202,16 +198,9 @@ const Root = createComponentSlot("div")<ToolbarBreadcrumbsClassKey>({
         display: flex;
         align-items: center;
         gap: ${theme.spacing(2)};
-        padding-left: ${theme.spacing(2)};
-        padding-right: ${theme.spacing(2)};
     `,
 );
 
-const ScopeIndicator = createComponentSlot("div")<ToolbarBreadcrumbsClassKey>({
-    componentName: "ToolbarBreadcrumbs",
-    slotName: "scopeIndicator",
-})();
-
 const BreadcrumbsList = createComponentSlot("div")<ToolbarBreadcrumbsClassKey>({
     componentName: "ToolbarBreadcrumbs",
     slotName: "breadcrumbsList",