Show images on their own line when included in a radio widget.

[mark-fitzgerald]

Summary:

When images are added to a radio widget, they are often intended to be on their own line. Creators indicate this by entering two new-line (\n\n) characters. This gets rendered as a separate div.paragraph in the HTML. This code change assigns CSS to the elements that match this rendered pattern. Content that has only a single new-line character around the image are rendered with the same div.paragraph, and therefore do not receive this styling.

Issue: LEMS-1917

Test plan:

1. Launch Storybook locally (yarn start)
2. Navigate to "Perseus > Widgets > Radio > Select With Images"
3. Note the options that have images on their own line. (There should be only 1 that is not on its own line.)

Affected behavior:

Before

After

[github-actions]

Size Change: 0 B

Total Size: 839 kB

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.5 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	908 B
packages/perseus-editor/dist/es/index.js	268 kB
packages/perseus-error/dist/es/index.js	877 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/index.js	403 kB
packages/perseus/dist/es/strings.js	3.22 kB
packages/pure-markdown/dist/es/index.js	3.68 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.20%. Comparing base (dc0aded) to head (6816809).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1264      +/-   ##
==========================================
+ Coverage   68.99%   70.20%   +1.21%     
==========================================
  Files         477      481       +4     
  Lines      101842   101909      +67     
  Branches     7240    10294    +3054     
==========================================
+ Hits        70266    71550    +1284     
+ Misses      31396    30359    -1037     
+ Partials      180        0     -180     

see 142 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dc0aded...6816809. Read the comment docs.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/warm-wombats-yell.md, packages/perseus/src/styles/widgets/radio.less, packages/perseus/src/widgets/__stories__/radio.stories.tsx, packages/perseus/src/widgets/__testdata__/radio.testdata.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1264

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

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

[nishasy]

I'm curious about a case where there is text before AND after an image. Or maybe one with multiple images? Could you add those as more radio options in the story?

[mark-fitzgerald]

I'm curious about a case where there is text before AND after an image. Or maybe one with multiple images? Could you add those as more radio options in the story?

Added - one with text before and after the image, and another with just 2 images.

[benchristel]

The output looks great! Requesting changes because I don't think we can use :has yet. Maybe talk to the frontend infra team about re-running the browser numbers? It's been a few months since we last generated them, so maybe we can drop support for Safari < 15.4 now.

[benchristel]

Okay, you've convinced me — since this is purely additive CSS, it's unlikely to cause a regression in Safari < 15.4, where :has isn't supported. I think this is good to land.