This is an automated email from the ASF dual-hosted git repository.
tai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new e89e60d style: update +NEW button to use Button component, add
dropdownItems prop to Button (#10422)
e89e60d is described below
commit e89e60df766de19e8effc79e8376ed0682c06ccc
Author: Moriah Kreeger <moar.r...@gmail.com>
AuthorDate: Tue Jul 28 14:29:52 2020 -0700
style: update +NEW button to use Button component, add dropdownItems prop
to Button (#10422)
---
superset-frontend/src/components/Button/index.tsx | 47 ++++++++++++++----
superset-frontend/src/components/Menu/NewMenu.tsx | 56 +++++++++++-----------
.../stylesheets/less/cosmo/bootswatch.less | 5 --
3 files changed, 64 insertions(+), 44 deletions(-)
diff --git a/superset-frontend/src/components/Button/index.tsx
b/superset-frontend/src/components/Button/index.tsx
index 6861fc5..24028d0 100644
--- a/superset-frontend/src/components/Button/index.tsx
+++ b/superset-frontend/src/components/Button/index.tsx
@@ -22,11 +22,18 @@ import {
Button as BootstrapButton,
Tooltip,
OverlayTrigger,
+ MenuItem,
} from 'react-bootstrap';
import styled from '@superset-ui/style';
export type OnClickHandler = React.MouseEventHandler<BootstrapButton>;
+export interface DropdownItemProps {
+ label: string;
+ url: string;
+ icon?: string;
+}
+
export interface ButtonProps {
className?: string;
tooltip?: string;
@@ -38,6 +45,7 @@ export interface ButtonProps {
bsSize?: BootstrapButton.ButtonProps['bsSize'];
style?: BootstrapButton.ButtonProps['style'];
children?: React.ReactNode;
+ dropdownItems?: DropdownItemProps[];
}
const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed'
};
@@ -82,23 +90,41 @@ export default function Button(props: ButtonProps) {
};
const tooltip = props.tooltip;
const placement = props.placement;
+ const dropdownItems = props.dropdownItems;
delete buttonProps.tooltip;
delete buttonProps.placement;
+ if (tooltip && props.disabled) {
+ // Working around the fact that tooltips don't get triggered when buttons
are disabled
+ // https://github.com/react-bootstrap/react-bootstrap/issues/1588
+ buttonProps.style = { pointerEvents: 'none' };
+ }
+
let button = (
<SupersetButton {...buttonProps}>{props.children}</SupersetButton>
);
+
+ if (dropdownItems) {
+ button = (
+ <div style={BUTTON_WRAPPER_STYLE}>
+ <SupersetButton {...buttonProps} data-toggle="dropdown">
+ {props.children}
+ </SupersetButton>
+ <ul className="dropdown-menu">
+ {dropdownItems.map(
+ (dropdownItem: DropdownItemProps, index1: number) => (
+ <MenuItem key={`${dropdownItem.label}`} href={dropdownItem.url}>
+ <i className={`fa ${dropdownItem.icon}`} />
+ {dropdownItem.label}
+ </MenuItem>
+ ),
+ )}
+ </ul>
+ </div>
+ );
+ }
+
if (tooltip) {
- if (props.disabled) {
- // Working around the fact that tooltips don't get triggered when
buttons are disabled
- // https://github.com/react-bootstrap/react-bootstrap/issues/1588
- buttonProps.style = { pointerEvents: 'none' };
- button = (
- <div style={BUTTON_WRAPPER_STYLE}>
- <SupersetButton {...buttonProps}>{props.children}</SupersetButton>
- </div>
- );
- }
return (
<OverlayTrigger
placement={placement}
@@ -110,5 +136,6 @@ export default function Button(props: ButtonProps) {
</OverlayTrigger>
);
}
+
return button;
}
diff --git a/superset-frontend/src/components/Menu/NewMenu.tsx
b/superset-frontend/src/components/Menu/NewMenu.tsx
index 1973652..055ca2e 100644
--- a/superset-frontend/src/components/Menu/NewMenu.tsx
+++ b/superset-frontend/src/components/Menu/NewMenu.tsx
@@ -17,44 +17,42 @@
* under the License.
*/
import React from 'react';
+import styled from '@superset-ui/style';
import { t } from '@superset-ui/translation';
+import Button, { DropdownItemProps } from '../Button';
-const buttonStyle = {
- marginTop: '12px',
- marginRight: '30px',
-};
+const StyledButton = styled(Button)`
+ margin-top: 12px;
+ margin-right: 30px;
+`;
+
+const dropdownItems: DropdownItemProps[] = [
+ {
+ label: t('SQL Query'),
+ url: '/superset/sqllab',
+ icon: 'fa-fw fa-search',
+ },
+ {
+ label: t('Chart'),
+ url: '/chart/add',
+ icon: 'fa-fw fa-bar-chart',
+ },
+ {
+ label: t('Dashboard'),
+ url: '/dashboard/new',
+ icon: 'fa-fw fa-dashboard',
+ },
+];
export default function NewMenu() {
return (
<li className="dropdown">
- <button
- type="button"
- style={buttonStyle}
- data-toggle="dropdown"
+ <StyledButton
className="dropdown-toggle btn btn-sm btn-primary"
+ dropdownItems={dropdownItems}
>
<i className="fa fa-plus" /> New
- </button>
- <ul className="dropdown-menu">
- <li>
- <a href="/superset/sqllab">
- <span className="fa fa-fw fa-search" />
- {t('SQL Query')}
- </a>
- </li>
- <li>
- <a href="/chart/add">
- <span className="fa fa-fw fa-bar-chart" />
- {t('Chart')}
- </a>
- </li>
- <li>
- <a href="/dashboard/new/">
- <span className="fa fa-fw fa-dashboard" />
- {t('Dashboard')}
- </a>
- </li>
- </ul>
+ </StyledButton>
</li>
);
}
diff --git a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
index 057fa7e..f65e95a 100644
--- a/superset-frontend/stylesheets/less/cosmo/bootswatch.less
+++ b/superset-frontend/stylesheets/less/cosmo/bootswatch.less
@@ -70,11 +70,6 @@
text-transform: uppercase;
}
-.btn-default:hover {
- color: @gray-dark;
- background-color: @gray-bg;
-}
-
.nav-tabs {
.dropdown-toggle.btn,
.btn-group.open .dropdown-toggle.btn {
