Skip to content
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.

Sign up for GitHub

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

Remove PropCheckBox #1479

Merged
merged 15 commits into from
Aug 5, 2024
Merged

Remove PropCheckBox #1479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f348b09
remove from expression-editor
handeyeco Aug 2, 2024
13f92c1
rm from graph-settings
handeyeco Aug 2, 2024
ae7fd1c
rm from interactive-graph-settings
handeyeco Aug 2, 2024
69ebeb5
rm categorizer-editor
handeyeco Aug 2, 2024
bc9d6e4
rm cs-program-editor
handeyeco Aug 2, 2024
3575b2a
rm iframe-editor
handeyeco Aug 2, 2024
5ef986c
rm from matcher-editor
handeyeco Aug 2, 2024
7b36cdd
rm from measurer-editor
handeyeco Aug 2, 2024
40279c7
rm from number-line-editor
handeyeco Aug 2, 2024
5209d29
rm from passage-editor
handeyeco Aug 2, 2024
991d9b7
rm from sorter-editor
handeyeco Aug 2, 2024
027fb64
rm from radio-editor
handeyeco Aug 2, 2024
0c261a9
rm from numeric-input-editor
handeyeco Aug 2, 2024
74c13ce
remove prop-check-box
handeyeco Aug 2, 2024
bb07c8a
changeset
handeyeco Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/four-windows-retire.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@khanacademy/perseus": major
"@khanacademy/perseus-editor": patch
---

Remove PropCheckBox component from Perseus; use WB instead
27 changes: 17 additions & 10 deletions packages/perseus-editor/src/components/graph-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
KhanMath,
Util,
} from "@khanacademy/perseus";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import createReactClass from "create-react-class";
import PropTypes from "prop-types";
import * as React from "react";
import ReactDOM from "react-dom";
import _ from "underscore";

const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
const {ButtonGroup, InfoTip, RangeInput} = components;

const defaultBackgroundImage = {
url: null,
Expand Down Expand Up @@ -521,10 +522,12 @@
/>
</div>
<div className="perseus-widget-left-col">
<PropCheckBox
<Checkbox
label="Show tooltips"
showTooltips={this.props.showTooltips}
onChange={this.change}
checked={this.props.showTooltips}
onChange={(value) => {
this.change({showTooltips: value});
}}

Check warning on line 530 in packages/perseus-editor/src/components/graph-settings.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/components/graph-settings.tsx#L529-L530 

Added lines #L529 - L530 were not covered by tests
/>
</div>
</div>
Expand Down Expand Up @@ -566,17 +569,21 @@
<div className="misc-settings">
<div className="perseus-widget-row">
<div className="perseus-widget-left-col">
<PropCheckBox
<Checkbox
label="Show ruler"
showRuler={this.props.showRuler}
onChange={this.change}
checked={this.props.showRuler}
onChange={(value) => {
this.change({showRuler: value});
}}

Check warning on line 577 in packages/perseus-editor/src/components/graph-settings.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/components/graph-settings.tsx#L576-L577 

Added lines #L576 - L577 were not covered by tests
/>
</div>
<div className="perseus-widget-right-col">
<PropCheckBox
<Checkbox
label="Show protractor"
showProtractor={this.props.showProtractor}
onChange={this.change}
checked={this.props.showProtractor}
onChange={(value) => {
this.change({showProtractor: value});
}}
/>
</div>
</div>
Expand Down
19 changes: 12 additions & 7 deletions packages/perseus-editor/src/components/interactive-graph-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
} from "@khanacademy/perseus";
import Banner from "@khanacademy/wonder-blocks-banner";
import {View} from "@khanacademy/wonder-blocks-core";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {css, StyleSheet} from "aphrodite";
import * as React from "react";
Expand All @@ -20,7 +21,7 @@

import type {PerseusImageBackground} from "@khanacademy/perseus";

const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
const {ButtonGroup, InfoTip, RangeInput} = components;

