Skip to content

Make Hint Editor buttons prettier - #3959

Merged
nishasy merged 5 commits into
mainfrom
prettify-hints
Jul 28, 2026
Merged

Make Hint Editor buttons prettier#3959
nishasy merged 5 commits into
mainfrom
prettify-hints

Conversation

@nishasy

@nishasy nishasy commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Summary:

  • Use WB icon buttons for movement buttons
  • Use WB button for "Add a hint" button
  • Use WB button for "Remove a hint" button

Also updated add/remove hint buttons inside Graded Group widget.

Issue: none

Test plan:

pnpm jest packages/perseus-editor/src/__tests__/hint-editor.test.tsx

Storybook

  • /?path=/story/editors-editorpage--demo
Before After
Screenshot 2026-07-27 at 5 34 00 PM Screenshot 2026-07-27 at 5 34 04 PM
Screenshot 2026-07-27 at 5 34 13 PM Screenshot 2026-07-27 at 5 34 19 PM
Screenshot 2026-07-27 at 5 34 43 PM Screenshot 2026-07-27 at 5 34 51 PM
Screenshot 2026-07-27 at 5 35 11 PM Screenshot 2026-07-27 at 5 35 16 PM
Screenshot 2026-07-27 at 5 35 24 PM Screenshot 2026-07-27 at 5 35 40 PM

- Use WB icon buttons for movement buttons
- Use WB button for "Add a hint" button
- Use WB button for "Remove a hint" button

Also updated add/remove hint buttons inside Graded Group widget.

Issue: none

Test plan:
`pnpm jest packages/perseus-editor/src/__tests__/hint-editor.test.tsx`

Storybook
- `/?path=/story/editors-editorpage--demo`
@nishasy nishasy self-assigned this Jul 28, 2026
@github-actions

Copy link
Copy Markdown
Contributor

npm Snapshot

Want to try this PR's changes before it merges? Comment /snapshot below and we'll publish an npm snapshot you can install right away.

@github-actions

github-actions Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Size Change: -231 B (-0.04%)

Total Size: 516 kB

📦 View Changed
Filename Size Change
packages/perseus-editor/dist/es/index.js 104 kB -231 B (-0.22%)
ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 20.6 kB
packages/keypad-context/dist/es/index.js 1 kB
packages/kmath/dist/es/index.js 6.31 kB
packages/math-input/dist/es/index.js 98.6 kB
packages/math-input/dist/es/strings.js 1.63 kB
packages/perseus-core/dist/es/index.item-splitting.js 12.9 kB
packages/perseus-core/dist/es/index.js 27.8 kB
packages/perseus-linter/dist/es/index.js 10.1 kB
packages/perseus-score/dist/es/index.js 9.86 kB
packages/perseus-utils/dist/es/index.js 403 B
packages/perseus/dist/es/index.js 202 kB
packages/perseus/dist/es/strings.js 12.8 kB
packages/pure-markdown/dist/es/index.js 1.39 kB
packages/simple-markdown/dist/es/index.js 6.12 kB

compressed-size-action

@nishasy
nishasy requested a review from a team July 28, 2026 16:39
@nishasy
nishasy marked this pull request as ready for review July 28, 2026 16:39
@nishasy
nishasy requested a review from mark-fitzgerald July 28, 2026 16:40
<button
type="button"
className={this.props.isLast ? "hidden" : ""}
<span

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nit: Since this is having display: flex applied to it (which is essentially a "block" format), then this should probably be a <div> element instead of a <span>. It's a small semantic thing, and definitely not a blocker.

@mark-fitzgerald mark-fitzgerald left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Styling setup looks good. Revised UI for the hints editor looks fabulous! Thank you!!

@nishasy
nishasy merged commit fe22345 into main Jul 28, 2026
10 checks passed
@nishasy
nishasy deleted the prettify-hints branch July 28, 2026 19:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants