Commit e4885cc7 by Michel Engelen Committed by GitHub

Chore: Added optional Icon to ButtonCascader (#26852)

## ButtonCascader

### added
- new prop `icon` with type `IconName`

### changed
- `icon` style is now `icons` with properties `left` and `right` for the respective icons

## ButtonCascader Story

### added
- new story `withIcon`
- new knob `icon`

### changed
- `icon` style is now `icons` with properties `left` and `right` for the respective icons

closes #23755
parent 19e9e011
import React from 'react'; import React from 'react';
import { withKnobs, text, boolean, object } from '@storybook/addon-knobs'; import { withKnobs, text, boolean, object, select } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ButtonCascader } from '@grafana/ui'; import { ButtonCascader } from '@grafana/ui';
...@@ -13,6 +13,7 @@ const getKnobs = () => { ...@@ -13,6 +13,7 @@ const getKnobs = () => {
return { return {
disabled: boolean('Disabled', false), disabled: boolean('Disabled', false),
text: text('Button Text', 'Click me!'), text: text('Button Text', 'Click me!'),
icon: select('Icon', ['plus', 'minus', 'table'], 'plus'),
options: object('Options', [ options: object('Options', [
{ {
label: 'A', label: 'A',
...@@ -35,3 +36,12 @@ export const simple = () => { ...@@ -35,3 +36,12 @@ export const simple = () => {
</ButtonCascader> </ButtonCascader>
); );
}; };
export const withIcon = () => {
const { disabled, text, options, icon } = getKnobs();
return (
<ButtonCascader disabled={disabled} options={options} value={['A']} icon={icon}>
{text}
</ButtonCascader>
);
};
import React from 'react'; import React from 'react';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { IconName } from '../../types/icon';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
// @ts-ignore // @ts-ignore
...@@ -12,6 +13,7 @@ import { GrafanaTheme } from '@grafana/data'; ...@@ -12,6 +13,7 @@ import { GrafanaTheme } from '@grafana/data';
export interface ButtonCascaderProps { export interface ButtonCascaderProps {
options: CascaderOption[]; options: CascaderOption[];
children: string; children: string;
icon?: IconName;
disabled?: boolean; disabled?: boolean;
value?: string[]; value?: string[];
fieldNames?: { label: string; value: string; children: string }; fieldNames?: { label: string; value: string; children: string };
...@@ -27,14 +29,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -27,14 +29,19 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: popup; label: popup;
z-index: ${theme.zIndex.dropdown}; z-index: ${theme.zIndex.dropdown};
`, `,
icon: css` icons: {
right: css`
margin: 1px 0 0 4px; margin: 1px 0 0 4px;
`, `,
left: css`
margin: -1px 4px 0 0;
`,
},
}; };
}); });
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => { export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
const { onChange, className, loadData, ...rest } = props; const { onChange, className, loadData, icon, ...rest } = props;
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme);
...@@ -47,7 +54,9 @@ export const ButtonCascader: React.FC<ButtonCascaderProps> = props => { ...@@ -47,7 +54,9 @@ export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
expandIcon={null} expandIcon={null}
> >
<button className={cx('gf-form-label', className)} disabled={props.disabled}> <button className={cx('gf-form-label', className)} disabled={props.disabled}>
{props.children} <Icon name="angle-down" className={styles.icon} /> {icon && <Icon name={icon} className={styles.icons.left} />}
{props.children}
<Icon name="angle-down" className={styles.icons.right} />
</button> </button>
</RCCascader> </RCCascader>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment