Skip to content

Commit 312166b

Browse files
jandradejandrade
authored
Update Wonder Blocks dependencies (#2430)
## Summary: ### Wonder Blocks changes: | Package | From | To | | --- | --- | --- | | @khanacademy/wonder-blocks-banner | `4.1.11` | `4.1.12` | | [@khanacademy/wonder-blocks-button](https://github.com/khan/wonder-blocks) | `8.0.3` | `9.0.0` | | @khanacademy/wonder-blocks-dropdown | `10.0.3` | `10.0.4` | | @khanacademy/wonder-blocks-icon-button | `9.0.3` | `9.0.4` | | @khanacademy/wonder-blocks-popover | `6.0.6` | `6.0.7` | | @khanacademy/wonder-blocks-search-field | `5.1.11` | `5.1.12` | | @khanacademy/wonder-blocks-switch | `3.2.1` | `3.2.2` | | @khanacademy/wonder-blocks-tooltip | `4.1.11` | `4.1.12` | ### Perseus specific changes: - `perseus-editor`: Updates the `ExpressionEditor` widget to use a WB `Button` instance that resembles the previously supported `light` variant (now deprecated). - Internal: changes the root font size in the Storybook preview section to `62.5%`. This change is to match what we already do in webapp and wonder-blocks, as we define `10px` as the baseline for our `rem` units. Issue: "none" ## Test plan: 1. Navigate to `/?path=/docs/perseuseditor-widgets-expression-editor--docs`. 2. Verify that the `Delete` button in the `ExpressionEditor` widget works and looks as expected. 3. Click on the button and verify that the `Cancel` button appears and that looks fine. Also verify that the preview section of Storybook is not affected negatively by this change. <img width="1546" alt="Screenshot 2025-04-25 at 11 10 46 AM" src="https://github.com/user-attachments/assets/83811cfd-cdec-44ae-b409-ea282de4f743" /> Author: jandrade Reviewers: jeremywiebe, jandrade Required Reviewers: Approved By: jeremywiebe Checks: ✅ 8 checks were successful Pull Request URL: #2430
1 parent 8150cd9 commit 312166b

File tree

10 files changed

+324
-201
lines changed

10 files changed

+324
-201
lines changed

‎.changeset/grumpy-waves-divide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/perseus-editor": patch
3+
---
4+
5+
Updates the `ExpressionEditor` widget to use a WB `Button` instance that resembles the previously supported `light` variant (now deprecated).

‎.storybook/main.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,17 @@ const config: StorybookConfig = {
4848
// NOTE(kevinb): We customize the padding a bit so that so that stories
4949
// using the on-screen keypad render correctly. Storybook adds its own
5050
// padding as a class to <body> so we use !important to override that.
51+
// NOTE(jandrade): We also need to set the font size to 62.5% so that the
52+
// font size is consistent with the rest of the codebase. This is because
53+
// all Khan frontends now use rems as the default unit for measurements, and
54+
// we have defined the base font size to be 10px (62.5% of 16px). We set a
55+
// percentage instead of a pixel value so that it scales correctly when the
56+
// user changes their font size in the browser.
5157
previewHead: (head) => `
5258
${head}
5359
<style>
5460
html, body {
61+
font-size: 62.5%;
5562
padding: ${spacing.xSmall_8}px !important;
5663
padding-left: ${spacing.large_24}px !important;
5764
}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import Button from "@khanacademy/wonder-blocks-button";
99
import {Checkbox, LabeledTextField} from "@khanacademy/wonder-blocks-form";
1010
import {Strut} from "@khanacademy/wonder-blocks-layout";
11-
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
11+
import {color, sizing, spacing} from "@khanacademy/wonder-blocks-tokens";
1212
import {
1313
HeadingSmall,
1414
HeadingXSmall,
@@ -519,7 +519,11 @@ class AnswerOption extends React.Component<
519519
I&apos;m sure!
520520
</Button>
521521
<Strut size={spacing.small_12} />
522-
<Button size="small" onClick={this.handleCancelDelete} light>
522+
<Button
523+
size="small"
524+
onClick={this.handleCancelDelete}
525+
kind="secondary"
526+
>
523527
Cancel
524528
</Button>
525529
</>
@@ -528,7 +532,8 @@ class AnswerOption extends React.Component<
528532
size="small"
529533
onClick={this.handleDelete}
530534
color="destructive"
531-
light
535+
kind="tertiary"
536+
style={styles.deleteButton}
532537
>
533538
Delete
534539
</Button>
@@ -634,4 +639,7 @@ const styles = StyleSheet.create({
634639
buttonRow: {
635640
display: "flex",
636641
},
642+
deleteButton: {
643+
paddingInline: sizing.size_160,
644+
},
637645
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ exports[`Explanation should snapshot when expanded: expanded 1`] = `
2121
aria-controls=":r1:"
2222
aria-disabled="false"
2323
aria-expanded="true"
24-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1la56ro-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
24+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1dlh9ep-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
2525
role="button"
2626
type="button"
2727
>
@@ -94,7 +94,7 @@ exports[`Explanation should snapshot: initial render 1`] = `
9494
aria-controls=":r0:"
9595
aria-disabled="false"
9696
aria-expanded="false"
97-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1la56ro-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
97+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1dlh9ep-o_O-small_1rcykji-o_O-inlineStyles_1s8anjv"
9898
role="button"
9999
type="button"
100100
>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
8787
/>
8888
<button
8989
aria-disabled="false"
90-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1r63pnb"
90+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
9191
role="button"
9292
type="button"
9393
>
@@ -165,7 +165,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
165165
/>
166166
<button
167167
aria-disabled="false"
168-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1r63pnb"
168+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
169169
role="button"
170170
type="button"
171171
>
@@ -243,7 +243,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
243243
/>
244244
<button
245245
aria-disabled="false"
246-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1r63pnb"
246+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
247247
role="button"
248248
type="button"
249249
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ exports[`graded group widget should snapshot 1`] = `
153153
/>
154154
<button
155155
aria-disabled="false"
156-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1r63pnb"
156+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
157157
role="button"
158158
type="button"
159159
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
408408
/>
409409
<button
410410
aria-disabled="false"
411-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_1r63pnb"
411+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_hrw3a6"
412412
role="button"
413413
type="button"
414414
>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2134,7 +2134,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
21342134
>
21352135
<button
21362136
aria-disabled="false"
2137-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_lex4t8-o_O-inlineStyles_16y2sco"
2137+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_yxotth-o_O-inlineStyles_16y2sco"
21382138
id="perseus_mafs_remove_button"
21392139
role="button"
21402140
tabindex="-1"
@@ -2400,7 +2400,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
24002400
>
24012401
<button
24022402
aria-disabled="true"
2403-
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_lex4t8-o_O-disabled_1kv7j3o-o_O-inlineStyles_1kc2paq"
2403+
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_yxotth-o_O-disabled_vmsefw-o_O-inlineStyles_1kc2paq"
24042404
id="perseus_mafs_remove_button"
24052405
role="button"
24062406
tabindex="-1"
@@ -2414,7 +2414,7 @@ exports[`Interactive Graph question Should render predictably: after interaction
24142414
</button>
24152415
<button
24162416
aria-disabled="true"
2417-
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_1r63pnb-o_O-disabled_xik9y7-o_O-inlineStyles_1kc2paq"
2417+
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_hrw3a6-o_O-disabled_ebci8n-o_O-inlineStyles_1kc2paq"
24182418
role="button"
24192419
tabindex="-1"
24202420
type="button"
@@ -3526,7 +3526,7 @@ exports[`Interactive Graph question Should render predictably: first render 3`]
35263526
>
35273527
<button
35283528
aria-disabled="false"
3529-
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_lex4t8-o_O-inlineStyles_16y2sco"
3529+
class="button_vr44p2-o_O-shared_11fo0od-o_O-default_yxotth-o_O-inlineStyles_16y2sco"
35303530
id="perseus_mafs_remove_button"
35313531
role="button"
35323532
tabindex="-1"
@@ -3792,7 +3792,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
37923792
>
37933793
<button
37943794
aria-disabled="true"
3795-
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_lex4t8-o_O-disabled_1kv7j3o-o_O-inlineStyles_1kc2paq"
3795+
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_yxotth-o_O-disabled_vmsefw-o_O-inlineStyles_1kc2paq"
37963796
id="perseus_mafs_remove_button"
37973797
role="button"
37983798
tabindex="-1"
@@ -3806,7 +3806,7 @@ exports[`Interactive Graph question Should render predictably: first render 4`]
38063806
</button>
38073807
<button
38083808
aria-disabled="true"
3809-
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_1r63pnb-o_O-disabled_xik9y7-o_O-inlineStyles_1kc2paq"
3809+
class="button_vr44p2-o_O-shared_11fo0od-o_O-disabled_mqm918-o_O-default_hrw3a6-o_O-disabled_ebci8n-o_O-inlineStyles_1kc2paq"
38103810
role="button"
38113811
tabindex="-1"
38123812
type="button"

0 commit comments

Comments
 (0)