Skip to content

Commit 42036cb

Browse files
levimykellevimykel
authored
chore(ai-slices): update add slice menu (#1568)
1 parent 19deca9 commit 42036cb

3 files changed

Lines changed: 82 additions & 86 deletions

File tree

‎packages/slice-machine/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx‎

Lines changed: 57 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { ActionList, ActionListItem, Box } from "@prismicio/editor-ui";
2-
import { FC } from "react";
3-
41
import {
2+
ActionList,
3+
ActionListItem,
54
BlankSlate,
65
BlankSlateActions,
7-
BlankSlateContent,
86
BlankSlateDescription,
7+
BlankSlateIcon,
98
BlankSlateTitle,
10-
} from "@/components/BlankSlate";
9+
} from "@prismicio/editor-ui";
10+
import { FC } from "react";
11+
1112
import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
12-
import { SliceMachinePrinterIcon } from "@/icons/SliceMachinePrinterIcon";
1313

1414
export type SliceZoneBlankSlateProps = {
1515
openUpdateSliceZoneModal: () => void;
@@ -31,62 +31,56 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
3131
const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
3232

3333
return (
34-
<Box
35-
flexGrow={1}
36-
justifyContent="center"
37-
data-testid="slice-zone-blank-slate"
38-
>
39-
<BlankSlate backgroundImage="/blank-slate-slice-zone.png">
40-
<BlankSlateContent>
41-
<Box justifyContent="center" padding={{ bottom: 16 }}>
42-
<SliceMachinePrinterIcon />
43-
</Box>
44-
<BlankSlateTitle>Add slices</BlankSlateTitle>
45-
<BlankSlateDescription>
46-
Slices are website sections that you can reuse on different pages
47-
with different content. Each slice has its own component in your
48-
code.
49-
</BlankSlateDescription>
50-
<BlankSlateActions>
51-
<ActionList>
52-
{aiSliceGenerationExperiment.eligible && (
53-
<ActionListItem
54-
startIcon="autoFixHigh"
55-
onClick={openGenerateSliceWithAiModal}
56-
description="Let AI instantly create a Slice for you."
57-
>
58-
Generate with AI
59-
</ActionListItem>
60-
)}
61-
<ActionListItem
62-
startIcon="add"
63-
onClick={openCreateSliceModal}
64-
description="Build a custom Slice your way."
65-
>
66-
Start from scratch
67-
</ActionListItem>
68-
{isSlicesTemplatesSupported ? (
69-
<ActionListItem
70-
startIcon="contentCopy"
71-
onClick={openSlicesTemplatesModal}
72-
description="Select from premade examples."
73-
>
74-
Use template
75-
</ActionListItem>
76-
) : undefined}
77-
{projectHasAvailableSlices ? (
78-
<ActionListItem
79-
startIcon="folder"
80-
onClick={openUpdateSliceZoneModal}
81-
description="Select from your own slices."
82-
>
83-
Select existing
84-
</ActionListItem>
85-
) : undefined}
86-
</ActionList>
87-
</BlankSlateActions>
88-
</BlankSlateContent>
89-
</BlankSlate>
90-
</Box>
34+
<BlankSlate data-testid="slice-zone-blank-slate" sx={{ width: 648 }}>
35+
<BlankSlateIcon
36+
lineColor="purple9"
37+
backgroundColor="purple5"
38+
name="add"
39+
size="large"
40+
/>
41+
<BlankSlateTitle size="big">Add slices</BlankSlateTitle>
42+
<BlankSlateDescription>
43+
Slices are website sections that you can reuse on different pages with
44+
different content. Each slice has its own component in your code.
45+
</BlankSlateDescription>
46+
<BlankSlateActions>
47+
<ActionList>
48+
{aiSliceGenerationExperiment.eligible && (
49+
<ActionListItem
50+
startIcon="autoFixHigh"
51+
onClick={openGenerateSliceWithAiModal}
52+
description="Let AI instantly create a Slice for you."
53+
>
54+
Generate with AI
55+
</ActionListItem>
56+
)}
57+
<ActionListItem
58+
startIcon="add"
59+
onClick={openCreateSliceModal}
60+
description="Build a custom Slice your way."
61+
>
62+
Start from scratch
63+
</ActionListItem>
64+
{isSlicesTemplatesSupported && (
65+
<ActionListItem
66+
startIcon="contentCopy"
67+
onClick={openSlicesTemplatesModal}
68+
description="Choose from ready-made examples."
69+
>
70+
Use a template
71+
</ActionListItem>
72+
)}
73+
{projectHasAvailableSlices && (
74+
<ActionListItem
75+
startIcon="folder"
76+
onClick={openUpdateSliceZoneModal}
77+
description="Select from your created Slices."
78+
>
79+
Reuse an existing Slice
80+
</ActionListItem>
81+
)}
82+
</ActionList>
83+
</BlankSlateActions>
84+
</BlankSlate>
9185
);
9286
};

