Remove magic number of style align (ant-design#20869)

* fix: Adjust baseline align

* clean up

* Select style

* fix lint

components/button/style/index.less

@@ -15,12 +15,11 @@
   // Fixing https://github.com/ant-design/ant-design/issues/12978
   // Fixing https://github.com/ant-design/ant-design/issues/20058
   // Fixing https://github.com/ant-design/ant-design/issues/19972
-  // Fixing https://github.com/ant-design/ant-design/issues/12978
   // Fixing https://github.com/ant-design/ant-design/issues/18107
   // Fixing https://github.com/ant-design/ant-design/issues/13214
   // It is a render problem of chrome, which is only happened in the codesandbox demo
   // 0.001px solution works and I don't why
-  line-height: @line-height-base - 0.001;
+  line-height: @line-height-base;
   .btn;
   .btn-default;
 

components/button/style/mixin.less

@@ -1,8 +1,11 @@
 // mixins for button
 // ------------------------
-.button-size(@height; @padding; @font-size; @border-radius) {
+.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
+  @padding-vertical: round((@height - @font-size * @line-height-base) / 2 * 10) / 10 -
+    @border-width-base;
+
   height: @height;
-  padding: @padding;
+  padding: @padding-vertical @padding-horizontal;
   font-size: @font-size;
   border-radius: @border-radius;
 }
@@ -181,7 +184,7 @@
   // size
   &-lg > .@{btnClassName},
   &-lg > span > .@{btnClassName} {
-    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
+    .button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0);
     line-height: @btn-height-lg - 2px;
   }
   &-lg > .@{btnClassName}.@{btnClassName}-icon-only {
@@ -191,7 +194,7 @@
   }
   &-sm > .@{btnClassName},
   &-sm > span > .@{btnClassName} {
-    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
+    .button-size(@btn-height-sm; @btn-padding-horizontal-sm; @font-size-base; 0);
     line-height: @btn-height-sm - 2px;
     > .@{iconfont-css-prefix} {
       font-size: @font-size-base;
@@ -218,7 +221,9 @@
   transition: all 0.3s @ease-in-out;
   user-select: none;
   touch-action: manipulation;
-  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
+  .button-size(
+    @btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base
+  );
   > .@{iconfont-css-prefix} {
     line-height: 1;
   }
@@ -242,10 +247,14 @@
     }
   }
   &-lg {
-    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+    .button-size(
+      @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
+    );
   }
   &-sm {
-    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
+    .button-size(
+      @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
+    );
   }
 }
 // primary button style
@@ -347,15 +356,15 @@
 }
 // round button
 .btn-round(@btnClassName: btn) {
-  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size);
+  .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);
   &.@{btnClassName}-lg {
     .button-size(
-      @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
+      @btn-circle-size-lg; @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
     );
   }
   &.@{btnClassName}-sm {
     .button-size(
-      @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
+      @btn-circle-size-sm; @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
     );
   }
 }

components/input/style/affix.less

@@ -0,0 +1,125 @@
+@import './index';
+@import './mixin';
+
+.@{ant-prefix}-input {
+  &-affix-wrapper {
+    .input();
+    display: inline-flex;
+
+    > .@{ant-prefix}-input {
+      padding: 0;
+      border: none;
+    }
+  }
+
+  &-prefix,
+  &-suffix {
+    flex: none;
+  }
+}
+
+// // Input with affix: prefix or suffix
+// .@{ant-prefix}-input-affix-wrapper {
+//   .reset-component;
+//   .input-affix-wrapper(~'@{ant-prefix}-input');
+
+//   // https://github.com/ant-design/ant-design/issues/6144
+//   .@{ant-prefix}-input {
+//     min-height: 100%; // use min-height, assume that no smaller height to override
+//   }
+// }
+
+// .input-affix-wrapper(@inputClass) {
+//   position: relative;
+//   display: inline-block;
+//   width: 100%;
+//   text-align: start;
+
+//   &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
+//     .hover();
+//   }
+
+//   .@{inputClass} {
+//     position: relative;
+//     text-align: inherit;
+//   }
+
+//   // Should not break align of icon & text
+//   // https://github.com/ant-design/ant-design/issues/18087
+//   // https://github.com/ant-design/ant-design/issues/17414
+//   // https://github.com/ant-design/ant-design/pull/17684
+//   // https://codesandbox.io/embed/pensive-paper-di2wk
+//   // https://codesandbox.io/embed/nifty-benz-gb7ml
+//   .@{inputClass}-prefix,
+//   .@{inputClass}-suffix {
+//     position: absolute;
+//     top: 50%;
+//     z-index: 2;
+//     display: flex;
+//     align-items: center;
+//     color: @input-icon-color;
+//     line-height: 0;
+//     transform: translateY(-50%);
+
+//     :not(.anticon) {
+//       line-height: @line-height-base;
+//     }
+//   }
+
+//   .@{inputClass}-disabled ~ .@{inputClass}-suffix {
+//     .anticon {
+//       color: @disabled-color;
+//       cursor: not-allowed;
+//     }
+//   }
+
+//   .@{inputClass}-prefix {
+//     left: @input-padding-horizontal-base + 1px;
+
+//     .@{inputClass}-affix-wrapper-rtl& {
+//       right: @input-padding-horizontal-base + 1px;
+//       left: auto;
+//     }
+//   }
+
+//   .@{inputClass}-suffix {
+//     right: @input-padding-horizontal-base + 1px;
+
+//     .@{inputClass}-affix-wrapper-rtl& {
+//       right: auto;
+//       left: @input-padding-horizontal-base + 1px;
+//     }
+//   }
+
+//   .@{inputClass}:not(:first-child) {
+//     padding-left: @input-padding-horizontal-base + @input-affix-width;
+//   }
+
+//   .@{inputClass}:not(:last-child) {
+//     padding-right: @input-padding-horizontal-base + @input-affix-width;
+//   }
+
+//   // Needed to change priority of classes in rtl direction (last-child comes before first-child)
+//   .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:last-child) {
+//     padding-right: @input-padding-horizontal-base;
+//     padding-left: @input-padding-horizontal-base + @input-affix-width;
+//   }
+
+//   .@{inputClass}-affix-wrapper-rtl& .@{inputClass}:not(:first-child) {
+//     padding-right: @input-padding-horizontal-base + @input-affix-width;
+//     padding-left: @input-padding-horizontal-base;
+//   }
+
+//   &.@{inputClass}-affix-wrapper-input-with-clear-btn .@{inputClass}:not(:last-child) {
+//     padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
+
+//     .@{inputClass}-affix-wrapper-rtl& {
+//       padding-right: @input-padding-horizontal-base;
+//       padding-left: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
+//     }
+//   }
+
+//   &.@{inputClass}-affix-wrapper-textarea-with-clear-btn .@{inputClass} {
+//     padding-right: 22px;
+//   }
+// }

