feat: add `outline` param in `put_buttons()`

docs/spec.rst

@@ -231,6 +231,7 @@ Unique attributes of different types:
   * small: bool, Whether to enable small button
   * group: bool, Whether to group the buttons together
   * link: bool, Whether to make button seem as link.
+  * outline: bool, Whether enable outline style.
 
 * type: file
 

pywebio/output.py

@@ -622,7 +622,7 @@ def _format_button(buttons):
     return btns
 
 
-def put_buttons(buttons, onclick, small=None, link_style=False, group=False, scope=Scope.Current,
+def put_buttons(buttons, onclick, small=None, link_style=False, outline=False, group=False, scope=Scope.Current,
                 position=OutputPosition.BOTTOM, **callback_options) -> Output:
     """
     Output a group of buttons and bind click event
@@ -635,7 +635,6 @@ def put_buttons(buttons, onclick, small=None, link_style=False, group=False, sco
 
         The ``value`` of button can be any JSON serializable object.
         The ``color`` of button can be one of: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`.
-        The `outline-` prefix can be added to those color values to enable outline buttons.
 
         Example:
 
@@ -643,12 +642,10 @@ def put_buttons(buttons, onclick, small=None, link_style=False, group=False, sco
             :name: put_buttons-btn_class
             :summary: `put_buttons()`
 
-            put_buttons([dict(label='success', value='s', color='outline-success')], onclick=...)  # ..doc-only
+            put_buttons([dict(label='success', value='s', color='success')], onclick=...)  # ..doc-only
             put_buttons([  # ..demo-only
                 dict(label=i, value=i, color=i)  # ..demo-only
-                for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark',   # ..demo-only
-                          'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning',  # ..demo-only
-                          'outline-info', 'outline-light', 'outline-dark']  # ..demo-only
+                for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']  # ..demo-only
             ], onclick=put_text)  # ..demo-only
 
     :type onclick: callable / list
@@ -663,6 +660,7 @@ def put_buttons(buttons, onclick, small=None, link_style=False, group=False, sco
        Note: When in :ref:`Coroutine-based session  <coroutine_based_session>`, the callback can be a coroutine function.
     :param bool small: Whether to use small size button. Default is False.
     :param bool link_style: Whether to use link style button. Default is False
+    :param bool outline: Whether to use outline style button. Default is False
     :param bool group: Whether to group the buttons together
     :param int scope, position: Those arguments have the same meaning as for `put_text()`
     :param callback_options: Other options of the ``onclick`` callback. There are different options according to the session implementation
@@ -715,7 +713,7 @@ def put_buttons(buttons, onclick, small=None, link_style=False, group=False, sco
 
     callback_id = output_register_callback(click_callback, **callback_options)
     spec = _get_output_spec('buttons', callback_id=callback_id, buttons=btns, small=small,
-                            scope=scope, position=position, link=link_style, group=group)
+                            scope=scope, position=position, link=link_style, outline=outline, group=group)
 
     return Output(spec)
 

webiojs/src/models/output.ts

@@ -1,7 +1,7 @@
 import {b64toBlob, randomid} from "../utils";
 import * as marked from 'marked';
 import {pushData} from "../session";
-import  {PinWidget} from "./pin";
+import {PinWidget} from "./pin";
 
 export interface Widget {
     handle_type: string;
@@ -87,9 +87,15 @@ let Buttons = {
     handle_type: 'buttons',
     get_element: function (spec: any) {
         const btns_tpl = `<div{{#group}} class="btn-group" role="group"{{/group}}>{{#buttons}} 
-                                <button class="btn {{#color}}btn-{{color}}{{/color}}{{#small}} btn-sm{{/small}}">{{label}}</button> 
+                                <button class="btn {{#color}}btn-{{#outline}}outline-{{/outline}}{{color}}{{/color}}{{#small}} btn-sm{{/small}}">{{label}}</button> 
                           {{/buttons}}</div>`;
-        spec.color = spec.link ? "link" : "primary";
+        spec.color = "primary";  // fallback color
+        if (spec.link) {
+            spec.outline = false;
+            for (let btn of spec.buttons)
+                btn.color = 'link';
+        }
+
         let html = Mustache.render(btns_tpl, spec);
         let elem = $(html);