Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove z-index tokens, constants, and classes that place SOME widgets above the doodlepad. #2170

Merged
merged 10 commits into from
Feb 3, 2025

Conversation

nedredmond
Copy link
Contributor

Summary

I did this in two passes -- one commit to remove above scratchpad, and a second for interactive, which seems to be used for the same purpose. Both place widgets above the scratchpad doodlepad, which has long led to many bugs.

  • remove all references to "above scratchpad"
  • remove z-index from more widgets

Issue: TUT-1059

@nedredmond
Copy link
Contributor Author

I'll do some testing once I get an npm artifact.

@nedredmond nedredmond requested a review from a team January 29, 2025 18:29
Copy link
Contributor

github-actions bot commented Jan 29, 2025

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (25a97be) and published it to npm. You
can install it using the tag PR2170.

Example:

yarn add @khanacademy/perseus@PR2170

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2170

Copy link
Contributor

github-actions bot commented Jan 29, 2025

Size Change: -162 B (-0.01%)

Total Size: 1.48 MB

Filename Size Change
packages/perseus/dist/es/index.js 382 kB -162 B (-0.04%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 86.8 kB
packages/math-input/dist/es/index.js 77.6 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 43.5 kB
packages/perseus-editor/dist/es/index.js 688 kB
packages/perseus-linter/dist/es/index.js 22.2 kB
packages/perseus-score/dist/es/index.js 113 kB
packages/perseus/dist/es/strings.js 5.82 kB
packages/pure-markdown/dist/es/index.js 3.66 kB
packages/simple-markdown/dist/es/index.js 12.5 kB

compressed-size-action

@@ -416,7 +416,7 @@ class Graph extends React.Component<Props> {

return (
<div
className="graphie-container above-scratchpad"
className="graphie-container blank-background"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Swapped because above-scratchpad adds blank-background styles in perseus-renderer.less

@@ -161,7 +161,7 @@ class Measurer extends React.Component<Props> implements Widget {
<div
className={
"perseus-widget perseus-widget-measurer " +
"graphie-container above-scratchpad"
"graphie-container blank-background"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too, ensuring we don't lose nested styles

@nedredmond
Copy link
Contributor Author

nedredmond commented Jan 29, 2025

whoops my branch is completely mis-named. oh well

@nedredmond
Copy link
Contributor Author

Works as expected!

Screen.Recording.2025-01-30.at.11.55.58.AM.mov

@nedredmond
Copy link
Contributor Author

@MikeKlemarewski added you mostly as FYI

Copy link
Contributor

@SonicScrewdriver SonicScrewdriver left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not currently able to test this in webapp myself due to some dev env issues with bumping Perseus, but this looks sound to me!

I only had one nit about the possibility of fully deleting the deprecated style.

It would be good to test the Numeric Input / Input Number widgets to make sure everything is working as expected (as they did use the Interactive style), but I think we're good to go otherwise. :) I don't think we have many, if any, uses of the Plotter widget anymore.

Thank you for a great improvement! Not sure why we ever tried to show widgets above the scratchpad myself.

@@ -168,6 +168,9 @@ export const ClassNames = {
SELECTED: "perseus-radio-selected",
OPTION_CONTENT: "perseus-radio-option-content",
},
/**
* @deprecated This used to add a z-index of 3. Now it does nothing.
*/
INTERACTIVE: "perseus-interactive",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little less familiar with this file, but would it be possible to remove this style now? If the style is doing nothing now, it seems like it could be a fairly safe thing to clean up!

The only consumers of it are the widgets already in this PR, along with two more:

  • Input with Examples (A sub component of Numeric Input / Input Number that is used for desktop views)
  • Plotter

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in the API so I was hesitant to make any breaking changes.

I wasn't sure about the purpose of this enum. Could this be used as a selector? If so, maybe I should restore the class and just delete the styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll explore uses of this enum, but it would be a breaking change, which would lead to a major version bump.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any consumers of ClassNames so I think it's safe to remove it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the Perseus API is internal? At least this was. Removed it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent call, Sarah

@nedredmond nedredmond force-pushed the ned/revert-portal-attr branch from 7f8abaf to 9f494ca Compare February 3, 2025 14:43
@nedredmond nedredmond merged commit 7f88f17 into main Feb 3, 2025
7 of 8 checks passed
@nedredmond nedredmond deleted the ned/revert-portal-attr branch February 3, 2025 16:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants