diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx index b761244e2..1749c8805 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable.jsx +++ b/superset-frontend/src/SqlLab/components/QueryTable.jsx @@ -19,7 +19,7 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; -import { Well } from 'react-bootstrap'; +import Card from 'src/common/components/Card'; import ProgressBar from 'src/components/ProgressBar'; import Label from 'src/components/Label'; import { t } from '@superset-ui/core'; @@ -129,14 +129,14 @@ const QueryTable = props => { ); q.sql = ( - + - + ); if (q.resultsKey) { q.output = ( diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx index 380a73ff5..ec7ce38ab 100644 --- a/superset-frontend/src/SqlLab/components/TableElement.jsx +++ b/superset-frontend/src/SqlLab/components/TableElement.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { Well } from 'react-bootstrap'; +import Card from 'src/common/components/Card'; import Collapse from 'src/common/components/Collapse'; import ButtonGroup from 'src/components/ButtonGroup'; import shortid from 'shortid'; @@ -115,14 +115,14 @@ class TableElement extends React.PureComponent { ); latest = latest.join('/'); header = ( - + {t('latest partition:')} {latest} {' '} {partitionClipBoard} - + ); } return header; diff --git a/superset-frontend/src/common/components/Card.tsx b/superset-frontend/src/common/components/Card.tsx new file mode 100644 index 000000000..285af246b --- /dev/null +++ b/superset-frontend/src/common/components/Card.tsx @@ -0,0 +1,39 @@ +/** + * 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'; +import AntdCard, { CardProps as AntdCardProps } from 'antd/lib/card'; + +interface CardProps extends AntdCardProps { + padded?: boolean; +} + +const Card = styled(({ padded, ...props }: CardProps) => ( + +))` + background-color: ${({ theme }) => theme.colors.grayscale.light4}; + border-radius: ${({ theme }) => theme.borderRadius}px; + + .ant-card-body { + padding: ${({ padded, theme }) => + padded ? theme.gridUnit * 4 : theme.gridUnit}px; + } +`; + +export default Card; diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx index 41a0d1b51..4d52d3ead 100644 --- a/superset-frontend/src/common/components/index.tsx +++ b/superset-frontend/src/common/components/index.tsx @@ -28,7 +28,7 @@ import { DropDownProps } from 'antd/lib/dropdown'; export { AutoComplete, Avatar, - Card, + Button, Checkbox, Col, DatePicker, @@ -51,6 +51,7 @@ export { Tooltip, Input as AntdInput, } from 'antd'; +export { Card as AntdCard } from 'antd'; export { FormInstance } from 'antd/lib/form'; export { RadioChangeEvent } from 'antd/lib/radio'; export { TreeProps } from 'antd/lib/tree'; @@ -58,6 +59,9 @@ export { default as Alert, AlertProps } from 'antd/lib/alert'; export { default as Select, SelectProps } from 'antd/lib/select'; export { default as Collapse } from './Collapse'; +export { default as Badge } from 'src/components/Badge'; +export { default as Card } from './Card'; +export { default as Progress } from 'src/components/ProgressBar'; export const MenuItem = styled(AntdMenu.Item)` > a { diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx index 1090d8b88..b8586ddff 100644 --- a/superset-frontend/src/components/ListViewCard/index.tsx +++ b/superset-frontend/src/components/ListViewCard/index.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { styled } from '@superset-ui/core'; import Icon from 'src/components/Icon'; -import { Card, Skeleton, ThinSkeleton } from 'src/common/components'; +import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components'; import { Tooltip } from 'src/common/components/Tooltip'; import ImageLoader, { BackgroundPosition } from './ImageLoader'; @@ -29,7 +29,7 @@ const ActionsWrapper = styled.div` justify-content: space-between; `; -const StyledCard = styled(Card)` +const StyledCard = styled(AntdCard)` border: 1px solid #d9dbe4; border-radius: ${({ theme }) => theme.gridUnit}px; overflow: hidden; @@ -198,7 +198,7 @@ function ListViewCard({ } > {loading && ( - @@ -221,7 +221,7 @@ function ListViewCard({ /> )} {!loading && ( - diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index e056d9c7c..c08062edd 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.jsx @@ -18,7 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { Col, Well } from 'react-bootstrap'; +import { Col } from 'react-bootstrap'; +import Card from 'src/common/components/Card'; import { Radio } from 'src/common/components/Radio'; import Alert from 'src/components/Alert'; import Badge from 'src/components/Badge'; @@ -284,7 +285,7 @@ StackedField.propTypes = { }; function FormContainer({ children }) { - return {children}; + return {children}; } FormContainer.propTypes = { diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index 9fa8d5a62..2d1df61ad 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -141,7 +141,8 @@ export class ControlPanelsContainer extends React.Component