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:
Laura Benz
2023-05-15 13:57:18 +02:00
committed by GitHub
parent 9441692fe9
commit e7dc3575d1
9 changed files with 176 additions and 110 deletions

View File

@ -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),