prismicio · xrutayisire · Aug 31, 2023
diff --git a/cypress/e2e/user-flows/scenario_slice_association.cy.js b/cypress/e2e/user-flows/scenario_slice_association.cy.js
@@ -86,7 +86,8 @@ describe.skip("I am an existing SM user (Next) and I want to associate a Slice t
   it.skip("Add the Slice to the Custom Type", () => {
     cy.visit(`/custom-types/${customTypeId}`);
 
-    cy.get("[data-cy=update-slices]").click();
+    cy.contains("Add").click();
+    cy.contains("Add from your library").click();
     // forcing this because the input itself is invisible and an svg is displayed
     cy.get(`[data-cy=check-${sliceId}]`).click({ force: true });
     cy.get("[data-cy=update-slices-modal]").submit();

diff --git a/cypress/pages/customTypes/customTypeBuilder.js b/cypress/pages/customTypes/customTypeBuilder.js
@@ -6,7 +6,8 @@ class CustomTypeBuilder extends BaseBuilder {
   }
 
   get updateSliceZoneButton() {
-    return cy.get("[data-cy=update-slices]");
+    cy.contains("Add").click();
+    return cy.contains("Add from your library");
   }
 
   get headerCustomTypeName() {

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -1,4 +1,13 @@
-import { Button, Box, Switch } from "@prismicio/editor-ui";
+import {
+  Button,
+  Box,
+  Switch,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from "@prismicio/editor-ui";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { BaseStyles } from "theme-ui";
@@ -100,6 +109,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   sliceZone,
   tabId,
 }) => {
+  const isSlicesTemplatesSupported = true;
   const [formIsOpen, setFormIsOpen] = useState(false);
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const { remoteSlices, libraries, slices } = useSelector(
@@ -155,20 +165,40 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         <ListHeader
           actions={
             sliceZone ? (
-              <>
-                <Button onClick={onCreateNewSlice} startIcon="add">
-                  New slice
-                </Button>
-                {availableSlices.length > 0 ? (
-                  <Button
-                    data-cy="update-slices"
-                    onClick={onAddNewSlice}
-                    startIcon="edit"
-                  >
-                    Update Slices
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button variant="secondary" startIcon="add">
+                    Add
                   </Button>
-                ) : undefined}
-              </>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    startIcon={<Icon name="add" />}
+                    onSelect={onCreateNewSlice}
+                  >
+                    Create a new slice
+                  </DropdownMenuItem>
+
+                  {availableSlices.length > 0 ? (
+                    <DropdownMenuItem
+                      onSelect={onAddNewSlice}
+                      startIcon={<Icon name="folder" />}
+                    >
+                      Add from your library
+                    </DropdownMenuItem>
+                  ) : undefined}
+
+                  {isSlicesTemplatesSupported ? (
+                    <DropdownMenuItem
+                      onSelect={onAddNewSlice}
+                      startIcon={<Icon name="centerFocusWeak" />}
+                    >
+                      Add from template
+                    </DropdownMenuItem>
+                  ) : undefined}
+                </DropdownMenuContent>
+              </DropdownMenu>
             ) : undefined
           }
           toggle={
@@ -205,6 +235,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
             onAddNewSlice={onAddNewSlice}
             onCreateNewSlice={onCreateNewSlice}
             projectHasAvailableSlices={availableSlices.length > 0}
+            isSlicesTemplatesSupported={isSlicesTemplatesSupported}
           />
         )
       ) : undefined}

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/TabZone/index.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@prismicio/editor-ui";
-import type { FC } from "react";
+import { FC, Suspense } from "react";
 import type { DropResult } from "react-beautiful-dnd";
 import { useSelector } from "react-redux";
 import type { AnyObjectSchema } from "yup";
@@ -165,17 +165,19 @@ const TabZone: FC<TabZoneProps> = ({
         isRepeatableCustomType={customType.repeatable}
       />
 
-      <SliceZone
-        customType={customType}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        tabId={tabId}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        sliceZone={sliceZone}
-        onRemoveSharedSlice={onRemoveSharedSlice}
-        onCreateSliceZone={onCreateSliceZone}
-        onDeleteSliceZone={onDeleteSliceZone}
-        onSelectSharedSlices={onSelectSharedSlices}
-      />
+      <Suspense>
+        <SliceZone
+          customType={customType}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          tabId={tabId}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          sliceZone={sliceZone}
+          onRemoveSharedSlice={onRemoveSharedSlice}
+          onCreateSliceZone={onCreateSliceZone}
+          onDeleteSliceZone={onDeleteSliceZone}
+          onSelectSharedSlices={onSelectSharedSlices}
+        />
+      </Suspense>
     </Box>
   );
 };

diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx
@@ -1,4 +1,4 @@
-import { Button } from "@prismicio/editor-ui";
+import { Button, ButtonGroup } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 import { FaCode, FaPlus } from "react-icons/fa";
@@ -80,7 +80,7 @@ const Zone = ({
           actions={
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
             fields.length > 0 ? (
-              <>
+              <ButtonGroup size="medium" variant="secondary">
                 <Button onClick={() => setShowHints(!showHints)}>
                   {showHints ? "Hide" : "Show"} code snippets
                 </Button>
@@ -94,7 +94,7 @@ const Zone = ({
                 >
                   Add a new Field
                 </Button>
-              </>
+              </ButtonGroup>
             ) : undefined
           }
         >
@@ -107,7 +107,7 @@ const Zone = ({
             Actions={
               // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
               fields.length > 0 ? (
-                <>
+                <ButtonGroup size="medium" variant="secondary">
                   <ThemeUIButton
                     variant="buttons.lightSmall"
                     onClick={() => setShowHints(!showHints)}
@@ -139,7 +139,7 @@ const Zone = ({
                     />
                     Add a new Field
                   </ThemeUIButton>
-                </>
+                </ButtonGroup>
               ) : null
             }
           />

diff --git a/packages/slice-machine/src/components/List/List.css.ts b/packages/slice-machine/src/components/List/List.css.ts
@@ -26,5 +26,3 @@ export const header = style([
     },
   },
 ]);
-
-export const headerActions = sprinkles({ flexGrow: 1, justifyContent: "end" });
diff --git a/packages/slice-machine/src/components/List/List.tsx b/packages/slice-machine/src/components/List/List.tsx
@@ -1,4 +1,4 @@
-import { ButtonGroup, Text } from "@prismicio/editor-ui";
+import { Box, Text } from "@prismicio/editor-ui";
 import type { FC, PropsWithChildren, ReactNode } from "react";
 
 import * as styles from "./List.css";
@@ -23,12 +23,8 @@ export const ListHeader: FC<ListHeaderProps> = ({
       {children}
     </Text>
     {toggle}
-    <ButtonGroup
-      className={styles.headerActions}
-      size="medium"
-      variant="secondary"
-    >
+    <Box flexGrow={1} justifyContent="end">
       {actions}
-    </ButtonGroup>
+    </Box>
   </header>
 );
diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx
@@ -13,12 +13,14 @@ export type SliceZoneBlankSlateProps = {
   onAddNewSlice: () => void;
   onCreateNewSlice: () => void;
   projectHasAvailableSlices: boolean;
+  isSlicesTemplatesSupported: boolean;
 };
 
 export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   onCreateNewSlice,
   onAddNewSlice,
   projectHasAvailableSlices,
+  isSlicesTemplatesSupported,
 }) => {
   return (
     <Box justifyContent="center">
@@ -32,11 +34,16 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
           </BlankSlateDescription>
           <BlankSlateActions>
             <Button startIcon="add" onClick={onCreateNewSlice}>
-              New slice
+              Create a new slice
             </Button>
             {projectHasAvailableSlices && (
-              <Button startIcon="edit" onClick={onAddNewSlice}>
-                Update Slices
+              <Button startIcon="folder" onClick={onAddNewSlice}>
+                Add from your library
+              </Button>
+            )}
+            {isSlicesTemplatesSupported && (
+              <Button startIcon="centerFocusWeak" onClick={onAddNewSlice}>
+                Add from template
               </Button>
             )}
           </BlankSlateActions>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,5 +26,3 @@ export const header = style([ @@
         },
       },
     ]);
-    export const headerActions = sprinkles({ flexGrow: 1, justifyContent: "end" });