feat(slice-machine-ui): update List component

prismicio · Oct 18, 2023 · 23fa9df · 23fa9df
1 parent f3f7a5d
commit 23fa9df
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 132 deletions.
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  Box,
   Switch,
   DropdownMenu,
   DropdownMenuTrigger,
@@ -22,7 +21,7 @@ import type { SliceZoneSlice } from "@lib/models/common/CustomType/sliceZone";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { LibraryUI } from "@lib/models/common/LibraryUI";
 import type { SlicesSM } from "@lib/models/common/Slices";
-import { List, ListHeader } from "@src/components/List";
+import { ListHeader } from "@src/components/List";
 import { SliceZoneBlankSlate } from "@src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate";
 import { telemetry } from "@src/apiClient";
 import {
@@ -210,70 +209,69 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   };
 
   return (
-    <Box flexDirection="column" height="100%">
+    <>
       {query.newPageType === undefined ? (
-        <List>
-          <ListHeader
-            actions={
-              sliceZone ? (
-                <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <Button variant="secondary" startIcon="add">
-                      Add slices
-                    </Button>
-                  </DropdownMenuTrigger>
+        <ListHeader
+          actions={
+            sliceZone ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button variant="secondary" startIcon="add">
+                    Add slices
+                  </Button>
+                </DropdownMenuTrigger>
 
-                  <DropdownMenuContent align="end">
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    startIcon={<Icon name="add" size="large" />}
+                    onSelect={openCreateSliceModal}
+                    description="Start from scratch."
+                  >
+                    Create new
+                  </DropdownMenuItem>
+
+                  {availableSlicesTemplates.length > 0 ? (
                     <DropdownMenuItem
-                      startIcon={<Icon name="add" size="large" />}
-                      onSelect={openCreateSliceModal}
-                      description="Start from scratch."
+                      onSelect={openSlicesTemplatesModal}
+                      startIcon={<Icon name="contentCopy" size="large" />}
+                      description="Select from premade examples."
+                      shortcut={<Badge color="purple" title="New" />}
                     >
-                      Create new
+                      Use template
                     </DropdownMenuItem>
+                  ) : undefined}
 
-                    {availableSlicesTemplates.length > 0 ? (
-                      <DropdownMenuItem
-                        onSelect={openSlicesTemplatesModal}
-                        startIcon={<Icon name="contentCopy" size="large" />}
-                        description="Select from premade examples."
-                        shortcut={<Badge color="purple" title="New" />}
-                      >
-                        Use template
-                      </DropdownMenuItem>
-                    ) : undefined}
-
-                    {availableSlicesToAdd.length > 0 ? (
-                      <DropdownMenuItem
-                        onSelect={openUpdateSliceZoneModal}
-                        startIcon={<Icon name="folder" size="large" />}
-                        description="Select from your own slices."
-                      >
-                        Select existing
-                      </DropdownMenuItem>
-                    ) : undefined}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : undefined
-            }
-            toggle={
-              customType.format !== "page" || tabId !== "Main" ? (
-                <Switch
-                  checked={!!sliceZone}
-                  onCheckedChange={(checked) => {
-                    if (checked) {
-                      onCreateSliceZone();
-                    } else {
-                      setIsDeleteSliceZoneModalOpen(true);
-                    }
-                  }}
-                />
-              ) : undefined
-            }
-          >
-            Slice Zone
-          </ListHeader>
-        </List>
+                  {availableSlicesToAdd.length > 0 ? (
+                    <DropdownMenuItem
+                      onSelect={openUpdateSliceZoneModal}
+                      startIcon={<Icon name="folder" size="large" />}
+                      description="Select from your own slices."
+                    >
+                      Select existing
+                    </DropdownMenuItem>
+                  ) : undefined}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : undefined
+          }
+          toggle={
+            customType.format !== "page" || tabId !== "Main" ? (
+              <Switch
+                checked={!!sliceZone}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    onCreateSliceZone();
+                  } else {
+                    setIsDeleteSliceZoneModalOpen(true);
+                  }
+                }}
+                size="small"
+              />
+            ) : undefined
+          }
+        >
+          Slice Zone
+        </ListHeader>
       ) : undefined}
       {sliceZone ? (
         slicesInSliceZone.length > 0 ? (
@@ -369,7 +367,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           onClose={closeCreateSliceModal}
         />
       )}
-    </Box>
+    </>
   );
 };
 

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx
@@ -13,6 +13,7 @@ import type {
 } from "@lib/models/common/CustomType";
 import type { SlicesSM } from "@lib/models/common/Slices";
 import { ensureDnDDestination, ensureWidgetTypeExistence } from "@lib/utils";
+import { List } from "@src/components/List";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import type { SliceMachineStoreType } from "@src/redux/type";
 import { telemetry } from "@src/apiClient";
