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

Jump to bottom

Poc elm css removal #1700

Draft
wants to merge 80 commits into
base: master
Choose a base branch
from
Draft

Poc elm css removal #1700

wants to merge 80 commits into from

Conversation

omnibs
Copy link
Member

@omnibs omnibs commented Oct 16, 2024

Please use the template that's relevant for your situation and delete the other templates. If this is just a noredink-ui repo doc change, you don't need to follow a template.

🏷️ Bump for version VERSION_NUMBER

What changes does this release include?

The easiest and most reliable way to find the changes that this release includes is to go through the changes between the last version number and master: https://github.com/NoRedInk/noredink-ui/compare/VERSION_NUMBER...master.

Include links to the relevant PRs in a list in this PR. Be sure to note any risky changes or changes that you will want to alert QA to when upgrading to the new version of noredink-ui.

Please update the PR's name to include a quick note about every linked PR.

How has the API changed?

Please paste the output of elm diff run on latest master in the code block:

Releasing

After this PR merges, and you've pulled down latest master, finish following the publishing process.

🌟 Adding a new component

About the component

What is the purpose of the new component? When and where will it be used? How will the reviewer know if this component meets the success criteria?

Please link to any relevant context and stories.

🖼️ What does this change look like?

  • If there are user facing changes, you will be asked later to add a designer as a reviewer. Please fill in this section by following the guidelines for an optimal design review.
  • If there are not user facing changes, include any screenshots or videos that would be helpful to reviewers.

Component completion checklist

  • I've gone through the relevant sections of the Development Accessibility guide with this component in mind
  • Component has clear documentation
  • Component is in the Component Catalog
    • I've used the script to add the component to the Component Catalog.
    • Component is categorized reasonably (see Category for all the currently available categories). The component can be in multiple categories, if appropriate.
    • Component has a representative preview for the Component Catalog cards (bonus points for making it delightful!)
    • Component has a customizable example. Aim for having every possible supported version of the component displayable through the configuration on this page. (Protip: This is handy for testing expected behavior!)
    • The customizable example produces sample code
    • The component's example page includes keyboard behavior, if any
    • The component's example page includes guidance around how to use the component, if necessary
  • Component is tested
    • axe checks and percy snapshots will be automatically added for every component. However, if you want to customize when the checks and snapshots are made, you will need to make changes to script/puppeteer-tests.js.
    • there are 2 ways to add Elm tests:
      • if you want to test the Component Catalog example directly, add ProgramTest-style tests under component-catalog/tests
      • if you want to test the component directly, add tests under tests/Spec. Historically, this has been the more popular Elm testing strategy for noredink-ui.
  • Component API follows standard patterns in noredink-ui
    • e.g., as a dev, I can conveniently add an nriDescription
    • and adding a new feature to the component will not require major API changes to the component
  • Please assign the following reviewers:
    • Someone from your team who can review your PR in full and review requirements from your team's perspective.
    • Component library owner - Someone from this group will review your PR for accessibility and adherence to component library foundations.
    • If there are user-facing changes, a designer. (You may want to direct your designer to the deploy preview for easy review):
      • For writing-related component changes, add Stacey (staceyadams)
      • For quiz engine-related components, add Ravi (ravi-morbia)
      • For a11y-related changes to general components, add Ben (bendansby)
      • For general component-related changes or if you’re not sure about something, add the Design group (NoRedInk/design)

🔧 Modifying a component

Context

Please link to any relevant context and stories.

🖼️ What does this change look like?

  • If there are user facing changes, you will be asked later to add a designer as a reviewer. Please fill in this section by following the guidelines for an optimal design review.
  • If there are not user facing changes, include any screenshots or videos that would be helpful to reviewers.

Component completion checklist

  • I've gone through the relevant sections of the Development Accessibility guide with the changes I made to this component in mind
  • Changes are clearly documented
    • Component docs include a changelog
    • Any new exposed functions or properties have docs
  • Changes extend to the Component Catalog
    • The Component Catalog is updated to use the newest version, if appropriate
    • The Component Catalog example version number is updated, if appropriate
    • Any new customizations are available from the Component Catalog
    • The component example still has:
      • an accurate preview
      • valid sample code
      • correct keyboard behavior
      • correct and comprehensive guidance around how to use the component
  • Changes to the component are tested/the new version of the component is tested
  • Component API follows standard patterns in noredink-ui
    • e.g., as a dev, I can conveniently add an nriDescription
    • and adding a new feature to the component will not require major API changes to the component
  • If this is a new major version of the component, our team has stories created to upgrade all instances of the old component. Here are links to the stories:
    • add your story links here OR just write this is not a new major version
  • Please assign the following reviewers:
    • Someone from your team who can review your PR in full and review requirements from your team's perspective.
    • Component library owner - Someone from this group will review your PR for accessibility and adherence to component library foundations.
    • If there are user-facing changes, a designer. (You may want to direct your designer to the deploy preview for easy review):
      • For writing-related component changes, add Stacey (staceyadams)
      • For quiz engine-related components, add Ravi (ravi-morbia)
      • For a11y-related changes to general components, add Ben (bendansby)
      • For general component-related changes or if you’re not sure about something, add the Design group (NoRedInk/design)

