docs(changelog): update 2.9.0-beta.0 changelog

content/start/changelog/index-en-US.md

@@ -29,10 +29,12 @@ Version：Major.Minor.Patch
     - New Component Divider. [#721](https://github.com/DouyinFE/semi-design/issues/721) [@ZeroCodeLin](https://github.com/ZeroCodeLin)
     - Added support for ReactNode as key value for Descriptions' data prop [#734](https://github.com/DouyinFE/semi-design/issues/734) [@oddguan](https://github.com/oddguan)
 - 【Fix】
-    - Update the centering method of Avatar text content, from absolute positioning to centering by the parent layout [#774](https://github.com/DouyinFE/semi-design/issues/774)
     - Fix controlled slider component can still trigger value change by clicking track. [#768](https://github.com/DouyinFE/semi-design/issues/768)
     - Fix an issue where Badge could not be used with Tooltip [#761](https://github.com/DouyinFE/semi-design/issues/761) 
     - Fix validateStatus type check lack success [#746](https://github.com/DouyinFE/semi-design/issues/746) [@rojer95](https://github.com/rojer95)
+- 【Style】
+    - **Update the centering method of Avatar text content from absolute positioning to centering by flex layout. If you override the style display to inline-block, then the text centering will not work** [#774](https://github.com/DouyinFE/semi-design/issues/774)
+
 
 #### 🎉 2.8.1 (2022-04-19)
 - 【Fix】

content/start/changelog/index.md

@@ -28,10 +28,11 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
     - 新增分割线组件 [#721](https://github.com/DouyinFE/semi-design/issues/721) [@ZeroCodeLin](https://github.com/ZeroCodeLin)
     - Description 组件的 data 键值支持传入 ReactNode [#734](https://github.com/DouyinFE/semi-design/issues/734) [@oddguan](https://github.com/oddguan)
 - 【Fix】
-    - 更新 Avatar 文本内容居中方式，由绝对定位改为由父级布局居中 [#774](https://github.com/DouyinFE/semi-design/issues/774)
     - 修复 Slider 组件受控情况下点击滑轨部分仍然可以触发值变更的问题 [#768](https://github.com/DouyinFE/semi-design/issues/768)
     - 修复 Badge 不能搭配 Tooltip 使用的问题 [#761](https://github.com/DouyinFE/semi-design/issues/761) 
     - 修复 validateStatus 类型检查缺少 success [#746](https://github.com/DouyinFE/semi-design/issues/746) [@rojer95](https://github.com/rojer95)
+- 【Style】
+    - **更新 Avatar 文本内容居中方式，由绝对定位改为由 flex 布局居中。如果你覆盖了 display 为 inline-block，这时文本居中会失效** [#774](https://github.com/DouyinFE/semi-design/issues/774)
 #### 🎉 2.8.1 (2022-04-19)
 - 【Fix】
     - 更新组件的 ts 类型定义，解决 @types/react v18 移除默认 children 声明后带来的类型检查报错 [#755](https://github.com/DouyinFE/semi-design/issues/755)

packages/semi-ui/badge/_story/badge.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import Badge from '../index';
+import { Avatar, Badge } from '../../index';
+import { IconLock } from '@douyinfe/semi-icons';
 
 export default {
   title: 'Badge',
@@ -88,4 +89,35 @@ export const Theme = () => (
       <a style={style}></a>
     </Badge>
   </div>
-);
+);
+
+export const AvatarBadge = () => {
+  const style = {
+      width: '42px',
+      height: '42px',
+      borderRadius: '4px',
+  };
+  return (
+      <div>
+          <Badge count={5}>
+              <Avatar color='blue' shape='square' style={style}>BM</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge dot>
+              <Avatar color='blue' shape='square' style={style}>YL</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
+              <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
+          </Badge>
+          <br/>
+          <br/>
+          <Badge count='NEW' >
+              <Avatar color='light-blue' shape='square' style={style}>WF</Avatar>
+          </Badge>
+      </div>
+  );  
+};
+AvatarBadge.storyName = '头像 badge';