mirror of https://github.com/apache/superset.git
chore: Rewrites dashboard IconButton component (#14174)
This commit is contained in:
parent
1e8fb8b55c
commit
bdb9b0a9be
|
@ -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';
|
||||
|
|
|
@ -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}
|
||||
/>,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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" />} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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)`
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in New Issue