const defaultBackgroundImage = {
url: null,
Expand Down Expand Up @@ -547,10 +548,12 @@
</LabeledRow>
</div>
<div className="perseus-widget-left-col">
<PropCheckBox
<Checkbox
label="Show tooltips"
showTooltips={this.props.showTooltips}
onChange={this.change}
checked={this.props.showTooltips}
onChange={(value) => {
this.change({showTooltips: value});
}}

Check warning on line 556 in packages/perseus-editor/src/components/interactive-graph-settings.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/components/interactive-graph-settings.tsx#L555-L556 

Added lines #L555 - L556 were not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: It seems like this might not have had coverage before, but it might be easy to cover with something like the following added to the graph-settings.test.tsx file. Looks like there are a number of places marked as missing coverage. Probably not necessary to fix all the coverage, but here's a possible test here at least:

test("calls onChange when tooltips label is changed", async () => {
        // Arrange
        const onChange = jest.fn();
        render(
            <GraphSettings
                editableSettings={["graph"]}
                showTooltips={true}
                onChange={onChange}
            />,
        );

        // Act
        const checkbox = screen.getByRole("checkbox", {
            name: "Show tooltips",
        });
        await userEvent.click(checkbox);

        // Assert
        expect(onChange).toHaveBeenCalledWith(
            expect.objectContaining({showTooltips: false}),
            undefined,
        );
    });

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the suggestion! I think I'm going to defer to the interactive-graph team to add tests in a separate PR if they find them useful. Happy to do a review though.

/>
</div>
</div>
Expand Down Expand Up @@ -585,10 +588,12 @@

<View style={styles.protractorSection}>
<View style={styles.checkboxRow}>
<PropCheckBox
<Checkbox
label="Show protractor"
showProtractor={this.props.showProtractor}
onChange={this.change}
checked={this.props.showProtractor}
onChange={(value) => {
this.change({showProtractor: value});
}}
style={styles.resetSpaceTop}
/>
</View>
Expand Down
27 changes: 27 additions & 0 deletions packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,33 @@ describe("numeric-input-editor", () => {
expect(onChangeMock).toBeCalledWith({coefficient: true});
});

it("should be possible to select strictly match only these formats", async () => {
const onChangeMock = jest.fn();

render(<NumericInputEditor onChange={onChangeMock} />);

await userEvent.click(screen.getByLabelText("Toggle options"));
await userEvent.click(
screen.getByRole("checkbox", {
name: "Strictly match only these formats",
}),
);

expect(onChangeMock).toBeCalledWith({
answers: [
{
answerForms: [],
maxError: null,
message: "",
simplify: "required",
status: "correct",
strict: true,
value: null,
},
],
});
});

it("should be possible to update label text", async () => {
const onChangeMock = jest.fn();

Expand Down
12 changes: 7 additions & 5 deletions packages/perseus-editor/src/widgets/categorizer-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ import {
Changeable,
EditorJsonify,
} from "@khanacademy/perseus";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import PropTypes from "prop-types";
import * as React from "react";
import _ from "underscore";

const {PropCheckBox, TextListEditor} = components;
const {TextListEditor} = components;
const Categorizer = CategorizerWidget.widget;

type Props = any;
Expand Down Expand Up @@ -45,11 +46,12 @@ class CategorizerEditor extends React.Component<Props> {
return (
<div>
<div className="perseus-widget-row">
<PropCheckBox
<Checkbox
label="Randomize item order"
labelAlignment="right"
randomizeItems={this.props.randomizeItems}
onChange={this.props.onChange}
checked={this.props.randomizeItems}
onChange={(value) => {
this.props.onChange({randomizeItems: value});
}}
/>
</div>
Categories:
Expand Down
19 changes: 12 additions & 7 deletions packages/perseus-editor/src/widgets/cs-program-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@
Log,
} from "@khanacademy/perseus";
import {Errors} from "@khanacademy/perseus-core";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import $ from "jquery";
import PropTypes from "prop-types";
import * as React from "react";
import _ from "underscore";

import BlurInput from "../components/blur-input";

const {InfoTip, PropCheckBox} = components;
const {InfoTip} = components;

const DEFAULT_WIDTH = 400;
const DEFAULT_HEIGHT = 400;
Expand Down Expand Up @@ -220,20 +221,24 @@
/>
</label>
<br />
<PropCheckBox
<Checkbox

Check warning on line 224 in packages/perseus-editor/src/widgets/cs-program-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/cs-program-editor.tsx#L224 

Added line #L224 was not covered by tests
label="Show Editor"
showEditor={this.props.showEditor}
onChange={this.props.onChange}
checked={this.props.showEditor}
onChange={(value) => {
this.props.onChange({showEditor: value});
}}

Check warning on line 229 in packages/perseus-editor/src/widgets/cs-program-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/cs-program-editor.tsx#L226-L229 

Added lines #L226 - L229 were not covered by tests
/>
<InfoTip>
If you show the editor, you should use the "full-width"
alignment to make room for the width of the editor.
</InfoTip>
<br />
<PropCheckBox
<Checkbox

Check warning on line 236 in packages/perseus-editor/src/widgets/cs-program-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/cs-program-editor.tsx#L236 

Added line #L236 was not covered by tests
label="Show Buttons"
showButtons={this.props.showButtons}
onChange={this.props.onChange}
checked={this.props.showButtons}
onChange={(value) => {
this.props.onChange({showButtons: value});
}}

Check warning on line 241 in packages/perseus-editor/src/widgets/cs-program-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/cs-program-editor.tsx#L238-L241 

Added lines #L238 - L241 were not covered by tests
/>
<br />
<label>
Expand Down
36 changes: 19 additions & 17 deletions packages/perseus-editor/src/widgets/expression-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Expression,
PerseusExpressionAnswerFormConsidered,
} from "@khanacademy/perseus";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import {isTruthy} from "@khanacademy/wonder-stuff-core";
// eslint-disable-next-line import/no-extraneous-dependencies
import lens from "hubble";
Expand All @@ -17,7 +18,7 @@ import SortableArea from "../components/sortable";

import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";

const {InfoTip, PropCheckBox, TextInput} = components;
const {InfoTip, TextInput} = components;

type Props = {
widgetId?: any;
Expand Down Expand Up @@ -218,12 +219,12 @@ class ExpressionEditor extends React.Component<Props> {
</div>

<div>
<PropCheckBox
times={this.props.times}
onChange={this.props.onChange}
labelAlignment="right"
label="Use × for rendering multiplication instead of a
center dot."
<Checkbox
label="Use × for rendering multiplication instead of a center dot."
checked={this.props.times}
onChange={(value) => {
this.props.onChange({times: value});
}}
/>
<InfoTip>
<p>
Expand Down Expand Up @@ -542,11 +543,12 @@ class AnswerOption extends React.Component<
</div>

<div className="answer-option">
<PropCheckBox
form={this.props.form}
onChange={this.props.onChange}
labelAlignment="right"
<Checkbox
label="Answer expression must have the same form."
checked={this.props.form}
onChange={(value) => {
this.props.onChange({form: value});
}}
/>
<InfoTip>
<p>
Expand All @@ -558,12 +560,12 @@ class AnswerOption extends React.Component<
</div>

<div className="answer-option">
<PropCheckBox
simplify={this.props.simplify}
onChange={this.props.onChange}
labelAlignment="right"
label="Answer expression must be fully expanded and
simplified."
<Checkbox
label="Answer expression must be fully expanded and simplified."
checked={this.props.simplify}
onChange={(value) => {
this.props.onChange({simplify: value});
}}
/>
<InfoTip>
<p>
Expand Down
21 changes: 12 additions & 9 deletions packages/perseus-editor/src/widgets/iframe-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
/* eslint-disable @khanacademy/ts-no-error-suppressions */
/* eslint-disable react/sort-comp */
import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
import {Changeable, EditorJsonify} from "@khanacademy/perseus";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import PropTypes from "prop-types";
import * as React from "react";
import _ from "underscore";

import BlurInput from "../components/blur-input";

const {PropCheckBox} = components;

type PairEditorProps = any;

/**
Expand Down Expand Up @@ -174,16 +173,20 @@
onChange={this.change("height")}
/>
</label>
<PropCheckBox
<Checkbox

Check warning on line 176 in packages/perseus-editor/src/widgets/iframe-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/iframe-editor.tsx#L176 

Added line #L176 was not covered by tests
label="Allow full screen"
allowFullScreen={this.props.allowFullScreen}
onChange={this.props.onChange}
checked={this.props.allowFullScreen}
onChange={(value) => {
this.props.onChange({allowFullScreen: value});
}}

Check warning on line 181 in packages/perseus-editor/src/widgets/iframe-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/iframe-editor.tsx#L178-L181 

Added lines #L178 - L181 were not covered by tests
/>
<br />
<PropCheckBox
<Checkbox

Check warning on line 184 in packages/perseus-editor/src/widgets/iframe-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/iframe-editor.tsx#L184 

Added line #L184 was not covered by tests
label="Allow iframe content to redirect the page"
allowTopNavigation={this.props.allowTopNavigation}
onChange={this.props.onChange}
checked={this.props.allowTopNavigation}
onChange={(value) => {
this.props.onChange({allowTopNavigation: value});
}}

Check warning on line 189 in packages/perseus-editor/src/widgets/iframe-editor.tsx

View check run for this annotation

Codecov / codecov/patch

packages/perseus-editor/src/widgets/iframe-editor.tsx#L186-L189 

Added lines #L186 - L189 were not covered by tests
/>
</div>
);
Expand Down
19 changes: 12 additions & 7 deletions packages/perseus-editor/src/widgets/matcher-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/* eslint-disable react/forbid-prop-types, react/sort-comp */
import {components} from "@khanacademy/perseus";
import {Checkbox} from "@khanacademy/wonder-blocks-form";
import PropTypes from "prop-types";
import * as React from "react";
import _ from "underscore";

const {InfoTip, PropCheckBox, TextListEditor} = components;
const {InfoTip, TextListEditor} = components;

type Props = any;

Expand Down Expand Up @@ -79,10 +80,12 @@ class MatcherEditor extends React.Component<Props> {
/>
</div>
<div>
<PropCheckBox
<Checkbox
label="Order of the matched pairs matters:"
orderMatters={this.props.orderMatters}
onChange={this.props.onChange}
checked={this.props.orderMatters}
onChange={(value) => {
this.props.onChange({orderMatters: value});
}}
/>
<InfoTip>
<p>
Expand All @@ -100,10 +103,12 @@ class MatcherEditor extends React.Component<Props> {
</InfoTip>
</div>
<div>
<PropCheckBox
<Checkbox
label="Padding:"
padding={this.props.padding}
onChange={this.props.onChange}
checked={this.props.padding}
onChange={(value) => {
this.props.onChange({padding: value});
}}
/>
<InfoTip>
<p>
Expand Down
Loading