fix flex #1532 (#1549)

* feat: pagination current start from 1. close #1009 * refactor style for some components, ref #1380 * fix flex #1532 * update snap * modify CHANGELOG
ant-design · Jul 18, 2017 · cfa5e86 · cfa5e86
1 parent bfbfa0a
commit cfa5e86
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 33 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -15,6 +15,7 @@ timeline: true
 ---
 
 
+
 ### 2.0.0
 
 `2017-xx-xx`
@@ -31,10 +32,12 @@ timeline: true
   to `input`(for web) or `TextInput`(for react native) element;
 - Progress: `wrapStyle` has been replaced by `style` and  `style` has been replaced by `barStyle` property.
 - The `style` property now can custom style, eg: tintColor for switch
+- `Flex` remove redundancy api of Flex, just keep `align: enum{start, center, end}`。[#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
 
 ## 1.4.2
 
 `2017-07-12`
+- `Flex` 清理冗余API. [#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
 
 - **Bug Fix**
   - 修复 Toast 未以自身中心点纵向居中。 ([#1389](https://github.com/ant-design/ant-design-mobile/issues/1389))
@@ -240,7 +243,6 @@ timeline: true
 
 ## 1.0.8
 
-
 `2017-04-07`
 
 - **Feature**
@@ -280,11 +282,8 @@ timeline: true
   - DatePicker 确保默认日期在 `minDate`, `maxDate` 范围内 （[#1033](https://github.com/ant-design/ant-design-mobile/issues/1033)）
 
 
-<<<<<<< HEAD
 ## 1.0.6
 
-=======
->>>>>>> feat: pagination current start from 1. close #1009
 `2017-03-17`
 
 - **Feature**

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,8 @@ timeline: true
 
 ---
 
+
+
 ### 2.0.0
 
 `2017-xx-xx`
@@ -29,12 +31,14 @@ timeline: true
 - TextareaItem、SearchBar、InputItem 将 `style` 属性传至 input(web) / TextInput(rn) 元素，方便自定义样式;
 - Progress: `wrapStyle` 改为 `style`, 原来的 `style` 将改成 `barStyle`;
 - Switch 对 `style` 属性直接针对 switch 样式自身，方便定义样式；
-
+- `Flex` 清理冗余API, 只保留 `align: enum{start, center, end}`。 [#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
 
 ## 1.4.2
 
 `2017-07-12`
 
+- `Flex` remove redundancy api of Flex。[#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
+
 - **Bug Fix**
   - 修复 Toast 未以自身中心点纵向居中。 ([#1389](https://github.com/ant-design/ant-design-mobile/issues/1389))
   - 修复目前未实现的 NavBar、Menu、Range、Table 引入 react-native 版本组件报错的问题。([#1526](https://github.com/ant-design/ant-design-mobile/issues/1526))

diff --git a/components/button/__tests__/__snapshots__/demo.test.web.js.snap b/components/button/__tests__/__snapshots__/demo.test.web.js.snap
@@ -86,7 +86,7 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
         inline / small
       </p>
       <div
-        class="am-flexbox am-flexbox-align-middle"
+        class="am-flexbox am-flexbox-align-center"
         style="margin-bottom:0.16rem;"
       >
         <a

diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap
@@ -168,7 +168,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"

diff --git a/components/flex/Flex.web.tsx b/components/flex/Flex.web.tsx
@@ -32,9 +32,9 @@ export default class Flex extends React.Component<FlexProps, any> {
       [`${prefixCls}-justify-between`]: justify === 'between',
       [`${prefixCls}-justify-around`]: justify === 'around',
 
-      [`${prefixCls}-align-top`]: align === 'top' || align === 'start',
-      [`${prefixCls}-align-middle`]: align === 'middle' || align === 'center',
-      [`${prefixCls}-align-bottom`]: align === 'bottom' || align === 'end',
+      [`${prefixCls}-align-start`]: align === 'start',
+      [`${prefixCls}-align-center`]: align === 'center',
+      [`${prefixCls}-align-end`]: align === 'end',
       [`${prefixCls}-align-baseline`]: align === 'baseline',
       [`${prefixCls}-align-stretch`]: align === 'stretch',
 

diff --git a/components/flex/__tests__/__snapshots__/demo.test.web.js.snap b/components/flex/__tests__/__snapshots__/demo.test.web.js.snap
@@ -10,7 +10,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     基本
   </div>
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -35,7 +35,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-lg"
   />
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -69,7 +69,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-lg"
   />
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -117,7 +117,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     wrap 换行
   </div>
   <div
-    class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-wrap am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -171,7 +171,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     轴对齐方式
   </div>
   <div
-    class="am-flexbox am-flexbox-justify-center am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -196,7 +196,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-justify-end am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-end am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -221,7 +221,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-justify-between am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-between am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -246,7 +246,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-align-top"
+    class="am-flexbox am-flexbox-align-start"
   >
     <div
       class="inline"
@@ -271,7 +271,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-align-bottom"
+    class="am-flexbox am-flexbox-align-end"
   >
     <div
       class="inline"

diff --git a/components/flex/style/index.less b/components/flex/style/index.less
@@ -57,15 +57,15 @@
     justify-content: space-around;
   }
 
-  &&-align-top {
+  &&-align-start {
     align-items: flex-start;
   }
 
-  &&-align-bottom {
+  &&-align-end {
     align-items: flex-end;
   }
 
-  &&-align-middle {
+  &&-align-center {
     align-items: center;
   }
 

diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap
@@ -13,7 +13,7 @@ exports[`renders ./components/image-picker/demo/basic.md correctly 1`] = `
         class="am-wingblank am-wingblank-md"
       >
         <div
-          class="am-flexbox am-flexbox-align-middle"
+          class="am-flexbox am-flexbox-align-center"
         >
           <div
             class="am-flexbox-item"
@@ -90,7 +90,7 @@ exports[`renders ./components/image-picker/demo/custom.md correctly 1`] = `
         class="am-wingblank am-wingblank-md"
       >
         <div
-          class="am-flexbox am-flexbox-align-middle"
+          class="am-flexbox am-flexbox-align-center"
         >
           <div
             class="am-flexbox-item"

diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.web.js.snap
@@ -19,7 +19,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
       class="am-pagination"
     >
       <div
-        class="am-flexbox am-flexbox-align-middle"
+        class="am-flexbox am-flexbox-align-center"
       >
         <div
           class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"

diff --git a/components/menu/__tests__/__snapshots__/index.test.web.js.snap b/components/menu/__tests__/__snapshots__/index.test.web.js.snap
@@ -6,7 +6,7 @@ exports[`Menu level 1 renders correctly 1`] = `
   style="height:0px;"
 >
   <div
-    class="am-flexbox am-flexbox-align-top"
+    class="am-flexbox am-flexbox-align-start"
   >
     <div
       aria-hidden="false"
@@ -106,7 +106,7 @@ exports[`Menu renders correctly 1`] = `
   style="height:0px;"
 >
   <div
-    class="am-flexbox am-flexbox-align-top"
+    class="am-flexbox am-flexbox-align-start"
   >
     <div
       class="am-flexbox-item"

diff --git a/components/menu/index.web.tsx b/components/menu/index.web.tsx
@@ -107,7 +107,7 @@ export default class Menu extends React.Component<MenuProps, any> {
           ...heightStyle,
         }}
       >
-        <Flex align="top">
+        <Flex align="start">
           {level === 2 &&
             <Flex.Item style={heightStyle}>
               <List role="tablist">

diff --git a/components/pagination/__tests__/__snapshots__/demo.test.web.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.web.js.snap
@@ -13,7 +13,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
     class="am-pagination"
   >
     <div
-      class="am-flexbox am-flexbox-align-middle"
+      class="am-flexbox am-flexbox-align-center"
     >
       <div
         class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
@@ -66,7 +66,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
     class="am-pagination custom-pagination-with-icon"
   >
     <div
-      class="am-flexbox am-flexbox-align-middle"
+      class="am-flexbox am-flexbox-align-center"
     >
       <div
         class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"
@@ -137,7 +137,7 @@ exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
     class="am-pagination"
   >
     <div
-      class="am-flexbox am-flexbox-align-middle"
+      class="am-flexbox am-flexbox-align-center"
     >
       <div
         class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"

diff --git a/components/pagination/__tests__/__snapshots__/index.test.web.js.snap b/components/pagination/__tests__/__snapshots__/index.test.web.js.snap
@@ -5,7 +5,7 @@ exports[`Pagination renders correctly 1`] = `
   class="am-pagination"
 >
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item am-pagination-wrap-btn am-pagination-wrap-btn-prev"

diff --git a/components/radio/__tests__/__snapshots__/demo.test.web.js.snap b/components/radio/__tests__/__snapshots__/demo.test.web.js.snap
@@ -371,7 +371,7 @@ exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
     style="padding:0.3rem;"
   >
     <div