mirror of https://github.com/grafana/grafana
TimeRangePicker: Updates components to use new ToolbarButton & ButtonGroup (#30570)
* WIP: Using new components * Progress * Everything looks to be working * Explore: Replaces navbar-button and overriden explore button css classes with ToolbarButton and cleans up scss & markup, removes ResponsiveButton (#30571) * Explore: Replaces navbar-button and overriden explore button css classes with ToolbarButton and cleans up scss & markup, removes ResponsiveButton * Change live button text when paused * Fixed story * For the dashboard toolbar button I need a transparent button so I refactored the states/variants into a new ToolbarButtonVariatn * Changing my mind on the transparent variant * review fixes * Review fixespull/30605/head
Torkel Ödegaard
4 years ago
committed by
GitHub
parent
951b11a9a5
commit
80294b2dbf
@ -0,0 +1,35 @@ |
||||
import React, { forwardRef, HTMLAttributes } from 'react'; |
||||
import { css, cx } from 'emotion'; |
||||
import { GrafanaTheme } from '@grafana/data'; |
||||
import { useStyles } from '../../themes'; |
||||
|
||||
export interface Props extends HTMLAttributes<HTMLDivElement> { |
||||
className?: string; |
||||
} |
||||
|
||||
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => { |
||||
const styles = useStyles(getStyles); |
||||
|
||||
return ( |
||||
<div ref={ref} className={cx(styles.wrapper, className)} {...rest}> |
||||
{children} |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
ToolbarButtonRow.displayName = 'ToolbarButtonRow'; |
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({ |
||||
wrapper: css` |
||||
display: flex; |
||||
|
||||
.button-group, |
||||
.toolbar-button { |
||||
margin-left: ${theme.spacing.sm}; |
||||
|
||||
&:first-child { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
`,
|
||||
}); |
||||
@ -1,3 +1,4 @@ |
||||
export * from './Button'; |
||||
export { ButtonGroup } from './ButtonGroup'; |
||||
export { ToolbarButton } from './ToolbarButton'; |
||||
export { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton'; |
||||
export { ToolbarButtonRow } from './ToolbarButtonRow'; |
||||
|
||||
@ -1,58 +0,0 @@ |
||||
import React, { forwardRef } from 'react'; |
||||
import { IconName, Icon } from '@grafana/ui'; |
||||
|
||||
export enum IconSide { |
||||
left = 'left', |
||||
right = 'right', |
||||
} |
||||
|
||||
interface Props extends React.HTMLAttributes<HTMLDivElement> { |
||||
splitted: boolean; |
||||
title: string; |
||||
onClick?: () => void; |
||||
buttonClassName?: string; |
||||
icon?: IconName; |
||||
iconClassName?: string; |
||||
iconSide?: IconSide; |
||||
disabled?: boolean; |
||||
} |
||||
|
||||
function formatBtnTitle(title: string, iconSide?: string): string { |
||||
return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title; |
||||
} |
||||
|
||||
export const ResponsiveButton = forwardRef<HTMLButtonElement, Props>((props, ref) => { |
||||
const defaultProps = { |
||||
iconSide: IconSide.left, |
||||
}; |
||||
|
||||
props = { ...defaultProps, ...props }; |
||||
const { |
||||
title, |
||||
onClick, |
||||
buttonClassName, |
||||
icon, |
||||
iconClassName, |
||||
splitted, |
||||
iconSide, |
||||
disabled, |
||||
...divElementProps |
||||
} = props; |
||||
|
||||
return ( |
||||
<div {...divElementProps}> |
||||
<button |
||||
ref={ref} |
||||
className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} |
||||
onClick={onClick ?? undefined} |
||||
disabled={disabled || false} |
||||
> |
||||
{icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} size="lg" /> : null} |
||||
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span> |
||||
{icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} size="lg" /> : null} |
||||
</button> |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
ResponsiveButton.displayName = 'ResponsiveButton'; |
||||
Loading…
Reference in new issue