Skip to content

Commit

Permalink
[Numeric Input] - Show "Format Options" Tooltip as List (#1861)
Browse files Browse the repository at this point in the history 
## Summary:
Upon receiving focus, the Numeric Input field will show a tooltip indicating the format of the answer that it is expecting (assuming the input was configured with suggested formats). When multiple formats are indicated, they should be displayed as a list. Currently, the formats are indeed HTML list elements, but they don't display as list items (all formatting has been removed). This change fixes the visual formatting to display the items as a list, but only if there are two or more items. In the case of just one format example, the HTML list element is removed, and the content is displayed as regular text. Also, the first line in the tooltip is more of an introductory text than a format option, and therefore should not be included in the HTML list markup.

Issue: LEMS-2457

## Test plan:
**NOTE:** Only the HTML modifications can be testing locally (aka Storybook). The visual modifications must be verified in a ZND (or locally in Webapp containerized) because the styling that interferes with the list styling does not exist in Storybook.

### Storybook:
1. Launch Storybook
1. Navigate to Perseus Editor => Editor => [Demo](http://localhost:6006/?path=/story/perseuseditor-editorpage--demo)
1. Add a Numeric Input widget
1. Configure the widget to have just one format option
![Storybook - 1 Format Option](https://github.com/user-attachments/assets/b75a0b98-9132-425f-a272-6606c30ef80a)
1. Move focus to the input field in the preview area
   * The tooltip should **NOT** be a list
![Storybook - 1 Format Tooltip](https://github.com/user-attachments/assets/f7e52579-0bce-45fd-af35-bf6c22352bb2)
1. Configure the widget to have more than one format option
![Storybook - 3 Format Option](https://github.com/user-attachments/assets/8df2c22a-7a3d-44a7-9cd9-723cd1542bfa)
1. Move focus to the input field in the preview area
   * The tooltip should be a list, with the first line of text **NOT** in the list
![Storybook - 3 Format Tooltip](https://github.com/user-attachments/assets/17a34627-7ba6-4367-b45e-c858cd63c33e)

### Webapp (locally or in a [ZND](https://prod-znd-241118-markfitz-m06.khanacademy.org/)):
1. Log into the app with a valid account for use in editing exercises
1. Navigate to a Numeric Input example
   * Test Everything > Unit 2 > Lesson 2: Numeric input ([ZND](https://prod-znd-241118-markfitz-m06.khanacademy.org/internal-courses/test-everything/test-everything-2-without-mastery/te-numeric-input/e/numeric-input-exercise))
1. Edit the exercise
1. Configure the widget to have just one format option
![Storybook - 1 Format Option](https://github.com/user-attachments/assets/b75a0b98-9132-425f-a272-6606c30ef80a)
1. Move focus to the input field in the preview area (make sure the "Desktop" preview is selected)
   * The tooltip should **NOT** be a list
![Webapp - 1 Format Tooltip](https://github.com/user-attachments/assets/403091c1-e2ba-45aa-b5a7-c19aa76a6009)
1. Configure the widget to have more than one format option
![Storybook - 3 Format Option](https://github.com/user-attachments/assets/8df2c22a-7a3d-44a7-9cd9-723cd1542bfa)
1. Move focus to the input field in the preview area
   * The tooltip should be a list, with the first line of text **NOT** in the list
![Webapp - 3 Format Tooltip](https://github.com/user-attachments/assets/426f73bb-992a-44e8-8a8b-ed5b846fc2d0)

Author: mark-fitzgerald

Reviewers: mark-fitzgerald, jeremywiebe, SonicScrewdriver, catandthemachines

Required Reviewers:

Approved By: jeremywiebe, SonicScrewdriver, catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1861
  • Loading branch information
@mark-fitzgerald
mark-fitzgerald authored Dec 3, 2024
1 parent 129adeb commit 763a4ba
Show file tree
Hide file tree
Showing 10 changed files with 453 additions and 73 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-keys-smash.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": patch
---

[Numeric Input] - Show format options as a list
18 changes: 13 additions & 5 deletions packages/perseus/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,21 @@ exports[`server item renderer should snapshot: initial render 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down
15 changes: 12 additions & 3 deletions packages/perseus/src/components/input-with-examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,18 @@ class InputWithExamples extends React.Component<Props, State> {
render(): React.ReactNode {
const input = this._renderInput();

const examplesContent = _.map(this.props.examples, (example) => {
return "- " + example;
}).join("\n");
const examplesContent =
this.props.examples.length <= 2
? this.props.examples.join(" ") // A single item (with or without leading text) is not a "list"
: this.props.examples // 2 or more items should display as a list
.map((example, index) => {
// If the first example is bold, then it is most likely a heading/leading text.
// So, it shouldn't be part of the list.
return index === 0 && example.startsWith("**")
? `${example}\n`
: `- ${example}`;
})
.join("\n");

const showExamples =
this.props.shouldShowExamples && this.state.showExamples;
Expand Down
18 changes: 13 additions & 5 deletions packages/perseus/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1015,13 +1015,21 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down
22 changes: 9 additions & 13 deletions packages/perseus/src/styles/perseus-renderer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,24 +541,20 @@
}
}

// TODO(joel) - remove?
.perseus-tooltip {
.perseus-formats-tooltip {
background: #fff;
color: #777;
padding: 5px 10px;
width: 240px;
}

// CSS is evil; let's overwrite some styles. T_T
.perseus-formats-tooltip {
.perseus-tooltip;
color: #777;
}
.framework-perseus .perseus-formats-tooltip .paragraph > ul {
padding: 0;
margin: -20px 0 -16px 0;
> li {
list-style-type: none;
}
/*
Extra specificity needed to override other styles that are too broad.
Once we get a better framework in place (like CSS Modules), we can fix this selector.
*/
.framework-perseus .perseus-formats-tooltip .paragraph,
.framework-perseus .tooltipContainer .perseus-formats-tooltip .paragraph ul {
margin: 0;
}

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,0.25)) {
Expand Down
54 changes: 39 additions & 15 deletions ...ges/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,21 @@ exports[`graded-group-set should render all graded groups 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down Expand Up @@ -330,13 +338,21 @@ exports[`graded-group-set should render all graded groups 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down Expand Up @@ -557,13 +573,21 @@ exports[`graded-group-set should render all graded groups 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down
18 changes: 13 additions & 5 deletions packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,21 @@ exports[`graded group widget should snapshot 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down
36 changes: 26 additions & 10 deletions packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -796,13 +796,21 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down Expand Up @@ -1001,13 +1009,21 @@ exports[`group widget should snapshot: initial render 1`] = `
<div
class="paragraph"
data-perseus-paragraph-index="0"
>
<div
class="paragraph"
>
<strong>
Your answer should be
</strong>
</div>
</div>
<div
class="paragraph"
data-perseus-paragraph-index="1"
>
<ul>
<li>
<strong>
Your answer should be
</strong>
</li>
<li>
an integer, like
<span
Expand Down
Loading

0 comments on commit 763a4ba

Please sign in to comment.