[Locked Figure Labels] Add color select to locked figure labels settings

.changeset/purple-numbers-cover.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Locked Figure Labels] Add color select to locked figure labels settings

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.test.tsx

@@ -205,7 +205,7 @@ describe("LockedEllipseSettings", () => {
             );
 
             // Act
-            const colorSelect = screen.getByLabelText("color");
+            const colorSelect = screen.getAllByLabelText("color")[0];
             await userEvent.click(colorSelect);
             const colorOption = screen.getByText("pink");
             await userEvent.click(colorOption);

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx

@@ -502,7 +502,7 @@ describe("Locked Function Settings", () => {
                 );
 
                 // Act
-                const colorSelect = screen.getByLabelText("color");
+                const colorSelect = screen.getAllByLabelText("color")[0];
                 await userEvent.click(colorSelect);
                 const colorOption = screen.getByText("pink");
                 await userEvent.click(colorOption);

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.test.tsx

@@ -39,19 +39,6 @@ describe("Locked Label Settings", () => {
         expect(titleText).toBeInTheDocument();
     });
 
-    test("does not show color select when rendered within a locked figure (no onMove)", () => {
-        // Arrange
-        render(<LockedLabelSettings {...defaultProps} onMove={undefined} />, {
-            wrapper: RenderStateRoot,
-        });
-
-        // Act
-        const colorSwitch = screen.queryByLabelText("color");
-
-        // Assert
-        expect(colorSwitch).not.toBeInTheDocument();
-    });
-
     describe("Header interactions", () => {
         test("should show the correct coords in the header", () => {
             // Arrange

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-label-settings.tsx

@@ -130,19 +130,14 @@ export default function LockedLabelSettings(props: Props) {
             </LabelMedium>
 
             <View style={styles.row}>
-                {/* Color settings */}
-                {onMove && (
-                    <>
-                        <ColorSelect
-                            selectedValue={color}
-                            onChange={(newColor: LockedFigureColor) => {
-                                onChangeProps({color: newColor});
-                            }}
-                            style={styles.spaceUnder}
-                        />
-                        <Strut size={spacing.medium_16} />
-                    </>
-                )}
+                <ColorSelect
+                    selectedValue={color}
+                    onChange={(newColor: LockedFigureColor) => {
+                        onChangeProps({color: newColor});
+                    }}
+                    style={styles.spaceUnder}
+                />
+                <Strut size={spacing.medium_16} />
 
                 {/* Size settings */}
                 <LabelMedium tag="label" style={styles.row}>

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.test.tsx

@@ -192,7 +192,7 @@ describe("LockedLineSettings", () => {
         );
 
         // Act
-        const colorSelect = screen.getByLabelText("color");
+        const colorSelect = screen.getAllByLabelText("color")[0];
         await userEvent.click(colorSelect);
         const colorOption = screen.getByText("pink");
         await userEvent.click(colorOption);
@@ -424,7 +424,7 @@ describe("LockedLineSettings", () => {
             );
 
             // Act
-            const colorSelect = screen.getByLabelText("color");
+            const colorSelect = screen.getAllByLabelText("color")[0];
             await userEvent.click(colorSelect);
             const colorOption = screen.getByText("pink");
             await userEvent.click(colorOption);

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.test.tsx

@@ -241,7 +241,7 @@ describe("LockedPointSettings", () => {
         );
 
         // Act
-        const colorSelect = screen.getByLabelText("color");
+        const colorSelect = screen.getAllByLabelText("color")[0];
         await userEvent.click(colorSelect);
         await userEvent.click(screen.getByText("blue"));
 

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.test.tsx

@@ -412,7 +412,7 @@ describe("LockedPolygonSettings", () => {
             );
 
             // Act
-            const colorSelect = screen.getByLabelText("color");
+            const colorSelect = screen.getAllByLabelText("color")[0];
             await userEvent.click(colorSelect);
             const colorOption = screen.getByText("pink");
             await userEvent.click(colorOption);

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.test.tsx

@@ -253,7 +253,7 @@ describe("Locked Vector Settings", () => {
             );
 
             // Act
-            const colorSelect = screen.getByLabelText("color");
+            const colorSelect = screen.getAllByLabelText("color")[0];
             await userEvent.click(colorSelect);
             const colorOption = screen.getByText("pink");
             await userEvent.click(colorOption);