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.

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

Update spacing in locked figure settings #1231

Merged
merged 2 commits into from May 6, 2024
Merged

Conversation

nishasy
Copy link
Contributor

@nishasy nishasy commented Apr 27, 2024

Summary:

Update spacing in the Locked Point Settings and Locked Line Settings
accordions so that the settings fit better.

PR includes

  • spacing updates
  • lowercase letters to save space
  • checkboxes changed to switches (based on this UX guidance)
  • LabeledSwitch component to remove redundancy
  • LockedFiguresSection stories

Issue: https://khanacademy.atlassian.net/browse/LEMS-1965

Test plan:

yarn jest

http://localhost:6006/?path=/story/perseus-editor-components-locked-figures-section--with-prod-width

Screenshots

Note: the font styles are ever so slightly off, probably because of global styles in prod vs dev

Before After ("solid") After ("dashed")
Screenshot 2024-04-26 at 4 54 42 PM Screenshot 2024-04-26 at 4 53 35 PM Screenshot 2024-04-26 at 5 06 21 PM

@nishasy nishasy self-assigned this Apr 27, 2024
@nishasy nishasy requested review from jeremywiebe, mark-fitzgerald and a team April 27, 2024 00:07
Copy link
Contributor

github-actions bot commented Apr 27, 2024

Size Change: +124 B (0%)

Total Size: 833 kB

Filename Size Change
packages/perseus-editor/dist/es/index.js 267 kB +113 B (0%)
packages/perseus/dist/es/index.js 398 kB +11 B (0%)
ℹ️ 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-error/dist/es/index.js 878 B
packages/perseus-linter/dist/es/index.js 21.8 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

@nishasy nishasy marked this pull request as ready for review April 27, 2024 00:14
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/perseus for changes to .changeset/honest-pens-count.md, packages/perseus-editor/src/__stories__/editor-page.stories.tsx, packages/perseus-editor/src/components/color-select.tsx, packages/perseus-editor/src/components/labeled-switch.tsx, packages/perseus-editor/src/components/locked-figure-select.tsx, packages/perseus-editor/src/components/locked-figure-settings-actions.tsx, packages/perseus-editor/src/components/locked-figures-section.tsx, packages/perseus-editor/src/components/locked-line-settings.tsx, packages/perseus-editor/src/components/locked-point-settings.tsx, packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts, packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx, packages/perseus-editor/src/components/__tests__/locked-point-settings.test.tsx, packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx

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

Copy link

codecov bot commented Apr 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.95%. Comparing base (2d3c3b4) to head (eace5ff).
Report is 6 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1231      +/-   ##
==========================================
+ Coverage   68.68%   69.95%   +1.26%     
==========================================
  Files         468      473       +5     
  Lines      100702   100814     +112     
  Branches     7125    10812    +3687     
==========================================
+ Hits        69168    70523    +1355     
+ Misses      31350    30291    -1059     
+ Partials      184        0     -184     

Impacted file tree graph

Files Coverage Δ
...ges/perseus-editor/src/components/color-select.tsx 100.00% <100.00%> (ø)
...s/perseus-editor/src/components/labeled-switch.tsx 100.00% <100.00%> (ø)
...eus-editor/src/components/locked-figure-select.tsx 100.00% <100.00%> (ø)
.../src/components/locked-figure-settings-actions.tsx 100.00% <100.00%> (ø)
...s-editor/src/components/locked-figures-section.tsx 100.00% <100.00%> (ø)
...eus-editor/src/components/locked-line-settings.tsx 100.00% <100.00%> (ø)
...us-editor/src/components/locked-point-settings.tsx 100.00% <100.00%> (ø)
...widgets/__testdata__/interactive-graph.testdata.ts 100.00% <ø> (ø)

... and 145 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 2d3c3b4...eace5ff. Read the comment docs.

Comment on lines +98 to +99
frameSource="about:blank"
previewURL="about:blank"
Copy link
Collaborator

