Scope CSS rules to a new .jp-ThemedContainer class
#16519
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fcollonval
added
enhancement
tag:Design System CSS
|
Thanks for making a pull request to jupyterlab! |
github-actions
bot
added
pkg:notebook
pkg:completer
pkg:application
pkg:running
pkg:rendermime
pkg:apputils
pkg:themes
pkg:outputarea
pkg:pdf
pkg:statusbar
pkg:ui-components
pkg:htmlviewer
tag:CSS
Member
Author
|
cc @echarles |
Member
Author
|
To reduce friction with third party extensions, I could set the new class |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Member
Author
|
bot please update galata snapshots |
Contributor
|
Galata snapshots updated. |
krassowski
changed the title
.jp-ThemedContainer class
krassowski
approved these changes
Jul 3, 2024
Member
krassowski
left a comment
krassowski
left a comment
There was a problem hiding this comment.
Just some comments and question on the migration guide.
Comment on lines
+19
to
+22
| you should add the class ``jp-ThemedContainer`` to the DOM elements added outside the application shell. | ||
| - DOM elements ``code``, ``kbd``, ``pre``, ``samp`` and ``tt`` may have broken styles. To fix this, | ||
| prepend the class ``.jp-ThemedContainer`` to your rule; e.g. | ||
| ``.jp-Inspector-content pre`` becomes ``.jp-ThemedContainer .jp-Inspector-content pre`` |
Member
There was a problem hiding this comment.
Is it still accurate after adding .jp-ThemedContainer to the body? Or does it only pertain custom shells?
Member
Author
Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
fcollonval
commented
Jul 5, 2024
galata/test/benchmark/notebook.spec.ts-snapshots/large-md-notebook-ipynb-benchmark-linux.png
Show resolved
Hide resolved
fcollonval
force-pushed
the
fix/no-global-css
branch
from
49b30b4 to
bb3b220
Compare
5 tasks
ImpSy
pushed a commit
to spotinst/jupyterlab
that referenced
this pull request
Jan 7, 2025
* Scope CSS rules to .jp-ThemedContainer class * Fix examples and some missed floating widgets * Add migration note * Add class jp-ThemedContainer on the JupyterLab application shell container * Move the themed container in the template to limit contamination when reusing `JupyterLab`. * Fix bug in notification status bar item * Don't scope rule if it uses a jp class * Fix pre/tt/code/samp/kbd specificity * Reduce unneeded specificity as the rule already uses a jp class * Update migration doc * Fix CSS specificity for code tag in html * Fix examples * Fix cell example bg * Update Playwright Snapshots * Second attempt to fix cell bg * Restore bg color for main too * [skip ci] Improve doc wording Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com> * Fix Markdown code block rendering * Revert unwanted snapshot change --------- Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Fixes #15320
Fixes #8652
Fixes #5867
Fixes #13493
It will also ease the integration of all or part of JupyterLab in third-party applications.
Code changes
Add a new class
.jp-ThemedContainerto all DOM element requiring to be Jupyter styledAll global CSS rules are now scoped behind that new class
User-facing changes
None
Backwards-incompatible changes
Any extension that attach a DOM node outside the shell may loose part of its styling.The fix is to add the new class[should be ok as body is tagged as themed container]jp-ThemedContainerThe theme now have scoped rule on
tt,code,pre,sampandkbdtag. This increases the specificity of the selector and as it is applied later (due to the injection of the theme style sheet), it may impact the look and feel of those tags in extensions.The fix is to add the new class
.jp-ThemedContainerbefore the existing rule; e.g..jp-Inspector-content pre➡️.jp-ThemedContainer .jp-Inspector-content pre