test(avatar): fix example's style

Tencent · Jun 23, 2022 · c2e77e8 · c2e77e8
1 parent 98e8cd9
commit c2e77e8
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 13 deletions.
diff --git a/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
@@ -139,7 +139,7 @@ exports[`base.jsx 1`] = `
 exports[`group.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-space t-space-horizontal"
+    class="t-space t-space-vertical"
     style="gap: 16px;"
   >
     <div
@@ -231,7 +231,7 @@ exports[`group.jsx 1`] = `
 exports[`group-cascading.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-space t-space-horizontal"
+    class="t-space t-space-vertical"
     style="gap: 16px;"
   >
     <div
@@ -323,7 +323,7 @@ exports[`group-cascading.jsx 1`] = `
 exports[`group-max.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-space t-space-horizontal"
+    class="t-space t-space-vertical"
     style="gap: 16px;"
   >
     <div
@@ -494,8 +494,8 @@ exports[`shape.jsx 1`] = `
 exports[`size.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="t-space t-space-horizontal"
-    style="gap: 24px; flex-wrap: wrap;"
+    class="t-space t-space-vertical"
+    style="gap: 24px;"
   >
     <div
       class="t-space-item"

diff --git a/src/avatar/_example/group-cascading.jsx b/src/avatar/_example/group-cascading.jsx
@@ -6,7 +6,7 @@ const { Group: AvatarGroup } = Avatar;
 
 export default function GroupCascadingAvatar() {
   return (
-    <Space direction="horizontal">
+    <Space direction="vertical">
       <AvatarGroup>
         <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
         <Avatar>W</Avatar>

diff --git a/src/avatar/_example/group-max.jsx b/src/avatar/_example/group-max.jsx
@@ -6,7 +6,7 @@ const { Group: AvatarGroup } = Avatar;
 
 export default function GroupMaxAvatar() {
   return (
-    <Space direction="horizontal">
+    <Space direction="vertical">
       <AvatarGroup size="large" max={2}>
         <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
         <Avatar>Avatar</Avatar>

diff --git a/src/avatar/_example/group.jsx b/src/avatar/_example/group.jsx
@@ -6,7 +6,7 @@ const { Group: AvatarGroup } = Avatar;
 
 export default function GroupAvatar() {
   return (
-    <Space direction="horizontal">
+    <Space direction="vertical">
       <AvatarGroup>
         <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
         <Avatar>W</Avatar>

diff --git a/src/avatar/_example/size.jsx b/src/avatar/_example/size.jsx
@@ -3,7 +3,7 @@ import { Avatar, Space } from 'tdesign-react';
 
 export default function SizeAvatar() {
   return (
-    <Space direction="horizontal" breakLine size="large">
+    <Space direction="vertical" size="large">
       <Space align="center">
         <Avatar size="small" style={{ marginRight: '40px' }}>
           W

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -36,15 +36,15 @@ exports[`ssr snapshot test renders ./src/avatar/_example/adjust.jsx correctly 1`
 
 exports[`ssr snapshot test renders ./src/avatar/_example/base.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\" style=\\"margin-right:40px\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group-cascading.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group-cascading.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group-max.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">+1</span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-ellipsis\\"><path fill=\\"currentColor\\" d=\\"M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">more</span></div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group-max.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">+1</span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-ellipsis\\"><path fill=\\"currentColor\\" d=\\"M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">more</span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/avatar/_example/shape.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/size.jsx correctly 1`] = `"<div style=\\"gap:24px;flex-wrap:wrap\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--round\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/size.jsx correctly 1`] = `"<div style=\\"gap:24px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--round\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/badge/_example/base.jsx correctly 1`] = `"<span class=\\"t-badge\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-size-l\\"><span class=\\"t-button__text\\"> </span></button><span class=\\"t-badge--dot\\"></span></span><span class=\\"t-badge\\">解锁新徽章<span class=\\"t-badge--dot\\"></span></span><span class=\\"t-badge\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg><span class=\\"t-badge--dot\\"></span></span>"`;