Choose a reason for hiding this comment

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

😢 no change needed, but this preview system (and lack of it in Storybook) just makes me sad.

import type {Meta, StoryObj} from "@storybook/react";

export default {
title: "Perseus Editor/Components/Locked Figures Section",
Copy link
Collaborator

Choose a reason for hiding this comment

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

The Perseus Editor part of this can't include spaces. I recently discovered that things were not grouped correctly because of the spaces we had in the title here. I think spaces later on are fine, but for top-level areas, it needs to be PerseusEditor/...

Copy link
Contributor

github-actions bot commented May 6, 2024

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1231

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

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

@nishasy nishasy merged commit 4fae015 into main May 6, 2024
13 checks passed
@nishasy nishasy deleted the locked-settings-spacing branch May 6, 2024 18:04
benchristel pushed a commit that referenced this pull request May 6, 2024
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/math-input@18.1.0

### Minor Changes

-   [#1230](#1230) [`db041577d`](db04157) Thanks [@benchristel](https://github.com/benchristel)! - Get `@khanacademy/mathjax-renderer` from NPM, to allow third-party clients of Perseus to install it

### Patch Changes

-   [#1205](#1205) [`71e74ff64`](71e74ff) Thanks [@benchristel](https://github.com/benchristel)! - Internal: Fix storybook stories for keypad button

## @khanacademy/perseus@22.3.0

### Minor Changes

-   [#1210](#1210) [`2d3c3b49a`](2d3c3b4) Thanks [@nishasy](https://github.com/nishasy)! - Limit color set for locked figures in Interactive Graph

### Patch Changes

-   [#1231](#1231) [`4fae0155d`](4fae015) Thanks [@nishasy](https://github.com/nishasy)! - Adjust spacing in locked point and locked line settings


-   [#1232](#1232) [`cf1dc61b0`](cf1dc61) Thanks [@nishasy](https://github.com/nishasy)! - Refactor: separate LockedFigureSettingsAccordion component to reduce redundancy


-   [#1239](#1239) [`f757db589`](f757db5) Thanks [@benchristel](https://github.com/benchristel)! - Fix sizing of interactive graph axis labels on mobile

-   Updated dependencies \[[`71e74ff64`](71e74ff), [`db041577d`](db04157)]:
    -   @khanacademy/math-input@18.1.0

## @khanacademy/perseus-editor@6.2.0

### Minor Changes

-   [#1210](#1210) [`2d3c3b49a`](2d3c3b4) Thanks [@nishasy](https://github.com/nishasy)! - Limit color set for locked figures in Interactive Graph

### Patch Changes

-   [#1231](#1231) [`4fae0155d`](4fae015) Thanks [@nishasy](https://github.com/nishasy)! - Adjust spacing in locked point and locked line settings


-   [#1232](#1232) [`cf1dc61b0`](cf1dc61) Thanks [@nishasy](https://github.com/nishasy)! - Refactor: separate LockedFigureSettingsAccordion component to reduce redundancy

-   Updated dependencies \[[`2d3c3b49a`](2d3c3b4), [`4fae0155d`](4fae015), [`71e74ff64`](71e74ff), [`cf1dc61b0`](cf1dc61), [`db041577d`](db04157), [`f757db589`](f757db5)]:
    -   @khanacademy/perseus@22.3.0
    -   @khanacademy/math-input@18.1.0

## @khanacademy/perseus-dev-ui@1.5.4

### Patch Changes

-   [#1220](#1220) [`e3fd10f0e`](e3fd10f) Thanks [@jeremywiebe](https://github.com/jeremywiebe)! - ✨ Wrap the navigation controls of the Flipbook inside of a WB Toolbar

-   Updated dependencies \[[`71e74ff64`](71e74ff), [`db041577d`](db04157)]:
    -   @khanacademy/math-input@18.1.0

Author: khan-actions-bot

Reviewers: benchristel

Required Reviewers:

Approved By: benchristel

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ⏭️  Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1228
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants