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

…ngs (#1693)

## Summary:
Add back the color select into the locked figure labels. The content authors
would be able to use the color select to specify colors separately from the
figure color itself.

Charlie made a good point:
> I like having the dropdown option. I imagine it would primarily be useful in the case where a label overlaps another figure, where we might need to choose a color based on having adequate color contrast with that other figure. (I hope that case would be infrequent, since it would also introduce labeling ambiguities for sighted users.)

Issue: https://khanacademy.atlassian.net/browse/LEMS-2431

## Test plan:
`yarn jest`

Storybook
- Go to http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--mafs-with-locked-figure-labels-all-flags
- Check that all the locked labels have color selects
- Confirm that the color select changes the color
- Confirm that changing the overall figure's color select still overrides the label color


<img width="389" alt="Screenshot 2024-09-27 at 3 35 05 PM" src="https://github.com/user-attachments/assets/84c7ec2d-2e52-4e3d-9299-1045cd220698">

Author: nishasy

Reviewers: anakaren-rojas, #perseus, benchristel, catandthemachines

Required Reviewers:

Approved By: anakaren-rojas

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1693

.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);