-
Notifications
You must be signed in to change notification settings - Fork 350
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.
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
[Locked Labels] Implement adding/editing/deleting a standalone locked label #1539
Conversation
Size Change: +470 B (+0.05%) Total Size: 858 kB
ℹ️ View Unchanged
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1539 +/- ##
==========================================
+ Coverage 70.20% 71.05% +0.84%
==========================================
Files 517 521 +4
Lines 106703 106933 +230
Branches 5445 10971 +5526
==========================================
+ Hits 74912 75982 +1070
+ Misses 31675 30951 -724
+ Partials 116 0 -116
... and 111 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Left a couple minor suggestions inline.
expect(onChangeProps).toHaveBeenCalledTimes(2); | ||
// Calls are not being accumulated because they're mocked. | ||
expect(onChangeProps).toHaveBeenNthCalledWith(1, {coord: [1, 0]}); | ||
expect(onChangeProps).toHaveBeenNthCalledWith(2, {coord: [0, 2]}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can make these assertions with a single expect
call by doing:
expect(onChangeProps.mock.calls).toEqual([
[{coord: [1, 0]}],
[{coord: [0, 2]}],
]);
await userEvent.type(textInput, "x^2"); | ||
|
||
// Assert | ||
// Assert |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// Assert |
}; | ||
|
||
export default function LockedLabelSettings(props: Props) { | ||
const {coord, color, size, text, onChangeProps} = props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why destructure some of the props here, but not expanded
or onToggle
?
Label ({coord[0]}, {coord[1]}) | ||
</LabelLarge> | ||
<Strut size={spacing.xSmall_8} /> | ||
{text !== "" && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does something break if we render a LabelLarge
with blank text? Or is it just bad for accessibility?
I wonder if we should default text
to something like (empty)
for display purposes, to keep the UI consistent.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It just shows a little white circle because of the padding. It doesn't really matter, but it looked weird.
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (388a690) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1539 If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1539 |
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Major Changes - [#1546](#1546) [`6cbe4947e`](6cbe494) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Release PhET widget This PR releases a new PhET simulation widget to Perseus that requires an update in order to allow the support of new, upcoming content. Older versions of Perseus will be unable to render content that contains this widget. PhET simulations come from <https://phet.colorado.edu/>. ### Minor Changes - [#1529](#1529) [`0bf2711c0`](0bf2711) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds unlimited point graph - [#1542](#1542) [`a7fc2a3e3`](a7fc2a3) Thanks [@aemandine](https://github.com/aemandine)! - Design update for PhET widget - [#1512](#1512) [`4f24be79d`](4f24be7) Thanks [@aemandine](https://github.com/aemandine)! - Add PhET widget - [#1532](#1532) [`6e102f9c4`](6e102f9) Thanks [@aemandine](https://github.com/aemandine)! - Add a content editor for the PhET widget - [#1533](#1533) [`cc1995daf`](cc1995d) Thanks [@nishasy](https://github.com/nishasy)! - [Locked labels] View locked labels in an Interactive Graph ### Patch Changes - [#1539](#1539) [`7805626e1`](7805626) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Implement adding/editing/deleting a standalone locked label - [#1541](#1541) [`36471197c`](3647119) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds a finite point question to dev gallery ## @khanacademy/[email protected] ### Major Changes - [#1546](#1546) [`6cbe4947e`](6cbe494) Thanks [@SonicScrewdriver](https://github.com/SonicScrewdriver)! - Release PhET widget This PR releases a new PhET simulation widget to Perseus that requires an update in order to allow the support of new, upcoming content. Older versions of Perseus will be unable to render content that contains this widget. PhET simulations come from <https://phet.colorado.edu/>. ### Minor Changes - [#1539](#1539) [`7805626e1`](7805626) Thanks [@nishasy](https://github.com/nishasy)! - [Locked Labels] Implement adding/editing/deleting a standalone locked label - [#1542](#1542) [`a7fc2a3e3`](a7fc2a3) Thanks [@aemandine](https://github.com/aemandine)! - Design update for PhET widget - [#1532](#1532) [`6e102f9c4`](6e102f9) Thanks [@aemandine](https://github.com/aemandine)! - Add a content editor for the PhET widget - [#1533](#1533) [`cc1995daf`](cc1995d) Thanks [@nishasy](https://github.com/nishasy)! - [Locked labels] View locked labels in an Interactive Graph ### Patch Changes - Updated dependencies \[[`7805626e1`](7805626), [`0bf2711c0`](0bf2711), [`a7fc2a3e3`](a7fc2a3), [`4f24be79d`](4f24be7), [`6cbe4947e`](6cbe494), [`36471197c`](3647119), [`6e102f9c4`](6e102f9), [`cc1995daf`](cc1995d)]: - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Patch Changes - [#1541](#1541) [`36471197c`](3647119) Thanks [@nicolecomputer](https://github.com/nicolecomputer)! - Adds a finite point question to dev gallery Author: khan-actions-bot Reviewers: aemandine, #perseus Required Reviewers: Approved By: aemandine Checks: ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1544
Summary:
We want to be able to add/edit/delete (standalone) locked labels on
the Interactive Graph widget.
Issue: https://khanacademy.atlassian.net/browse/LEMS-1795
Test plan:
yarn jest packages/perseus-editor/src/components/__tests__/locked-label-settings.test.tsx
Storybook
Screen.Recording.2024-08-21.at.11.16.19.AM.mov