chore: update componentCls key again (#50251)

* chore: update componentCls key again * Update components/skeleton/style/index.ts Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com>
2024-11-27 12:39:49 +08:00 · 2024-08-05 22:30:55 +08:00 · 2024-08-05 22:30:55 +08:00 · 1421eccb04
commit 1421eccb04
parent d1151f3b9a
13 changed files with 32 additions and 32 deletions
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@ -298,7 +298,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
          transformOrigin: '50% 50%',
        },
      },
-      [`${numberPrefixCls}`]: {
+      [numberPrefixCls]: {
        overflow: 'hidden',
        [`${numberPrefixCls}-only`]: {
          position: 'relative',
--- a/components/badge/style/ribbon.ts
+++ b/components/badge/style/ribbon.ts
@ -20,10 +20,10 @@ const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
  }));

  return {
-    [`${ribbonWrapperPrefixCls}`]: {
+    [ribbonWrapperPrefixCls]: {
      position: 'relative',
    },
-    [`${ribbonPrefixCls}`]: {
+    [ribbonPrefixCls]: {
      ...resetComponent(token),
      position: 'absolute',
      top: marginXS,
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -402,7 +402,7 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>

  return [
    {
-      [`${prefixCls}`]: {
+      [prefixCls]: {
        fontSize,
        lineHeight,
        height: controlHeight,
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@ -191,7 +191,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
      },
    },
    [`@media only screen and (max-width: ${unit(token.screenXS)}) `]: {
-      [`${calendarCls}`]: {
+      [calendarCls]: {
        [`${calendarCls}-header`]: {
          display: 'block',
          [`${calendarCls}-year-select`]: {
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@ -201,7 +201,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
      },
    },

-    [`${componentCls}`]: {
+    [componentCls]: {
      width: '100%',
      marginBottom: 0,
      textAlign: 'inherit',
@ -307,7 +307,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
      },

      // Undo float for .ant-input-group .ant-input
-      [`${componentCls}`]: {
+      [componentCls]: {
        float: 'none',
      },

@ -511,7 +511,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
        content: '"\\a0"',
      },

-      [`${componentCls}`]: {
+      [componentCls]: {
        '&-prefix, &-suffix': {
          display: 'flex',
          flex: 'none',
@ -642,7 +642,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
  const searchPrefixCls = `${componentCls}-search`;
  return {
    [searchPrefixCls]: {
-      [`${componentCls}`]: {
+      [componentCls]: {
        '&:hover, &:focus': {
          borderColor: token.colorPrimaryHover,

--- a/components/input/style/otp.ts
+++ b/components/input/style/otp.ts
@ -8,7 +8,7 @@ const genOTPStyle: GenerateStyle<InputToken> = (token) => {
  const { componentCls, paddingXS } = token;

  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      display: 'inline-flex',
      alignItems: 'center',
      flexWrap: 'nowrap',
--- a/components/list/style/index.ts
+++ b/components/list/style/index.ts
@ -81,7 +81,7 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
    borderRadiusLG,
  } = token;
  return {
-    [`${listBorderedCls}`]: {
+    [listBorderedCls]: {
      border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
      borderRadius: borderRadiusLG,
      [`${componentCls}-header,${componentCls}-footer,${componentCls}-item`]: {
@ -109,7 +109,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
  const { componentCls, screenSM, screenMD, marginLG, marginSM, margin } = token;
  return {
    [`@media screen and (max-width:${screenMD}px)`]: {
-      [`${componentCls}`]: {
+      [componentCls]: {
        [`${componentCls}-item`]: {
          [`${componentCls}-item-action`]: {
            marginInlineStart: marginLG,
@ -127,7 +127,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
    },

    [`@media screen and (max-width: ${screenSM}px)`]: {
-      [`${componentCls}`]: {
+      [componentCls]: {
        [`${componentCls}-item`]: {
          flexWrap: 'wrap',

@ -184,7 +184,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
  } = token;

  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      ...resetComponent(token),
      position: 'relative',
      '*': {
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@ -535,7 +535,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
    // Misc
    {
      '': {
-        [`${componentCls}`]: {
+        [componentCls]: {
          ...clearFix(),

          // Hidden
--- a/components/select/style/dropdown.ts
+++ b/components/select/style/dropdown.ts
@ -92,7 +92,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
          display: 'none',
        },

-        [`${selectItemCls}`]: {
+        [selectItemCls]: {
          ...genItemStyle(token),
          cursor: 'pointer',
          transition: `background ${token.motionDurationSlow} ease`,
--- a/components/skeleton/style/index.ts
+++ b/components/skeleton/style/index.ts
@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';

-import type { FullToken, GenerateStyle, GetDefaultToken, CSSUtil } from '../../theme/internal';
+import type { CSSUtil, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';

 export type ComponentToken = {
@ -91,7 +91,7 @@ const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
  const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
    token;
  return {
-    [`${skeletonAvatarCls}`]: {
+    [skeletonAvatarCls]: {
      display: 'inline-block',
      verticalAlign: 'top',
      background: gradientFromColor,
@ -120,7 +120,7 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
    calc,
  } = token;
  return {
-    [`${skeletonInputCls}`]: {
+    [skeletonInputCls]: {
      display: 'inline-block',
      verticalAlign: 'top',
      background: gradientFromColor,
@ -146,7 +146,7 @@ const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
 const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
  const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
  return {
-    [`${skeletonImageCls}`]: {
+    [skeletonImageCls]: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
@ -206,7 +206,7 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
    calc,
  } = token;
  return {
-    [`${skeletonButtonCls}`]: {
+    [skeletonButtonCls]: {
      display: 'inline-block',
      verticalAlign: 'top',
      background: gradientFromColor,
@ -254,7 +254,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
  } = token;

  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      display: 'table',
      width: '100%',

@ -264,7 +264,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
        verticalAlign: 'top',

        // Avatar
-        [`${skeletonAvatarCls}`]: {
+        [skeletonAvatarCls]: {
          display: 'inline-block',
          verticalAlign: 'top',
          background: gradientFromColor,
@ -286,7 +286,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
        verticalAlign: 'top',

        // Title
-        [`${skeletonTitleCls}`]: {
+        [skeletonTitleCls]: {
          width: '100%',
          height: titleHeight,
          background: gradientFromColor,
@ -297,7 +297,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
        },

        // paragraph
-        [`${skeletonParagraphCls}`]: {
+        [skeletonParagraphCls]: {
          padding: 0,
          '> li': {
            width: '100%',
@ -324,7 +324,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
    },
    [`${componentCls}-with-avatar ${componentCls}-content`]: {
      // Title
-      [`${skeletonTitleCls}`]: {
+      [skeletonTitleCls]: {
        marginBlockStart: marginSM,

        [`+ ${skeletonParagraphCls}`]: {
@ -346,11 +346,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
    [`${componentCls}${componentCls}-block`]: {
      width: '100%',

-      [`${skeletonButtonCls}`]: {
+      [skeletonButtonCls]: {
        width: '100%',
      },

-      [`${skeletonInputCls}`]: {
+      [skeletonInputCls]: {
        width: '100%',
      },
    },
--- a/components/spin/style/index.ts
+++ b/components/spin/style/index.ts
@ -43,7 +43,7 @@ const antRotate = new Keyframes('antRotate', {
 const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => {
  const { componentCls, calc } = token;
  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      ...resetComponent(token),
      position: 'absolute',
      display: 'none',
--- a/components/statistic/style/index.ts
+++ b/components/statistic/style/index.ts
@ -32,7 +32,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
  } = token;

  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      ...resetComponent(token),
      [`${componentCls}-title`]: {
        marginBottom: marginXXS,
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@ -4,7 +4,7 @@ import { Keyframes, unit } from '@ant-design/cssinjs';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { genFocusOutline, resetComponent } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
-import type { AliasToken, FullToken, GetDefaultToken, CSSUtil } from '../../theme/internal';
+import type { AliasToken, CSSUtil, FullToken, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';

 export interface TreeSharedToken {
@ -159,7 +159,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
      },

      // ===================== TreeNode =====================
-      [`${treeNodeCls}`]: {
+      [treeNodeCls]: {
        display: 'flex',
        alignItems: 'flex-start',
        padding: `0 0 ${unit(treeNodePadding)} 0`,