mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: Adds space under dataset change warning (#14582)
* fix: Adding a little margin under the warning about changing datasets * feat: moves Alert spacing from a css override to an Alert prop * fix: prop needs to be optional... proptional * fix: moving the typing to a better spot, adding the new prop to storybook. * style: linting
This commit is contained in:
parent
7d28225c79
commit
6d786d4d47
@ -74,10 +74,16 @@ AlertGallery.story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const InteractiveAlert = (args: AlertProps) => <Alert {...args} />;
|
||||
export const InteractiveAlert = (args: AlertProps) => (
|
||||
<>
|
||||
<Alert {...args} />
|
||||
Some content to test the `roomBelow` prop
|
||||
</>
|
||||
);
|
||||
|
||||
InteractiveAlert.args = {
|
||||
closable: true,
|
||||
roomBelow: false,
|
||||
type: 'info',
|
||||
message: smallText,
|
||||
description: bigText,
|
||||
|
@ -25,7 +25,9 @@ import { useTheme } from '@superset-ui/core';
|
||||
import Icon from 'src/components/Icon';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
export type AlertProps = PropsWithChildren<AntdAlertProps>;
|
||||
export type AlertProps = PropsWithChildren<
|
||||
AntdAlertProps & { roomBelow?: boolean }
|
||||
>;
|
||||
|
||||
export default function Alert(props: AlertProps) {
|
||||
const {
|
||||
@ -33,11 +35,12 @@ export default function Alert(props: AlertProps) {
|
||||
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 +63,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,
|
||||
|
@ -248,6 +248,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
|
||||
{!confirmChange && (
|
||||
<>
|
||||
<Alert
|
||||
roomBelow
|
||||
type="warning"
|
||||
message={
|
||||
<>
|
||||
|
Loading…
Reference in New Issue
Block a user