Skip to content

Commit

Permalink
feat: Allow icons in buttons #747 (#748)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mturoci
mturoci authored Apr 16, 2021
1 parent b5f259e commit 9bf2636
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 4 deletions.
2 changes: 2 additions & 0 deletions py/examples/button.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ async def serve(q: Q):
ui.text(f'primary_compound_button={q.args.primary_compound_button}'),
ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),
ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),
ui.text(f'icon_button={q.args.icon_button}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
Expand All @@ -35,5 +36,6 @@ async def serve(q: Q):
disabled=True),
ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',
primary=True, disabled=True),
ui.button(name='icon_button', label='Icon button', icon='Search'),
])
await q.page.save()
10 changes: 10 additions & 0 deletions py/h2o_wave/types.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2734,6 +2734,7 @@ def __init__(
primary: Optional[bool] = None,
disabled: Optional[bool] = None,
link: Optional[bool] = None,
icon: Optional[str] = None,
visible: Optional[bool] = None,
tooltip: Optional[str] = None,
):
Expand All @@ -2744,6 +2745,7 @@ def __init__(
_guard_scalar('Button.primary', primary, (bool,), False, True, False)
_guard_scalar('Button.disabled', disabled, (bool,), False, True, False)
_guard_scalar('Button.link', link, (bool,), False, True, False)
_guard_scalar('Button.icon', icon, (str,), False, True, False)
_guard_scalar('Button.visible', visible, (bool,), False, True, False)
_guard_scalar('Button.tooltip', tooltip, (str,), False, True, False)
self.name = name
Expand All @@ -2760,6 +2762,8 @@ def __init__(
"""True if the button should be disabled."""
self.link = link
"""True if the button should be rendered as link text and not a standard button."""
self.icon = icon
"""An optional icon to display next to the button label (not applicable for links)."""
self.visible = visible
"""True if the component should be visible. Defaults to true."""
self.tooltip = tooltip
Expand All @@ -2774,6 +2778,7 @@ def dump(self) -> Dict:
_guard_scalar('Button.primary', self.primary, (bool,), False, True, False)
_guard_scalar('Button.disabled', self.disabled, (bool,), False, True, False)
_guard_scalar('Button.link', self.link, (bool,), False, True, False)
_guard_scalar('Button.icon', self.icon, (str,), False, True, False)
_guard_scalar('Button.visible', self.visible, (bool,), False, True, False)
_guard_scalar('Button.tooltip', self.tooltip, (str,), False, True, False)
return _dump(
Expand All @@ -2784,6 +2789,7 @@ def dump(self) -> Dict:
primary=self.primary,
disabled=self.disabled,
link=self.link,
icon=self.icon,
visible=self.visible,
tooltip=self.tooltip,
)
Expand All @@ -2805,6 +2811,8 @@ def load(__d: Dict) -> 'Button':
_guard_scalar('Button.disabled', __d_disabled, (bool,), False, True, False)
__d_link: Any = __d.get('link')
_guard_scalar('Button.link', __d_link, (bool,), False, True, False)
__d_icon: Any = __d.get('icon')
_guard_scalar('Button.icon', __d_icon, (str,), False, True, False)
__d_visible: Any = __d.get('visible')
_guard_scalar('Button.visible', __d_visible, (bool,), False, True, False)
__d_tooltip: Any = __d.get('tooltip')
Expand All @@ -2816,6 +2824,7 @@ def load(__d: Dict) -> 'Button':
primary: Optional[bool] = __d_primary
disabled: Optional[bool] = __d_disabled
link: Optional[bool] = __d_link
icon: Optional[str] = __d_icon
visible: Optional[bool] = __d_visible
tooltip: Optional[str] = __d_tooltip
return Button(
Expand All @@ -2826,6 +2835,7 @@ def load(__d: Dict) -> 'Button':
primary,
disabled,
link,
icon,
visible,
tooltip,
)
Expand Down
3 changes: 3 additions & 0 deletions py/h2o_wave/ui.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1081,6 +1081,7 @@ def button(
primary: Optional[bool] = None,
disabled: Optional[bool] = None,
link: Optional[bool] = None,
icon: Optional[str] = None,
visible: Optional[bool] = None,
tooltip: Optional[str] = None,
) -> Component:
Expand Down Expand Up @@ -1109,6 +1110,7 @@ def button(
primary: True if the button should be rendered as the primary button in the set.
disabled: True if the button should be disabled.
link: True if the button should be rendered as link text and not a standard button.
icon: An optional icon to display next to the button label (not applicable for links).
visible: True if the component should be visible. Defaults to true.
tooltip: An optional tooltip message displayed when a user clicks the help icon to the right of the component.
Returns:
Expand All @@ -1122,6 +1124,7 @@ def button(
primary,
disabled,
link,
icon,
visible,
tooltip,
))
Expand Down
15 changes: 15 additions & 0 deletions r/R/ui.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@
# limitations under the License.

.recursive_null_extractor <- function(x){
attribute_holder <- attributes(x)$class
x <- lapply(x,function(y){
if(is.list(y)){
return(.recursive_null_extractor(y))
}
else {
return(y)
}
})
x[sapply(x,is.null)] <- NULL
attributes(x)$class <- attribute_holder
attribute_holder <- attributes(x)$class
x <- lapply(x,function(y){
if(is.list(y)){
Expand Down Expand Up @@ -1268,6 +1279,7 @@ ui_color_picker <- function(
#' @param primary True if the button should be rendered as the primary button in the set.
#' @param disabled True if the button should be disabled.
#' @param link True if the button should be rendered as link text and not a standard button.
#' @param icon An optional icon to display next to the button label (not applicable for links).
#' @param visible True if the component should be visible. Defaults to true.
#' @param tooltip An optional tooltip message displayed when a user clicks the help icon to the right of the component.
#' @return A Button instance.
Expand All @@ -1280,6 +1292,7 @@ ui_button <- function(
primary = NULL,
disabled = NULL,
link = NULL,
icon = NULL,
visible = NULL,
tooltip = NULL) {
.guard_scalar("name", "character", name)
Expand All @@ -1289,6 +1302,7 @@ ui_button <- function(
.guard_scalar("primary", "logical", primary)
.guard_scalar("disabled", "logical", disabled)
.guard_scalar("link", "logical", link)
.guard_scalar("icon", "character", icon)
.guard_scalar("visible", "logical", visible)
.guard_scalar("tooltip", "character", tooltip)
.o <- list(button=list(
Expand All @@ -1299,6 +1313,7 @@ ui_button <- function(
primary=primary,
disabled=disabled,
link=link,
icon=icon,
visible=visible,
tooltip=tooltip))
class(.o) <- append(class(.o), c(.wave_obj, "WaveComponent"))
Expand Down
11 changes: 7 additions & 4 deletions ui/src/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export interface Button {
disabled?: B
/** True if the button should be rendered as link text and not a standard button. */
link?: B
/** An optional icon to display next to the button label (not applicable for links). */
icon?: S
/** True if the component should be visible. Defaults to true. */
visible?: B
/** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
Expand Down Expand Up @@ -102,13 +104,14 @@ const
if (m.link) {
return <Fluent.Link data-test={m.name} disabled={m.disabled} onClick={onClick}>{m.label}</Fluent.Link>
}
const btnProps: Fluent.IButtonProps = { text: m.label, disabled: m.disabled, onClick, iconProps: { iconName: m.icon } }
return m.caption?.length
? m.primary
? <Fluent.CompoundButton data-test={m.name} primary text={m.label} secondaryText={m.caption} disabled={m.disabled} onClick={onClick} />
: <Fluent.CompoundButton data-test={m.name} text={m.label} secondaryText={m.caption} disabled={m.disabled} onClick={onClick} />
? <Fluent.CompoundButton {...btnProps} data-test={m.name} primary secondaryText={m.caption} />
: <Fluent.CompoundButton {...btnProps} data-test={m.name} secondaryText={m.caption} />
: m.primary
? <Fluent.PrimaryButton data-test={m.name} text={m.label} disabled={m.disabled} onClick={onClick} />
: <Fluent.DefaultButton data-test={m.name} text={m.label} disabled={m.disabled} onClick={onClick} />
? <Fluent.PrimaryButton {...btnProps} data-test={m.name} />
: <Fluent.DefaultButton {...btnProps} data-test={m.name} />
}
return { render }
})
Expand Down

0 comments on commit 9bf2636

Please sign in to comment.