Pull request #82955: REPORT-74080 把按钮 master 分支上的提交合并到 release

Merge in DEC/fineui from ~TREECAT/dec-fineui:release/11.0 to release/11.0

* commit '2ee2fa945df6765ec33b5cf26928512f92395e47':
  REPORT-74080 fix: 修复自定义图标无法居中，调整了撑开的公式
  DESIGN-4069 fix: button 的 setIcon 不使用 IconChangeButton
  DESIGN-4069 feat: button 增加 setIcon 属性
  DESIGN-4069 feat: 增加了一组 plain 按钮

demo/js/base/button/demo.button.js

@@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, {
                 iconGap: 24,
                 iconPosition: "top"
             }
+        },{
+            el: {
+                type: "bi.button",
+                text: "自动撑开高度",
+                iconCls: "close-font",
+                textHeight: 32,
+                iconGap: 24,
+                vgap: 16,
+                hgap: 100,
+                iconPosition: "top"
+            }
         }, {
             el: {
                 type: "bi.button",
@@ -309,6 +320,88 @@ Demo.Button = BI.inherit(BI.Widget, {
                 cls: "hover-mask",
                 light: true
             }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "common",
+                plain: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "success",
+                plain: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "error",
+                plain: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "warning",
+                plain: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "ignore",
+                plain: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "ignore",
+                plain: true,
+                disabled: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "error",
+                plain: true,
+                disabled: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "朴素的按钮",
+                level: "common",
+                plain: true,
+                disabled: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "plus-font",
+                text: "点我，更改图标",
+                handler() {
+                    this.i =  this.i === undefined ? 0 : ++this.i;
+                    const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
+                    if(this.i >= arr.length) {
+                        this.i = 0;
+                    }
+                    this.setIcon(arr[this.i]);
+                },
+                height: 24
+            }
         }];
         // BI.each(items, function (i, item) {
         //     item.el.handler = function () {

src/base/single/button/buttons/button.js

@@ -14,20 +14,29 @@
     BI.Button = BI.inherit(BI.BasicButton, {
 
         _const: {
-            iconWidth: 16
+            iconWidth: 18
         },
 
         _defaultConfig: function (props) {
             var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
 
+            var adaptiveHeight = 0;
+            if (isVertical(props.iconPosition)) {
+                // 图标高度和文字高度默认相等
+                adaptiveHeight += (props.textHeight || 16) * 2;
+                adaptiveHeight += props.iconGap || 4;
+                var tGap = props.tgap || props.vgap || 2;
+                var bGap = props.bgap || props.vgap || 2;
+                adaptiveHeight += (tGap + bGap);
+            }
+
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
                 attributes: {
                     tabIndex: 1
                 },
                 minWidth: (props.block === true || props.clear === true) ? 0 : 80,
-                // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
-                height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
+                height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
                 shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
@@ -38,6 +47,7 @@
                 ghost: false, // 是否幽灵显示, 即正常状态无背景
                 loading: false, // 是否处于加载中
                 light: false, // 是否使用浅色
+                plain: false, // 是否是朴素按钮，和 clear 的区别是 plain 有悬浮效果
                 textAlign: "center",
                 whiteSpace: "nowrap",
                 textWidth: null,
@@ -48,7 +58,7 @@
                 bgap: 0,
                 lgap: 0,
                 rgap: 0,
-                iconGap: 8,
+                iconGap: 4,
                 iconPosition: "left"
             });
         },
@@ -80,7 +90,10 @@
                     cls: o.iconCls,
                     width: this._const.iconWidth,
                     height: lineHeight,
-                    lineHeight: lineHeight
+                    lineHeight: lineHeight,
+                    // 不设置，自定义按钮无法居中
+                    iconWidth: o.iconWidth,
+                    iconHeight: o.iconHeight
                 });
                 this.text = BI.createWidget({
                     type: "bi.label",
@@ -144,6 +157,9 @@
             if (o.ghost === true) {
                 this.element.addClass("ghost");
             }
+            if (o.plain === true) {
+                this.element.addClass("plain");
+            }
             if (o.loading === true) {
                 this.element.addClass("loading");
             }
@@ -191,6 +207,14 @@
             }
         },
 
+        setIcon: function (cls) {
+            var o = this.options;
+            if (this.icon && o.iconCls !== cls) {
+                this.icon.element.removeClass(o.iconCls).addClass(cls);
+                o.iconCls = cls;
+            }
+        },
+
         doRedMark: function () {
             this.text.doRedMark.apply(this.text, arguments);
         },

src/less/base/single/button/button.less

@@ -33,6 +33,11 @@ body .bi-button, #body .bi-button {
       display: none;
     }
   }
+  &.plain {
+    font-size: inherit;
+    border-width: 0;
+    background-color: transparent;
+  }
   &.ghost {
     font-size: inherit;
     background-color: transparent;
@@ -60,6 +65,18 @@ body .bi-button, #body .bi-button {
     &.clear, &.clear .b-font:before {
       color: @color-bi-text-common-clear-button;
     }
+    &.plain, &.plain .b-font:before {
+      background-color: transparent;
+      color: @color-bi-text-common-plain-button;
+    }
+    &.plain {
+      &:hover {
+        background-color: @color-bi-background-hover-plain-button;
+      }
+      &:focus {
+        background-color: @color-bi-background-active-plain-button;
+      }
+    }
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-common-ghost-button;
@@ -99,6 +116,18 @@ body .bi-button, #body .bi-button {
       background-color: transparent;
       border-color: @color-bi-border-dark-gray-line;
     }
