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

* refactor(result): less to cssinjs

* fix: class name is overridden

Author: buqiyuan

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,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/index.tsx

@@ -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/result/style/rtl.less

@@ -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;