* Chore: Remove deprecated `surface` prop from IconButton
* Update component docs
(cherry picked from commit 3d8eda0132)
Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
co-authored by
kay delaney
kay delaney
parent
30b77e9716
commit
9370bad798
@@ -96,7 +96,6 @@ export function Drawer({
|
||||
name="angle-left"
|
||||
size="xl"
|
||||
onClick={() => setIsExpanded(true)}
|
||||
surface="header"
|
||||
aria-label={selectors.components.Drawer.General.expand}
|
||||
/>
|
||||
)}
|
||||
@@ -105,7 +104,6 @@ export function Drawer({
|
||||
name="angle-right"
|
||||
size="xl"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
surface="header"
|
||||
aria-label={selectors.components.Drawer.General.contract}
|
||||
/>
|
||||
)}
|
||||
@@ -113,7 +111,6 @@ export function Drawer({
|
||||
name="times"
|
||||
size="xl"
|
||||
onClick={onClose}
|
||||
surface="header"
|
||||
aria-label={selectors.components.Drawer.General.close}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { IconButton } from './IconButton';
|
||||
|
||||
# IconButton
|
||||
|
||||
This component looks like just an icon but behaves like a button. It fulfils an action when you click it and has hover and focus states. You can choose which icon size you would like to use. Watch out for where you place this icon, as the hover effect needs to be adjusted with the `surface` prop depending on where it is used.
|
||||
This component looks like just an icon but behaves like a button. It fulfils an action when you click it and has hover and focus states. You can choose which icon size you would like to use.
|
||||
|
||||
`IconButton` is best used when an actual button would look out of place, for example when you want to place a solitary clickable icon next to text. An example where an `IconButton` is used in Grafana is the top left back arrow in the panel edit mode.
|
||||
|
||||
|
||||
@@ -18,8 +18,6 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
name: IconName;
|
||||
/** Icon size */
|
||||
size?: IconSize;
|
||||
/** @deprecated */
|
||||
surface?: SurfaceType;
|
||||
/** Type od the icon - mono or default */
|
||||
iconType?: IconType;
|
||||
/** Tooltip content to display on hover */
|
||||
@@ -32,8 +30,6 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
type SurfaceType = 'dashboard' | 'panel' | 'header';
|
||||
|
||||
export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
|
||||
(
|
||||
{
|
||||
|
||||
@@ -83,7 +83,7 @@ export function Modal(props: PropsWithChildren<Props>) {
|
||||
typeof title !== 'string' && title
|
||||
}
|
||||
<div className={styles.modalHeaderClose}>
|
||||
<IconButton aria-label="Close dialogue" surface="header" name="times" size="xl" onClick={onDismiss} />
|
||||
<IconButton aria-label="Close dialogue" name="times" size="xl" onClick={onDismiss} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={cx(styles.modalContent, contentClassName)}>{children}</div>
|
||||
|
||||
@@ -73,7 +73,6 @@ export const PageToolbar: FC<Props> = React.memo(
|
||||
tooltip="Go back (Esc)"
|
||||
tooltipPlacement="bottom"
|
||||
size="xxl"
|
||||
surface="dashboard"
|
||||
aria-label={selectors.components.BackButton.backArrow}
|
||||
onClick={onGoBack}
|
||||
/>
|
||||
|
||||
@@ -82,7 +82,6 @@ export const LayerDragDropList = <T extends LayerElement>({
|
||||
title={'Duplicate'}
|
||||
className={style.actionIcon}
|
||||
onClick={() => onDuplicate(element)}
|
||||
surface="header"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@@ -91,7 +90,6 @@ export const LayerDragDropList = <T extends LayerElement>({
|
||||
title={'remove'}
|
||||
className={cx(style.actionIcon, style.dragIcon)}
|
||||
onClick={() => onDelete(element)}
|
||||
surface="header"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -30,7 +30,6 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
|
||||
className={styles.icon}
|
||||
disabled={!!disabled}
|
||||
onClick={onClick}
|
||||
surface="header"
|
||||
type="button"
|
||||
aria-label={selectors.components.QueryEditorRow.actionButton(title)}
|
||||
/>
|
||||
|
||||
@@ -212,7 +212,7 @@ const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, o
|
||||
<div className={cx(styles.headerRow, 'grid-drag-handle')}>
|
||||
{onBack && (
|
||||
<div className={styles.backButton}>
|
||||
<IconButton aria-label="Go back" name="arrow-left" onClick={onBack} surface="header" size="xl" />
|
||||
<IconButton aria-label="Go back" name="arrow-left" onClick={onBack} size="xl" />
|
||||
</div>
|
||||
)}
|
||||
{!onBack && (
|
||||
@@ -222,7 +222,7 @@ const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, o
|
||||
)}
|
||||
{children && <span>{children}</span>}
|
||||
<div className="flex-grow-1" />
|
||||
<IconButton aria-label="Close 'Add Panel' widget" name="times" onClick={onCancel} surface="header" />
|
||||
<IconButton aria-label="Close 'Add Panel' widget" name="times" onClick={onCancel} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-14
@@ -57,23 +57,11 @@ export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEd
|
||||
{dataSourceSrv.getInstanceSettings(annotation.datasource)?.name || annotation.datasource?.uid}
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
{idx !== 0 && (
|
||||
<IconButton
|
||||
surface="header"
|
||||
name="arrow-up"
|
||||
aria-label="arrow-up"
|
||||
onClick={() => onMove(idx, -1)}
|
||||
/>
|
||||
)}
|
||||
{idx !== 0 && <IconButton name="arrow-up" aria-label="arrow-up" onClick={() => onMove(idx, -1)} />}
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
{dashboard.annotations.list.length > 1 && idx !== dashboard.annotations.list.length - 1 ? (
|
||||
<IconButton
|
||||
surface="header"
|
||||
name="arrow-down"
|
||||
aria-label="arrow-down"
|
||||
onClick={() => onMove(idx, 1)}
|
||||
/>
|
||||
<IconButton name="arrow-down" aria-label="arrow-down" onClick={() => onMove(idx, 1)} />
|
||||
) : null}
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
|
||||
@@ -73,27 +73,15 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, o
|
||||
</HorizontalGroup>
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
{idx !== 0 && (
|
||||
<IconButton
|
||||
surface="header"
|
||||
name="arrow-up"
|
||||
aria-label="arrow-up"
|
||||
onClick={() => moveLink(idx, -1)}
|
||||
/>
|
||||
)}
|
||||
{idx !== 0 && <IconButton name="arrow-up" aria-label="arrow-up" onClick={() => moveLink(idx, -1)} />}
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
{links.length > 1 && idx !== links.length - 1 ? (
|
||||
<IconButton
|
||||
surface="header"
|
||||
name="arrow-down"
|
||||
aria-label="arrow-down"
|
||||
onClick={() => moveLink(idx, 1)}
|
||||
/>
|
||||
<IconButton name="arrow-down" aria-label="arrow-down" onClick={() => moveLink(idx, 1)} />
|
||||
) : null}
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
<IconButton surface="header" aria-label="copy" name="copy" onClick={() => duplicateLink(link, idx)} />
|
||||
<IconButton aria-label="copy" name="copy" onClick={() => duplicateLink(link, idx)} />
|
||||
</td>
|
||||
<td style={{ width: '1%' }}>
|
||||
<DeleteButton
|
||||
|
||||
-2
@@ -233,7 +233,6 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
||||
{filtered.length} / {xforms.length}
|
||||
<IconButton
|
||||
name="times"
|
||||
surface="header"
|
||||
onClick={() => {
|
||||
this.setState({ search: '' });
|
||||
}}
|
||||
@@ -251,7 +250,6 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
||||
suffix = (
|
||||
<IconButton
|
||||
name="times"
|
||||
surface="header"
|
||||
onClick={() => {
|
||||
this.setState({ showPicker: false });
|
||||
}}
|
||||
|
||||
@@ -56,7 +56,7 @@ function DashbaordSearchNEW({ onCloseSearch }: Props) {
|
||||
</div>
|
||||
|
||||
<div className={styles.closeBtn}>
|
||||
<IconButton name="times" surface="panel" onClick={onCloseSearch} size="xxl" tooltip="Close search" />
|
||||
<IconButton name="times" onClick={onCloseSearch} size="xxl" tooltip="Close search" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.search}>
|
||||
@@ -82,7 +82,7 @@ export const DashboardSearchOLD: FC<Props> = memo(({ onCloseSearch }) => {
|
||||
<div className={styles.searchField}>
|
||||
<SearchField query={query} onChange={onQueryChange} onKeyDown={onKeyDown} autoFocus clearable />
|
||||
<div className={styles.closeBtn}>
|
||||
<IconButton name="times" surface="panel" onClick={onCloseSearch} size="xxl" tooltip="Close search" />
|
||||
<IconButton name="times" onClick={onCloseSearch} size="xxl" tooltip="Close search" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.search}>
|
||||
|
||||
@@ -144,7 +144,6 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
|
||||
className={styles.toggle}
|
||||
size="md"
|
||||
name={visible ? 'eye' : 'eye-slash'}
|
||||
surface="header"
|
||||
onClick={() => onToggleVisibility(fieldName, visible)}
|
||||
/>
|
||||
<span className={styles.name} title={fieldName}>
|
||||
|
||||
@@ -31,7 +31,6 @@ export const QueryEditorRow = ({
|
||||
<IconButton
|
||||
name={hidden ? 'eye-slash' : 'eye'}
|
||||
onClick={onHideClick}
|
||||
surface="header"
|
||||
size="sm"
|
||||
aria-pressed={hidden}
|
||||
aria-label="hide metric"
|
||||
@@ -40,7 +39,6 @@ export const QueryEditorRow = ({
|
||||
)}
|
||||
<IconButton
|
||||
name="trash-alt"
|
||||
surface="header"
|
||||
size="sm"
|
||||
className={styles.icon}
|
||||
onClick={onRemoveClick || noop}
|
||||
|
||||
Reference in New Issue
Block a user