Skip to content

Commit 53ba9f5

Browse files
[Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX support via Renderer (#2059)
## Summary: ## With the recent change in how dropdown content is rendered, the use of the `<Renderer>` component brought along styling that is overly broad and caused text to be enlarged and shifted up. This bugfix adds styling that targets only instances of renderer styling within a dropdown. Issue: LEMS-2742 ## Test plan: 1. Open any article that contains dropdown widgets, like this one in [Test Everything](https://www.khanacademy.org/internal-courses/test-everything/test-everything-1/te-dropdown/a/dropdown-with-labels). (Note: this issue is only present in Articles - exercises are unaffected by this bug) 2. Dropdown answers and placeholders should appear centered within the border of the dropdown. ## Affected UI ### Before: ![Dropdown - Before](https://github.com/user-attachments/assets/0f04b89c-0747-4f02-a7dd-61c59b27c917) ### After: ![Dropdown - After](https://github.com/user-attachments/assets/ac9fb004-89fe-471f-84a2-70f1d591574a) Author: mark-fitzgerald Reviewers: catandthemachines, mark-fitzgerald, anakaren-rojas Required Reviewers: Approved By: catandthemachines Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x) Pull Request URL: #2059
1 parent bac1012 commit 53ba9f5

File tree

5 files changed

+17
-5
lines changed

5 files changed

+17
-5
lines changed

.changeset/twenty-cats-invent.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@khanacademy/perseus": patch
3+
---
4+
5+
[Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX support via Renderer

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
355355
Test visible label
356356
</label>
357357
<div
358-
class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
358+
class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
359359
>
360360
<span
361361
aria-atomic="true"
@@ -447,7 +447,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
447447
Test visible label
448448
</label>
449449
<div
450-
class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
450+
class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
451451
>
452452
<span
453453
aria-atomic="true"
@@ -539,7 +539,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
539539
Test visible label
540540
</label>
541541
<div
542-
class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
542+
class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
543543
>
544544
<span
545545
aria-atomic="true"

packages/perseus/src/styles/perseus-renderer.less

+6
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,12 @@
414414
padding: 25px 25px 0 0;
415415
}
416416

417+
.perseus-dropdown .perseus-renderer .paragraph {
418+
/* overriding overly broad selectors in .framework-perseus rules */
419+
margin-bottom: 0 !important;
420+
font-size: 18px !important;
421+
}
422+
417423
@import "./widgets/categorizer.less";
418424
@import "./widgets/dropdown.less";
419425
@import "./widgets/expression.less";

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
2020
class="default_xu2jcg"
2121
>
2222
<div
23-
class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
23+
class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
2424
>
2525
<span
2626
aria-atomic="true"
@@ -108,7 +108,7 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
108108
class="default_xu2jcg"
109109
>
110110
<div
111-
class="default_xu2jcg-o_O-menuWrapper_wvrnr4"
111+
class="default_xu2jcg-o_O-menuWrapper_wvrnr4 perseus-dropdown"
112112
>
113113
<span
114114
aria-atomic="true"

packages/perseus/src/widgets/dropdown/dropdown.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ class Dropdown extends React.Component<Props> implements Widget {
119119
<SingleSelect
120120
id={dropdownId}
121121
placeholder=""
122+
className="perseus-dropdown"
122123
onChange={(value) =>
123124
this._handleChange(parseInt(value))
124125
}

0 commit comments

Comments
 (0)