omnibs added 30 commits October 9, 2024 12:01
@omnibs
Copy Highlighter
61c7387
@omnibs
Add longform highlighter example
f62e970
@omnibs
Wire new example in
5017793
@omnibs
Remove functions not used in Writing
1368317
@omnibs
Use Longform in example and remove unused functions
3c38280
@omnibs
Remove unused bits
9ccfce3
@omnibs
Start making unstyled from the outside in
d01c4a7
@omnibs
Unstyle viewFoldHelper and FoldState
fad0615
@omnibs
Unstyle viewHighlightable
a2ff902
@omnibs
Unstyle view_
1b90f99
@omnibs
Unstyle Longform example
33ea2d5
@omnibs
Create a copy of mark for longform
e4363d8 
idk if this is a good idea
@omnibs
Move toUnstyled into Mark
1527f04
@omnibs
Unstyle Mark.view_
6779a8e
@omnibs
Extract viewMarked styles to global CSS
ed009c5
@omnibs
Unstyle viewMarked
feeac73
@omnibs
Fix inline tags
727448c
@omnibs
Remove viewTag, branch on tagStyle
c20265d
@omnibs
Extract viewInlineTag styles to global CSS
8cc1470
@omnibs
Restructure for readability
2f0db47
@omnibs
Fix missing css on viewInlineTags direct call
801219e 
Also make it less brittle
@omnibs
Unstyle viewInlineTag
4b49247
@omnibs
Remove config from maybeHighlightableStyles
a0f8b49
@omnibs
Create a top-level renderStyles
7b61b20
@omnibs
Use renderStyles in view_
624f384
@omnibs
Render styles in viewFoldHelper
0094eff
@omnibs
Unstyle eventListeners
615f165
@omnibs
Make a longform highlightable
aadb205 
So it only holds unstyled customAttributes
@omnibs
Make highlightable attributes unstyled
747b0fd 
This is a small change in nri-ui, but a huge change in the monolith
@omnibs
Unstyle viewHighlightableSegment (css pending)
cec57d4
omnibs added 30 commits October 27, 2024 12:14
@omnibs
Remove dead code
15b2320
@omnibs
mouseDownIndex is not used in view anymore
13b3a68
@omnibs
Remove a few model dependencies
0ebe147
@omnibs
Remove stray comments
bb2a4dd
@omnibs
Create pipeline for updating highlightables
bcb6aa4
@omnibs
Update focused state on the pipeline
9c385a6
@omnibs
Move clean near update
afd30ec
@omnibs
Update hinted on the pipeline
0b7b634
@omnibs
Fix bug: overlapping highlights weren't working
ed7ed97 
Seems like Inline Comments implements overlaps on the monolith's side.

To be able to track marker ranges internally, we need 1st class overlaps
support.
@omnibs
Remove support for same-kind marks to be independently hovered
29a36e9 
This is a feature removed. Writing never has same-kind marks that should
be independently hovered.

Every `kind` works as an `id` in Writing.
@omnibs
Remove overlapsSupport from FoldState
65096b4
@omnibs
No need to carry around shortest hovered marker
971b9bc
@omnibs
Writing never uses showTagsInline
2c5d63f 
And it doesn't make sense for it to. Marker names are things like
"Comment 1", etc.
@omnibs
Move hinting class to viewHighlightableSegment
0f9f1f9 
Marked highlightables also need this class
@omnibs
Fix overlaps erased on hinting
9aec07e 
A part 2 for ed7ed97, where we made overlapping natively supported on
highlighter, w/o needing to override behavior in Inline Comments.
@omnibs
FocusRing was being overridden by Highlighter css
3202b4c
@omnibs
Fix hint right to left
2a2948d
@omnibs
UpdateHinted even tho writing has no eraser
e21bcd2 
I might erase the eraser later
@omnibs
Update hovered state on the pipeline
bd0911d
@omnibs
Duplicate hovered and hinted styling
ea40a52
@omnibs
Remove dead code
a65e74f 
Only current marker is blocking is from going lazy over each
highlightable!
@omnibs
Track what a Highlightable is hinted or hovered by
f47d6d8 
So we don't have to change all highlightables when the tool changes
@omnibs
Pass id as argument to viewHighlightable
49abde1
@omnibs
Render markdown is never used by writing
ef6779f
@omnibs
Stop passing model to viewHighlightable
42042ee 
This make it almost lazy. For some reason static whitespace
highlightables are failing lazy on ref equals.
@omnibs
joinAdjacent was breaking lazy for static spaces
3059339
@omnibs
trimHighlightableGroups wasn't doing anything
9b2001d
@omnibs
Fix stray hints on whitespace
3b9c3ad
@omnibs
removeHighlights_ was breaking lazy
42fccfb
@omnibs
Trim highlighter examples to help demo perf fixes
323a608
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@omnibs