[ColorSync] Convert label-image widget to CSS Modules#3444
[ColorSync] Convert label-image widget to CSS Modules#3444Myranae wants to merge 10 commits intotb/testing-font-color-conversionfrom
Conversation
🗄️ Schema Change: No Changes ✅ |
|
Size Change: -75 B (-0.02%) Total Size: 495 kB
ℹ️ View Unchanged
|
🛠️ Item Splitting: No Changes ✅ |
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (ff8580e) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3444If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3444If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3444 |
…mage widget Aphrodite styles to CSS modules across answer-pill, hide-answers-toggle, marker, and label-image.
Myranae
force-pushed
the
tb/stacked-css-module-conversion
branch
from
db2383e to
8ddabc2
Compare
|
|
||
| import {usePerseusI18n} from "../../components/i18n-context"; | ||
|
|
||
| import styles from "./hide-answers-toggle.module.css"; |
There was a problem hiding this comment.
This import should be pulling in the styles object from hide-answers-toggle_legacy-styles.js file, since we are using Wonder Blocks <View> component.
There was a problem hiding this comment.
Updated and added to instructions :)
…r-conversion' into tb/stacked-css-module-conversion # Conflicts: # packages/perseus/src/widgets/label-image/marker.tsx
|
|
||
| const Wrapper = (props) => ( | ||
| <div className={css(styles.wrapper)}> | ||
| <div className={styles.wrapper}> |
There was a problem hiding this comment.
I'm inclined to make this a set of inline styles. I'm not sure what the purpose of this wrapper is, but since it is just used here in this story file, there is no need to make a CSS file for it. I recommend:
<div style={{position: "relative", height: "32px", width: "32px"}}>
<Marker {...props} />
</div>
|
|
||
| .instructions-caption { | ||
| font-family: inherit; | ||
| font-size: 15px; |
There was a problem hiding this comment.
My latest script update changes he px values to rem values. Recommending that this (and line-height be changed to their rem equivalent.
| @@ -0,0 +1,37 @@ | |||
| // TODO (LEMS-3815): Remove this file | |||
There was a problem hiding this comment.
Since we aren't using this file in the associated label-image.tsx file, we can delete this file. We only need these legacy files if we need to pass style objects to Wonder Blocks components. Since label-image.tsx is passing in a "calculated" object (based upon the marker property), there is no need to move it to a file like this one. We can refactor how the styling for the markers is done when we get to the CSS optimization phase.
|
Something is off about these regression snapshots. That will take a bit more investigation. |
3 participants
Summary:
Converts the label-image widget's Aphrodite styles to CSS modules as part of the ongoing CSS module migration. This is a pure refactor with no intended visual or behavioral changes.
Issue: LEMS-4028
Test plan: