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

fix(theme-common): ThemedComponent should display something when JS is disabled #9243

Merged
merged 3 commits into from
Aug 18, 2023

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Aug 18, 2023

Motivation

<ThemedComponent/> and <ThemedIImage/> should always display something for progressive enhancement reasons, even if data-theme is not set (JS disabled)

Currently it displays nothing:

CleanShot 2023-08-18 at 16 40 53@2x

Note: this is not an ideal solution but good enough for now.

In the future we should let the theme-classic "register" to core a default value for data-theme so that a fallback can be set without using any JS.

Currently with JS disabled the theme is always "light" even if the default colormode is dark.

Not a big deal for most users because people are more likely to have network issues than disabling JS, but this little issue led to flakiness in Argos/Playwright visual tests due to screenshots being taken before data-theme is set.

Test Plan

preview

Test links

Deploy preview: https://deploy-preview-9243--docusaurus-2.netlify.app/

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Aug 18, 2023
@slorber slorber added pr: bug fix This PR fixes a bug in a past release. and removed CLA Signed Signed Facebook CLA labels Aug 18, 2023
@netlify
Copy link

netlify bot commented Aug 18, 2023

[V2]

Name Link
🔨 Latest commit 82cf299
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/64df88ab7cdf6c00085d5f31
😎 Deploy Preview https://deploy-preview-9243--docusaurus-2.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.

@github-actions
Copy link

github-actions bot commented Aug 18, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 69 🟢 97 🟢 92 🟢 100 🟠 89 Report
/docs/installation 🟠 70 🟢 98 🟢 92 🟢 100 🟠 89 Report

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Aug 18, 2023
@slorber slorber merged commit ca35268 into main Aug 18, 2023
29 of 30 checks passed
@slorber slorber deleted the slorber/nojs-themed-comp branch August 18, 2023 15:11
@github-actions
Copy link

Size Change: +52 B (0%)

Total Size: 1.11 MB

Filename Size Change
website/build/assets/css/styles.********.css 113 kB +52 B (0%)
ℹ️ View Unchanged
Filename Size
website/.docusaurus/globalData.json 117 kB
website/build/assets/js/main.********.js 837 kB
website/build/index.html 41.3 kB

compressed-size-action

@slorber slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label Sep 20, 2023
@argos-ci
Copy link

argos-ci bot commented Sep 20, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 🧿 Changes detected (Review) 21 changes Sep 21, 2023, 8:52 AM

slorber added a commit that referenced this pull request Sep 20, 2023
slorber added a commit that referenced this pull request Sep 20, 2023
…lease (#9324)

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: sebastienlorber <[email protected]>
Co-authored-by: Sébastien Lorber <[email protected]>
Co-authored-by: Ori Shalom <[email protected]>
Co-authored-by: Mikey O'Toole <[email protected]>
Co-authored-by: TheCatLady <[email protected]>
fix flaky screenshots, add html data-has-hydrated attribute (#9256)
fix(theme-common): ThemedComponent should display something when JS is disabled (#9243)
fix(theme): canonical url should be not change after hydration if url accessed with/without trailing slash (#9130)
fix(theme): only set classname on ul elements if they have an existing class (#9099)
fix(content-docs): sidebar generator should return customProps for doc items (#9107)
@slorber slorber added backported This PR has been backported to a stable version of Docusaurus and removed to backport This PR is planned to be backported to a stable version of Docusaurus labels Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backported This PR has been backported to a stable version of Docusaurus CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants