IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-ui/src/components/Drawer/Drawer.tsx
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>

2
packages/grafana-ui/src/components/IconButton/IconButton.mdx
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.

4
packages/grafana-ui/src/components/IconButton/IconButton.tsx
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>(
(
{

2
packages/grafana-ui/src/components/Modal/Modal.tsx
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>

1
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
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}
/>

2
public/app/core/components/Layers/LayerDragDropList.tsx
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"
/>
</>
)}

1
public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
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)}
/>

4
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
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>
);
};

16
public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
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%' }}>

18
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
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

2
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
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 });
}}

4
public/app/features/search/components/DashboardSearch.tsx
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}>

1
public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
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}>

2
public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
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}