components/input/style/mixin.less

@@ -8,13 +8,11 @@
 
 // size mixins for input
 .input-lg() {
-  height: @input-height-lg;
   padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
   font-size: @font-size-lg;
 }
 
 .input-sm() {
-  height: @input-height-sm;
   padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
 }
 
@@ -64,7 +62,6 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  height: @input-height-base;
   padding: @input-padding-vertical-base @input-padding-horizontal-base;
   color: @input-color;
   font-size: @font-size-base;

components/select/style/multiple.less

@@ -1,7 +1,10 @@
 @import './index';
 
 @select-selection-height: @input-height-base - @input-padding-vertical-base * 2;
-@select-multiple-padding: @input-padding-vertical-base - @border-width-base;
+@select-multiple-padding: @input-padding-vertical-base;
+@select-multiple-item-margin-vertical: round(
+    (@select-selection-height - @font-size-base * @line-height-base) / 2 * 10
+  ) / 10;
 
 /**
  * Do not merge `height` & `line-height` under style with `selection` & `search`,
@@ -18,7 +21,7 @@
     flex-wrap: wrap;
     align-items: center;
     // Multiple is little different that horizontal is follow the vertical
-    padding: 0 @select-multiple-padding @select-multiple-padding;
+    padding: @select-multiple-padding @select-multiple-padding;
 
     .@{select-prefix-cls}-show-search& {
       cursor: text;
@@ -34,15 +37,13 @@
     max-width: 100%;
 
     height: @select-selection-height;
-    margin-top: @select-multiple-padding;
+    margin-top: -@select-multiple-item-margin-vertical;
     margin-right: @input-padding-vertical-base;
+    margin-bottom: -@select-multiple-item-margin-vertical;
     padding: 0 (@padding-xs / 2) 0 @padding-xs;
     line-height: @select-selection-height - @border-width-base * 2;
     background: @select-selection-item-bg;
     border: 1px solid @select-selection-item-border-color;
-    // strange align fix for chrome but works
-    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
-    border-top-width: @border-width-base + 0.4px;
     border-radius: @border-radius-base;
     cursor: default;
     transition: font-size 0.3s, line-height 0.3s, height 0.3s;
@@ -97,15 +98,13 @@
 
     &-input,
     &-mirror {
-      height: @select-selection-height;
       font-family: @font-family;
-      line-height: @select-selection-height - @border-width-base * 2;
+      line-height: @line-height-base;
       transition: all 0.3s;
     }
 
     &-input {
       width: 100%;
-      margin-top: @select-multiple-padding;
     }
 
     &-mirror {

components/select/style/single.less

@@ -4,7 +4,6 @@
   // ========================= Selector =========================
   .@{select-prefix-cls}-selector {
     display: flex;
-    border-top-width: @border-width-base + 0.375px;
 
     .@{select-prefix-cls}-selection-search {
       position: absolute;

components/style/themes/default.less

@@ -178,11 +178,11 @@
 @btn-default-ghost-bg: transparent;
 @btn-default-ghost-border: @component-background;
 
-@btn-padding-base: 0 @padding-md - 1px;
 @btn-font-size-lg: @font-size-lg;
 @btn-font-size-sm: @font-size-base;
-@btn-padding-lg: @btn-padding-base;
-@btn-padding-sm: 0 @padding-xs - 1px;
+@btn-padding-horizontal-base: @padding-md - 1px;
+@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
+@btn-padding-horizontal-sm: @padding-xs - 1px;
 
 @btn-height-base: 32px;
 @btn-height-lg: 40px;
@@ -340,9 +340,13 @@
 @input-padding-horizontal-base: @input-padding-horizontal;
 @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
 @input-padding-horizontal-lg: @input-padding-horizontal;
-@input-padding-vertical-base: 4px;
-@input-padding-vertical-sm: 1px;
-@input-padding-vertical-lg: 6px;
+@input-padding-vertical-base: round(
+    (@input-height-base - @font-size-base * @line-height-base) / 2 * 10
+  ) / 10 - @border-width-base;
+@input-padding-vertical-sm: round((@input-height-sm - @font-size-base * @line-height-base) / 2 * 10) /
+  10 - @border-width-base;
+@input-padding-vertical-lg: round((@input-height-lg - @font-size-lg * @line-height-base) / 2 * 10) /
+  10 - @border-width-base;
 @input-placeholder-color: hsv(0, 0, 75%);
 @input-color: @text-color;
 @input-icon-color: @input-color;