(null);
+ const rootClassName = usePrefixClass('comment');
+
+ const isControlled = folds !== undefined;
+ const commentFolds = folds || defaultFolds || DEFAULT_COMMENT_FOLDS;
+
+ // 受控模式下，当外部 folds.state 变化时同步 foldSteps
+ useEffect(() => {
+ if (!isControlled) {
+ return;
+ }
+ if (folds.state === 'collapsed') {
+ foldSteps.current = 0;
+ } else if (folds.state === 'expanded') {
+ foldSteps.current = (commentFolds.step || 3) - 1;
+ }
+ }, [isControlled, folds?.state, commentFolds.step]);
+
+ // 当前实际使用的折叠状态
+ const curFoldsState: CommentFoldState = isControlled ? folds.state || 'collapsed' : innerFoldsState;
+
+ // 首次渲染前同步设置高度，避免闪烁（无动画）
+ useLayoutEffect(() => {
+ const body = replyBodyRef.current;
+ const inner = replyInnerRef.current;
+ if (body && inner) {
+ body.style.height = `${inner.scrollHeight}px`;
+ }
+ }, []);
+
+ // 监听回复区内容高度变化，驱动过渡动画
+ useEffect(() => {
+ const body = replyBodyRef.current;
+ const inner = replyInnerRef.current;
+ if (!body || !inner) return;
+
+ const observer = new ResizeObserver(() => {
+ body.style.height = `${inner.scrollHeight}px`;
+ });
+
+ observer.observe(inner);
+ return () => observer.disconnect();
+ }, []);
+
+ const handleClickActions = (event: MouseEvent, action: CommentActionItem | TNode) => {
+ onActions?.({ action, e: event });
+ };
+
+ const handleClickFold = (event: MouseEvent, isExpand: boolean) => {
+ if (!isExpand) {
+ // 收起：重置为 collapsed
+ foldSteps.current = 0;
+ if (!isControlled) {
+ setInnerFoldsState('collapsed');
+ }
+ onFolds?.({
+ fold: { ...commentFolds, state: 'collapsed' },
+ e: event,
+ });
+ return;
+ }
+
+ // 展开：递增步进并计算下一状态
+ foldSteps.current += 1;
+ const nextState: CommentFoldState = foldSteps.current >= (commentFolds.step || 3) - 1 ? 'expanded' : 'partial';
+
+ if (!isControlled) {
+ setInnerFoldsState(nextState);
+ }
+ onFolds?.({
+ fold: { ...commentFolds, state: nextState },
+ e: event,
+ });
+ };
+
+ const renderAvatar = () => {
+ if (isObject(avatar) && !React.isValidElement(avatar) && typeof avatar !== 'function') {
+ return ;
+ }
+ return parseTNode(avatar);
+ };
+
+ const renderAuthor = () => {parseTNode(author)}
;
+ const renderContent = () => {parseTNode(content)}
;
+ const renderFooter = () => {
+ const renderActions = () => {
+ if (!actions) {
+ return null;
+ }
+ if (!Array.isArray(actions)) {
+ return (
+ handleClickActions(e as unknown as MouseEvent, actions)}>{parseTNode(actions)}
+ );
+ }
+ const renderLeftPlacement = () =>
+ actions
+ .filter((item) => item.placement === 'start')
+ .map((item) => (
+ handleClickActions(e as unknown as MouseEvent, item)}>
+ {parseContentTNode(item.content, { disabled: item.disabled })}
+
+ ));
+ const renderRightPlacement = () =>
+ actions
+ .filter((item) => item.placement === 'end')
+ .map((item) => (
+ handleClickActions(e as unknown as MouseEvent, item)}>
+ {parseContentTNode(item.content, { disabled: item.disabled })}
+
+ ));
+ return (
+ <>
+ {renderLeftPlacement()}
+ {renderRightPlacement()}
+
+ );
+ };
+ return (
+
+
{parseTNode(datetime)}
+
{renderActions()}
+
handleClickFold(e as unknown as MouseEvent, true)}
+ >
+ {commentFolds.content.collapsed as ReactNode}
+
+
+ );
+ }
+ if (curFoldsState === 'partial') {
+ // 半展开
+ return (
+ <>
+ handleClickFold(e as unknown as MouseEvent, true)}
+ >
+ {commentFolds.content.partial[0] as ReactNode}
+
+
+ handleClickFold(e as unknown as MouseEvent, false)}
+ >
+ {commentFolds.content.partial[1] as ReactNode}
+
+
+
+ );
+ }
+ // 全展开
+ return (
+ handleClickFold(e as unknown as MouseEvent, false)}
+ >
+ {commentFolds.content.expanded as ReactNode}
+
+
+ );
+ };
+ if (!commentFolds.total || commentFolds.total <= 1) {
+ return null;
+ }
+ return {renderFoldsContent()}
;
+ };
+
+ const renderReply = () => {
+ const replyContent = reply || children;
+ return (
+
+
+
+ {parseTNode(replyContent)}
+
+
+ {renderFolds()}
+
+
+ {renderAvatar()}
+
+ {renderAuthor()}
+ {renderContent()}
+ {renderFooter()}
+
+
+ {renderReply()}
+
回复
, key: 'reply' },
+ {
+ placement: 'end',
+ content: (
+
+ } variant="text">
+ 6
+
+ }
+ className="mobile-comment__actions-button"
+ variant="text"
+ />
+
+ ),
+ key: 'actions',
+ },
+ ]}
+ content="这是一段很长很长很长很长很长很长的评论内容。"
+ datetime="今天16:38·广东"
+ />
+
+ );
+}
diff --git a/src/comment/_example/collapse.tsx b/src/comment/_example/collapse.tsx
new file mode 100644
index 000000000..89dd9958a
--- /dev/null
+++ b/src/comment/_example/collapse.tsx
@@ -0,0 +1,283 @@
+import React, { useEffect, useRef } from 'react';
+import { ActionSheet, Button, Comment, CommentFold, Tag } from 'tdesign-mobile-react';
+import { SendIcon, ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react';
+
+const REPLY_COUNT = 6; // 回复评论总数
+const MAIN_COMMENT_AUTHOR = 'Name1 名称';
+const SHOW_REPLY_INPUT = false; // 回复输入框待对齐视觉，暂不展示；对齐后改为 true 即可恢复
+
+interface ReplyItem {
+ author: string;
+ avatar: string;
+ content: string;
+ datetime: string;
+ likeNum: number;
+ replyTo?: string; // 回复对象的名称
+}
+
+export default function () {
+ const [commentFold, setCommentFold] = React.useState({
+ state: 'collapsed',
+ total: REPLY_COUNT,
+ step: 3,
+ content: {
+ collapsed: `展开${REPLY_COUNT - 1}条回复`,
+ partial: ['展开更多回复', '收起'],
+ expanded: '收起',
+ },
+ });
+ const [replyInfo, setReplyInfo] = React.useState([]);
+ const [showActionSheet, setShowActionSheet] = React.useState(false);
+ const [replyValue, setReplyValue] = React.useState('');
+ const [replyTarget, setReplyTarget] = React.useState(null); // 当前回复的目标用户
+ const timerRef = React.useRef | null>(null);
+ const inputRef = useRef(null);
+ const longPressTargetRef = useRef(null); // 长按时记录目标评论的作者
+ const lastReplyRef = useRef(null); // 最后一条回复的 ref，用于滚动定位
+
+ // 触发回复某人
+ const handleReply = (authorName: string) => {
+ setReplyTarget(authorName);
+ // 延迟聚焦，确保 state 更新后 input 已渲染
+ setTimeout(() => {
+ inputRef.current?.focus();
+ }, 100);
+ };
+
+ const handleTouchStart = (e: React.TouchEvent, author: string) => {
+ e.stopPropagation();
+ longPressTargetRef.current = author;
+ timerRef.current = setTimeout(() => {
+ setShowActionSheet(true);
+ }, 800);
+ };
+
+ const handleTouchEnd = () => {
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ timerRef.current = null;
+ }
+ };
+
+ useEffect(() => {
+ setReplyInfo(
+ new Array(REPLY_COUNT).fill({}).map((__, index) => ({
+ author: `Name${index + 1} 名称`,
+ avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+ content: '这是一段很长很长很长很长很长很长的评论内容。',
+ datetime: '今天16:38·广东',
+ likeNum: 6,
+ })),
+ );
+ }, []);
+
+ const handleUpdateFold = (context: { e: Event; fold: CommentFold }) => {
+ setCommentFold(context.fold);
+ };
+
+ const handleSubmit = () => {
+ if (!replyValue.trim()) return;
+
+ const now = new Date();
+ const hours = String(now.getHours()).padStart(2, '0');
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+
+ const newReply: ReplyItem = {
+ author: '我',
+ avatar: 'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+ content: replyValue,
+ datetime: `今天${hours}:${minutes}·广东`,
+ likeNum: 0,
+ ...(replyTarget ? { replyTo: replyTarget } : {}),
+ };
+
+ setReplyInfo((prev) => [...prev, newReply]);
+
+ // 更新折叠状态：展开全部并更新总数
+ setCommentFold((prev) => {
+ const newTotal = replyInfo.length + 1;
+ return {
+ ...prev,
+ state: 'expanded',
+ total: newTotal,
+ content: {
+ collapsed: `展开${newTotal - 1}条回复`,
+ partial: ['展开更多回复', '收起'],
+ expanded: '收起',
+ },
+ };
+ });
+
+ setTimeout(() => {
+ lastReplyRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ }, 500);
+
+ setReplyValue('');
+ setReplyTarget(null);
+ };
+
+ const renderReply = () => {
+ const getRenderReplyItem = () => {
+ if (commentFold.state === 'collapsed') {
+ return replyInfo.slice(0, 1);
+ }
+ if (commentFold.state === 'partial') {
+ return replyInfo.slice(0, 3);
+ }
+ return replyInfo;
+ };
+ const visibleItems = getRenderReplyItem();
+ return visibleItems.map((item, index) => (
+ handleTouchStart(e, item.author)}
+ onTouchEnd={handleTouchEnd}
+ onTouchMove={handleTouchEnd}
+ >
+
+ {item.author}
+ handleReply(item.author)}>
+ 回复
+
+ ),
+ key: 'reply',
+ },
+ {
+ placement: 'end',
+ content: (
+
+ } variant="text">
+ {item.likeNum || ''}
+
+ }
+ className="mobile-comment__actions-button"
+ variant="text"
+ />
+
+ ),
+ key: 'actions',
+ },
+ ]}
+ content={
+ item.replyTo ? (
+
+ 回复{item.replyTo}：{item.content}
+
+ ) : (
+ item.content
+ )
+ }
+ datetime={item.datetime}
+ />
+
+ ));
+ };
+ return (
+
+
handleTouchStart(e, MAIN_COMMENT_AUTHOR)}
+ onTouchEnd={handleTouchEnd}
+ onTouchMove={handleTouchEnd}
+ >
+
+ {MAIN_COMMENT_AUTHOR}
+
+ 作者
+
+
+ }
+ actions={[
+ {
+ placement: 'start',
+ content: (
+
handleReply(MAIN_COMMENT_AUTHOR)}>
+ 回复
+
+ ),
+ key: 'reply',
+ },
+ {
+ placement: 'end',
+ content: (
+
+ } variant="text">
+ 6
+
+ }
+ className="mobile-comment__actions-button"
+ variant="text"
+ />
+
+ ),
+ key: 'actions',
+ },
+ ]}
+ content="这是一段很长很长很长很长很长很长的评论内容。"
+ datetime="今天16:38·广东"
+ folds={commentFold}
+ reply={renderReply()}
+ onFolds={handleUpdateFold}
+ />
+
+ setReplyValue(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ handleSubmit();
+ }
+ }}
+ />
+ }
+ shape="circle"
+ theme="primary"
+ onClick={handleSubmit}
+ />
+
+ )}
+ {
+ const label = typeof selected === 'string' ? selected : selected.label;
+ if (label === '回复' && longPressTargetRef.current) {
+ handleReply(longPressTargetRef.current);
+ }
+ setShowActionSheet(false);
+ }}
+ onClose={() => {
+ setShowActionSheet(false);
+ }}
+ onCancel={() => {
+ setShowActionSheet(false);
+ }}
+ />
+
+ );
+}
diff --git a/src/comment/_example/image.tsx b/src/comment/_example/image.tsx
new file mode 100644
index 000000000..7c5f47900
--- /dev/null
+++ b/src/comment/_example/image.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Button, Comment, Image, ImageViewer, Tag } from 'tdesign-mobile-react';
+import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react';
+
+const images = ['https://tdesign.gtimg.com/mobile/demos/swiper1.png'];
+
+export default function ImageDemo() {
+ const [visible, setVisible] = useState(false);
+ const [viewerIndex, setViewerIndex] = useState(0);
+
+ const handleImageClick = (index: number) => {
+ setViewerIndex(index);
+ setVisible(true);
+ };
+
+ const handleClose = () => {
+ setVisible(false);
+ };
+
+ return (
+
+ }
+ content={
+
+ {images.map((src, index) => (
+
handleImageClick(index)}>
+
+
+ ))}
+
回复
, key: 'reply' },
+ {
+ placement: 'end',
+ content: (
+
+ } variant="text">
+ 6
+
+ }
+ className="mobile-comment__actions-button"
+ variant="text"
+ />
+
+ ),
+ key: 'actions',
+ },
+ ]}
+ datetime="今天16:38·广东"
+ />
+ setViewerIndex(index)}
+ />
+
+ );
+}
diff --git a/src/comment/_example/index.tsx b/src/comment/_example/index.tsx
new file mode 100644
index 000000000..2aaa7c2e4
--- /dev/null
+++ b/src/comment/_example/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import Base from './base';
+import Image from './image';
+import Mixed from './mixed';
+import Collapse from './collapse';
+import './style/index.less';
+
+export default function CommentDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/comment/_example/mixed.tsx b/src/comment/_example/mixed.tsx
new file mode 100644
index 000000000..6e18c1778
--- /dev/null
+++ b/src/comment/_example/mixed.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Button, Comment, Image, ImageViewer, Tag } from 'tdesign-mobile-react';
+import { ThumbUpIcon, Uncomfortable1Icon } from 'tdesign-icons-react';
+
+const images = [
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+ 'https://tdesign.gtimg.com/mobile/demos/swiper1.png',
+];
+
+const MAX_SHOW = 3;
+
+export default function ImageDemo() {
+ const [visible, setVisible] = useState(false);
+ const [viewerIndex, setViewerIndex] = useState(0);
+
+ const showImages = images.slice(0, MAX_SHOW);
+
+ const handleImageClick = (index: number) => {
+ setViewerIndex(index);
+ setVisible(true);
+ };
+
+ const handleClose = () => {
+ setVisible(false);
+ };
+
+ return (
+
+ }
+ content={
+ <>
+ 这是一段很长很长很长很长很长很长的评论内容。
+
+ {showImages.map((src, index) => (
+
handleImageClick(index)}>
+
+ {index === MAX_SHOW - 1 && images.length > MAX_SHOW && (
+
共{images.length}张
+ )}
+
+ ))}
+
回复
, key: 'reply' },
+ {
+ placement: 'end',
+ content: (
+
+ } variant="text">
+ 6
+
+ }
+ className="mobile-comment__actions-button"
+ variant="text"
+ />
+
+ ),
+ key: 'actions',
+ },
+ ]}
+ datetime="今天16:38·广东"
+ />
+ setViewerIndex(index)}
+ />
+
+ );
+}
diff --git a/src/comment/_example/style/index.less b/src/comment/_example/style/index.less
new file mode 100644
index 000000000..c26a6815f
--- /dev/null
+++ b/src/comment/_example/style/index.less
@@ -0,0 +1,103 @@
+.tdesign-mobile-demo {
+ --bg-color-demo: var(--td-bg-color-container);
+ // 禁用按钮点击态样式
+ --td-button-default-text-active-bg-color: transparent;
+ --td-button-default-active-border-color: transparent;
+}
+
+.mobile-comment {
+ box-sizing: border-box;
+
+ &__author {
+ display: flex;
+ align-items: center;
+ font: var(--td-font-body-small);
+
+ &-tag {
+ border: none;
+ --td-tag-medium-padding: 0 var(--td-spacer);
+ --td-tag-primary-light-color: transparent;
+ }
+ }
+
+ &__reply {
+ &-button {
+ color: var(--td-text-color-secondary);
+ font: var(--td-font-body-small);
+ }
+
+ &-name {
+ color: var(--td-text-color-secondary);
+ font: var(--td-font-body-medium);
+ }
+ }
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: var(--td-spacer-2);
+
+ &-button {
+ padding: 2px calc(var(--td-spacer) / 4);
+ color: var(--td-text-color-placeholder);
+ font: var(--td-font-body-small);
+ box-sizing: border-box;
+ height: var(--td-spacer-3);
+ }
+ }
+
+ &__text {
+ margin-bottom: calc(var(--td-spacer) / 2);
+ }
+
+ &__images {
+ display: flex;
+ gap: var(--td-spacer);
+
+ &-item {
+ position: relative;
+ width: 78px;
+ height: 78px;
+ border-radius: 8px;
+ overflow: hidden;
+ flex-shrink: 0;
+ cursor: pointer;
+ }
+
+ &-badge {
+ position: absolute;
+ right: 4px;
+ bottom: 4px;
+ padding: 0 var(--td-spacer);
+ background: var(--td-mask-active);
+ color: var(--td-text-color-anti);
+ font: var(--td-font-body-extraSmall);
+ border-radius: 12px;
+ white-space: nowrap;
+ }
+ }
+
+ &__input {
+ display: flex;
+ padding: 12px;
+ gap: var(--td-spacer);
+ border-radius: 16px;
+ border: 1px solid #DCDCDC;
+ background: #FFFFFF;
+ /* Shadow/Shadow-3 上层投影 */
+ box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
+ margin-top: 48px;
+
+ &-content {
+ border: none;
+ flex: 1;
+ background: transparent;
+ }
+
+ &-button {
+ --td-button-primary-disabled-bg: #DCDCDC;
+ --td-button-primary-disabled-border-color: transparent;
+ transform: rotate(-90deg);
+ }
+ }
+}
diff --git a/src/comment/comment.en-US.md b/src/comment/comment.en-US.md
new file mode 100644
index 000000000..5e299f6e9
--- /dev/null
+++ b/src/comment/comment.en-US.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+
+### Comment Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
+actions | TNode | - | Typescript: `Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+author | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+avatar | TNode | - | Typescript: `string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+children | TNode | - | children, same as `reply`。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+datetime | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+folds | Object | - | Typescript: `CommentFold ` `type CommentFoldState = 'collapsed' \| 'partial' \| 'expanded'` `interface CommentFold { state: CommentFoldState; total?: number; step?: number; content?: Partial>}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+reply | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+onActions | Function | | Typescript: `(context: { action: CommentActionItem \| TNode; e: Event }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+onFolds | Function | | Typescript: `(context: { fold: CommentFold; e: Event }) => void`
| N
diff --git a/src/comment/comment.md b/src/comment/comment.md
new file mode 100644
index 000000000..663e0e164
--- /dev/null
+++ b/src/comment/comment.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+
+### Comment Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+actions | TNode | - | 操作。TS 类型：`Array \| TNode ` `type ActionPlacement = 'start' \| 'end'` `interface CommentActionItem { key: string; content?: string \| TNode; placement?: ActionPlacement; disabled?: boolean}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+author | TNode | - | 作者。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+avatar | TNode | - | 头像。TS 类型：`string \| AvatarProps \| TNode`，[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+children | TNode | - | 子元素内容，同 reply。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | 内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+datetime | TNode | - | 时间。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+folds | Object | - | 折叠/展开配置项。TS 类型：`CommentFold ` `type CommentFoldState = 'collapsed' \| 'partial' \| 'expanded'` `interface CommentFold { state: CommentFoldState; total?: number; step?: number; content?: Partial>}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/comment/type.ts) | N
+reply | TNode | - | 回复。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+onActions | Function | | TS 类型：`(context: { action: CommentActionItem \| TNode; e: Event }) => void`
点击任一操作项（如回复/点赞/不喜欢）时触发并返回当前操作项。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+onFolds | Function | | TS 类型：`(context: { fold: CommentFold; e: Event }) => void`
用户点击“展开回复/收起”时触发，并返回点击后的 fold 配置 | N
diff --git a/src/comment/index.tsx b/src/comment/index.tsx
new file mode 100644
index 000000000..a7914d9ba
--- /dev/null
+++ b/src/comment/index.tsx
@@ -0,0 +1,8 @@
+import _Comment from './Comment';
+import './style';
+
+export type { CommentProps } from './Comment';
+export * from './type';
+
+export const Comment = _Comment;
+export default Comment;
diff --git a/src/comment/style/css.js b/src/comment/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/comment/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/comment/style/index.js b/src/comment/style/index.js
new file mode 100644
index 000000000..34fb7863e
--- /dev/null
+++ b/src/comment/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/comment/_index.less';
diff --git a/src/comment/type.ts b/src/comment/type.ts
new file mode 100644
index 000000000..409c9bba1
--- /dev/null
+++ b/src/comment/type.ts
@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { AvatarProps } from '../avatar';
+import type { TNode } from '../common';
+
+export interface TdCommentProps {
+ /**
+ * 操作
+ */
+ actions?: Array | TNode;
+ /**
+ * 作者
+ */
+ author?: TNode;
+ /**
+ * 头像
+ */
+ avatar?: AvatarProps | TNode;
+ /**
+ * 子元素内容，同 reply
+ */
+ children?: TNode;
+ /**
+ * 内容
+ */
+ content?: TNode;
+ /**
+ * 时间
+ */
+ datetime?: TNode;
+ /**
+ * 折叠/展开配置项
+ */
+ folds?: CommentFold;
+ /**
+ * 折叠/展开配置项，非受控属性
+ */
+ defaultFolds?: CommentFold;
+ /**
+ * 回复
+ */
+ reply?: TNode;
+ /**
+ * 点击任一操作项（如回复/点赞/不喜欢）时触发并返回当前操作项
+ */
+ onActions?: (context: { action: CommentActionItem | TNode; e: Event }) => void;
+ /**
+ * 用户点击“展开回复/收起”时触发，并返回点击后的 fold 配置
+ */
+ onFolds?: (context: { fold: CommentFold; e: Event }) => void;
+}
+
+export type ActionPlacement = 'start' | 'end';
+
+export interface CommentActionItem {
+ key: string;
+ content?: string | TNode;
+ placement?: ActionPlacement;
+ disabled?: boolean;
+}
+
+export type CommentFoldState = 'collapsed' | 'partial' | 'expanded';
+
+export interface CommentFold {
+ state: CommentFoldState;
+ total?: number;
+ step?: number;
+ content?: Partial>;
+}
diff --git a/src/index.ts b/src/index.ts
index db18e1de3..b2cbda90f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,7 @@ export * from './badge';
export * from './cell';
export * from './collapse';
export * from './count-down';
+export * from './comment';
export * from './empty';
export * from './footer';
export * from './grid';
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 801550a8e..9cf7d9bd7 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -118,7 +118,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
csr test src/action-sheet/_example/align.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_149_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_14v_-overlap-fill1)"
/>
csr test src/action-sheet/_example/align.tsx 1`] =
csr test src/action-sheet/_example/align.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_14a_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_150_-overlap-fill1)"
/>
csr test src/action-sheet/_example/align.tsx 1`] =
csr test src/action-sheet/_example/align.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_14d_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_153_-overlap-fill1)"
/>
csr test src/action-sheet/_example/align.tsx 1`] =
csr test src/action-sheet/_example/align.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_14e_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_154_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_13n_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_14d_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_13p_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_14f_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_13r_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_14h_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_13t_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_14j_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_13v_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_14l_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
csr test src/action-sheet/_example/grid.tsx 1`] = `
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_141_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_14n_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
>
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_143_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_14p_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_145_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_14r_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
d="M3 21H20L9 10L3 16V21Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-image-instance-_r_146_-overlap-fill1)"
+ mask="url(#t-icon-image-instance-_r_14s_-overlap-fill1)"
/>
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
csr test src/action-sheet/_example/grid-multiple.ts
d="M3 21H20L9 10L3 16V21Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-image-instance-_r_147_-overlap-fill1)"
+ mask="url(#t-icon-image-instance-_r_14t_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_12l_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_13b_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_12m_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_13c_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_12p_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_13f_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_12r_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_13h_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_12t_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_13j_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_12v_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_13l_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_131_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_13n_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_133_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_13p_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-star-instance-_r_135_-overlap-fill1)"
+ mask="url(#t-icon-star-instance-_r_13r_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-edit-1-instance-_r_137_-overlap-fill1)"
+ mask="url(#t-icon-edit-1-instance-_r_13t_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3 21H20L9 10L3 16V21Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-image-instance-_r_138_-overlap-fill1)"
+ mask="url(#t-icon-image-instance-_r_13u_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M3 21H20L9 10L3 16V21Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-image-instance-_r_139_-overlap-fill1)"
+ mask="url(#t-icon-image-instance-_r_13v_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_13b_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_141_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_13c_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_142_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_13f_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_145_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_13g_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_146_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_13j_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_149_-overlap-fill1)"
/>
csr test src/action-sheet/_example/index.tsx 1`] =
csr test src/action-sheet/_example/index.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_13k_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_14a_-overlap-fill1)"
/>
csr test src/action-sheet/_example/list.tsx 1`] = `
csr test src/action-sheet/_example/list.tsx 1`] = `
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_12h_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_137_-overlap-fill1)"
/>
csr test src/action-sheet/_example/list.tsx 1`] = `
csr test src/action-sheet/_example/list.tsx 1`] = `
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_12i_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_138_-overlap-fill1)"
/>
csr test src/action-sheet/_example/status.tsx 1`] =
csr test src/action-sheet/_example/status.tsx 1`] =
d="M5 4H19V21L12 16L5 21V4Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-bookmark-instance-_r_12d_-overlap-fill1)"
+ mask="url(#t-icon-bookmark-instance-_r_133_-overlap-fill1)"
/>
csr test src/action-sheet/_example/status.tsx 1`] =
csr test src/action-sheet/_example/status.tsx 1`] =
d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-pin-instance-_r_12e_-overlap-fill1)"
+ mask="url(#t-icon-pin-instance-_r_134_-overlap-fill1)"
/>
csr test src/avatar/_example/action.tsx 1`] = `
csr test src/avatar/_example/action.tsx 1`] = `
d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-user-add-instance-_r_12b_-overlap-fill1)"
+ mask="url(#t-icon-user-add-instance-_r_131_-overlap-fill1)"
/>
csr test src/avatar/_example/badge-avatar.tsx 1`] =
csr test src/avatar/_example/badge-avatar.tsx 1`] =
>
csr test src/avatar/_example/icon-avatar.tsx 1`] =
csr test src/avatar/_example/icon-avatar.tsx 1`] =
>
csr test src/avatar/_example/icon-avatar.tsx 1`] =
csr test src/avatar/_example/icon-avatar.tsx 1`] =
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-user-add-instance-_r_124_-overlap-fill1)"
+ mask="url(#t-icon-user-add-instance-_r_12q_-overlap-fill1)"
/>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/index.tsx 1`] = `
csr test src/avatar/_example/index.tsx 1`] = `
>
csr test src/avatar/_example/size.tsx 1`] = `
csr test src/avatar/_example/size.tsx 1`] = `
>
csr test src/avatar/_example/size.tsx 1`] = `
csr test src/avatar/_example/size.tsx 1`] = `
>
csr test src/avatar/_example/size.tsx 1`] = `
csr test src/avatar/_example/size.tsx 1`] = `
>
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11r_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12h_-overlap-fill1)"
/>
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11s_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12i_-overlap-fill1)"
/>
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
csr test src/badge/_example/base.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11t_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12j_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11j_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_129_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11k_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12a_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11l_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12b_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11m_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12c_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-notification-instance-_r_11n_-overlap-fill1)"
+ mask="url(#t-icon-notification-instance-_r_12d_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
d="M4 8H20V22H4V8Z"
fill="transparent"
id="fill1"
- mask="url(#t-icon-shop-instance-_r_11o_-overlap-fill1)"
+ mask="url(#t-icon-shop-instance-_r_12e_-overlap-fill1)"
/>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
>
csr test src/badge/_example/index.tsx 1`] = `
csr test src/badge/_example/index.tsx 1`] = `
>
csr test src/badge/_example/size.tsx 1`] = `
csr test src/badge/_example/size.tsx 1`] = `
>
csr test src/badge/_example/size.tsx 1`] = `
+ 
+ 
@@ -484,4 +491,4 @@ spline: explain