Styling buttons, text inputs, bool inputs. Raw CSS attributes.

[zerline]

Adding font-family, font-size, font-style, font-variant, text-color, text-decoration.

[pbugnion]

Thanks for this! It'll be a great addition!

You should probably rebase your branch off upstream master. You're still building the conda environment in readthedocs, so you must have branched off a very old master. Since we've done lots of entire source changes like eslint, it's important to remain close to upstream.

I think it would be useful to have a conversation about what interface we want to expose to users. There's two reasonable ways to do this, I think:

1. stick close to CSS, which is what you've done.
2. expose attributes that are semantically meaningful to users in the context of the current widget.

I suspect that most widget users (as opposed to widget developers) are not familiar with CSS at all. This is certainly true at my work. If a user wanted to underline text, I suspect they would look for some underline boolean traitlet called text_underline, not a text_decoration field.

An alternative interface, more in line with 2, would be:

font  = String() # normal font family CSS string
font_size = String() # normal CSS size
italic = Boolean() # set font-style
underline = Union(Boolean(), String()) # either true or a string like "dotted red"
overline = Union(Boolean(), String()) # either true or a string like "dotted red"
small_caps = Boolean()
text_color = Color()

I'd be keen to hear both what other maintainers and widget users think.

[nthiery]

Hi @pbugnion,

That's a very good question. There are merits in staying close to CSS, for those that readily know it (or will learn it at this occasion), for the amount of existing documentation and examples on-line, for the ability to relate the code-side configuration and what appears in the browser inspector. Yet indeed, a big selling point of Jupyter widgets is their ability to leverage all the UI technology stack to casual users.

I believe that the important points for such casual users:

• the styling options be easy to discover (as well as their acceptable values), typically by introspection. Deep options like "button.style.text.underline" are typically not a problem in case this helps better match the CSS.
• the correspondence between options and css attributes be easy to find. E.g. in the documentation of the options.
• consistence across widgets

Well, sorry, just 2 cents of rambling; not really bringing immediately operational solutions ...

[zerline]

Hi @pbugnion, @nthiery
Maybe we can stay close to the CSS names, yet modify the most cryptic ones like for ex text-decoration? I also would like to follow @pbugnion on transforming those attributes, like font-weight, which have only one commonly used value.

[zerline]

Maybe we can stay close to the CSS names, yet modify the most cryptic ones like for ex text-decoration? I also would like to follow @pbugnion on transforming those attributes, like font-weight, which have only one commonly used value.

I've made something (06172ee)

• It adds complexity in the javascript code, because we need to transform values
• having for ex italic=False by default would make the CSS behavior more deterministic ; so I kept italic=None by default

I'd be interested in your opinions ..

[jasongrout]

@ivanov and I debated this for a while, and we both come down on the side of using straight CSS names, even for text-decoration.

1. Our standard motif in exposing such styling has been to stick with CSS terminology as closely as possible (see the Layout widget, for example)
2. In general, I'd like to think we help users level up in their technical sophistication, and introducing a new term here and there (like text-decoration) that enable them to be more of a power user is great.
3. There is so much out there documenting CSS attributes, examples, etc.
4. Exposing CSS attributes like text-decoration really is way more powerful than a single underline true/false.
5. We can backfill the knowledge gap with helpful documentation, etc. For example, the help for text-decoration can explicitly mention underlining.

Thoughts?

[ibdafna]

@jasongrout all conflicts resolved - starting review!

[jasongrout]

To make reviewing easier, here is a code block exercising all of these new options in the various controls:

from ipywidgets import *

display(Checkbox(description='Option A', style=dict(background='lightblue')))

display(Valid(value=False, style=dict(background='lightblue')))

display(ToggleButton(description="Option A", style=dict(
    background='lightblue',
    font_family="Times New Roman",
    font_size="20px",
    font_style="italic",
    font_variant="small-caps",
    font_weight="bold",
    text_color="red",
    text_decoration="underline",
)))

display(Button(description="Button", style=dict(
    button_color="lightblue",
    font_family="Times New Roman",
    font_size="20px",
    font_style="italic",
    font_variant="small-caps",
    font_weight="bold",
    text_color="red",
    text_decoration="underline",
)))

display(HTML(value='Some HTML text',style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

display(HTMLMath(value='Some HTML text and math: $$\int \sqrt{x^2} dx$$',style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

display(Label(value="Label text", style=dict(
    background='lightblue',
    font_family="Times New Roman",
    font_size="20px",
    font_style="italic",
    font_variant="small-caps",
    font_weight="bold",
    text_color="red",
    text_decoration="underline",
)))

display(Textarea(value='Text area text',style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

display(Text(value='Text area text',style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

display(Password(value='Text area text',style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

display(Combobox(value='option B', options=['option A', 'option B', 'Another option'], style=dict(
    background="lightblue",
    font_size="30px",
    text_color="red"
)))

[jasongrout]

I pushed three more commits, two cleaning up the code a bit, and one that eliminated the option to set the background color on a ToggleButton, since a toggle button changes the background color to visually indicate state (so fixing the background color makes the control appear to not work).

[jasongrout]

@ibdafna, @zerline - I think this looks good. Any other thoughts about it?

[jasongrout]

Many thanks again @zerline for pushing through with this for so long.

[ibdafna]

@jasongrout thank you so much for moving so quickly with this! I tested locally and the only outstanding issue I could find is Valid() not having an actual style attribute - so background, font_variant etc. do not work. Is that by design?

[ibdafna]

Closed by mistake - apologies!

[jasongrout]

Let's make a follow-up issue about auditing background attributes across other widgets.