feat(fix): fix style

- fix FormButtonGroup align property can not pass left/right - fix FormItem's height is not responsive.
alibaba · Feb 22, 2019 · 7841970 · 7841970
1 parent db2061e
commit 7841970
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/packages/antd/src/components/formButtonGroup.js b/packages/antd/src/components/formButtonGroup.js
@@ -6,6 +6,13 @@ import Sticky from 'react-stikky'
 import cls from 'classnames'
 import styled from 'styled-components'
 
+const getAlign = align => {
+  if (align === 'start' || align === 'end') return align
+  if (align === 'left' || align === 'top') return 'start'
+  if (align === 'right' || align === 'bottom') return 'end'
+  return align
+}
+
 const isElementInViewport = (rect, { offset = 0, threshold = 0 } = {}) => {
   const { top, right, bottom, left, width, height } = rect
   const intersection = {
@@ -112,7 +119,7 @@ export const FormButtonGroup = styled(
   }
 )`
   ${props =>
-    props.align ? `display:flex;justify-content: ${props.align}` : ''}
+    props.align ? `display:flex;justify-content: ${getAlign(props.align)}` : ''}
   &.is-inline {
     display: inline-block;
     flex-grow: 3;

diff --git a/packages/antd/src/form.js b/packages/antd/src/form.js
@@ -279,7 +279,7 @@ registerFormWrapper(OriginForm => {
       .ant-radio-group,
       .ant-checkbox-group {
         line-height: 24px;
-        height: 24px;
+        min-height: 24px;
       }
     }
     .ant-large {
@@ -289,7 +289,7 @@ registerFormWrapper(OriginForm => {
       .ant-radio-group,
       .ant-checkbox-group {
         line-height: 40px;
-        height: 40px;
+        min-height: 40px;
       }
     }
     .ant-form-item-label label[required]:before {
@@ -336,15 +336,15 @@ registerFormWrapper(OriginForm => {
       }
     }
     .ant-rating-medium {
-      height: 30px;
+      min-height: 30px;
       line-height: 30px;
     }
     .ant-rating-small {
-      height: 24px;
+      min-height: 24px;
       line-height: 24px;
     }
     .ant-rating-large {
-      height: 40px;
+      min-height: 40px;
       line-height: 40px;
     }
   `

diff --git a/packages/next/src/components/formButtonGroup.js b/packages/next/src/components/formButtonGroup.js
@@ -6,6 +6,13 @@ import Sticky from 'react-stikky'
 import cls from 'classnames'
 import styled from 'styled-components'
 
+const getAlign = align => {
+  if (align === 'start' || align === 'end') return align
+  if (align === 'left' || align === 'top') return 'start'
+  if (align === 'right' || align === 'bottom') return 'end'
+  return align
+}
+
 const isElementInViewport = (rect, { offset = 0, threshold = 0 } = {}) => {
   const { top, right, bottom, left, width, height } = rect
   const intersection = {
@@ -112,7 +119,7 @@ export const FormButtonGroup = styled(
   }
 )`
   ${props =>
-    props.align ? `display:flex;justify-content: ${props.align}` : ''}
+    props.align ? `display:flex;justify-content: ${getAlign(props.align)}` : ''}
   &.is-inline {
     display: inline-block;
     flex-grow: 3;

diff --git a/packages/next/src/form.js b/packages/next/src/form.js
@@ -248,15 +248,15 @@ registerFormWrapper(OriginForm => {
       background: none;
     }
     .next-rating-medium {
-      height: 28px;
+      min-height: 28px;
       line-height: 28px;
     }
     .next-rating-small {
-      height: 20px;
+      min-height: 20px;
       line-height: 20px;
     }
     .next-rating-large {
-      height: 40px;
+      min-height: 40px;
       line-height: 40px;
     }
   `