expose colo(u)r for IntProgress/FloatProgress

[casperdcl]

Problem

• IntProgress and FloatProgress have a bar_style argument to control colour... yet the option strings it accepts don't sound like they control colour. Directly defining custom colours is also not documented. This seems an odd design choice (or lack thereof).

Proposed Solutions

• document the style kwarg, i.e.: style={'bar_color': 'green'}
• let bar_style accept colours (hex or plaintext, '#00ff00' == 'green' == 'success')
• potentially rename this option colour (or color to keep Americans happy)
• or maybe just deprecate bar_style

Additional context

tqdm/tqdm#450 (comment)

[ianhi]

It looks like these are exposed, though perhaps not in the most obvious way. You need to set them after you create the widget:

import ipywidgets as widgets
prog = widgets.IntProgress()
prog.value = 50
prog.style.bar_color = 'maroon'
display(prog)

(Also, I ❤️ tqdm)

Looking at the code here:

ipywidgets/ipywidgets/widgets/widget_int.py

Lines 173 to 193 in 6667f81

	class ProgressStyle(DescriptionStyle, CoreWidget):
	"""Button style widget."""
	_model_name = Unicode('ProgressStyleModel').tag(sync=True)
	bar_color = Color(None, allow_none=True, help="Color of the progress bar.").tag(sync=True)
	@register
	@_bounded_int_doc
	class IntProgress(_BoundedInt):
	"""Progress bar that represents an integer bounded from above and below.
	"""
	_view_name = Unicode('ProgressView').tag(sync=True)
	_model_name = Unicode('IntProgressModel').tag(sync=True)
	orientation = CaselessStrEnum(values=['horizontal', 'vertical'],
	default_value='horizontal', help="Vertical or horizontal.").tag(sync=True)
	bar_style = CaselessStrEnum(
	values=['success', 'info', 'warning', 'danger', ''], default_value='',
	help="""Use a predefined styling for the progess bar.""").tag(sync=True)
	style = InstanceDict(ProgressStyle).tag(sync=True, **widget_serialization)

it seems that it should all these forms for colors:

ipywidgets/ipywidgets/widgets/trait_types.py

Lines 13 to 33 in 6667f81

	_color_names = ['aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred ', 'indigo ', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'transparent', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
	# Regex colors #fff and #ffffff
	_color_hex_re = re.compile(r'#[a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?$')
	# Regex colors #ffff and #ffffffff (includes alpha value)
	_color_hexa_re = re.compile(r'^#[a-fA-F0-9]{4}(?:[a-fA-F0-9]{4})?$')
	# Helpers (float percent, int percent with optional surrounding whitespace)
	_color_frac_percent = r'\s*(\d+(\.\d*)?|\.\d+)?%?\s*'
	_color_int_percent = r'\s*\d+%?\s*'
	# rgb(), rgba(), hsl() and hsla() format strings
	_color_rgb = r'rgb\({ip},{ip},{ip}\)'
	_color_rgba = r'rgba\({ip},{ip},{ip},{fp}\)'
	_color_hsl = r'hsl\({fp},{fp},{fp}\)'
	_color_hsla = r'hsla\({fp},{fp},{fp},{fp}\)'
	# Regex colors rgb/rgba/hsl/hsla
	_color_rgbhsl_re = re.compile('({})|({})|({})|({})'.format(
	_color_rgb, _color_rgba, _color_hsl, _color_hsla
	).format(ip=_color_int_percent, fp=_color_frac_percent))

[casperdcl]

hmm thanks (though as you say, non-intuitive). Maybe wanna consider tidying up the init kwargs...

import ipywidgets as widgets
prog = widgets.IntProgress()
prog.value = 50
#prog.style.bar_color = 'maroon'  # overrides `bar_style`
#prog.bar_style = 'success'  # turns green only if `bar_color` not set
display(prog)

or better:

import ipywidgets as widgets
prog = widgets.IntProgress(style={'bar_color': 'maroon'})
prog.value = 50
display(prog)

Feel free to close if you want.

---

P.S.:

from tqdm.notebook import tqdm, trange

with trange(int(1e7)) as pbar:
    pbar.container.children[-2].style.bar_color = '#ffff00'  # or 'yellow'
    for i in pbar:
        pass

[ianhi]

It looks like your "or better" actually does work already, who knew

Feel free to close if you want.

I don't have write access so I definitely won't do that :P. Also, I think this should stay open regardless as it is an opportunity to improve the documentation.

[casperdcl]

ah srry thought you were a maintainer. Was being lazy. Anyway updated the description.

[jtpio]

@casperdcl would you like to open a PR to update the docs?

[casperdcl]

do you mean update the docs/ folder within this repo?

[jtpio]

Yes, if you think it would be useful for the examples provided in the comments above to be in the documentation.