mirror of
https://github.com/grafana/grafana.git
synced 2025-07-29 17:12:29 +08:00
Design System: Refactor IconButton and update documentation (#66774)
* refactor: remove unnecessary styling and adjust to button styling * refactor: improve story * refactor: use new default styling for border radius * refactor: add missing pseudo classes and clean up * refactor: repair disabled styling and add to story * refactor: clean up and apply styles defined in figma * refactor: set hover background in a pseudo-element * refactor: unify large sizes * refactor: add information for further use * refactor: add comment * refactor: comments and clean up import * refactor: add changes after code review * refactor: replace some bad example code in documentation * refactor: update comment Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com> * refactor: add changes requested in review * refactor: move deprecation warning * refactor: replace padding * refactor: remove local styling * refactor: create separate stories for different examples * refactor: change style of story * refactor: replace absolute value by variable * Update toggles_gen.go --------- Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
This commit is contained in:
@ -5,8 +5,8 @@ import { colorManipulator, GrafanaTheme2, ThemeRichColor } from '@grafana/data';
|
||||
|
||||
import { useTheme2 } from '../../themes';
|
||||
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
|
||||
import { ComponentSize } from '../../types';
|
||||
import { IconName } from '../../types/icon';
|
||||
import { ComponentSize } from '../../types/size';
|
||||
import { getPropertiesForButtonSize } from '../Forms/commonStyles';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip';
|
||||
@ -60,6 +60,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
iconOnly: !children,
|
||||
});
|
||||
|
||||
// In order to standardise Button please always consider using IconButton when you need a button with an icon only
|
||||
const button = (
|
||||
<button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
|
||||
{icon && <Icon name={icon} size={size} className={styles.icon} />}
|
||||
@ -175,7 +176,7 @@ export const getButtonStyles = (props: StyleProps) => {
|
||||
lineHeight: `${theme.spacing.gridSize * height - 2}px`,
|
||||
verticalAlign: 'middle',
|
||||
cursor: 'pointer',
|
||||
borderRadius: theme.shape.borderRadius(1),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
'&:focus': focusStyle,
|
||||
'&:focus-visible': focusStyle,
|
||||
'&:focus:not(:focus-visible)': getMouseFocusStyles(theme),
|
||||
|
Reference in New Issue
Block a user