Add optional right icon to Button widget.
Change-Id: I7b8e97ae130c40337eebf89ff22f3c2efda0fc8d
diff --git a/ui/src/assets/widgets/button.scss b/ui/src/assets/widgets/button.scss
index 96c60e7..b42115b 100644
--- a/ui/src/assets/widgets/button.scss
+++ b/ui/src/assets/widgets/button.scss
@@ -26,11 +26,19 @@
white-space: nowrap;
min-width: max-content;
+ & > .pf-left-icon {
+ float: left;
+ margin-right: 6px; // Make some room between the icon and label
+ }
+
+ & > .pf-right-icon {
+ float: right;
+ margin-left: 6px; // Make some room between the icon and label
+ }
+
& > .material-icons {
font-size: inherit;
line-height: inherit;
- float: left;
- margin-right: 4px; // Make some room between the icon and label
}
&:hover {
diff --git a/ui/src/frontend/widgets/button.ts b/ui/src/frontend/widgets/button.ts
index 2e6f3d6..3e702d5 100644
--- a/ui/src/frontend/widgets/button.ts
+++ b/ui/src/frontend/widgets/button.ts
@@ -14,6 +14,7 @@
import * as m from 'mithril';
import {classNames} from '../classnames';
+import {Icon} from './icon';
interface CommonAttrs {
// Always show the button as if the "active" pseudo class were applied, which
@@ -32,6 +33,8 @@
// will be fired.
// Defaults to false.
disabled?: boolean;
+ // Optional right icon.
+ rightIcon?: string;
// Remaining attributes forwarded to the underlying HTML <button>.
[htmlAttrs: string]: any;
}
@@ -59,6 +62,7 @@
compact = false,
minimal = false,
disabled = false,
+ rightIcon,
...htmlAttrs
} = attrs;
@@ -76,7 +80,8 @@
class: classes,
...htmlAttrs,
},
- icon && m('i.material-icons', icon),
+ icon && m(Icon, {className: 'pf-left-icon', icon}),
+ rightIcon && m(Icon, {className: 'pf-right-icon', icon: rightIcon}),
label || '\u200B', // Zero width space keeps button in-flow
);
}
diff --git a/ui/src/frontend/widgets_page.ts b/ui/src/frontend/widgets_page.ts
index 852981c..1e58405 100644
--- a/ui/src/frontend/widgets_page.ts
+++ b/ui/src/frontend/widgets_page.ts
@@ -249,14 +249,16 @@
m('h1', 'Widgets'),
m('h2', 'Button'),
m(WidgetShowcase, {
- renderWidget: ({label, icon, ...rest}) => m(Button, {
+ renderWidget: ({label, icon, rightIcon, ...rest}) => m(Button, {
icon: icon ? 'send' : undefined,
+ rightIcon: rightIcon ? 'arrow_forward' : undefined,
label: label ? 'Button' : '',
...rest,
}),
initialOpts: {
label: true,
- icon: false,
+ icon: true,
+ rightIcon: false,
disabled: false,
minimal: false,
active: false,
