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

Remove component-sticky package #6610

Open
2 tasks
rfultz opened this issue Dec 26, 2024 · 0 comments
Open
2 tasks

Remove component-sticky package #6610

rfultz opened this issue Dec 26, 2024 · 0 comments

Comments

@rfultz
Copy link
Contributor

rfultz commented Dec 26, 2024

Summary

What we're after:
I'd like to remove the component-sticky package.

  • It hasn't been updated in five years (npm, github)
  • CSS can now do it natively (caniuse: position: sticky, :has())
  • It's what GitHub uses for things like filename headers during PR reviews
  • Removing more code!

Related issues

None

Completion criteria

  • The component-sticky package has been removed
  • Functionality has not changed

Tech steps or considerations (optional)

To test the idea and approach

A. Inspector

  1. load a page with a sticky nav (left nav)
  2. open Inspector
  3. turn off JavaScript
  4. paste :has(> .js-sticky-side) { position: sticky; top: 0px; }
  5. test the page
  6. (turn JavaScript back on when you're done)

B. Build process

  1. from init.js and data-init.js, comment out the new Sticky lines
  2. paste :has(> .js-sticky-side) { position: sticky; top: 0px; } into scss somewhere. _nav.scss?
  3. npm run build
  4. load a page with a sticky side nav

C. Final code changes

  1. B, but…
  2. remove the entire new Sticky functionality lines
  3. final scss may need media/container queries so we're only making them sticky when we want to
  4. ++ using has(> .js-sticky-side) would mean we don't need to adjust other class names anywhere—we can use what we already have
  5. -- keeping js-sticky-side would be inconsistent with the js- prefixing signifying JavaScript targets since this would be strictly a css approach
  6. are there other things we want to be sticky under certain conditions?

Future work

Are there other things we want to be sticky under certain conditions?

@rfultz rfultz moved this to 🔨 Pre-refinement in Website project Dec 26, 2024
@rfultz rfultz self-assigned this Dec 26, 2024
@rfultz rfultz added this to the 27.3 milestone Dec 26, 2024
@rfultz rfultz moved this from 🔨 Pre-refinement to 🔜 Sprint backlog in Website project Jan 2, 2025
@JonellaCulmer JonellaCulmer moved this from 🔜 Sprint backlog to 🔨 Pre-refinement in Website project Jan 2, 2025
@JonellaCulmer JonellaCulmer modified the milestones: 27.3, 27.5 Jan 7, 2025
@tmpayton tmpayton removed this from the 27.5 milestone Jan 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🔨 Pre-refinement
Development

No branches or pull requests

3 participants