@@ -132,15 +133,15 @@ const TabZone: FC<TabZoneProps> = ({
   };
 
   return (
-    <Box backgroundColor="grey2" flexDirection="column" gap={8} height="100%">
-      <ErrorBoundary>
-        <Suspense
-          fallback={
-            <Box padding={32}>
-              <ProgressCircle />
-            </Box>
-          }
-        >
+    <ErrorBoundary>
+      <Suspense
+        fallback={
+          <Box padding={32}>
+            <ProgressCircle />
+          </Box>
+        }
+      >
+        <List style={{ flexGrow: 1 }}>
           {query.newPageType === undefined ? (
             <Zone
               zoneType="customType"
@@ -164,8 +165,10 @@ const TabZone: FC<TabZoneProps> = ({
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
                 `data${transformKeyAccessor(item.key)}`
               }
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
-              renderFieldAccessor={(key) => `data${transformKeyAccessor(key)}`}
+              renderFieldAccessor={(key) =>
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
+                `data${transformKeyAccessor(key)}`
+              }
               dataCy="ct-static-zone"
               isRepeatableCustomType={customType.repeatable}
             />
@@ -181,9 +184,9 @@ const TabZone: FC<TabZoneProps> = ({
             onCreateSliceZone={onCreateSliceZone}
             onDeleteSliceZone={onDeleteSliceZone}
           />
-        </Suspense>
-      </ErrorBoundary>
-    </Box>
+        </List>
+      </Suspense>
+    </ErrorBoundary>
   );
 };
 

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/index.tsx
@@ -42,11 +42,7 @@ export const CustomTypeBuilder: FC<CustomTypeBuilderProps> = (props) => {
 
   return (
     <>
-      <Window
-        style={{
-          height: sliceZoneEmpty ? "100%" : undefined,
-        }}
-      >
+      <Window style={sliceZoneEmpty ? { flexGrow: 1 } : undefined}>
         {customType.format === "page" ? <WindowFrame /> : undefined}
         {query.newPageType === "true" ? (
           <TabZone

diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx
@@ -1,9 +1,9 @@
-import { Button, ButtonGroup } from "@prismicio/editor-ui";
+import { Button, ButtonGroup, Switch, Text } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 import { BaseStyles, Heading } from "theme-ui";
 
-import { List, ListHeader } from "@src/components/List";
+import { ListHeader } from "@src/components/List";
 
 import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import NewField from "./Card/components/NewField";
@@ -73,31 +73,33 @@ const Zone = ({
   const onCancelNewField = () => setNewFieldData(null);
 
   return (
-    <List>
+    <>
       {isCustomType ? (
         <ListHeader
           actions={
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             fields.length > 0 ? (
-              <ButtonGroup size="medium" variant="secondary">
+              <>
+                <Text color="grey11" component="span">
+                  Show code snippets?
+                </Text>
+                <Switch
+                  checked={showHints}
+                  onCheckedChange={setShowHints}
+                  size="small"
+                />
                 <Button
-                  variant="secondary"
-                  onClick={() => setShowHints(!showHints)}
-                >
-                  {showHints ? "Hide" : "Show"} code snippets
-                </Button>
-                <Button
-                  variant="secondary"
-                  onClick={() => enterSelectMode()}
                   data-cy={`add-${
                     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                     isRepeatable ? "Repeatable" : "Static"
                   }-field`}
+                  onClick={enterSelectMode}
                   startIcon="add"
+                  variant="secondary"
                 >
                   Add a new field
                 </Button>
-              </ButtonGroup>
+              </>
             ) : undefined
           }
         >
@@ -211,7 +213,7 @@ const Zone = ({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         widgetsArray={widgetsArrayWithCondUid}
       />
-    </List>
+    </>
   );
 };
 

diff --git a/packages/slice-machine/src/components/List/List.css.ts b/packages/slice-machine/src/components/List/List.css.ts
@@ -1,28 +1,77 @@
 import { colors, sprinkles, vars } from "@prismicio/editor-ui";
 import { style } from "@vanilla-extract/css";
 
+import * as windowStyles from "../Window/Window.css";
+
 const flex = sprinkles({ all: "unset", display: "flex" });
 
-export const root = style([flex, sprinkles({ flexDirection: "column" })]);
+const row = style([flex, sprinkles({ flexDirection: "row" })]);
 
-export const header = style([
+export const root = style([
   flex,
+  sprinkles({
+    borderColor: colors.grey6,
+    borderRadius: 6,
+    borderStyle: "solid",
+    borderWidth: 1,
+    flexDirection: "column",
+    overflowX: "hidden",
+  }),
+  {
+    selectors: {
+      [`:is(${windowStyles.root}, ${windowStyles.tabsContent}) > &`]: {
+        borderRadius: vars.borderRadius[0],
+        borderStyle: vars.borderStyle.none,
+      },
+    },
+  },
+]);
+
+const child = style([
+  row,
   sprinkles({
     alignItems: "center",
-    backgroundColor: colors.grey2,
     borderBottomColor: colors.grey6,
-    borderBottomStyle: "solid",
     borderBottomWidth: 1,
     boxSizing: "border-box",
-    flexDirection: "row",
-    gap: 8,
     height: 48,
-    paddingLeft: 16,
     paddingRight: 8,
   }),
+  { ":last-child": { borderBottomColor: vars.color.transparent } },
+]);
+
+export const header = style([
+  child,
+  sprinkles({
+    backgroundColor: colors.grey2,
+    borderBottomStyle: "solid",
+    gap: 8,
+    paddingLeft: 16,
+  }),
   {
     selectors: {
-      [`${root}:last-child > &`]: { borderBottomColor: vars.color.transparent },
+      [`${windowStyles.tabsContent} > ${root} > &:not(:first-child)`]: {
+        marginTop: vars.space[16],
+      },
     },
   },
 ]);
+
+export const headerActions = style([
+  row,
+  sprinkles({
+    alignItems: "center",
+    flexGrow: 1,
+    gap: 8,
+    justifyContent: "end",
+  }),
+]);
+
+export const item = style([
+  child,
+  sprinkles({
+    backgroundColor: colors.grey1,
+    borderBottomStyle: "dashed",
+    paddingLeft: 12,
+  }),
+]);