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

Expose stylesheet model API publicly #12688

Merged
merged 1 commit into from
Dec 19, 2022
Merged

Conversation

mattpap
Copy link
Contributor

@mattpap mattpap commented Dec 19, 2022

This adds the following new models:

  • InlineStyleSheet
  • ImportedStyleSheet
  • GlobalInlineStyleSheet
  • GlobalImportedStyleSheet

which can be used like this:

from bokeh.models import InlineStyleSheet
stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: lightgray; }")

slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])

Global variants are appended to <head> and only once, so that the same stylesheet model can be shared between various UI components efficiently.

I will try to implement #12450 on top of this next. I will leave documentation and examples for #12675, after this is tested in panel. I will follow with a dev release after this is merged.

@codecov
Copy link

codecov bot commented Dec 19, 2022

Codecov Report

Merging #12688 (34e7bd5) into branch-3.1 (a6237e5) will decrease coverage by 5.62%.
The diff coverage is 100.00%.

@@              Coverage Diff               @@
##           branch-3.1   #12688      +/-   ##
==============================================
- Coverage       92.17%   86.54%   -5.63%     
==============================================
  Files             313      338      +25     
  Lines           19595    20890    +1295     
==============================================
+ Hits            18061    18080      +19     
- Misses           1534     2810    +1276     

@philippjfr
Copy link
Contributor

Hurrah! As soon as this is available could we cut a dev release?

@mattpap mattpap force-pushed the mattpap/stylesheets branch from f01c774 to 34e7bd5 Compare December 19, 2022 21:41
@mattpap mattpap merged commit cddffd5 into branch-3.1 Dec 19, 2022
@mattpap mattpap deleted the mattpap/stylesheets branch December 19, 2022 23:12
@mattpap
Copy link
Contributor Author

mattpap commented Dec 19, 2022

@philippjfr, that's been my goal, but I've been unable to start build/deploy workflows (for an unknown reason). I will try again in the morning.

@m-guggenmos
Copy link

m-guggenmos commented Oct 23, 2023

@mattpap Since I don't have the time for a proper bug report right now, allow me to note here that while ImportedStyleSheet(url='path/to/file.css') worked for me, i.e. resulting in <link rel="stylesheet" href="path/to/file.css"> nested in the shadow root of my component, GlobalImportedStyleSheet(url='path/to/file.css') did not work. Inspection of the resulting header showed that the global variant inserts the following code into the header:

<style type="text/css">css/plain.css</style>

which obviously doesn't work. Tested with Bokeh 3.3.0.

@bryevdv
Copy link
Member

bryevdv commented Oct 23, 2023

@m-guggenmos we will need a new issue with a minimal reproducer in order to investigate anything.

Chiemezuo pushed a commit to Chiemezuo/bokeh that referenced this pull request Aug 27, 2024
Copy link

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants