refactor(result): less to cssinjs (#6246)

* refactor(result): less to cssinjs

* fix: class name is overridden

components/result/index.tsx

@@ -11,6 +11,8 @@ import unauthorized from './unauthorized';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 
+import useStyle from './style';
+
 export const IconMap = {
   success: CheckCircleFilled,
   error: CloseCircleFilled,
@@ -61,12 +63,16 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
 const Result = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AResult',
+  inheritAttrs: false,
   props: resultProps(),
   slots: ['title', 'subTitle', 'icon', 'extra'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('result', props);
+
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const className = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-${props.status}`, {
+      classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.status}`, {
         [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
       }),
     );
@@ -76,14 +82,14 @@ const Result = defineComponent({
       const icon = props.icon ?? slots.icon?.();
       const extra = props.extra ?? slots.extra?.();
       const pre = prefixCls.value;
-      return (
-        <div class={className.value}>
+      return wrapSSR(
+        <div {...attrs} class={[className.value, attrs.class]}>
           {renderIcon(pre, { status: props.status, icon })}
           <div class={`${pre}-title`}>{title}</div>
           {subTitle && <div class={`${pre}-subtitle`}>{subTitle}</div>}
           {renderExtra(pre, extra)}
           {slots.default && <div class={`${pre}-content`}>{slots.default()}</div>}
-        </div>
+        </div>,
       );
     };
   },

components/result/style/index.less

@@ -1,75 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@result-prefix-cls: ~'@{ant-prefix}-result';
-
-.@{result-prefix-cls} {
-  padding: 48px 32px;
-  // status color
-  &-success &-icon > .@{iconfont-css-prefix} {
-    color: @success-color;
-  }
-
-  &-error &-icon > .@{iconfont-css-prefix} {
-    color: @error-color;
-  }
-
-  &-info &-icon > .@{iconfont-css-prefix} {
-    color: @info-color;
-  }
-
-  &-warning &-icon > .@{iconfont-css-prefix} {
-    color: @warning-color;
-  }
-
-  // Exception Status image
-  &-image {
-    width: 250px;
-    height: 295px;
-    margin: auto;
-  }
-
-  &-icon {
-    margin-bottom: 24px;
-    text-align: center;
-
-    > .@{iconfont-css-prefix} {
-      font-size: @result-icon-font-size;
-    }
-  }
-
-  &-title {
-    color: @heading-color;
-    font-size: @result-title-font-size;
-    line-height: 1.8;
-    text-align: center;
-  }
-
-  &-subtitle {
-    color: @text-color-secondary;
-    font-size: @result-subtitle-font-size;
-    line-height: 1.6;
-    text-align: center;
-  }
-
-  &-extra {
-    margin: @result-extra-margin;
-    text-align: center;
-
-    > * {
-      margin-right: 8px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-content {
-    margin-top: 24px;
-    padding: 24px 40px;
-    background-color: @background-color-light;
-  }
-}
-
-@import './rtl';

components/result/style/index.tsx

@@ -1,2 +1,157 @@
-import '../../style/index.less';
-import './index.less';
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {
+  imageWidth: number;
+  imageHeight: number;
+}
+
+interface ResultToken extends FullToken<'Result'> {
+  resultTitleFontSize: number;
+  resultSubtitleFontSize: number;
+  resultIconFontSize: number;
+
+  resultExtraMargin: string;
+
+  resultInfoIconColor: string;
+  resultSuccessIconColor: string;
+  resultWarningIconColor: string;
+  resultErrorIconColor: string;
+}
+
+// ============================== Styles ==============================
+const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
+  const {
+    componentCls,
+    lineHeightHeading3,
+    iconCls,
+    padding,
+    paddingXL,
+    paddingXS,
+    paddingLG,
+    marginXS,
+    lineHeight,
+  } = token;
+
+  return {
+    // Result
+    [componentCls]: {
+      padding: `${paddingLG * 2}px ${paddingXL}px`,
+
+      // RTL
+      '&-rtl': {
+        direction: 'rtl',
+      },
+    },
+
+    // Exception Status image
+    [`${componentCls} ${componentCls}-image`]: {
+      width: token.imageWidth,
+      height: token.imageHeight,
+      margin: 'auto',
+    },
+
+    [`${componentCls} ${componentCls}-icon`]: {
+      marginBottom: paddingLG,
+      textAlign: 'center',
+
+      [`& > ${iconCls}`]: {
+        fontSize: token.resultIconFontSize,
+      },
+    },
+
+    [`${componentCls} ${componentCls}-title`]: {
+      color: token.colorTextHeading,
+      fontSize: token.resultTitleFontSize,
+      lineHeight: lineHeightHeading3,
+      marginBlock: marginXS,
+      textAlign: 'center',
+    },
+
+    [`${componentCls} ${componentCls}-subtitle`]: {
+      color: token.colorTextDescription,
+      fontSize: token.resultSubtitleFontSize,
+      lineHeight,
+      textAlign: 'center',
+    },
+
+    [`${componentCls} ${componentCls}-content`]: {
+      marginTop: paddingLG,
+      padding: `${paddingLG}px ${padding * 2.5}px`,
+      backgroundColor: token.colorFillAlter,
+    },
+
+    [`${componentCls} ${componentCls}-extra`]: {
+      margin: token.resultExtraMargin,
+      textAlign: 'center',
+
+      '& > *': {
+        marginInlineEnd: paddingXS,
+
+        '&:last-child': {
+          marginInlineEnd: 0,
+        },
+      },
+    },
+  };
+};
+
+const genStatusIconStyle: GenerateStyle<ResultToken> = token => {
+  const { componentCls, iconCls } = token;
+
+  return {
+    [`${componentCls}-success ${componentCls}-icon > ${iconCls}`]: {
+      color: token.resultSuccessIconColor,
+    },
+    [`${componentCls}-error ${componentCls}-icon > ${iconCls}`]: {
+      color: token.resultErrorIconColor,
+    },
+    [`${componentCls}-info ${componentCls}-icon > ${iconCls}`]: {
+      color: token.resultInfoIconColor,
+    },
+    [`${componentCls}-warning ${componentCls}-icon > ${iconCls}`]: {
+      color: token.resultWarningIconColor,
+    },
+  };
+};
+
+const genResultStyle: GenerateStyle<ResultToken> = token => [
+  genBaseStyle(token),
+  genStatusIconStyle(token),
+];
+
+// ============================== Export ==============================
+const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token);
+
+export default genComponentStyleHook(
+  'Result',
+  token => {
+    const { paddingLG, fontSizeHeading3 } = token;
+
+    const resultSubtitleFontSize = token.fontSize;
+    const resultExtraMargin = `${paddingLG}px 0 0 0`;
+
+    const resultInfoIconColor = token.colorInfo;
+    const resultErrorIconColor = token.colorError;
+    const resultSuccessIconColor = token.colorSuccess;
+    const resultWarningIconColor = token.colorWarning;
+
+    const resultToken = mergeToken<ResultToken>(token, {
+      resultTitleFontSize: fontSizeHeading3,
+      resultSubtitleFontSize,
+      resultIconFontSize: fontSizeHeading3 * 3,
+      resultExtraMargin,
+      resultInfoIconColor,
+      resultErrorIconColor,
+      resultSuccessIconColor,
+      resultWarningIconColor,
+    });
+
+    return [getStyle(resultToken)];
+  },
+  {
+    imageWidth: 250,
+    imageHeight: 295,
+  },
+);

components/result/style/rtl.less

@@ -1,25 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@result-prefix-cls: ~'@{ant-prefix}-result';
-
-.@{result-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-extra {
-    > * {
-      .@{result-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 8px;
-      }
-
-      &:last-child {
-        .@{result-prefix-cls}-rtl & {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}

components/style.ts

@@ -54,7 +54,7 @@ import './drawer/style';
 // import './config-provider/style';
 import './empty/style';
 // import './statistic/style';
-import './result/style';
+// import './result/style';
 // import './descriptions/style';
 // import './page-header/style';
 import './form/style';

components/theme/interface/components.ts

@@ -29,7 +29,7 @@ import type { ComponentToken as PopoverComponentToken } from '../../popover/styl
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
 // import type { ComponentToken as RadioComponentToken } from '../../radio/style';
 import type { ComponentToken as RateComponentToken } from '../../rate/style';
-// import type { ComponentToken as ResultComponentToken } from '../../result/style';
+import type { ComponentToken as ResultComponentToken } from '../../result/style';
 // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
 // import type { ComponentToken as SelectComponentToken } from '../../select/style';
 import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
@@ -87,7 +87,7 @@ export interface ComponentTokenMap {
   Popconfirm?: PopconfirmComponentToken;
   Rate?: RateComponentToken;
   //   Radio?: RadioComponentToken;
-  //   Result?: ResultComponentToken;
+  Result?: ResultComponentToken;
   //   Segmented?: SegmentedComponentToken;
   //   Select?: SelectComponentToken;
   Skeleton?: SkeletonComponentToken;