Wonder Blocks: Updates WB Button instances to match new API (color -> actionType) (#2491)

## Summary:


Integrates Khan/wonder-blocks#2594 in Perseus.

Matches the recent WB release: https://khanacademy.slack.com/archives/C4PE1QM5Y/p1747321594567069

### Wonder Blocks changes:

#### Major changes:

- `Button`: Renames color prop to actionType and changes default to progressive.
- `Button`: Updates Button default theme to simplify its use and have more
consistency with the IconButton styles. Also makes some changes to get this
button closer to the design specs.
- `IconButton`: removes the internal use of the Khanmigo theme (not used in Perseus).


#### Perseus changes:

- `Button`: Updates all instances of Button in Perseus to use actionType instead
of color.


Issue: "none"

## Test plan:

Verify that all the checks pass and that the Button component works as expected
in Perseus.

Author: jandrade

Reviewers: ivyolamit, catandthemachines, jeremywiebe

Required Reviewers:

Approved By: catandthemachines, ivyolamit, jeremywiebe

Checks: ✅ 12 checks were successful, ⏹️  1 check was cancelled

Pull Request URL: #2491

Author: jandrade

.changeset/ten-lobsters-lie.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Updates WB Button instances to match new API (color -> actionType)

packages/perseus-editor/src/widgets/expression-editor.tsx

@@ -524,7 +524,7 @@ class AnswerOption extends React.Component<
                 <Button
                     size="small"
                     onClick={this.handleImSure}
-                    color="destructive"
+                    actionType="destructive"
                 >
                     I&apos;m sure!
                 </Button>
@@ -541,7 +541,7 @@ class AnswerOption extends React.Component<
             <Button
                 size="small"
                 onClick={this.handleDelete}
-                color="destructive"
+                actionType="destructive"
                 kind="tertiary"
                 style={styles.deleteButton}
             >

packages/perseus-editor/src/widgets/free-response-editor.tsx

@@ -209,7 +209,7 @@ const CriterionEditor = function (props: {
                 <View style={styles.deleteButtonContainer}>
                     <Button
                         aria-label={`Delete criterion ${props.index + 1}`}
-                        color="destructive"
+                        actionType="destructive"
                         disabled={!props.isDeletable}
                         kind="tertiary"
                         onClick={() => props.onDelete(props.index)}

packages/perseus/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -364,7 +364,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_qr7vlu"
+                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_bvghof"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -449,7 +449,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_qr7vlu"
+                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_bvghof"
                 id=":r6:"
                 role="combobox"
                 type="button"
@@ -534,7 +534,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Test ARIA label"
-                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_qr7vlu"
+                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_bvghof"
                 id=":r0:"
                 role="combobox"
                 type="button"

packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`server item renderer should snapshot: initial render 1`] = `
                   aria-invalid="false"
                   aria-label="Mock Widget"
                   aria-required="false"
-                  class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj"
+                  class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj"
                   id="mock-widget 1"
                   role="textbox"
                   type="text"

packages/perseus/src/widgets/dropdown/__snapshots__/dropdown.test.ts.snap

@@ -29,7 +29,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_qr7vlu"
+                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_bvghof"
                 id=":r3:"
                 role="combobox"
                 type="button"
@@ -108,7 +108,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 aria-haspopup="listbox"
                 aria-invalid="false"
                 aria-label="Select an answer"
-                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_qr7vlu"
+                class="button_vr44p2-o_O-shared_4y4ff7-o_O-default_bvghof"
                 id=":r0:"
                 role="combobox"
                 type="button"

packages/perseus/src/widgets/explanation/__snapshots__/explanation.test.ts.snap

@@ -21,17 +21,17 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
             aria-controls=":r1:"
             aria-disabled="false"
             aria-expanded="true"
-            class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1t67lz5-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
+            class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_y5mm15-o_O-small_oliyv9-o_O-inlineStyles_1s8anjv"
             role="button"
             type="button"
           >
             <span
-              class="text_f1191h-o_O-LabelSmall_b0rx6x-o_O-text_1s96g1x-o_O-smallText_9bce1o-o_O-textWithFocus_e296pg-o_O-inlineStyles_egvfd8"
+              class="text_f1191h-o_O-LabelSmall_b0rx6x-o_O-text_1s96g1x-o_O-smallText_9bce1o-o_O-inlineStyles_egvfd8"
             >
               Hide explanation!
             </span>
             <div
-              class="default_xu2jcg-o_O-iconWrapper_h4cn9t-o_O-endIconWrapper_l32m71-o_O-endIconWrapperTertiary_10fyztj"
+              class="default_xu2jcg-o_O-iconWrapper_3ynivu-o_O-endIconWrapper_1mx094c-o_O-endIconWrapperTertiary_9p0zpt-o_O-iconWrapperHovered_3hmsj"
             >
               <span
                 aria-hidden="true"
@@ -94,17 +94,17 @@ exports[`Explanation should snapshot: initial render 1`] = `
             aria-controls=":r0:"
             aria-disabled="false"
             aria-expanded="false"
-            class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1t67lz5-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
+            class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_y5mm15-o_O-small_oliyv9-o_O-inlineStyles_1s8anjv"
             role="button"
             type="button"
           >
             <span
-              class="text_f1191h-o_O-LabelSmall_b0rx6x-o_O-text_1s96g1x-o_O-smallText_9bce1o-o_O-textWithFocus_e296pg-o_O-inlineStyles_egvfd8"
+              class="text_f1191h-o_O-LabelSmall_b0rx6x-o_O-text_1s96g1x-o_O-smallText_9bce1o-o_O-inlineStyles_egvfd8"
             >
               Explanation
             </span>
             <div
-              class="default_xu2jcg-o_O-iconWrapper_h4cn9t-o_O-endIconWrapper_l32m71-o_O-endIconWrapperTertiary_10fyztj"
+              class="default_xu2jcg-o_O-iconWrapper_3ynivu-o_O-endIconWrapper_1mx094c-o_O-endIconWrapperTertiary_9p0zpt"
             >
               <span
                 aria-hidden="true"

packages/perseus/src/widgets/free-response/__snapshots__/free-response.test.tsx.snap

@@ -52,7 +52,7 @@ exports[`free-response widget should snapshot on mobile: first mobile render 1`]
                   aria-describedby=""
                   aria-invalid="false"
                   aria-required="false"
-                  class="textarea_6p4mp0-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-textarea_1x0fg6n"
+                  class="textarea_6p4mp0-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-textarea_1x0fg6n"
                   id=":r2:-labeled-field-field"
                   placeholder="test-placeholder"
                 />
@@ -134,7 +134,7 @@ exports[`free-response widget should snapshot: first render 1`] = `
                   aria-describedby=""
                   aria-invalid="false"
                   aria-required="false"
-                  class="textarea_6p4mp0-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-textarea_1x0fg6n"
+                  class="textarea_6p4mp0-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-textarea_1x0fg6n"
                   id=":r0:-labeled-field-field"
                   placeholder="test-placeholder"
                 />

packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap

@@ -66,7 +66,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                         autocapitalize="off"
                         autocomplete="off"
                         autocorrect="off"
-                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                         data-testid="input-with-examples"
                         id=":r0:"
                         tabindex="0"
@@ -87,7 +87,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe"
                 role="button"
                 type="button"
               >
@@ -144,7 +144,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                         autocapitalize="off"
                         autocomplete="off"
                         autocorrect="off"
-                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                         data-testid="input-with-examples"
                         id=":r3:"
                         tabindex="0"
@@ -165,7 +165,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe"
                 role="button"
                 type="button"
               >
@@ -222,7 +222,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                         autocapitalize="off"
                         autocomplete="off"
                         autocorrect="off"
-                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                         data-testid="input-with-examples"
                         id=":r6:"
                         tabindex="0"
@@ -243,7 +243,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe"
                 role="button"
                 type="button"
               >

packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap

@@ -132,7 +132,7 @@ exports[`graded group widget should snapshot 1`] = `
                         autocapitalize="off"
                         autocomplete="off"
                         autocorrect="off"
-                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                        class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                         data-testid="input-with-examples"
                         id=":r0:"
                         tabindex="0"
@@ -153,7 +153,7 @@ exports[`graded group widget should snapshot 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe"
                 role="button"
                 type="button"
               >

packages/perseus/src/widgets/graded-group/__snapshots__/graded-group.test.ts.snap

@@ -408,7 +408,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
             />
             <button
               aria-disabled="false"
-              class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
+              class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe"
               role="button"
               type="button"
             >

packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap

@@ -755,7 +755,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                             autocapitalize="off"
                             autocomplete="off"
                             autocorrect="off"
-                            class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                            class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                             data-testid="input-with-examples"
                             id=":r0:"
                             tabindex="0"
@@ -812,7 +812,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                             autocapitalize="off"
                             autocomplete="off"
                             autocorrect="off"
-                            class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1elaks2-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
+                            class="input_a5n1n-o_O-LabelMedium_1voxh4u-o_O-default_1kavdzs-o_O-defaultFocus_drkasj-o_O-inputWithExamples_1y6ajxo"
                             data-testid="input-with-examples"
                             id=":r3:"
                             tabindex="0"

packages/perseus/src/widgets/interactive-graphs/__snapshots__/interactive-graph.test.tsx.snap

@@ -2134,7 +2134,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_yxotth-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1mug5fd-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2400,7 +2400,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_yxotth-o_O-disabled_vmsefw-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1mug5fd-o_O-disabled_5vgqwg-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -2414,7 +2414,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_hrw3a6-o_O-disabled_ebci8n-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe-o_O-disabled_5vgqwg-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"
@@ -3526,7 +3526,7 @@ exports[`Interactive Graph question Should render predictably: first render 3`]
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-default_yxotth-o_O-inlineStyles_16y2sco"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1mug5fd-o_O-inlineStyles_16y2sco"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3792,7 +3792,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
             >
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_yxotth-o_O-disabled_vmsefw-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1mug5fd-o_O-disabled_5vgqwg-o_O-inlineStyles_1kc2paq"
                 id="perseus_mafs_remove_button"
                 role="button"
                 tabindex="-1"
@@ -3806,7 +3806,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
               </button>
               <button
                 aria-disabled="true"
-                class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_hrw3a6-o_O-disabled_ebci8n-o_O-inlineStyles_1kc2paq"
+                class="button_vr44p2-o_O-reset_1ck4g21-o_O-shared_1v12k51-o_O-default_1xd28xe-o_O-disabled_5vgqwg-o_O-inlineStyles_1kc2paq"
                 role="button"
                 tabindex="-1"
                 type="button"

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -427,7 +427,7 @@ const renderPointGraphControls = (props: {
                 <Button
                     id={REMOVE_BUTTON_ID}
                     kind="secondary"
-                    color="destructive"
+                    actionType="destructive"
                     // This button is meant to be interacted with by the mouse only
                     // Never allow learners to tab to this button
                     tabIndex={-1}
@@ -547,7 +547,7 @@ const renderPolygonGraphControls = (props: {
                     <Button
                         id={REMOVE_BUTTON_ID}
                         kind="secondary"
-                        color="destructive"
+                        actionType="destructive"
                         // Disable button when polygon is closed.
                         disabled={closedPolygon || !shouldShowRemoveButton}
                         // This button is meant to be interacted with by the mouse only