Add some random width for skeleton paragraph

components/skeleton/Paragraph.tsx

@@ -59,7 +59,7 @@ class Paragraph extends React.Component<SkeletonParagraphProps, SkeletonParagrap
     const { prefixCls, className, style, rows } = this.props;
 
     const rowList = [...Array(rows)].map((_, index) => (
-      <li key={index} style={{ width: widthList[index] || '100%' }} />
+      <li key={index} style={{ width: widthList[index] }} />
     ));
 
     return (

components/skeleton/demo/active.md

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 2
 title:
   zh-CN: 动画效果
   en-US: Active Animation
@@ -16,7 +16,5 @@ Display active animation.
 ````jsx
 import { Skeleton } from 'antd';
 
-ReactDOM.render(
+ReactDOM.render(<Skeleton active />, mountNode);
-  <Skeleton active />,
-mountNode);
 ````

components/skeleton/demo/basic.md

@@ -7,16 +7,14 @@ title:
 
 ## zh-CN
 
-最简单的用法。
+最简单的占位效果。
 
 ## en-US
 
-Basic usage.
+Simplest Skeleton usage.
 
 ````jsx
 import { Skeleton } from 'antd';
 
-ReactDOM.render(
+ReactDOM.render(<Skeleton />, mountNode);
-  <Skeleton />,
-mountNode);
 ````

components/skeleton/demo/children.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 包含子组件
   en-US: Contains sub component

components/skeleton/demo/complex.md

@@ -0,0 +1,20 @@
+---
+order: 1
+title:
+  zh-CN: 复杂的组合
+  en-US: Complex combination
+---
+
+## zh-CN
+
+更复杂的组合。
+
+## en-US
+
+Complex combination with avatar and multiple paragraphs.
+
+````jsx
+import { Skeleton } from 'antd';
+
+ReactDOM.render(<Skeleton avatar paragraph={{ rows: 4 }} />, mountNode);
+````

components/skeleton/demo/list.md

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 列表
   en-US: List
@@ -60,7 +60,7 @@ class App extends React.Component {
               actions={!loading && [<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
               extra={!loading && <img width={272} alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />}
             >
-              <Skeleton loading={loading} active>
+              <Skeleton loading={loading} active avatar>
                 <List.Item.Meta
                   avatar={<Avatar src={item.avatar} />}
                   title={<a href={item.href}>{item.title}</a>}

components/skeleton/index.tsx

@@ -39,16 +39,14 @@ function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): Skeleton
     return { width: '50%' };
   }
 
-  return { width: '100%' };
+  return {};
 }
 
 function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): SkeletonParagraphProps {
   const basicProps: SkeletonParagraphProps = {};
 
   // Width
-  if (hasAvatar && hasTitle) {
+  if (!hasAvatar || !hasTitle) {
-    basicProps.width = '100%';
-  } else {
     basicProps.width = '61%';
   }
 

components/skeleton/style/index.less

@@ -58,6 +58,15 @@
         height: 16px;
         background: @skeleton-color;
         list-style: none;
+        width: 100%;
+
+        &:nth-child(3) {
+          width: 94%;
+        }
+
+        &:nth-child(4) {
+          width: 96%;
+        }
 
         + li {
           margin-top: 16px;