Chore: Remove deprecated surface prop from IconButton (#49715)

* Chore: Remove deprecated `surface` prop from IconButton

* Update component docs
This commit is contained in:
kay delaney 2022-05-27 01:00:57 +01:00 committed by GitHub
parent e9e2ad6bee
commit 3d8eda0132
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 11 additions and 51 deletions

View File

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

View File

@ -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.

View File

@ -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>(
(
{

View File

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

View File

@ -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}
/>

View File

@ -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"
/>
</>
)}

View File

@ -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)}
/>

View File

@ -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>
);
};

View File

@ -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%' }}>

View File

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

View File

@ -233,7 +233,6 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
{filtered.length} / {xforms.length} &nbsp;&nbsp;
<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 });
}}

View File

@ -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}>

View File

@ -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}>

View File

@ -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}