Skip to content

Convert Aphrodite to CSS Modules in scrollable-view component #2613

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

Merged

Conversation

mark-fitzgerald
Copy link
Contributor

@mark-fitzgerald mark-fitzgerald commented Jun 16, 2025

Summary:

Simple move of styling into a separate CSS file.

Issue: LEMS-3184

Test plan:

  1. Open Storybook with any of the scrollable stories (locally, or from this PR).
  2. Open Storybook with the same scrollable story from the previous step (PROD).
  3. Compare the two visually and functionally.
    • There should be no difference between the two.

Copy link
Contributor

github-actions bot commented Jun 16, 2025

Size Change: -30 B (-0.01%)

Total Size: 473 kB

Filename Size Change
packages/perseus/dist/es/index.js 200 kB -30 B (-0.01%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.7 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 5.98 kB
packages/math-input/dist/es/index.js 98.6 kB
packages/math-input/dist/es/strings.js 1.61 kB
packages/perseus-core/dist/es/index.js 20.6 kB
packages/perseus-editor/dist/es/index.js 91.4 kB
packages/perseus-linter/dist/es/index.js 7.14 kB
packages/perseus-score/dist/es/index.js 9.23 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/strings.js 7.56 kB
packages/pure-markdown/dist/es/index.js 1.22 kB
packages/simple-markdown/dist/es/index.js 6.71 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Jun 16, 2025

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR2613

If you are working in Khan Academy's frontend, you can run the below command.

./tools/bump_perseus_version.ts -t PR2613

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR2613

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.

Looks GREAT! Thank you for cleaning this up.

Copy link
Contributor

@nishasy nishasy left a comment

Choose a reason for hiding this comment

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

Looks good to me!

/>
)}
<div
{...additionalProps}
role={role}
className={className}
Copy link
Contributor

Choose a reason for hiding this comment

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

Checking my understanding: Are you adding this className prop so people can override the styles later if needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. Override or add to.

…ain' into LEMS-3184-remove-style-objects-from-scrollable-view
@mark-fitzgerald mark-fitzgerald merged commit d02d6f9 into main Jun 30, 2025
8 checks passed
@mark-fitzgerald mark-fitzgerald deleted the LEMS-3184-remove-style-objects-from-scrollable-view branch June 30, 2025 23:02
nishasy added a commit that referenced this pull request Jul 1, 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/perseus-core@16.1.0

### Minor Changes

- [#2663](#2663)
[`d1299f6f7`](d1299f6)
Thanks [@benchristel](https://github.com/benchristel)! - Enable
`parseAndMigratePerseusItem` to parse answerless data, i.e. the return
value of `splitPerseusItem`.

### Patch Changes

- [#2649](#2649)
[`01cb73bef`](01cb73b)
Thanks [@nishasy](https://github.com/nishasy)! - [Interactive
Graph][locked figures] Add `weight` option to locked polygon and locked
polygon settings

## @khanacademy/keypad-context@3.0.22

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0

## @khanacademy/kmath@2.0.22

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0

## @khanacademy/math-input@26.0.11

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0
    -   @khanacademy/keypad-context@3.0.22

## @khanacademy/perseus@65.3.7

### Patch Changes

- [#2663](#2663)
[`d1299f6f7`](d1299f6)
Thanks [@benchristel](https://github.com/benchristel)! - Enable
`parseAndMigratePerseusItem` to parse answerless data, i.e. the return
value of `splitPerseusItem`.


- [#2649](#2649)
[`01cb73bef`](01cb73b)
Thanks [@nishasy](https://github.com/nishasy)! - [Interactive
Graph][locked figures] Add `weight` option to locked polygon and locked
polygon settings


- [#2613](#2613)
[`d02d6f9fe`](d02d6f9)
Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Convert
Aphrodite to CSS Modules in scrollable-view component

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0
    -   @khanacademy/keypad-context@3.0.22
    -   @khanacademy/kmath@2.0.22
    -   @khanacademy/math-input@26.0.11
    -   @khanacademy/perseus-linter@4.0.9
    -   @khanacademy/perseus-score@7.1.9

## @khanacademy/perseus-editor@25.1.1

### Patch Changes

- [#2649](#2649)
[`01cb73bef`](01cb73b)
Thanks [@nishasy](https://github.com/nishasy)! - [Interactive
Graph][locked figures] Add `weight` option to locked polygon and locked
polygon settings

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b),
[`d02d6f9fe`](d02d6f9)]:
    -   @khanacademy/perseus-core@16.1.0
    -   @khanacademy/perseus@65.3.7
    -   @khanacademy/keypad-context@3.0.22
    -   @khanacademy/kmath@2.0.22
    -   @khanacademy/math-input@26.0.11
    -   @khanacademy/perseus-linter@4.0.9
    -   @khanacademy/perseus-score@7.1.9

## @khanacademy/perseus-linter@4.0.9

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0

## @khanacademy/perseus-score@7.1.9

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0
    -   @khanacademy/kmath@2.0.22

## @khanacademy/perseus-dev-ui@5.5.6

### Patch Changes

- Updated dependencies
\[[`d1299f6f7`](d1299f6),
[`01cb73bef`](01cb73b)]:
    -   @khanacademy/perseus-core@16.1.0
    -   @khanacademy/kmath@2.0.22
    -   @khanacademy/math-input@26.0.11
    -   @khanacademy/perseus-linter@4.0.9
@ivyolamit ivyolamit added the project: new radio widget Pull requests that is related to the Radio Widget project that will build the new radio widget label Jul 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
olc-5.0.bc0e4 project: new radio widget Pull requests that is related to the Radio Widget project that will build the new radio widget
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants