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

[component]: Back to top #3699

Open
4 of 5 tasks
Cian77 opened this issue Oct 9, 2024 · 4 comments · May be fixed by #3991
Open
4 of 5 tasks

[component]: Back to top #3699

Cian77 opened this issue Oct 9, 2024 · 4 comments · May be fixed by #3991
Assignees
@myrta2302
Labels
📦 components Related to the @swisspost/design-system-components package
Milestone
PPNL Components

Comments

@Cian77
Copy link

Cian77 commented Oct 9, 2024 •
edited by myrta2302
Loading

Description

Create a back to top button that appears when scrolling below the fold and disappears again when scrolling back up above the fold. A working example can be found on https://post.ch.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-11

Tokens

  • Tokens for this component are ready

Token proposal

  • floating-button-position-right (space between right edge of the browser window and component)
  • floating-button-position-bottom (space between bottom edge of browser window and component)

Size is determined by kind of button used (icon-button large) and box-shadows is determined by foundations/elevation.

Requirements

Tasks

💻 Tasks
Beta Give feedback
@Cian77 Cian77 added the 📦 components Related to the @swisspost/design-system-components package label Oct 9, 2024
@Cian77 Cian77 added this to the Design v2 milestone Oct 9, 2024
@gfellerph gfellerph modified the milestones: Design v2, Cargo Components Oct 11, 2024
@gfellerph gfellerph added needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. and removed needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. labels Oct 11, 2024
@gfellerph
Copy link
Member

Resolution: build back to top button for the moment, other use cases are interesting but need to be requested or discovered in a later step.

@gfellerph gfellerph moved this from 👀 Triage to 💡 Ready for token spec in Design System Production Board Oct 16, 2024
@gfellerph gfellerph moved this from 💡 Ready for token spec to 🔮 Ready for tokenisation in Design System Production Board Oct 18, 2024
@Vandapanda
Copy link
Contributor

@gfellerph I'd recommend to generate specific tokens for that one as it might look different than a secondary icon button somewhen. We can just connect them semantically to whatever we used for the secondary icon button so it looks the same for now. Further there is atm no such thing as a foundations/elevation.

@gfellerph
Copy link
Member

@Vandapanda I would strongly recommend to reuse where we have the possibility. Dedicated tokens can be added whenever necessary.

@myrta2302 myrta2302 self-assigned this Nov 5, 2024
@myrta2302
Copy link
Contributor

Since the css scroll animations are not supported at the moment from Firefox and Safari, it was decided that the back to top will be a web component.

@myrta2302 myrta2302 linked a pull request Nov 12, 2024 that will close this issue
feat(components): back-to-top button #3968
Closed
@myrta2302 myrta2302 removed a link to a pull request Nov 12, 2024
feat(components): back-to-top button #3968
Closed
@myrta2302 myrta2302 linked a pull request Nov 14, 2024 that will close this issue
feat(components): back-to-top button component #3991
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@myrta2302 myrta2302

Labels
📦 components Related to the @swisspost/design-system-components package
Projects
Design System Production Board
Status: 🕹️ Coding in progress
Milestone
PPNL Components
Development

Successfully merging a pull request may close this issue.

feat(components): back-to-top button component swisspost/design-system
4 participants
@gfellerph @myrta2302 @Cian77 @Vandapanda