+    &.plain, &.plain .b-font:before {
+      background-color: transparent;
+      color: @color-bi-text-ignore-plain-button;
+    }
+    &.plain {
+      &:hover {
+        background-color: @color-bi-background-hover-plain-button;
+      }
+      &:focus {
+        background-color: @color-bi-background-active-plain-button;
+      }
+    }
   }
   &.button-success {
     & {
@@ -144,6 +173,18 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-success-button;
       }
     }
+    &.plain, &.plain .b-font:before {
+      background-color: transparent;
+      color: @color-bi-text-success-plain-button;
+    }
+    &.plain {
+      &:hover {
+        background-color: @color-bi-background-hover-plain-button;
+      }
+      &:focus {
+        background-color: @color-bi-background-active-plain-button;
+      }
+    }
   }
   &.button-warning {
     & {
@@ -189,6 +230,18 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-warning-button;
       }
     }
+    &.plain, &.plain .b-font:before {
+      background-color: transparent;
+      color: @color-bi-text-warning-plain-button;
+    }
+    &.plain {
+      &:hover {
+        background-color: @color-bi-background-hover-plain-button;
+      }
+      &:focus {
+        background-color: @color-bi-background-active-plain-button;
+      }
+    }
   }
   &.button-error {
     & {
@@ -234,6 +287,18 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-error-button;
       }
     }
+    &.plain, &.plain .b-font:before {
+      background-color: transparent;
+      color: @color-bi-text-error-plain-button;
+    }
+    &.plain {
+      &:hover {
+        background-color: @color-bi-background-hover-plain-button;
+      }
+      &:focus {
+        background-color: @color-bi-background-active-plain-button;
+      }
+    }
   }
   &.button-common.disabled,
   &.button-success.disabled,
@@ -277,6 +342,16 @@ body .bi-button, #body .bi-button {
         .opacity(1);
       }
     }
+    &.plain {
+      &, & .b-font:before {
+        color: @color-bi-text-disabled-plain-clear-button !important;
+      }
+      background: transparent !important;
+      border-width: 0 !important;
+      &:hover, &:focus, &:active {
+        .opacity(1);
+      }
+    }
     &.ghost {
       &, & .b-font:before {
         // color: @color-bi-text-disabled-ignore-ghost-button !important;

src/less/lib/theme.less

@@ -64,6 +64,7 @@
 @color-bi-background-button: @color-bi-background-highlight;
 @color-bi-text-common-button: @color-bi-text;
 @color-bi-text-common-clear-button: @color-bi-text-highlight;
+@color-bi-text-common-plain-button: @color-bi-text-highlight;
 @color-bi-text-common-ghost-button: @color-bi-text-highlight;
 @color-bi-text-common-ghost-button-theme-dark: @color-bi-text;
 @color-bi-text-disabled-common-ghost-button-theme-dark: @color-bi-text;
@@ -77,10 +78,13 @@
 @color-bi-background-common-light-button: @color-bi-background-light-blue;
 @color-bi-background-hover-common-light-button: @color-bi-background-light-blue;
 @color-bi-background-active-common-light-button: @color-bi-background-light-blue;
+@color-bi-background-hover-plain-button: @color-black-5;
+@color-bi-background-active-plain-button: @color-black-10;
 
 @color-bi-background-active-common-ghost-button: @color-bi-background-highlight;
 @color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default;
 @color-bi-text-ignore-button: @color-bi-text-highlight;
+@color-bi-text-ignore-plain-button: @background-color-light-black;
 @color-bi-border-ignore-button: @color-bi-border-highlight;
 @color-bi-background-ignore-button: @color-bi-background-default;
 @color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
@@ -91,6 +95,7 @@
 @color-bi-background-success-button: @color-bi-background-success;
 @color-bi-border-success-button: @color-bi-border-success;
 @color-bi-text-success-clear-button: @color-bi-text-success;
+@color-bi-text-success-plain-button: @color-bi-text-success;
 @color-bi-text-success-ghost-button: @color-bi-text-success;
 @color-bi-text-success-light-button: @color-bi-text-success;
 @color-bi-background-success-light-button: @color-bi-background-light-success;
@@ -98,6 +103,7 @@
 @color-bi-background-active-success-light-button: @color-bi-background-light-success;
 
 @color-bi-text-warning-button: @color-bi-text;
+@color-bi-text-warning-plain-button:  @color-bi-text-redmark;
 @color-bi-text-warning-light-button: @color-bi-text-redmark;
 @color-bi-background-warning-light-button: @color-bi-background-light-warning;
 @color-bi-background-hover-warning-light-button: @color-bi-background-light-warning;
@@ -115,6 +121,7 @@
 @color-bi-background-hover-error-light-button: @color-bi-background-light-failure;
 @color-bi-background-active-error-light-button: @color-bi-background-light-failure;
 @color-bi-border-error-button: @color-bi-border-failure;
+@color-bi-text-error-plain-button: @color-bi-text-failure;
 @color-bi-text-error-clear-button: @color-bi-text-failure;
 @color-bi-text-error-ghost-button: @color-bi-text-failure;
 @color-bi-text-disabled-button: @color-bi-text-disabled;
@@ -124,6 +131,7 @@
 @color-bi-background-disabled-ignore-button: @color-bi-background-default;
 @color-bi-border-disabled-ignore-button: @color-bi-border-line;
 @color-bi-text-disabled-ignore-clear-button: @color-bi-text-disabled;
+@color-bi-text-disabled-plain-clear-button: @color-bi-text-disabled;
 @color-bi-text-disabled-common-ghost-button: @color-bi-text-highlight;
 @color-bi-border-disabled-common-ghost-button: @color-bi-border-highlight;
 @color-bi-text-disabled-success-ghost-button: @color-bi-text-success;