refactor: abstract ribbon style (ant-design#44451)

ammar-knowledge · Aug 27, 2023 · ca03968 · ca03968
1 parent 3c73256
commit ca03968
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 126 deletions.
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -1,10 +1,11 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
-import useStyle from './style';
+import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
 

diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
@@ -48,13 +48,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | offset | Set offset of the badge dot | \[number, number] | - | |
 | overflowCount | Max count to show | number | 99 | |
 | showZero | Whether to show badge when `count` is zero | boolean | false | |
-| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
+| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
 | styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | |
 | title | Text to show when hovering over the badge | string | - | |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |

diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
@@ -49,13 +49,13 @@ group: 数据展示
 | offset | 设置状态点的位置偏移 | \[number, number] | - | |
 | overflowCount | 展示封顶的数字值 | number | 99 | |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
-| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
+| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
 | styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - | |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |

diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
@@ -1,10 +1,12 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 
-interface BadgeToken extends FullToken<'Badge'> {
+export interface BadgeToken extends FullToken<'Badge'> {
  badgeFontHeight: number;
  badgeZIndex: number | string;
  badgeHeight: number;
@@ -61,17 +63,13 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
  componentCls,
  iconCls,
  antCls,
- badgeFontHeight,
  badgeShadowSize,
  badgeHeightSm,
  motionDurationSlow,
  badgeStatusSize,
  marginXS,
- badgeRibbonOffset,
  } = token;
  const numberPrefixCls = `${antCls}-scroll-number`;
- const ribbonPrefixCls = `${antCls}-ribbon`;
- const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
 
  const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
  [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
@@ -82,13 +80,6 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
  },
  }));
 
- const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
- [`&${ribbonPrefixCls}-color-${colorKey}`]: {
- background: darkColor,
- color: darkColor,
- },
- }));
-
  return {
  [componentCls]: {
  ...resetComponent(token),
@@ -286,59 +277,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
  },
  },
  },
- [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
- [`${ribbonPrefixCls}`]: {
- ...resetComponent(token),
- position: 'absolute',
- top: marginXS,
- padding: `0 ${token.paddingXS}px`,
- color: token.colorPrimary,
- lineHeight: `${badgeFontHeight}px`,
- whiteSpace: 'nowrap',
- backgroundColor: token.colorPrimary,
- borderRadius: token.borderRadiusSM,
- [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
- [`${ribbonPrefixCls}-corner`]: {
- position: 'absolute',
- top: '100%',
- width: badgeRibbonOffset,
- height: badgeRibbonOffset,
- color: 'currentcolor',
- border: `${badgeRibbonOffset / 2}px solid`,
- transform: token.badgeRibbonCornerTransform,
- transformOrigin: 'top',
- filter: token.badgeRibbonCornerFilter,
- },
- ...statusRibbonPreset,
- [`&${ribbonPrefixCls}-placement-end`]: {
- insetInlineEnd: -badgeRibbonOffset,
- borderEndEndRadius: 0,
- [`${ribbonPrefixCls}-corner`]: {
- insetInlineEnd: 0,
- borderInlineEndColor: 'transparent',
- borderBlockEndColor: 'transparent',
- },
- },
- [`&${ribbonPrefixCls}-placement-start`]: {
- insetInlineStart: -badgeRibbonOffset,
- borderEndStartRadius: 0,
- [`${ribbonPrefixCls}-corner`]: {
- insetInlineStart: 0,
- borderBlockEndColor: 'transparent',
- borderInlineStartColor: 'transparent',
- },
- },
-
- // ====================== RTL =======================
- '&-rtl': {
- direction: 'rtl',
- },
- },
  };
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Badge', (token) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
  const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
 
  const badgeFontHeight = Math.round(fontSize * lineHeight);
@@ -378,5 +321,11 @@ export default genComponentStyleHook('Badge', (token) => {
  badgeRibbonCornerFilter: `brightness(75%)`,
  });
 
+ return badgeToken;
+};
+
+export default genComponentStyleHook('Badge', (token) => {
+ const badgeToken = prepareToken(token);
+
  return [genSharedBadgeStyle(badgeToken)];
 });
diff --git a/components/badge/style/ribbon.ts b/components/badge/style/ribbon.ts
@@ -0,0 +1,78 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { prepareToken, type BadgeToken } from '.';
+import { resetComponent } from '../../style';
+import type { GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, genPresetColor } from '../../theme/internal';
+
+// ============================== Ribbon ==============================
+const genRibbonStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
+ const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset } = token;
+ const ribbonPrefixCls = `${antCls}-ribbon`;
+ const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
+
+ const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
+ [`&${ribbonPrefixCls}-color-${colorKey}`]: {
+ background: darkColor,
+ color: darkColor,
+ },
+ }));
+
+ return {
+ [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
+ [`${ribbonPrefixCls}`]: {
+ ...resetComponent(token),
+ position: 'absolute',
+ top: marginXS,
+ padding: `0 ${token.paddingXS}px`,
+ color: token.colorPrimary,
+ lineHeight: `${badgeFontHeight}px`,
+ whiteSpace: 'nowrap',
+ backgroundColor: token.colorPrimary,
+ borderRadius: token.borderRadiusSM,
+ [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
+ [`${ribbonPrefixCls}-corner`]: {
+ position: 'absolute',
+ top: '100%',
+ width: badgeRibbonOffset,
+ height: badgeRibbonOffset,
+ color: 'currentcolor',
+ border: `${badgeRibbonOffset / 2}px solid`,
+ transform: token.badgeRibbonCornerTransform,
+ transformOrigin: 'top',
+ filter: token.badgeRibbonCornerFilter,
+ },
+ ...statusRibbonPreset,
+ [`&${ribbonPrefixCls}-placement-end`]: {
+ insetInlineEnd: -badgeRibbonOffset,
+ borderEndEndRadius: 0,
+ [`${ribbonPrefixCls}-corner`]: {
+ insetInlineEnd: 0,
+ borderInlineEndColor: 'transparent',
+ borderBlockEndColor: 'transparent',
+ },
+ },
+ [`&${ribbonPrefixCls}-placement-start`]: {
+ insetInlineStart: -badgeRibbonOffset,
+ borderEndStartRadius: 0,
+ [`${ribbonPrefixCls}-corner`]: {
+ insetInlineStart: 0,
+ borderBlockEndColor: 'transparent',
+ borderInlineStartColor: 'transparent',
+ },
+ },
+
+ // ====================== RTL =======================
+ '&-rtl': {
+ direction: 'rtl',
+ },
+ },
+ };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(['Badge', 'Ribbon'], (token) => {
+ const badgeToken = prepareToken(token);
+
+ return [genRibbonStyle(badgeToken)];
+});