[Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX support via Renderer #2059
+17
−5
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 2 commits
December 23, 2024 12:25
…after adding TeX support via Renderer
…how dropdown widget content is rendered.
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (17da52d) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2059If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2059 |
|
Size Change: +8 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
|
@catandthemachines or @anakaren-rojas would you mind reviewing this, please? |
catandthemachines
approved these changes
Jan 6, 2025
| @@ -414,6 +414,12 @@ | |||
| padding: 25px 25px 0 0; | |||
| } | |||
|
|
|||
| .perseus-dropdown .perseus-renderer .paragraph { | |||
| /* overriding overly specific selectors in .framework-perseus rules */ | |||
| margin-bottom: 0 !important; | |||
There was a problem hiding this comment.
Just checking, are these !important statements necessary? 🥲
There was a problem hiding this comment.
Unfortunately, yes. There is styling that is 5+ selectors that ends up taking priority over the various options that I tried. Using !important here lets me apply styling that is confined to this use case and doesn't have any unintentional side effects (i.e. bleed-outs).
There was a problem hiding this comment.
Just noticed that I should change "overly specific" to "overly broad".
SonicScrewdriver
deleted the
bugfix/LEMS-2742-dropdown-text-in-articles-shifted-up
branch
Merged
SonicScrewdriver
added a commit
that referenced
this pull request
Jan 6, 2025
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Minor Changes - [#1738](#1738) [`dbbc82f2d`](dbbc82f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - add scientific notation button / toggle to basic keypad ## @khanacademy/[email protected] ### Minor Changes - [#1990](#1990) [`37c642f24`](37c642f) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Allow keyboards to navigate and interact with images - [#1738](#1738) [`dbbc82f2d`](dbbc82f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - add scientific notation button / toggle to basic keypad ### Patch Changes - [#2061](#2061) [`d8b2f7eaf`](d8b2f7e) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - update terminology for angle sides - [#2071](#2071) [`bac10129b`](bac1012) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - This patch fixes our Perseus strings to ensure that they are double escaped for Lingui. - [#1952](#1952) [`617377147`](6173771) Thanks [@benchristel](https://github.com/benchristel)! - Internal: add and pass more regression tests for PerseusItem parser - [#2059](#2059) [`53ba9f5d1`](53ba9f5) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - [Dropdown] Bugfix - Text in dropdown was shifted up after adding TeX support via Renderer - Updated dependencies \[[`dbbc82f2d`](dbbc82f)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#1738](#1738) [`dbbc82f2d`](dbbc82f) Thanks [@anakaren-rojas](https://github.com/anakaren-rojas)! - add scientific notation button / toggle to basic keypad ### Patch Changes - Updated dependencies \[[`d8b2f7eaf`](d8b2f7e), [`bac10129b`](bac1012), [`37c642f24`](37c642f), [`617377147`](6173771), [`dbbc82f2d`](dbbc82f), [`53ba9f5d1`](53ba9f5)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - Updated dependencies \[[`dbbc82f2d`](dbbc82f)]: - @khanacademy/[email protected]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
Open any article that contains dropdown widgets, like this one in Test Everything.
(Note: this issue is only present in Articles - exercises are unaffected by this bug)
Dropdown answers and placeholders should appear centered within the border of the dropdown.
Affected UI
Before:
After: