From 9370bad798f29cbb1c686ef2e4f144e92ce63e2e Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 30 May 2022 05:20:04 -0400
Subject: [PATCH] Chore: Remove deprecated `surface` prop from IconButton
 (#49715) (#49745)

* Chore: Remove deprecated `surface` prop from IconButton

* Update component docs

(cherry picked from commit 3d8eda0132beff3ebc13f71c845bea4a6970c90a)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 .../src/components/Drawer/Drawer.tsx           |  3 ---
 .../src/components/IconButton/IconButton.mdx   |  2 +-
 .../src/components/IconButton/IconButton.tsx   |  4 ----
 .../grafana-ui/src/components/Modal/Modal.tsx  |  2 +-
 .../src/components/PageLayout/PageToolbar.tsx  |  1 -
 .../components/Layers/LayerDragDropList.tsx    |  2 --
 .../QueryOperationRow/QueryOperationAction.tsx |  1 -
 .../AddPanelWidget/AddPanelWidget.tsx          |  4 ++--
 .../AnnotationSettingsList.tsx                 | 16 ++--------------
 .../LinksSettings/LinkSettingsList.tsx         | 18 +++---------------
 .../TransformationsEditor.tsx                  |  2 --
 .../search/components/DashboardSearch.tsx      |  4 ++--
 .../OrganizeFieldsTransformerEditor.tsx        |  1 -
 .../components/QueryEditor/QueryEditorRow.tsx  |  2 --
 14 files changed, 11 insertions(+), 51 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 087cd720419..275ba48579a 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -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>
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.mdx b/packages/grafana-ui/src/components/IconButton/IconButton.mdx
index 1d8490952a5..b40c53e0bdd 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.mdx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.mdx
@@ -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.
 
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index 137dfe14369..53d727d6963 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -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>(
   (
     {
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index a3f6aeba5df..fc78c463c74 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -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>
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 7fbc8336df9..a9d8032a693 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -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}
             />
diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx
index 1b6c18c37bd..fe5c127f432 100644
--- a/public/app/core/components/Layers/LayerDragDropList.tsx
+++ b/public/app/core/components/Layers/LayerDragDropList.tsx
@@ -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"
                             />
                           </>
                         )}
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
index 4c59c1ad952..5f77de0d21c 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
@@ -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)}
       />
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index b3cc87dd168..89d1a6d06d2 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -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>
   );
 };
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
index 0e59efeb395..7e911b5f8a8 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
@@ -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%' }}>
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index 4db46c6143f..5da57c62171 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
@@ -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
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 8e9c99230ed..40b8b297a43 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -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 });
           }}
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index b38c7bec8f4..28405ea031d 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -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}>
diff --git a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
index 95eec6a6230..1365aaf58dc 100644
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@@ -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}>
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index 155ed2942bc..0ee4faf69ae 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
@@ -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}