feat(NumberPicker): add small size, close #1147

alibaba-fusion · Nov 14, 2019 · 1a81522 · 1a81522
1 parent 56181c9
commit 1a81522
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 1 deletion.
diff --git a/docs/number-picker/demo/size.md b/docs/number-picker/demo/size.md
@@ -14,10 +14,19 @@ import { NumberPicker } from '@alifd/next';
 
 ReactDOM.render(
     <div>
+        <NumberPicker defaultValue={0} size="small" />
+        <NumberPicker defaultValue={0} />
         <NumberPicker defaultValue={0} size="large" />
         <br/><br/>
+        <NumberPicker defaultValue={0} size="small" type="inline" />
+        <NumberPicker defaultValue={0} type="inline" />
         <NumberPicker defaultValue={0} size="large" type="inline" />
     </div>,
     mountNode
 );
 ````
+````css
+.next-number-picker {
+    margin-right: 10px;
+}
+````
diff --git a/src/number-picker/main.scss b/src/number-picker/main.scss
@@ -72,6 +72,25 @@
             opacity: 0;
         }
 
+        &.#{$css-prefix}small {
+            width: 68px;
+            .#{$css-prefix}btn {
+                width: $number-picker-normal-s-button-width;
+
+                &:first-child {
+                    border-top-right-radius: $form-element-small-corner;
+                }
+
+                &:last-child {
+                    border-bottom-right-radius: $form-element-small-corner;
+                }
+            }
+
+            .#{$css-prefix}icon {
+                @include icon-size($number-picker-normal-s-button-icon-size);
+            }
+        }
+
         &.#{$css-prefix}medium {
             .#{$css-prefix}btn {
                 width: $number-picker-normal-m-button-width;
@@ -118,6 +137,30 @@
             padding: 0;
         }
 
+        &.#{$css-prefix}small {
+            width: 68px;
+
+            .#{$css-prefix}icon {
+                @include icon-size($number-picker-inline-s-button-icon-size);
+            }
+
+            .#{$css-prefix}btn {
+                height: $form-element-small-height;
+            }
+
+            .#{$css-prefix}before .#{$css-prefix}btn {
+                margin-right: $number-picker-inline-s-button-margin;
+                border-top-left-radius: $number-picker-inline-s-button-corner;
+                border-bottom-left-radius: $number-picker-inline-s-button-corner;
+            }
+
+            .#{$css-prefix}after .#{$css-prefix}btn {
+                margin-left: $number-picker-inline-s-button-margin;
+                border-top-right-radius: $number-picker-inline-s-button-corner;
+                border-bottom-right-radius: $number-picker-inline-s-button-corner;
+            }
+        }
+
         &.#{$css-prefix}medium {
             width: 100px;
 
@@ -167,6 +210,10 @@
         }
 
         .#{$css-prefix}btn {
+            &.#{$css-prefix}small {
+                width: $form-element-small-height;
+            }
+
             &.#{$css-prefix}medium {
                 width: $form-element-medium-height;
             }
@@ -185,6 +232,10 @@
             border-left: 0;
             border-top-right-radius: 0;
 
+            &.#{$css-prefix}small {
+                border-top-left-radius: $form-element-small-corner;
+            }
+
             &.#{$css-prefix}medium {
                 border-top-left-radius: $form-element-medium-corner;
             }
@@ -199,6 +250,10 @@
             border-left: 0;
             border-bottom-right-radius: 0;
 
+            &.#{$css-prefix}small {
+                border-bottom-left-radius: $form-element-small-corner;
+            }
+
             &.#{$css-prefix}medium {
                 border-bottom-left-radius: $form-element-medium-corner;
             }
@@ -218,6 +273,12 @@
     .#{$css-prefix}before .#{$css-prefix}btn {
         margin-right: 0;
 
+        &.#{$css-prefix}small {
+            margin-left: $number-picker-inline-s-button-margin;
+            border-top-right-radius: $number-picker-inline-s-button-corner !important;
+            border-bottom-right-radius: $number-picker-inline-s-button-corner !important;
+        }
+
         &.#{$css-prefix}medium {
             margin-left: $number-picker-inline-m-button-margin;
             border-top-right-radius: $number-picker-inline-m-button-corner !important;
@@ -234,6 +295,12 @@
     .#{$css-prefix}after .#{$css-prefix}btn {
         margin-left: 0;
 
+        &.#{$css-prefix}small {
+            margin-right: $number-picker-inline-s-button-margin;
+            border-top-left-radius: $number-picker-inline-s-button-corner !important;
+            border-bottom-left-radius: $number-picker-inline-s-button-corner !important;
+        }
+
         &.#{$css-prefix}medium {
             margin-right: $number-picker-inline-m-button-margin;
             border-top-left-radius: $number-picker-inline-m-button-corner !important;

diff --git a/src/number-picker/number-picker.jsx b/src/number-picker/number-picker.jsx
@@ -465,7 +465,7 @@ class NumberPicker extends React.Component {
             innerAfter,
         } = this.props;
 
-        let type = device === 'phone' ? 'inline' : this.props.type;
+        const type = device === 'phone' ? 'inline' : this.props.type;
 
         const prefixCls = `${prefix}number-picker`;
 

diff --git a/src/number-picker/scss/variable.scss b/src/number-picker/scss/variable.scss
@@ -15,13 +15,20 @@ $number-picker-prefix: '.#{$css-prefix}number-picker';
 // Normal
 // --------------------------------------------------
 
+/// width
+/// @namespace size/button
+$number-picker-normal-s-button-width: $s-5 !default;
 /// width
 /// @namespace size/button
 $number-picker-normal-m-button-width: $s-5 !default;
 /// width
 /// @namespace size/button
 $number-picker-normal-l-button-width: $s-5 !default;
 
+/// icon
+/// @namespace size/button
+$number-picker-normal-s-button-icon-size: $icon-xxs !default;
+
 /// icon
 /// @namespace size/button
 $number-picker-normal-m-button-icon-size: $icon-xxs !default;
@@ -33,6 +40,16 @@ $number-picker-normal-l-button-icon-size: $icon-xxs !default;
 // inline
 // --------------------------------------------------
 
+/// icon
+/// @namespace size/button
+$number-picker-inline-s-button-icon-size: $icon-xs !default;
+/// margin
+/// @type number
+/// @namespace size/button
+$number-picker-inline-s-button-margin: 2px !default;
+/// corner
+/// @namespace size/button
+$number-picker-inline-s-button-corner: $corner-1 !default;
 /// icon
 /// @namespace size/button
 $number-picker-inline-m-button-icon-size: $icon-xs !default;