feat(Badge): update demo

Author: anlyyao

src/badge/__tests__/index.test.tsx

@@ -53,11 +53,11 @@ describe('Badge', () => {
 
     it(':count', () => {
       const { container } = render(<Badge count={99} />);
-      expect(container.querySelector('.t-badge--basic').innerHTML.trim()).toBe('99');
+      expect(container.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('99');
       const { container: container2 } = render(<Badge count={() => 33} />);
-      expect(container2.querySelector('.t-badge--basic').innerHTML.trim()).toBe('33');
+      expect(container2.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('33');
       const { container: container3 } = render(<Badge count={null} />);
-      expect(container3.querySelector('.t-badge--basic')).toBe(null);
+      expect(container3.querySelector('.t-badge--basic > .t-badge__count')).toBe(null);
     });
 
     it(':dot', () => {
@@ -67,21 +67,19 @@ describe('Badge', () => {
 
     it(':maxCount', () => {
       const { container } = render(<Badge count={100} maxCount={99} />);
-      expect(container.querySelector('.t-badge--basic').innerHTML.trim()).toBe('99+');
+      expect(container.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('99+');
     });
 
     it(':offset', () => {
       const { container } = render(<Badge count={3} offset={[10, 10]} />);
       expect(container.querySelector('.t-badge--basic').getAttribute('style'))
-        .contain('right: 10px;')
+        .contain('left: calc(100% + 10px);')
         .contain('top: 10px;');
       const { container: container1 } = render(<Badge count={3} offset={[]} />);
-      expect(container1.querySelector('.t-badge--basic').getAttribute('style'))
-        .contain('right: 0px;')
-        .contain('top: 0px;');
+      expect(container1.querySelector('.t-badge--basic').getAttribute('style')).toBe(null);
       const { container: container2 } = render(<Badge count={3} offset={['10em', '10rem']} />);
       expect(container2.querySelector('.t-badge--basic').getAttribute('style'))
-        .contain('right: 10em;')
+        .contain('left: calc(100% + 10em);')
         .contain('top: 10rem;');
     });
 

src/badge/_example/base.tsx

@@ -18,8 +18,8 @@ export default function BaseBadge() {
 
       <div className="summary">数字徽标</div>
       <div className="badge-demo">
-        <Badge count="8" content="消息" offset={[-8, 0]} className="badge-item" />
-        <Badge count="2" offset={[-2, -2]} className="badge-item">
+        <Badge count="8" content="消息" offset={[4, 0]} className="badge-item" />
+        <Badge count="2" offset={[2, -2]} className="badge-item">
           <NotificationIcon size={24} />
         </Badge>
         <Badge count="8" offset={[2, 2]} className="badge-item">

src/badge/_example/theme.tsx

@@ -7,14 +7,14 @@ export default function ThemeBadge() {
     <>
       <div className="summary">圆形徽标</div>
       <div className="badge-demo">
-        <Badge count="2" offset={[-2, -2]}>
+        <Badge count="2" offset={[2, -2]}>
           <NotificationIcon size={24} />
         </Badge>
       </div>
 
       <div className="summary">方形徽标</div>
       <div className="badge-demo">
-        <Badge count="2" shape="square" offset={[-2, -2]}>
+        <Badge count="2" shape="square" offset={[1, -2]}>
           <NotificationIcon size={24} />
         </Badge>
       </div>
@@ -29,7 +29,12 @@ export default function ThemeBadge() {
       <div className="summary" style={{ marginBottom: '16px' }}>
         角标
       </div>
-      <Cell title="单行标题" note={<Badge count="New" offset={[0, 0]} shape="ribbon" />}></Cell>
+      <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="ribbon" />}></Cell>
+
+      <div className="summary" style={{ marginBottom: '16px' }}>
+        三角角标
+      </div>
+      <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="triangle-right" />}></Cell>
     </>
   );
 }

src/tabs/_example/badge.tsx

@@ -4,8 +4,8 @@ import { Tabs, TabPanel } from 'tdesign-mobile-react';
 export default () => (
   <div>
     <Tabs defaultValue={'first'}>
-      <TabPanel value={'first'} badgeProps={{ dot: true, offset: [-4, 1] }} label="选项"></TabPanel>
-      <TabPanel value={'second'} badgeProps={{ count: 8, offset: [-8, 3] }} label="选项"></TabPanel>
+      <TabPanel value={'first'} badgeProps={{ dot: true, offset: [0, 1] }} label="选项"></TabPanel>
+      <TabPanel value={'second'} badgeProps={{ count: 8, offset: [0, 1] }} label="选项"></TabPanel>
       <TabPanel value={'third'} label="选项"></TabPanel>
     </Tabs>
   </div>