diff --git a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx index 3ab795265d..6331f68832 100644 --- a/superset-frontend/spec/javascripts/dashboard/components/gridComponents/Divider_spec.jsx +++ b/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'; diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index e12223891a..d8a0a34b86 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/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 = () => { shouldFocus={shouldFocusTabs} menuItems={[ } label="Collapse tab content" onClick={handleDeleteTopLevelTabs} />, diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts b/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts index 999adf62a7..f2aa381136 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts +++ b/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, diff --git a/superset-frontend/src/dashboard/components/DeleteComponentButton.jsx b/superset-frontend/src/dashboard/components/DeleteComponentButton.jsx index 4e3e10d3b0..d3936f3ed6 100644 --- a/superset-frontend/src/dashboard/components/DeleteComponentButton.jsx +++ b/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 ; + return ( + } /> + ); } } diff --git a/superset-frontend/src/dashboard/components/IconButton.jsx b/superset-frontend/src/dashboard/components/IconButton.jsx deleted file mode 100644 index 1db166dcb9..0000000000 --- a/superset-frontend/src/dashboard/components/IconButton.jsx +++ /dev/null @@ -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 ( -
- - {label && {label}} -
- ); - } -} - -IconButton.propTypes = propTypes; -IconButton.defaultProps = defaultProps; diff --git a/superset-frontend/src/dashboard/stylesheets/buttons.less b/superset-frontend/src/dashboard/components/IconButton.tsx similarity index 53% rename from superset-frontend/src/dashboard/stylesheets/buttons.less rename to superset-frontend/src/dashboard/components/IconButton.tsx index 9cec645b95..1a15456a1e 100644 --- a/superset-frontend/src/dashboard/stylesheets/buttons.less +++ b/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; +} + +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) => ( + { + e.preventDefault(); + onClick(e); + }} + > + {icon} + {label && {label}} + +); + +export default IconButton; diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx index cdc1b95674..c149479a01 100644 --- a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx +++ b/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)` diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx index 78d272b551..d63634978b 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx +++ b/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 { /> } /> )} diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx index 3614d9a98f..a6b3598cf0 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx +++ b/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 { } /> )} diff --git a/superset-frontend/src/dashboard/stylesheets/index.less b/superset-frontend/src/dashboard/stylesheets/index.less index 2f882ebe71..6dee17e77c 100644 --- a/superset-frontend/src/dashboard/stylesheets/index.less +++ b/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';