diff --git a/superset-frontend/src/common/components/Collapse.tsx b/superset-frontend/src/common/components/Collapse.tsx
new file mode 100644
index 0000000000..b901bf4d5c
--- /dev/null
+++ b/superset-frontend/src/common/components/Collapse.tsx
@@ -0,0 +1,77 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+// eslint-disable-next-line no-restricted-imports
+import { Collapse as AntdCollapse } from 'antd';
+import { CollapseProps as AntdCollapseProps } from 'antd/lib/collapse';
+
+interface CollapseProps extends AntdCollapseProps {
+ light?: boolean;
+ bigger?: boolean;
+ bold?: boolean;
+}
+
+const Collapse = Object.assign(
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ styled(({ light, bigger, bold, ...props }: CollapseProps) => (
+
+ ))`
+ height: 100%;
+ .ant-collapse-item {
+ border: 0;
+ height: 100%;
+ &:last-of-type.ant-collapse-item-active {
+ padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ }
+ .ant-collapse-header {
+ font-weight: ${({ bold, theme }) =>
+ bold
+ ? theme.typography.weights.bold
+ : theme.typography.weights.normal};
+ font-size: ${({ bigger, theme }) =>
+ bigger ? `${theme.gridUnit * 4}px` : 'inherit'};
+
+ ${({ light, theme }) =>
+ light &&
+ `
+ color: ${theme.colors.grayscale.light4};
+ .ant-collapse-arrow svg {
+ color: ${theme.colors.grayscale.light4};
+ }
+ `}
+ }
+ .ant-collapse-content {
+ height: 100%;
+ .ant-collapse-content-box {
+ height: 100%;
+ .loading.inline {
+ margin: ${({ theme }) => theme.gridUnit * 12}px auto;
+ display: block;
+ }
+ }
+ }
+ }
+ `,
+ {
+ Panel: AntdCollapse.Panel,
+ },
+);
+
+export default Collapse;
diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
index 59d83cf2ec..5c73f87b3a 100644
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ b/superset-frontend/src/common/components/common.stories.tsx
@@ -34,6 +34,7 @@ import {
} from './DatePicker';
import Badge from './Badge';
import ProgressBar from './ProgressBar';
+import Collapse from './Collapse';
export default {
title: 'Common Components',
@@ -261,3 +262,62 @@ export const BadgeTextColored = () => (
export const BadgeSuccess = () => ;
export const BadgeError = () => ;
export const BadgeSmall = () => ;
+
+export const CollapseDefault = () => (
+
+
+ Hi! I am a sample content
+
+
+ Hi! I am another sample content
+
+
+);
+export const CollapseGhost = () => (
+
+
+ Hi! I am a sample content
+
+
+ Hi! I am another sample content
+
+
+);
+export const CollapseBold = () => (
+
+
+ Hi! I am a sample content
+
+
+ Hi! I am another sample content
+
+
+);
+export const CollapseBigger = () => (
+
+
+ Hi! I am a sample content
+
+
+ Hi! I am another sample content
+
+
+);
+export const CollapseTextLight = () => (
+
+
+ Hi! I am a sample content
+
+
+ Hi! I am another sample content
+
+
+);
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index 895c2e6d6e..2bdcfb47e2 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/superset-frontend/src/common/components/index.tsx
@@ -32,7 +32,6 @@ export {
Avatar,
Button,
Card,
- Collapse,
DatePicker,
Dropdown,
Empty,
@@ -47,8 +46,9 @@ export {
Tooltip,
} from 'antd';
-export { default as Badge } from 'src/common/components/Badge';
-export { default as Progress } from 'src/common/components/ProgressBar';
+export { default as Collapse } from './Collapse';
+export { default as Badge } from './Badge';
+export { default as Progress } from './ProgressBar';
export const MenuItem = styled(AntdMenu.Item)`
> a {
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
index a91cfe4a90..e3a7d3a6e4 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel.tsx
@@ -117,9 +117,6 @@ const DetailsPanelPopover = ({
padding-bottom: 0;
}
}
- .ant-collapse-item:last-of-type.ant-collapse-item-active {
- padding-bottom: ${theme.gridUnit * 3}px;
- }
&.ant-popover-placement-bottom,
&.ant-popover-placement-bottomLeft,
&.ant-popover-placement-bottomRight {
@@ -155,15 +152,13 @@ const DetailsPanelPopover = ({
&.ant-popover {
color: ${theme.colors.grayscale.light4};
}
- .ant-collapse-arrow svg {
- color: ${theme.colors.grayscale.light4};
- }
}
`}
/>
diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
index 474ef94f83..9336051e7d 100644
--- a/superset-frontend/src/explore/components/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -222,7 +222,13 @@ export const DataTablesPane = ({
{displayBackground && }
-
+
theme.colors.grayscale.light5};
- .ant-collapse-item {
- height: 100%;
- border: 0;
- }
- .ant-collapse-content,
- .ant-collapse-content-box {
- height: 100%;
- }
- .ant-collapse-header {
- background-color: ${({ theme }) => theme.colors.grayscale.light5};
- padding-top: 0;
- padding-bottom: 0;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- & > .ant-collapse-arrow {
- top: 5px; // not a theme variable, override necessary after setting paddings to 0 to center arrow
- }
- }
.ant-tabs {
height: 100%;
.ant-tabs-nav {
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 237a2c1dfe..5a5f6fd8b8 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -30,8 +30,6 @@ import ChartTable from './ChartTable';
import SavedQueries from './SavedQueries';
import DashboardTable from './DashboardTable';
-const { Panel } = Collapse;
-
interface WelcomeProps {
user: User;
addDangerToast: (arg0: string) => void;
@@ -81,17 +79,6 @@ const WelcomeContainer = styled.div`
.ant-card.ant-card-bordered {
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
- .ant-collapse-header {
- font-weight: ${({ theme }) => theme.typography.weights.normal};
- font-size: ${({ theme }) => theme.gridUnit * 4}px;
- }
- .ant-collapse-content-box {
- min-height: 265px;
- .loading.inline {
- margin: ${({ theme }) => theme.gridUnit * 12}px auto;
- display: block;
- }
- }
`;
function Welcome({ user, addDangerToast }: WelcomeProps) {
@@ -134,8 +121,8 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
return (
-
-
+
+
-
-
+
+
{loading ? (
) : (
@@ -154,21 +141,21 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
isLoading={loading}
/>
)}
-
-
+
+
{loading ? (
) : (
)}
-
-
+
+
{loading ? (
) : (
)}
-
+
);