[superset] branch space-under-dataset-change-warning updated: feat: moves Alert spacing from a css override to an Alert prop

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch space-under-dataset-change-warning
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/space-under-dataset-change-warning by this push:
     new beb2287  feat: moves Alert spacing from a css override to an Alert prop
beb2287 is described below

commit beb2287a14c34935f5250a5316918fbf74c10a07
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Tue May 11 17:39:45 2021 -0700

    feat: moves Alert spacing from a css override to an Alert prop
---
 superset-frontend/src/components/Alert/index.tsx           | 10 ++++++----
 superset-frontend/src/datasource/ChangeDatasourceModal.tsx |  4 +---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/components/Alert/index.tsx b/superset-frontend/src/components/Alert/index.tsx
index 9e2e6bf..ae2c67a 100644
--- a/superset-frontend/src/components/Alert/index.tsx
+++ b/superset-frontend/src/components/Alert/index.tsx
@@ -27,17 +27,18 @@ import Icons from 'src/components/Icons';
 
 export type AlertProps = PropsWithChildren<AntdAlertProps>;
 
-export default function Alert(props: AlertProps) {
+export default function Alert(props: AlertProps & { roomBelow: boolean }) {
   const {
     type = 'info',
     description,
     showIcon = true,
     closable = true,
+    roomBelow = false,
     children,
   } = props;
 
   const theme = useTheme();
-  const { colors, typography } = theme;
+  const { colors, typography, gridUnit } = theme;
   const { alert, error, info, success } = colors;
 
   let baseColor = info;
@@ -60,12 +61,13 @@ export default function Alert(props: AlertProps) {
       icon={<AlertIcon aria-label={`${type} icon`} />}
       closeText={closable && <Icon name="x-small" aria-label="close icon" />}
       css={{
-        padding: '6px 10px',
+        marginBottom: roomBelow ? gridUnit * 4 : 0,
+        padding: `${gridUnit * 2}px ${gridUnit * 3}px`,
         alignItems: 'flex-start',
         border: 0,
         backgroundColor: baseColor.light2,
         '& .ant-alert-icon': {
-          marginRight: 10,
+          marginRight: gridUnit * 2,
         },
         '& .ant-alert-message': {
           color: baseColor.dark2,
diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx
index a71f4ea..afe6d8b 100644
--- a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx
+++ b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx
@@ -248,9 +248,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
         {!confirmChange && (
           <>
             <Alert
-              css={theme => css`
-                margin-bottom: ${theme.gridUnit * 4}px;
-              `}
+              roomBelow
               type="warning"
               message={
                 <>