refactor:comment (#6238)

* refactor:comment

* fix inheritAttrs: false & attrs.class

components/comment/index.tsx

@@ -5,6 +5,10 @@ import { flattenChildren } from '../_util/props-util';
 import type { VueNode } from '../_util/type';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+
+// CSSINJS
+import useStyle from './style';
+
 export const commentProps = () => ({
   actions: Array,
   /** The element to display as the comment author. */
@@ -24,10 +28,15 @@ export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentPro
 const Comment = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AComment',
+  inheritAttrs: false,
   props: commentProps(),
   slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('comment', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const renderNested = (prefixCls: string, children: VueNode) => {
       return <div class={`${prefixCls}-nested`}>{children}</div>;
     };
@@ -79,18 +88,21 @@ const Comment = defineComponent({
         </div>
       );
       const children = flattenChildren(slots.default?.());
-      return (
+      return wrapSSR(
         <div
+          {...attrs}
           class={[
             pre,
             {
               [`${pre}-rtl`]: direction.value === 'rtl',
             },
+            attrs.class,
+            hashId.value,
           ]}
         >
           {comment}
           {children && children.length ? renderNested(pre, children) : null}
-        </div>
+        </div>,
       );
     };
   },

components/comment/style/index.less

@@ -1,105 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@comment-prefix-cls: ~'@{ant-prefix}-comment';
-
-.@{comment-prefix-cls} {
-  position: relative;
-  background-color: @comment-bg;
-
-  &-inner {
-    display: flex;
-    padding: @comment-padding-base;
-  }
-
-  &-avatar {
-    position: relative;
-    flex-shrink: 0;
-    margin-right: @margin-sm;
-    cursor: pointer;
-
-    img {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-    }
-  }
-
-  &-content {
-    position: relative;
-    flex: 1 1 auto;
-    min-width: 1px;
-    font-size: @comment-font-size-base;
-    word-wrap: break-word;
-
-    &-author {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      margin-bottom: @margin-xss;
-      font-size: @comment-font-size-base;
-
-      & > a,
-      & > span {
-        padding-right: @padding-xs;
-        font-size: @comment-font-size-sm;
-        line-height: 18px;
-      }
-
-      &-name {
-        color: @comment-author-name-color;
-        font-size: @comment-font-size-base;
-        transition: color 0.3s;
-
-        > * {
-          color: @comment-author-name-color;
-
-          &:hover {
-            color: @comment-author-name-color;
-          }
-        }
-      }
-
-      &-time {
-        color: @comment-author-time-color;
-        white-space: nowrap;
-        cursor: auto;
-      }
-    }
-
-    &-detail p {
-      margin-bottom: @comment-content-detail-p-margin-bottom;
-      white-space: pre-wrap;
-    }
-  }
-
-  &-actions {
-    margin-top: @comment-actions-margin-top;
-    margin-bottom: @comment-actions-margin-bottom;
-    padding-left: 0;
-
-    > li {
-      display: inline-block;
-      color: @comment-action-color;
-
-      > span {
-        margin-right: 10px;
-        color: @comment-action-color;
-        font-size: @comment-font-size-sm;
-        cursor: pointer;
-        transition: color 0.3s;
-        user-select: none;
-
-        &:hover {
-          color: @comment-action-hover-color;
-        }
-      }
-    }
-  }
-
-  &-nested {
-    margin-left: @comment-nest-indent;
-  }
-}
-
-@import './rtl';

components/comment/style/index.tsx

@@ -1,2 +1,161 @@
-import '../../style/index.less';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
-import './index.less';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+
+export interface ComponentToken {}
+
+type CommentToken = FullToken<'Comment'> & {
+  commentBg: string;
+  commentPaddingBase: string;
+  commentNestIndent: string;
+  commentFontSizeBase: number;
+  commentFontSizeSm: number;
+  commentAuthorNameColor: string;
+  commentAuthorTimeColor: string;
+  commentActionColor: string;
+  commentActionHoverColor: string;
+  commentActionsMarginBottom: string;
+  commentActionsMarginTop: number;
+  commentContentDetailPMarginBottom: string;
+};
+
+const genBaseStyle: GenerateStyle<CommentToken> = token => {
+  const {
+    componentCls,
+    commentBg,
+    commentPaddingBase,
+    commentNestIndent,
+    commentFontSizeBase,
+    commentFontSizeSm,
+    commentAuthorNameColor,
+    commentAuthorTimeColor,
+    commentActionColor,
+    commentActionHoverColor,
+    commentActionsMarginBottom,
+    commentActionsMarginTop,
+    commentContentDetailPMarginBottom,
+  } = token;
+
+  return {
+    [componentCls]: {
+      position: 'relative',
+      backgroundColor: commentBg,
+
+      [`${componentCls}-inner`]: {
+        display: 'flex',
+        padding: commentPaddingBase,
+      },
+
+      [`${componentCls}-avatar`]: {
+        position: 'relative',
+        flexShrink: 0,
+        marginRight: token.marginSM,
+        cursor: 'pointer',
+
+        [`img`]: {
+          width: '32px',
+          height: '32px',
+          borderRadius: '50%',
+        },
+      },
+
+      [`${componentCls}-content`]: {
+        position: 'relative',
+        flex: `1 1 auto`,
+        minWidth: `1px`,
+        fontSize: commentFontSizeBase,
+        wordWrap: 'break-word',
+
+        [`&-author`]: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'flex-start',
+          marginBottom: token.marginXXS,
+          fontSize: commentFontSizeBase,
+
+          [`& > a,& > span`]: {
+            paddingRight: token.paddingXS,
+            fontSize: commentFontSizeSm,
+            lineHeight: `18px`,
+          },
+
+          [`&-name`]: {
+            color: commentAuthorNameColor,
+            fontSize: commentFontSizeBase,
+            transition: `color ${token.motionDurationSlow}`,
+
+            [`> *`]: {
+              color: commentAuthorNameColor,
+
+              [`&:hover`]: {
+                color: commentAuthorNameColor,
+              },
+            },
+          },
+
+          [`&-time`]: {
+            color: commentAuthorTimeColor,
+            whiteSpace: 'nowrap',
+            cursor: 'auto',
+          },
+        },
+
+        [`&-detail p`]: {
+          marginBottom: commentContentDetailPMarginBottom,
+          whiteSpace: 'pre-wrap',
+        },
+      },
+
+      [`${componentCls}-actions`]: {
+        marginTop: commentActionsMarginTop,
+        marginBottom: commentActionsMarginBottom,
+        paddingLeft: 0,
+
+        [`> li`]: {
+          display: 'inline-block',
+          color: commentActionColor,
+
+          [`> span`]: {
+            marginRight: '10px',
+            color: commentActionColor,
+            fontSize: commentFontSizeSm,
+            cursor: 'pointer',
+            transition: `color ${token.motionDurationSlow}`,
+            userSelect: 'none',
+
+            [`&:hover`]: {
+              color: commentActionHoverColor,
+            },
+          },
+        },
+      },
+
+      [`${componentCls}-nested`]: {
+        marginLeft: commentNestIndent,
+      },
+
+      '&-rtl': {
+        direction: 'rtl',
+      },
+    },
+  };
+};
+
+export default genComponentStyleHook('Comment', token => {
+  console.log(token);
+  const commentToken = mergeToken<CommentToken>(token, {
+    commentBg: 'inherit',
+    commentPaddingBase: `${token.paddingMD}px 0`,
+    commentNestIndent: `44px`,
+    commentFontSizeBase: token.fontSize,
+    commentFontSizeSm: token.fontSizeSM,
+    commentAuthorNameColor: token.colorTextTertiary,
+    commentAuthorTimeColor: token.colorTextPlaceholder,
+    commentActionColor: token.colorTextTertiary,
+    commentActionHoverColor: token.colorTextSecondary,
+    commentActionsMarginBottom: 'inherit',
+    commentActionsMarginTop: token.marginSM,
+    commentContentDetailPMarginBottom: 'inherit',
+  });
+
+  return [genBaseStyle(commentToken)];
+});

components/comment/style/rtl.less

@@ -1,51 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@comment-prefix-cls: ~'@{ant-prefix}-comment';
-
-.@{comment-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-avatar {
-    .@{comment-prefix-cls}-rtl & {
-      margin-right: 0;
-      margin-left: 12px;
-    }
-  }
-
-  &-content {
-    &-author {
-      & > a,
-      & > span {
-        .@{comment-prefix-cls}-rtl & {
-          padding-right: 0;
-          padding-left: 8px;
-        }
-      }
-    }
-  }
-
-  &-actions {
-    .@{comment-prefix-cls}-rtl & {
-      padding-right: 0;
-    }
-
-    > li {
-      > span {
-        .@{comment-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-
-  &-nested {
-    .@{comment-prefix-cls}-rtl & {
-      margin-right: @comment-nest-indent;
-      margin-left: 0;
-    }
-  }
-}

components/style.ts

@@ -50,7 +50,7 @@ import './list/style';
 import './tree-select/style';
 import './drawer/style';
 // import './skeleton/style';
-import './comment/style';
+// import './comment/style';
 // import './config-provider/style';
 import './empty/style';
 import './statistic/style';

components/theme/interface/components.ts

@@ -64,6 +64,7 @@ export interface ComponentTokenMap {
   //   Cascader?: CascaderComponentToken;
   //   Checkbox?: CheckboxComponentToken;
   //   Collapse?: CollapseComponentToken;
+  Comment?: {};
   //   DatePicker?: DatePickerComponentToken;
   Descriptions?: {};
   Divider?: DividerComponentToken;