‎packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import {
2-
Badge,
2+
Box,
33
Button,
44
DropdownMenu,
55
DropdownMenuContent,
66
DropdownMenuItem,
77
DropdownMenuTrigger,
88
Icon,
99
Switch,
10-
Text,
1110
} from "@prismicio/editor-ui";
1211
import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
1312
import { useEffect, useMemo, useState } from "react";
@@ -242,24 +241,19 @@ const SliceZone: React.FC<SliceZoneProps> = ({
242241
<DropdownMenuItem
243242
onSelect={openSlicesTemplatesModal}
244243
startIcon={<Icon name="contentCopy" size="large" />}
245-
description="Select from premade examples."
246-
endAdornment={
247-
<Text color="inherit" component="kbd">
248-
<Badge color="purple" title="New" />
249-
</Text>
250-
}
244+
description="Select from your created Slices."
251245
>
252-
Use template
246+
Use a template
253247
</DropdownMenuItem>
254248
) : undefined}
255249

256250
{availableSlicesToAdd.length > 0 ? (
257251
<DropdownMenuItem
258252
onSelect={openUpdateSliceZoneModal}
259253
startIcon={<Icon name="folder" size="large" />}
260-
description="Select from your own slices."
254+
description="Select from your created Slices."
261255
>
262-
Select existing
256+
Reuse an existing Slice
263257
</DropdownMenuItem>
264258
) : undefined}
265259
</DropdownMenuContent>
@@ -301,14 +295,22 @@ const SliceZone: React.FC<SliceZoneProps> = ({
301295
/>
302296
</BaseStyles>
303297
) : (
304-
<SliceZoneBlankSlate
305-
openUpdateSliceZoneModal={openUpdateSliceZoneModal}
306-
openCreateSliceModal={openCreateSliceModal}
307-
openGenerateSliceWithAiModal={openGenerateSliceWithAiModal}
308-
openSlicesTemplatesModal={openSlicesTemplatesModal}
309-
projectHasAvailableSlices={availableSlicesToAdd.length > 0}
310-
isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
311-
/>
298+
<Box
299+
flexDirection="column"
300+
flexGrow={1}
301+
justifyContent="center"
302+
alignItems="center"
303+
padding={{ block: 32 }}
304+
>
305+
<SliceZoneBlankSlate
306+
openUpdateSliceZoneModal={openUpdateSliceZoneModal}
307+
openCreateSliceModal={openCreateSliceModal}
308+
openGenerateSliceWithAiModal={openGenerateSliceWithAiModal}
309+
openSlicesTemplatesModal={openSlicesTemplatesModal}
310+
projectHasAvailableSlices={availableSlicesToAdd.length > 0}
311+
isSlicesTemplatesSupported={availableSlicesTemplates.length > 0}
312+
/>
313+
</Box>
312314
)
313315
) : undefined}
314316
{isUpdateSliceZoneModalOpen && (

‎playwright/pages/shared/TypeBuilderPage.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@ export class TypeBuilderPage extends BuilderPage {
105105
);
106106
this.sliceZoneSharedSliceCard = page.getByTestId("shared-slice-card");
107107
this.sliceZoneBlankSlateUseTemplateAction =
108-
this.sliceZoneBlankSlate.getByText("Use template", {
108+
this.sliceZoneBlankSlate.getByText("Use a template", {
109109
exact: true,
110110
});
111111
this.sliceZoneBlankSlateSelectExistingAction =
112-
this.sliceZoneBlankSlate.getByText("Select existing", {
112+
this.sliceZoneBlankSlate.getByText("Reuse an existing Slice", {
113113
exact: true,
114114
});
115115
this.sliceZoneBlankSlateCreateNewAction =
@@ -119,10 +119,10 @@ export class TypeBuilderPage extends BuilderPage {
119119
this.sliceZoneAddDropdown = page.getByTestId("add-new-slice-dropdown");
120120
this.sliceZoneAddDropdownUseTemplateAction = page
121121
.getByRole("menu")
122-
.getByText("Use template", { exact: true });
122+
.getByText("Use a template", { exact: true });
123123
this.sliceZoneAddDropdownSelectExistingAction = page
124124
.getByRole("menu")
125-
.getByText("Select existing", { exact: true });
125+
.getByText("Reuse an existing Slice", { exact: true });
126126
this.sliceZoneAddDropdownCreateNewAction = page
127127
.getByRole("menu")
128128
.getByText("Start from scratch", { exact: true });

0 commit comments

Comments
 (0)