feat(Badge): add _view_pinted and _status_disabled

closes #3561 #2794
consta-design-system · Oct 25, 2024 · 7d06ae4 · 7d06ae4
1 parent d1f87de
commit 7d06ae4
Show file tree

Hide file tree

Showing 15 changed files with 253 additions and 162 deletions.
diff --git a/src/components/Badge/Badge.css b/src/components/Badge/Badge.css
@@ -1,9 +1,10 @@
 .Badge {
-  position: relative;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   height: var(--badge-size);
+  padding: 0 var(--badge-horisontal-padding);
+  color: var(--badge-text-color);
   font-size: var(--badge-text-size);
   font-weight: var(--font-weight-text-semibold);
   line-height: var(--badge-size);
@@ -14,54 +15,6 @@
   flex-wrap: nowrap;
   gap: var(--space-2xs);
 
-  &_size {
-    &_xs {
-      --badge-padding-round: var(--space-xs);
-      --badge-padding-default: var(--space-2xs);
-      --badge-size: var(--control-box-size-m);
-      --badge-text-size: calc(var(--size-text-m) / 2);
-      --badge-border-size: 2px;
-      --badge-size-minified: 10px;
-    }
-
-    &_s {
-      --badge-padding-round: var(--space-xs);
-      --badge-padding-default: var(--space-2xs);
-      --badge-size: var(--control-box-size-l);
-      --badge-text-size: var(--size-text-2xs);
-      --badge-size-minified: 16px;
-      --badge-border-size: 3px;
-    }
-
-    &_m {
-      --badge-padding-round: var(--space-s);
-      --badge-padding-default: var(--space-xs);
-      --badge-size: var(--control-height-xs);
-      --badge-text-size: var(--size-text-xs);
-      --badge-size-minified: 24px;
-      --badge-border-size: 4px;
-    }
-
-    &_l {
-      --badge-padding-round: var(--space-m);
-      --badge-padding-default: var(--space-xs);
-      --badge-size: var(--control-height-s);
-      --badge-text-size: var(--size-text-s);
-      --badge-size-minified: 32px;
-      --badge-border-size: 5px;
-    }
-  }
-
-  &:not(.Badge_counter.Badge_minified) {
-    &.Badge_form_round {
-      padding: 0 var(--badge-padding-round);
-    }
-
-    &.Badge_form_default {
-      padding: 0 var(--badge-padding-default);
-    }
-  }
-
   &_form {
     &_default {
       border-radius: var(--control-radius);
@@ -72,54 +25,22 @@
     }
   }
 
-  &_status {
-    &_success {
-      --badge-bg-color: var(--color-bg-success);
-      --badge-text-color: var(--color-typo-success);
-      --badge-border-color: var(--color-bg-success);
-    }
-
-    &_error {
-      --badge-bg-color: var(--color-bg-alert);
-      --badge-text-color: var(--color-typo-alert);
-      --badge-border-color: var(--color-bg-alert);
-    }
-
-    &_warning {
-      --badge-bg-color: var(--color-bg-warning);
-      --badge-text-color: var(--color-typo-warning);
-      --badge-border-color: var(--color-bg-warning);
-    }
-
-    &_normal {
-      --badge-bg-color: var(--color-bg-normal);
-      --badge-text-color: var(--color-typo-normal);
-      --badge-border-color: var(--color-bg-normal);
-    }
-
-    &_system {
-      --badge-bg-color: var(--color-bg-system);
-      --badge-border-color: var(--color-bg-system);
-    }
-  }
-
   &_view {
     &_filled {
-      color: var(--color-typo-primary);
       background: var(--badge-bg-color);
-
-      &.Badge_status_system {
-        color: var(--color-typo-secondary);
-      }
     }
 
     &_stroked {
-      color: var(--badge-text-color);
       box-shadow: inset 0 0 0 1px var(--badge-border-color);
+    }
 
-      &.Badge_status_system {
-        --badge-text-color: var(--color-typo-system);
-      }
+    &_tinted {
+      background:
+        color-mix(
+          in srgb,
+          var(--badge-bg-color) var(--badge-degree-mixing),
+          var(--color-bg-default)
+        );
     }
   }
 
@@ -131,19 +52,14 @@
   }
 
   &_minified {
-    width: var(--badge-size-minified);
-    height: var(--badge-size);
-    padding: 0;
+    width: var(--badge-size);
     background: transparent;
-    border: var(--badge-border-size) solid transparent;
-    border-radius: 50%;
+    border: var(--badge-minified-border-size) solid transparent;
+    border-radius: 99em;
     box-shadow: inset 0 0 0 var(--badge-size) var(--badge-bg-color);
-    line-height: var(--badge-size-minified);
   }
 
   &-Icon {
-    font-size: 0;
-    line-height: 1em;
-    flex-shrink: 0;
+    flex: 1;
   }
 }
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -4,69 +4,50 @@ import { classnames } from '@bem-react/classnames';
 import { IconComponent } from '@consta/icons/Icon';
 import React from 'react';
 
