feat(Badge): remove icon and text variant

securityscorecard · Oct 17, 2023 · 9e1afbc · 9e1afbc
1 parent 9c4ca93
commit 9e1afbc
Show file tree

Hide file tree

Showing 8 changed files with 4 additions and 41 deletions.
diff --git a/.storybook/image-snapshots/expected/components_Badge_Text Badge With Icon.png b/.storybook/image-snapshots/expected/components_Badge_Text Badge With Icon.png
diff --git a/.storybook/image-snapshots/expected/components_Badge_Text Badge.png b/.storybook/image-snapshots/expected/components_Badge_Text Badge.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png b/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png b/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -62,19 +62,3 @@ ErrorBadge.args = {
   ...SimpleBadge.args,
   variant: 'error',
 };
-
-export const TextBadge = BadgeTemplate.bind({});
-TextBadge.args = {
-  ...SimpleBadge.args,
-  variant: 'info',
-  count: undefined,
-  text: 'New',
-};
-export const TextBadgeWithIcon = BadgeTemplate.bind({});
-TextBadgeWithIcon.args = {
-  ...SimpleBadge.args,
-  variant: 'info',
-  count: undefined,
-  text: 'New',
-  iconName: 'lightbulb',
-};
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -15,10 +15,7 @@ import {
 } from '../../utils';
 import { CLX_COMPONENT } from '../../theme/constants';
 import { SpaceSizes } from '../../theme';
-import { SSCIcons, Types } from '../Icon/Icon.types';
-import { IconTypes, SSCIconNames } from '../../theme/icons/icons.enums';
-import { Icon } from '../Icon';
-import { Inline, Padbox } from '../layout';
+import { Padbox } from '../layout';
 
 const BadgeNeutral = css`
   background-color: ${getColor('neutral.300')};
@@ -65,34 +62,19 @@ const normalizeCount = pipe(defaultWhen(lte(100), '99+'));
 
 const Badge: React.FC<BadgeProps> = ({
   count,
-  text,
-  iconName,
-  iconType,
   variant = BadgeVariants.error,
 }) => (
   <BadgeElement
     $variant={variant}
     className={CLX_COMPONENT}
     paddingSize={SpaceSizes.sm}
   >
-    <Inline align="center" as="span" gap="sm" justify="center">
-      {iconName ? <Icon name={iconName} type={iconType} /> : null}
-      <span>{count ? normalizeCount(count) : text}</span>
-    </Inline>
+    <span>{normalizeCount(count)}</span>
   </BadgeElement>
 );
 
 Badge.propTypes = {
   count: PropTypes.number,
-  text: PropTypes.string,
-  iconName: PropTypes.oneOfType([
-    PropTypes.oneOf<SSCIcons>(Object.values(SSCIconNames)),
-    PropTypes.string,
-  ]),
-  iconType: PropTypes.oneOfType([
-    PropTypes.oneOf<Types>(Object.values(IconTypes)),
-    PropTypes.string,
-  ]),
 };
 
 export default Badge;
diff --git a/src/components/Badge/Badge.types.ts b/src/components/Badge/Badge.types.ts
@@ -1,15 +1,11 @@
-import { Types as IconTypes, SSCIcons } from '../Icon/Icon.types';
 import { BadgeVariants } from './Badge.enums';
 
 export type BadgeVariant = typeof BadgeVariants[keyof typeof BadgeVariants];
 
 export interface BadgeProps {
   count?: number;
-  text?: string;
   variant?: BadgeElementProps['$variant'];
   className?: string;
-  iconName?: SSCIcons | string;
-  iconType?: IconTypes | string;
 }
 
 export interface BadgeElementProps {

diff --git a/src/components/Datatable/components/ControlButton/ControlButton.tsx b/src/components/Datatable/components/ControlButton/ControlButton.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { SSCIconNames } from '../../../../theme/icons/icons.enums';
 import { Button } from '../../../Button';
 import { Badge } from '../../../Badge';
+import { Pill } from '../../../Pill';
 import { Inline } from '../../../layout';
 import { SSCIcons } from '../../../Icon/Icon.types';
 import { ControlButtonProps } from './ControlButton.types';
@@ -28,7 +29,7 @@ const ControlButton: React.FC<ControlButtonProps> = ({
       <span>{label}</span>
       {appliedFilters > 0 && <Badge count={appliedFilters} variant="neutral" />}
       {hiddenColumns > 0 && (
-        <Badge text={`${hiddenColumns} hidden`} variant="neutral" />
+        <Pill color="gray" label={`${hiddenColumns} hidden`} />
       )}
     </Inline>
   </Button>