;
+type BadgeSizeValue = BadgeSize[keyof BadgeSize];
+
+const badgeColors: BadgeColorValue[] = [
+ 'pink',
+ 'red',
+ 'yellow',
+ 'orange',
+ 'cyan',
+ 'green',
+ 'blue',
+ 'purple',
+ 'geekblue',
+ 'magenta',
+ 'volcano',
+ 'gold',
+ 'lime',
+];
+const badgeSizes: BadgeSizeValue[] = ['default', 'small'];
+const STATUSES = ['default', 'error', 'warning', 'success', 'processing'];
+
+const COLORS = {
+ label: 'colors',
+ options: badgeColors,
+ defaultValue: undefined,
+};
+
+const SIZES = {
+ label: 'sizes',
+ options: badgeSizes,
+ defaultValue: undefined,
+};
+
+export const InteractiveBadge = (args: BadgeProps) => ;
+
+InteractiveBadge.args = {
+ count: null,
+ color: null,
+ text: 'Text',
+ textColor: null,
+ status: 'success',
+ size: 'default',
+};
+
+InteractiveBadge.argTypes = {
+ status: {
+ control: {
+ type: 'select',
+ options: [undefined, ...STATUSES],
+ },
+ },
+ size: {
+ control: {
+ type: 'select',
+ options: SIZES.options,
+ },
+ },
+ color: {
+ control: {
+ type: 'select',
+ options: [undefined, ...COLORS.options],
+ },
+ },
+ textColor: {
+ control: {
+ type: 'select',
+ options: [undefined, ...COLORS.options],
+ },
+ },
+ count: {
+ control: {
+ type: 'select',
+ options: [undefined, ...Array(100).keys()],
+ },
+ },
+};
+
+InteractiveBadge.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
+
+export const BadgeGallery = () => (
+ <>
+ {SIZES.options.map(size => (
+
+
{size}
+ {COLORS.options.map(color => (
+
+ ))}
+
+ ))}
+
+);
+
+export const BadgeTextGallery = () => (
+ <>
+ {COLORS.options.map(color => (
+
+ ))}
+
+);
+
+BadgeGallery.story = {
+ parameters: {
+ actions: {
+ disable: true,
+ },
+ controls: {
+ disable: true,
+ },
+ knobs: {
+ disable: true,
+ },
+ },
+};
+
+BadgeTextGallery.story = {
+ parameters: {
+ actions: {
+ disable: true,
+ },
+ controls: {
+ disable: true,
+ },
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/components/Badge/Badge.test.tsx b/superset-frontend/src/components/Badge/Badge.test.tsx
new file mode 100644
index 0000000000000..01fb98c9dfa4b
--- /dev/null
+++ b/superset-frontend/src/components/Badge/Badge.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * 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 { render, screen } from 'spec/helpers/testing-library';
+import Badge from '.';
+
+const mockedProps = {
+ count: 9,
+ text: 'Text',
+ textColor: 'orange',
+};
+
+test('should render', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+});
+
+test('should render the count', () => {
+ render();
+ expect(screen.getAllByText('9')[0]).toBeInTheDocument();
+});
+
+test('should render the text', () => {
+ render();
+ expect(screen.getByText('Text')).toBeInTheDocument();
+});
+
+test('should render with the chosen textColor', () => {
+ render();
+ const badge = screen.getAllByText('9')[0];
+ expect(badge).toHaveStyle(`
+ color: 'orange';
+ `);
+});
diff --git a/superset-frontend/src/common/components/Badge.tsx b/superset-frontend/src/components/Badge/index.tsx
similarity index 93%
rename from superset-frontend/src/common/components/Badge.tsx
rename to superset-frontend/src/components/Badge/index.tsx
index ea5247fb9c4d8..8dfe3cbd37320 100644
--- a/superset-frontend/src/common/components/Badge.tsx
+++ b/superset-frontend/src/components/Badge/index.tsx
@@ -18,11 +18,10 @@
*/
import React from 'react';
import { styled } from '@superset-ui/core';
-// eslint-disable-next-line no-restricted-imports
import { Badge as AntdBadge } from 'antd';
import { BadgeProps as AntdBadgeProps } from 'antd/lib/badge';
-interface BadgeProps extends AntdBadgeProps {
+export interface BadgeProps extends AntdBadgeProps {
textColor?: string;
}
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 29f5b7099595d..315d5d6555d97 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
import { Col, Well } from 'react-bootstrap';
import { Radio } from 'src/common/components/Radio';
import Alert from 'src/components/Alert';
-import Badge from 'src/common/components/Badge';
+import Badge from 'src/components/Badge';
import shortid from 'shortid';
import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
diff --git a/superset-frontend/src/profile/components/Security.tsx b/superset-frontend/src/profile/components/Security.tsx
index 2c04bbb68078d..078fc42e4c74b 100644
--- a/superset-frontend/src/profile/components/Security.tsx
+++ b/superset-frontend/src/profile/components/Security.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import Badge from 'src/common/components/Badge';
+import Badge from 'src/components/Badge';
import { t } from '@superset-ui/core';
import Label from 'src/components/Label';