Add a new common FillSpace component (#2998)

vivid-planet · Jan 10, 2025 · e8003f9 · e8003f9
1 parent c66a403
commit e8003f9
Show file tree

Hide file tree

Showing 67 changed files with 228 additions and 186 deletions.
diff --git a/.changeset/gold-snails-dream.md b/.changeset/gold-snails-dream.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin": minor
+---
+
+Add a new `FillSpace` component to replace `ToolbarFillSpace` and `AppHeaderFillSpace`
+
+`ToolbarFillSpace` and `AppHeaderFillSpace` are now deprecated.
diff --git a/demo/admin/src/documents/links/EditLink.tsx b/demo/admin/src/documents/links/EditLink.tsx
@@ -1,16 +1,5 @@
 import { gql } from "@apollo/client";
-import {
-    Loading,
-    MainContent,
-    messages,
-    RouterPrompt,
-    RouterTab,
-    RouterTabs,
-    Toolbar,
-    ToolbarFillSpace,
-    ToolbarItem,
-    useStackApi,
-} from "@comet/admin";
+import { FillSpace, Loading, MainContent, messages, RouterPrompt, RouterTab, RouterTabs, Toolbar, ToolbarItem, useStackApi } from "@comet/admin";
 import { ArrowLeft } from "@comet/admin-icons";
 import { AdminComponentRoot } from "@comet/blocks-admin";
 import { ContentScopeIndicator, createUsePage, PageName } from "@comet/cms-admin";
@@ -109,7 +98,7 @@ export const EditLink = ({ id }: Props) => {
                     </IconButton>
                 </ToolbarItem>
                 <PageName pageId={id} />
-                <ToolbarFillSpace />
+                <FillSpace />
                 <ToolbarItem>{pageSaveButton}</ToolbarItem>
             </Toolbar>
             <MainContent>

diff --git a/demo/admin/src/documents/pages/EditPage.tsx b/demo/admin/src/documents/pages/EditPage.tsx
@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client";
-import { Loading, MainContent, RouterPrompt, Toolbar, ToolbarActions, ToolbarFillSpace, ToolbarItem, useStackApi } from "@comet/admin";
+import { FillSpace, Loading, MainContent, RouterPrompt, Toolbar, ToolbarActions, ToolbarItem, useStackApi } from "@comet/admin";
 import { ArrowLeft, Preview } from "@comet/admin-icons";
 import { AdminComponentRoot, AdminTabLabel } from "@comet/blocks-admin";
 import {
@@ -139,7 +139,7 @@ export const EditPage = ({ id }: Props) => {
                     </IconButton>
                 </ToolbarItem>
                 <PageName pageId={id} />
-                <ToolbarFillSpace />
+                <FillSpace />
                 <ToolbarActions>
                     <Stack direction="row" spacing={1}>
                         <Button

diff --git a/demo/admin/src/documents/predefinedPages/EditPredefinedPage.tsx b/demo/admin/src/documents/predefinedPages/EditPredefinedPage.tsx
@@ -1,12 +1,12 @@
 import { useApolloClient, useQuery } from "@apollo/client";
 import {
+    FillSpace,
     FinalForm,
     FinalFormSaveButton,
     Loading,
     MainContent,
     SelectField,
     Toolbar,
-    ToolbarFillSpace,
     ToolbarItem,
     useFormApiRef,
     useStackApi,
@@ -107,7 +107,7 @@ export const EditPredefinedPage = ({ id: pageTreeNodeId }: Props) => {
                             </IconButton>
                         </ToolbarItem>
                         <PageName pageId={pageTreeNodeId} />
-                        <ToolbarFillSpace />
+                        <FillSpace />
                         <ToolbarItem>
                             <FinalFormSaveButton hasConflict={saveConflict.hasConflict} />
                         </ToolbarItem>

diff --git a/demo/admin/src/footer/EditFooterPage.tsx b/demo/admin/src/footer/EditFooterPage.tsx
@@ -1,5 +1,5 @@
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { MainContent, messages, SaveButton, Stack, StackToolbar, ToolbarActions, ToolbarFillSpace, ToolbarTitleItem } from "@comet/admin";
+import { FillSpace, MainContent, messages, SaveButton, Stack, StackToolbar, ToolbarActions, ToolbarTitleItem } from "@comet/admin";
 import { Save } from "@comet/admin-icons";
 import { AdminComponentRoot, BlockState } from "@comet/blocks-admin";
 import {
@@ -133,7 +133,7 @@ export function EditFooterPage(): JSX.Element | null {
                 <ToolbarTitleItem>
                     <FormattedMessage id="footers.edit.toolbarTitle" defaultMessage="Edit footer" />
                 </ToolbarTitleItem>
-                <ToolbarFillSpace />
+                <FillSpace />
                 <ToolbarActions>
                     <SaveButton
                         disabled={!hasChanges}

diff --git a/demo/admin/src/mainMenu/components/EditMainMenuItem.tsx b/demo/admin/src/mainMenu/components/EditMainMenuItem.tsx
@@ -1,13 +1,13 @@
 import { gql, useMutation } from "@apollo/client";
 import {
+    FillSpace,
     MainContent,
     messages,
     RouterPrompt,
     SaveButton,
     Toolbar,
     ToolbarActions,
     ToolbarBackButton,
-    ToolbarFillSpace,
     ToolbarTitleItem,
 } from "@comet/admin";
 import { Add, Delete, Preview, Save } from "@comet/admin-icons";
@@ -122,7 +122,7 @@ const EditMainMenuItem = ({ item }: EditMainMenuItemProps) => {
             <Toolbar scopeIndicator={<ContentScopeIndicator />}>
                 <ToolbarBackButton />
                 <ToolbarTitleItem>{item?.node?.name}</ToolbarTitleItem>
-                <ToolbarFillSpace />
+                <FillSpace />
                 <ToolbarActions>
                     <Button
                         color="info"

diff --git a/demo/admin/src/news/NewsPage.tsx b/demo/admin/src/news/NewsPage.tsx
@@ -1,4 +1,5 @@
 import {
+    FillSpace,
     MainContent,
     SaveBoundary,
     SaveBoundarySaveButton,
@@ -9,7 +10,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { ContentScopeIndicator } from "@comet/cms-admin";
 import { useContentScope } from "@src/common/ContentScopeProvider";
@@ -22,7 +22,7 @@ const FormToolbar = () => (
     <StackToolbar scopeIndicator={<ContentScopeIndicator />}>
         <ToolbarBackButton />
         <ToolbarAutomaticTitleItem />
-        <ToolbarFillSpace />
+        <FillSpace />
         <ToolbarActions>
             <SaveBoundarySaveButton />
         </ToolbarActions>

diff --git a/demo/admin/src/products/ManufacturersGrid.tsx b/demo/admin/src/products/ManufacturersGrid.tsx
@@ -2,13 +2,13 @@ import { useApolloClient, useQuery } from "@apollo/client";
 import {
     CrudContextMenu,
     DataGridToolbar,
+    FillSpace,
     filterByFragment,
     GridColDef,
     GridFilterButton,
     muiGridFilterToGql,
     muiGridSortToGql,
     StackLink,
-    ToolbarFillSpace,
     ToolbarItem,
     Tooltip,
     useBufferedRowCount,
@@ -38,7 +38,7 @@ function ManufacturersGridToolbar() {
             <ToolbarItem>
                 <GridFilterButton />
             </ToolbarItem>
-            <ToolbarFillSpace />
+            <FillSpace />
             <ToolbarItem>
                 <Button startIcon={<AddIcon />} component={StackLink} pageName="add" payload="add" variant="contained" color="primary">
                     <FormattedMessage id="manufacturers.newManufacturer" defaultMessage="New Manufacturer" />

diff --git a/demo/admin/src/products/ManufacturersPage.tsx b/demo/admin/src/products/ManufacturersPage.tsx
@@ -1,4 +1,5 @@
 import {
+    FillSpace,
     SaveBoundary,
     SaveBoundarySaveButton,
     Stack,
@@ -9,7 +10,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { ContentScopeIndicator } from "@comet/cms-admin";
 import { ManufacturerForm } from "@src/products/ManufacturerForm";
@@ -20,7 +20,7 @@ const FormToolbar = () => (
     <StackToolbar>
         <ToolbarBackButton />
         <ToolbarAutomaticTitleItem />
-        <ToolbarFillSpace />
+        <FillSpace />
         <ToolbarActions>
             <SaveBoundarySaveButton />
         </ToolbarActions>

diff --git a/demo/admin/src/products/ProductVariantsGrid.tsx b/demo/admin/src/products/ProductVariantsGrid.tsx
@@ -1,12 +1,12 @@
 import { useQuery } from "@apollo/client";
 import {
     DataGridToolbar,
+    FillSpace,
     GridColDef,
     GridFilterButton,
     muiGridFilterToGql,
     muiGridSortToGql,
     StackLink,
-    ToolbarFillSpace,
     ToolbarItem,
     useBufferedRowCount,
     useDataGridRemote,
@@ -36,7 +36,7 @@ function ProductVariantsGridToolbar() {
             <ToolbarItem>
                 <GridToolbarQuickFilter />
             </ToolbarItem>
-            <ToolbarFillSpace />
+            <FillSpace />
             <ToolbarItem>
                 <GridFilterButton />
             </ToolbarItem>

diff --git a/demo/admin/src/products/ProductsGrid.tsx b/demo/admin/src/products/ProductsGrid.tsx
@@ -4,6 +4,7 @@ import {
     CrudVisibility,
     dataGridDateColumn,
     DataGridToolbar,
+    FillSpace,
     filterByFragment,
     GridCellContent,
     GridColDef,
@@ -13,7 +14,6 @@ import {
     muiGridSortToGql,
     renderStaticSelectCell,
     StackLink,
-    ToolbarFillSpace,
     ToolbarItem,
     useBufferedRowCount,
     useDataGridRemote,
@@ -51,7 +51,7 @@ function ProductsGridToolbar() {
             <ToolbarItem>
                 <GridFilterButton />
             </ToolbarItem>
-            <ToolbarFillSpace />
+            <FillSpace />
             <ToolbarItem>
                 <GridColumnsButton />
             </ToolbarItem>

diff --git a/demo/admin/src/products/ProductsPage.tsx b/demo/admin/src/products/ProductsPage.tsx
@@ -1,5 +1,6 @@
 import {
     FieldSet,
+    FillSpace,
     FullHeightContent,
     RouterTab,
     RouterTabs,
@@ -13,7 +14,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { ContentScopeIndicator } from "@comet/cms-admin";
 import { useIntl } from "react-intl";
@@ -28,7 +28,7 @@ const FormToolbar = () => (
     <StackToolbar>
         <ToolbarBackButton />
         <ToolbarAutomaticTitleItem />
-        <ToolbarFillSpace />
+        <FillSpace />
         <ToolbarActions>
             <SaveBoundarySaveButton />
         </ToolbarActions>
@@ -90,7 +90,7 @@ const ProductsPage = () => {
                                                         <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
                                                             <ToolbarBackButton />
                                                             <ToolbarAutomaticTitleItem />
-                                                            <ToolbarFillSpace />
+                                                            <FillSpace />
                                                             <ToolbarActions>
                                                                 <SaveBoundarySaveButton />
                                                             </ToolbarActions>
@@ -114,7 +114,7 @@ const ProductsPage = () => {
                                                     <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
                                                         <ToolbarBackButton />
                                                         <ToolbarAutomaticTitleItem />
-                                                        <ToolbarFillSpace />
+                                                        <FillSpace />
                                                         <ToolbarActions>
                                                             <SaveBoundarySaveButton />
                                                         </ToolbarActions>

diff --git a/demo/admin/src/products/categories/ProductCategoriesPage.tsx b/demo/admin/src/products/categories/ProductCategoriesPage.tsx
@@ -1,4 +1,5 @@
 import {
+    FillSpace,
     MainContent,
     SaveBoundary,
     SaveBoundarySaveButton,
@@ -9,7 +10,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { ContentScopeIndicator } from "@comet/cms-admin";
 import { useIntl } from "react-intl";
@@ -21,7 +21,7 @@ const FormToolbar = () => (
     <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
         <ToolbarBackButton />
         <ToolbarAutomaticTitleItem />
-        <ToolbarFillSpace />
+        <FillSpace />
         <ToolbarActions>
             <SaveBoundarySaveButton />
         </ToolbarActions>

diff --git a/demo/admin/src/products/categories/ProductCategoriesTable.tsx b/demo/admin/src/products/categories/ProductCategoriesTable.tsx
@@ -2,14 +2,14 @@ import { useQuery } from "@apollo/client";
 import {
     CrudContextMenu,
     DataGridToolbar,
+    FillSpace,
     filterByFragment,
     GridColDef,
     GridFilterButton,
     muiGridFilterToGql,
     muiGridPagingToGql,
     muiGridSortToGql,
     StackLink,
-    ToolbarFillSpace,
     ToolbarItem,
     useBufferedRowCount,
     useDataGridRemote,
@@ -37,7 +37,7 @@ function ProductCategoriesTableToolbar() {
             <ToolbarItem>
                 <GridToolbarQuickFilter />
             </ToolbarItem>
-            <ToolbarFillSpace />
+            <FillSpace />
             <ToolbarItem>
                 <GridFilterButton />
             </ToolbarItem>

diff --git a/demo/admin/src/products/future/CreateCapProductPage.tsx b/demo/admin/src/products/future/CreateCapProductPage.tsx
@@ -1,4 +1,5 @@
 import {
+    FillSpace,
     MainContent,
     SaveBoundary,
     SaveBoundarySaveButton,
@@ -7,7 +8,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { ContentScopeIndicator } from "@comet/cms-admin";
 import { CreateCapProductForm } from "@src/products/future/generated/CreateCapProductForm";
@@ -21,7 +21,7 @@ export function CreateCapProductPage() {
                 <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
                     <ToolbarBackButton />
                     <ToolbarAutomaticTitleItem />
-                    <ToolbarFillSpace />
+                    <FillSpace />
                     <ToolbarActions>
                         <SaveBoundarySaveButton />
                     </ToolbarActions>

diff --git a/demo/admin/src/products/future/ProductsPage.tsx b/demo/admin/src/products/future/ProductsPage.tsx
@@ -1,4 +1,5 @@
 import {
+    FillSpace,
     MainContent,
     RouterTab,
     RouterTabs,
@@ -13,7 +14,6 @@ import {
     ToolbarActions,
     ToolbarAutomaticTitleItem,
     ToolbarBackButton,
-    ToolbarFillSpace,
 } from "@comet/admin";
 import { Add as AddIcon, Edit } from "@comet/admin-icons";
 import { ContentScopeIndicator } from "@comet/cms-admin";
@@ -29,7 +29,7 @@ const FormToolbar = () => (
     <StackToolbar scopeIndicator={<ContentScopeIndicator global />}>
         <ToolbarBackButton />
         <ToolbarAutomaticTitleItem />
-        <ToolbarFillSpace />
+        <FillSpace />
         <ToolbarActions>
             <SaveBoundarySaveButton />
         </ToolbarActions>

diff --git a/demo/admin/src/products/tags/ProductTagTable.tsx b/demo/admin/src/products/tags/ProductTagTable.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client";
 import {
     CrudContextMenu,
+    FillSpace,
     filterByFragment,
     GridColDef,
     GridFilterButton,
@@ -9,7 +10,6 @@ import {
     StackLink,
     Toolbar,
     ToolbarAutomaticTitleItem,
-    ToolbarFillSpace,
     ToolbarItem,
     useBufferedRowCount,
     useDataGridRemote,
@@ -38,7 +38,7 @@ function ProductTagsTableToolbar() {
             <ToolbarItem>
                 <GridToolbarQuickFilter />
             </ToolbarItem>
-            <ToolbarFillSpace />
+            <FillSpace />
             <ToolbarItem>
                 <GridFilterButton />
             </ToolbarItem>