-import { cn } from '../../utils/bem';
-import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
-import { useTheme } from '../Theme/Theme';
+import { useTheme } from '##/components/Theme';
+import { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';
 
-export const badgePropSize = ['xs', 's', 'm', 'l'] as const;
-export type BadgePropSize = typeof badgePropSize[number];
-export const badgePropSizeDefault: BadgePropSize = 'm';
-
-export const badgePropView = ['filled', 'stroked'] as const;
-export type BadgePropView = typeof badgePropView[number];
-export const badgePropViewDefault: BadgePropView = badgePropView[0];
-
-export const badgePropStatus = [
-  'normal',
-  'success',
-  'error',
-  'warning',
-  'system',
-] as const;
-export type BadgePropStatus = typeof badgePropStatus[number];
-export const badgePropStatusDefault: BadgePropStatus = badgePropStatus[0];
-
-export const badgePropForm = ['default', 'round'] as const;
-export type BadgePropForm = typeof badgePropForm[number];
-export const badgePropFormDefault: BadgePropForm = badgePropForm[0];
-
-type Props = {
-  size?: BadgePropSize;
-  view?: BadgePropView;
-  status?: BadgePropStatus;
-  form?: BadgePropForm;
-  minified?: boolean;
-  /**
-   * @deprecated since version 4.17.2 iconLeft
-   */
-  icon?: IconComponent;
-  iconLeft?: IconComponent;
-  iconRight?: IconComponent;
-  label?: string;
-  children?: never;
-};
-
-export const cnBadge = cn('Badge');
+import { cnBadge } from './cn';
+import { guardStatus } from './guardStatus';
+import {
+  getBgColor,
+  getBorderColor,
+  getDegreeMixing,
+  getHorisontalPadding,
+  getMinifiedBorderSize,
+  getSize,
+  getTextColor,
+  getTextSize,
+} from './maps';
+import {
+  badgePropFormDefault,
+  BadgeProps,
+  badgePropSizeDefault,
+  badgePropStatusDefault,
+  badgePropViewDefault,
+} from './types';
 
 const renderIcon = (Icon: IconComponent | undefined) =>
   Icon ? <Icon size="xs" className={cnBadge('Icon')} /> : null;
 
-export const Badge = forwardRefWithAs<Props>((props, ref) => {
+export const Badge = forwardRefWithAs<BadgeProps>((props, ref) => {
   const {
     size = badgePropSizeDefault,
     view = badgePropViewDefault,
-    status = badgePropStatusDefault,
+    status: statusProp = badgePropStatusDefault,
     form = badgePropFormDefault,
     icon,
     iconLeft,
     iconRight: IconRight,
-    minified,
+    minified = false,
     label,
     as = 'div',
     title,
+    style,
     ...otherProps
   } = props;
 
+  const status = guardStatus(statusProp);
   const Tag = as as string;
   const { themeClassNames } = useTheme();
 
@@ -84,8 +65,6 @@ export const Badge = forwardRefWithAs<Props>((props, ref) => {
       {...otherProps}
       className={cnBadge(
         {
-          size,
-          status,
           minified,
           ...(!minified && {
             view,
@@ -97,6 +76,21 @@ export const Badge = forwardRefWithAs<Props>((props, ref) => {
       )}
       ref={ref}
       title={title || (minified && label)}
+      style={{
+        ...style,
+        '--badge-bg-color': getBgColor(status),
+        '--badge-border-color': getBorderColor(status, view),
+        '--badge-horisontal-padding': getHorisontalPadding(
+          size,
+          form,
+          minified,
+        ),
+        '--badge-minified-border-size': getMinifiedBorderSize(size, minified),
+        '--badge-size': getSize(size, minified),
+        '--badge-text-color': getTextColor(status, view),
+        '--badge-text-size': getTextSize(size),
+        '--badge-degree-mixing': getDegreeMixing(status, view),
+      }}
     >
       {!minified && (
         <>

diff --git a/src/components/Badge/__stand__/Badge.variants.tsx b/src/components/Badge/__stand__/Badge.variants.tsx
@@ -13,7 +13,7 @@ import {
   badgePropStatusDefault,
   badgePropView,
   badgePropViewDefault,
-} from '../Badge';
+} from '..';
 
 const Variants = () => {
   const minified = useBoolean('minified', false);

diff --git a/src/components/Badge/__tests__/Badge.test.tsx b/src/components/Badge/__tests__/Badge.test.tsx
@@ -9,7 +9,7 @@ import {
   badgePropStatus,
   badgePropView,
   cnBadge,
-} from '../Badge';
+} from '..';
 
 type BadgeProps = React.ComponentProps<typeof Badge>;
 

diff --git a/src/components/Badge/cn.ts b/src/components/Badge/cn.ts
@@ -0,0 +1,3 @@
+import { cn } from '##/utils/bem';
+
+export const cnBadge = cn('Badge');
diff --git a/src/components/Badge/guardStatus.ts b/src/components/Badge/guardStatus.ts
@@ -0,0 +1,4 @@
+import { BadgePropStatus } from './types';
+
+export const guardStatus = (status: BadgePropStatus): BadgePropStatus =>
+  status === 'warning' ? 'alert' : status;
diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts
@@ -1 +1,3 @@
 export * from './Badge';
+export * from './types';
+export * from './cn';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { cn } from '##/utils/bem';

		export const cnBadge = cn('Badge');