chore: Rewrites dashboard IconButton component (#14174)

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -23,6 +23,7 @@ import { JsonObject, styled } from '@superset-ui/core';
 import ErrorBoundary from 'src/components/ErrorBoundary';
 import BuilderComponentPane from 'src/dashboard/components/BuilderComponentPane';
 import DashboardHeader from 'src/dashboard/containers/DashboardHeader';
+import Icons from 'src/components/Icons';
 import IconButton from 'src/dashboard/components/IconButton';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
@@ -251,7 +252,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
                   shouldFocus={shouldFocusTabs}
                   menuItems={[
                     <IconButton
-                      className="fa fa-level-down"
+                      icon={<Icons.FallOutlined iconSize="xl" />}
                       label="Collapse tab content"
                       onClick={handleDeleteTopLevelTabs}
                     />,

superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts

@@ -37,8 +37,7 @@ export const shouldFocusTabs = (
 ) =>
   // don't focus the tabs when we click on a tab
   event.target.className === 'ant-tabs-nav-wrap' ||
-  (/icon-button/.test(event.target.className) &&
-    container.contains(event.target));
+  container.contains(event.target);
 
 export const getRootLevelTabIndex = (
   dashboardLayout: DashboardLayout,

superset-frontend/src/dashboard/components/DeleteComponentButton.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import Icons from 'src/components/Icons';
 import IconButton from './IconButton';
 
 const propTypes = {
@@ -30,7 +30,9 @@ const defaultProps = {};
 export default class DeleteComponentButton extends React.PureComponent {
   render() {
     const { onDelete } = this.props;
-    return <IconButton onClick={onDelete} className="fa fa-trash" />;
+    return (
+      <IconButton onClick={onDelete} icon={<Icons.Trash iconSize="xl" />} />
+    );
   }
 }
 

superset-frontend/src/dashboard/components/IconButton.jsx

@@ -1,63 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.string,
-};
-
-const defaultProps = {
-  className: null,
-  label: null,
-};
-
-export default class IconButton extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(event) {
-    event.preventDefault();
-    const { onClick } = this.props;
-    onClick(event);
-  }
-
-  render() {
-    const { className, label } = this.props;
-    return (
-      <div
-        className="icon-button"
-        onClick={this.handleClick}
-        tabIndex="0"
-        role="button"
-        data-test="icon-button"
-      >
-        <span data-test="icon-button-span" className={className} />
-        {label && <span className="icon-button-label">{label}</span>}
-      </div>
-    );
-  }
-}
-
-IconButton.propTypes = propTypes;
-IconButton.defaultProps = defaultProps;

superset-frontend/src/dashboard/components/IconButton.tsx

@@ -16,28 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../../stylesheets/less/variables.less';
+import React, { MouseEventHandler } from 'react';
+import { styled } from '@superset-ui/core';
 
-.icon-button {
-  color: @gray;
-  font-size: @font-size-l;
+interface IconButtonProps {
+  icon: JSX.Element;
+  label?: string;
+  onClick: MouseEventHandler<HTMLDivElement>;
+}
+
+const StyledDiv = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  outline: none;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: @almost-black;
-    outline: none;
-    text-decoration: none;
+  color: ${({ theme }) => theme.colors.grayscale.base};
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary.base};
   }
-}
+`;
 
-.icon-button-label {
-  color: @gray-dark;
-  padding-left: 8px;
-  font-size: @font-size-m;
-}
+const StyledSpan = styled.span`
+  margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
+const IconButton = ({ icon, label, onClick }: IconButtonProps) => (
+  <StyledDiv
+    tabIndex={0}
+    role="button"
+    onClick={e => {
+      e.preventDefault();
+      onClick(e);
+    }}
+  >
+    {icon}
+    {label && <StyledSpan>{label}</StyledSpan>}
+  </StyledDiv>
+);
+
+export default IconButton;

superset-frontend/src/dashboard/components/PropertiesModal/index.jsx

@@ -38,7 +38,6 @@ import { JsonEditor } from 'src/components/AsyncAceEditor';
 import ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
-import 'src/dashboard/stylesheets/buttons.less';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 
 const StyledJsonEditor = styled(JsonEditor)`

superset-frontend/src/dashboard/components/gridComponents/Column.jsx

@@ -19,21 +19,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
-import DashboardComponent from '../../containers/DashboardComponent';
-import DeleteComponentButton from '../DeleteComponentButton';
-import DragDroppable from '../dnd/DragDroppable';
-import DragHandle from '../dnd/DragHandle';
-import HoverMenu from '../menu/HoverMenu';
-import IconButton from '../IconButton';
-import ResizableContainer from '../resizable/ResizableContainer';
-import BackgroundStyleDropdown from '../menu/BackgroundStyleDropdown';
-import WithPopoverMenu from '../menu/WithPopoverMenu';
-
-import backgroundStyleOptions from '../../util/backgroundStyleOptions';
-import { componentShape } from '../../util/propShapes';
-
-import { BACKGROUND_TRANSPARENT } from '../../util/constants';
+import Icons from 'src/components/Icons';
+import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
+import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
+import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
+import DragHandle from 'src/dashboard/components/dnd/DragHandle';
+import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
+import IconButton from 'src/dashboard/components/IconButton';
+import ResizableContainer from 'src/dashboard/components/resizable/ResizableContainer';
+import BackgroundStyleDropdown from 'src/dashboard/components/menu/BackgroundStyleDropdown';
+import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
+import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
+import { componentShape } from 'src/dashboard/util/propShapes';
+import { BACKGROUND_TRANSPARENT } from 'src/dashboard/util/constants';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -169,7 +167,7 @@ class Column extends React.PureComponent {
                   />
                   <IconButton
                     onClick={this.handleChangeFocus}
-                    className="fa fa-cog"
+                    icon={<Icons.Cog iconSize="xl" />}
                   />
                 </HoverMenu>
               )}

superset-frontend/src/dashboard/components/gridComponents/Row.jsx

@@ -20,18 +20,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import DragDroppable from '../dnd/DragDroppable';
-import DragHandle from '../dnd/DragHandle';
-import DashboardComponent from '../../containers/DashboardComponent';
-import DeleteComponentButton from '../DeleteComponentButton';
-import HoverMenu from '../menu/HoverMenu';
-import IconButton from '../IconButton';
-import BackgroundStyleDropdown from '../menu/BackgroundStyleDropdown';
-import WithPopoverMenu from '../menu/WithPopoverMenu';
-
-import { componentShape } from '../../util/propShapes';
-import backgroundStyleOptions from '../../util/backgroundStyleOptions';
-import { BACKGROUND_TRANSPARENT } from '../../util/constants';
+import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
+import DragHandle from 'src/dashboard/components/dnd/DragHandle';
+import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
+import DeleteComponentButton from 'src/dashboard/components/DeleteComponentButton';
+import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
+import Icons from 'src/components/Icons';
+import IconButton from 'src/dashboard/components/IconButton';
+import BackgroundStyleDropdown from 'src/dashboard/components/menu/BackgroundStyleDropdown';
+import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
+import { componentShape } from 'src/dashboard/util/propShapes';
+import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
+import { BACKGROUND_TRANSPARENT } from 'src/dashboard/util/constants';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -149,7 +149,7 @@ class Row extends React.PureComponent {
                 <DeleteComponentButton onDelete={this.handleDeleteComponent} />
                 <IconButton
                   onClick={this.handleChangeFocus}
-                  className="fa fa-cog"
+                  icon={<Icons.Cog iconSize="xl" />}
                 />
               </HoverMenu>
             )}

superset-frontend/src/dashboard/stylesheets/index.less

@@ -20,7 +20,6 @@
 
 @import './builder.less';
 @import './builder-sidepane.less';
-@import './buttons.less';
 @import './dashboard.less';
 @import './dnd.less';
 @import './filter-scope-selector.less';