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

Hybrid sticky/relative positioned footer #2390

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

hannahiss
Copy link
Member

@hannahiss hannahiss commented Nov 27, 2023

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Description

Add hybrid mode between sticky and relative positioning for footer into library and not only in docs since it is asked by many projects in Orange

Motivation & Context

Avoid empty pages like this:
image

Types of change

  • New feature (non-breaking change which adds functionality)

Live previews

Checklist

Contribution

Accessibility

  • My change follows accessibility good practices; I have at least run axe

Design

  • My change respects the design guidelines defined in Orange Design System
  • My change is compatible with a responsive display

Development

  • My change follows the developer guide
  • (NA) I have added JavaScript unit tests to cover my changes
  • (NA) I have added SCSS unit tests to cover my changes

Documentation

  • My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

  • (NA) My change introduces changes to the migration guide
  • (NA) My new component is well displayed in Storybook
  • (NA) My new component is compatible with RTL
  • (NA) Manually run BrowserStack tests
  • (NA) Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
  • Code review
  • Design review
  • (NA) A11y review

After the merge

@hannahiss hannahiss added v5 css docs Improvements or additions to documentation labels Nov 27, 2023
@hannahiss hannahiss marked this pull request as ready for review November 27, 2023 16:12
Copy link

netlify bot commented Nov 27, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit c9982f6
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/65c1ee7015e5f600081cac48
😎 Deploy Preview https://deploy-preview-2390--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

These changes feel right to me. One small comment and let's wait for another review

scss/_reboot.scss Outdated Show resolved Hide resolved
@@ -22,6 +22,8 @@ You can choose to display each part or not, except the last one which is mandato

If these available parts don't meet your specific needs, feel free to develop your own custom part accordingly to the Orange Design System.

The footer is positioned at the bottom of the window when the page content is smaller than the window, and at the bottom of the page when it is bigger.
Copy link
Member

Choose a reason for hiding this comment

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

Might not be true for some DOM reasons. But for simple syntax where <footer> is a direct child of <body> it seems to work pretty well. Any opinion on this @julien-deramond ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css docs Improvements or additions to documentation v5
Projects
Status: Need Lead Dev Review
Development

Successfully merging this pull request may close these issues.

None yet

2 participants