fix: class prefix replacement effect for icon (#842)

Tencent · Sep 19, 2022 · 4a74093 · 4a74093
1 parent c27f505
commit 4a74093
Show file tree

Hide file tree

Showing 32 changed files with 124 additions and 154 deletions.
diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less
@@ -97,12 +97,6 @@
   display: inherit;
 }
 
-.@{prefix}-alert__icon {
-  > .@{prefix}-icon {
-    font-size: @alert-icon-size;
-  }
-}
-
 .@{prefix}-alert__icon,
 .@{prefix}-alert__close {
   flex: 0 0 auto;

diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less
@@ -25,7 +25,7 @@
     &.@{prefix}-is-current {
       color: @breadcrumb-text-color-current;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @breadcrumb-icon-color-current;
       }
     }
@@ -38,7 +38,7 @@
       }
     }
 
-    .@{prefix}-icon {
+    .t-icon {
       font-size: @breadcrumb-icon-size;
     }
 
@@ -90,7 +90,7 @@
     word-break: break-all;
     .v-inlineblock;
 
-    .@{prefix}-icon {
+    .t-icon {
       margin: 0 @breadcrumb-spacer-half;
     }
   }
@@ -189,7 +189,7 @@
       display: flex;
       align-items: center;
 
-      .@{prefix}-icon {
+      .t-icon {
         vertical-align: text-bottom;
       }
       .t-overflow;

diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less
@@ -45,20 +45,20 @@
   text-decoration: none;
 
   .@{prefix}-button__text,
-  .@{prefix}-icon {
+  .t-icon {
     position: relative;
     z-index: 1;
   }
 
-  .@{prefix}-icon {
+  .t-icon {
     font-size: @btn-icon-size-default;
   }
 
   .@{prefix}-loading {
     font-size: @btn-loading-size;
   }
 
-  .@{prefix}-icon + .@{prefix}-button__text:not(:empty) {
+  .t-icon + .@{prefix}-button__text:not(:empty) {
     margin-left: @btn-icon-text-margin-left;
   }
 
@@ -338,7 +338,7 @@
     text-align: center;
     border-radius: @btn-shape-border-radius-default;
 
-    .@{prefix}-icon {
+    .t-icon {
       font-size: @btn-icon-size-default;
     }
 

diff --git a/style/web/components/button/_mixin.less b/style/web/components/button/_mixin.less
@@ -27,7 +27,7 @@
   padding-left: @padding-horizontal - @btn-border-width;
   padding-right: @padding-horizontal - @btn-border-width;
 
-  .@{prefix}-icon,
+  .t-icon,
   .@{prefix}-loading {
     font-size: @btn-icon-size;
   }

diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less
@@ -120,7 +120,7 @@
     }
 
     &-icon {
-      &.@{prefix}-icon {
+      &.t-icon {
         position: absolute;
         height: 100%;
         right: 0;
@@ -141,7 +141,7 @@
       background: @cascader-item-background-color-expanded;
       color: @cascader-highlight-color;
 
-      .@{prefix}-icon-chevron-right {
+      .t-icon-chevron-right {
         color: @cascader-highlight-color;
       }
 

diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less
@@ -22,19 +22,19 @@
   border-radius: @border-radius-large;
 
   // icon theme
-  .@{prefix}-icon.t-is-info {
+  .t-icon.@{prefix}-is-info {
     color: @dialog-info-icon-color;
   }
 
-  .@{prefix}-icon.t-is-success {
+  .t-icon.@{prefix}-is-success {
     color: @dialog-success-icon-color;
   }
 
-  .@{prefix}-icon.t-is-warning {
+  .t-icon.@{prefix}-is-warning {
     color: @dialog-warning-icon-color;
   }
 
-  .@{prefix}-icon.t-is-error {
+  .t-icon.@{prefix}-is-error {
     color: @dialog-error-icon-color;
   }
 
@@ -50,7 +50,7 @@
     word-break: break-word;
     padding-right: 10px;
 
-    .@{prefix}-icon {
+    .t-icon {
       font-size: @dialog-icon-size;
       margin-right: @dialog-header-icon-margin-right;
       flex-shrink: 0;

diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less
@@ -177,7 +177,7 @@
       background-color: @dialog-close-btn-bg-active;
     }
 
-    .@{prefix}-icon {
+    .t-icon {
       font-size: @drawer-icon-size;
       vertical-align: unset;
     }

diff --git a/style/web/components/form/_index.less b/style/web/components/form/_index.less
@@ -108,7 +108,8 @@
   &__status {
     display: flex;
     margin-left: @form-status-margin-left;
-    > .@{prefix}-icon {
+
+    > .t-icon {
       font-size: 20px;
     }
 

diff --git a/style/web/components/form/_mixin.less b/style/web/components/form/_mixin.less
@@ -19,7 +19,7 @@
         }
 
         // 处理组件内icon颜色
-        .@{prefix}-icon,
+        .t-icon,
         .@{prefix}-fake-arrow {
           color: @@borderColor;
           @borderColor: "input-border-color-@{status}";
@@ -64,7 +64,7 @@
 
 .input-status-icon(@status) {
   .@{prefix}-form__status {
-    .@{prefix}-icon {
+    .t-icon {
       color: @@iconColor;
       @iconColor: "form-color-@{status}";
     }

diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less
@@ -417,7 +417,7 @@
     cursor: pointer;
     transition: @anim-duration-base;
 
-    &:hover .@{prefix}-icon {
+    &:hover .t-icon {
       border-radius: 50%;
       background-color: @bg-color-secondarycontainer-hover;
     }

diff --git a/style/web/components/input-number/_index.less b/style/web/components/input-number/_index.less
@@ -90,7 +90,7 @@
       color: @input-number-button-color-hover;
       border-color: @input-number-button-color-hover;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @input-number-button-color-hover;
       }
     }
@@ -100,7 +100,7 @@
       background-color: @bg-color-container-hover;
     }
 
-    .@{prefix}-icon {
+    .t-icon {
       position: relative;
       z-index: 1;
       font-size: @input-number-font-size;
@@ -112,14 +112,14 @@
       cursor: no-drop;
       background-color: @input-number-button-bg-color-disabled;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @input-number-button-color-disabled;
       }
 
       &:hover {
         border-color: @input-number-button-border-color;
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @input-number-button-color-disabled;
         }
       }
@@ -158,7 +158,7 @@
     cursor: no-drop;
     background-color: @input-number-button-bg-color-disabled;
 
-    .@{prefix}-icon {
+    .t-icon {
       color: @text-color-secondary;
     }
   }
@@ -274,14 +274,14 @@
     visibility: hidden;
     z-index: 2;
 
-    .@{prefix}-icon {
+    .t-icon {
       font-size: @input-number-right-font-size;
     }
 
     &:hover {
       background: @input-number-right-button-hover-bg-color;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @text-color-primary;
       }
     }
@@ -291,14 +291,14 @@
       cursor: no-drop;
       background-color: @input-number-button-bg-color-disabled;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @input-number-button-color-disabled;
       }
 
       &:hover {
         border-color: @input-number-button-border-color;
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @input-number-button-color-disabled;
         }
       }

diff --git a/style/web/components/input/_index.less b/style/web/components/input/_index.less
@@ -114,34 +114,34 @@
 
   .@{prefix}-input__prefix,
   .@{prefix}-input__suffix {
-    > .@{prefix}-icon {
+    > .t-icon {
       font-size: @input-inner-icon-font-size;
     }
   }
 
   .@{prefix}-input__prefix {
-    > .@{prefix}-icon {
+    > .t-icon {
       color: @input-inner-prefix-icon-color;
     }
   }
 
   .@{prefix}-input__suffix {
-    > .@{prefix}-icon {
+    > .t-icon {
       color: @input-inner-suffix-icon-color;
     }
   }
 
   // 输入框被聚焦
   &.@{prefix}-is-focused {
     .@{prefix}-input__prefix {
-      > .@{prefix}-icon {
+      > .t-icon {
         color: @input-border-color-default-focus;
       }
     }
     .@{prefix}-input__suffix {
       // 只有time-picker、date-picker特殊使用的suffix icon需要改变颜色 若后续有新增组件继续扩展这个枚举
-      > .@{prefix}-icon-time,
-      .@{prefix}-icon-calendar {
+      > .t-icon-time,
+      .t-icon-calendar {
         color: @input-border-color-default-focus;
       }
     }

diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less
@@ -57,7 +57,7 @@
 
     & > .@{prefix}-input__prefix,
     & > .@{prefix}-input__suffix {
-      .@{prefix}-icon {
+      .t-icon {
         color: @input-text-color-disabled;
       }
     }

diff --git a/style/web/components/list/_index.less b/style/web/components/list/_index.less
@@ -91,7 +91,7 @@
           margin-right: @list-action-margin-right;
         }
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @list-action-icon-color;
           font-size: @list-icon-size;
 

diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less
@@ -276,7 +276,7 @@ a.@{prefix}-menu__item {
         color: @menu-theme-light;
         background-color: @default-menu-active-color;
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @menu-theme-light;
         }
       }
@@ -289,7 +289,7 @@ a.@{prefix}-menu__item {
         display: none;
       }
 
-      .@{prefix}-icon {
+      .t-icon {
         margin-right: initial;
       }
     }
@@ -437,7 +437,7 @@ a.@{prefix}-menu__item {
       color: @menu-light-active-color;
       background-color: unset;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @menu-light-active-color;
       }
     }
@@ -501,7 +501,7 @@ a.@{prefix}-menu__item {
       margin-bottom: 0;
     }
 
-    .@{prefix}-icon {
+    .t-icon {
       width: 20px;
       height: 20px;
     }
@@ -514,7 +514,7 @@ a.@{prefix}-menu__item {
       color: @menu-theme-light;
       background-color: @default-menu-active-color;
 
-      .@{prefix}-icon {
+      .t-icon {
         color: @menu-theme-light;
       }
     }
@@ -554,7 +554,7 @@ a.@{prefix}-menu__item {
       > .@{prefix}-menu__item {
         color: @menu-theme-dark;
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @menu-theme-dark;
         }
       }
@@ -690,7 +690,8 @@ a.@{prefix}-menu__item {
     white-space: nowrap;
   }
 
-  .@{prefix}-icon + &__content, .@{prefix}-icon + &__item-link {
+  .t-icon + &__content,
+  .t-icon + &__item-link {
     margin-left: 8px;
   }
 
@@ -711,7 +712,7 @@ a.@{prefix}-menu__item {
       &.@{prefix}-is-opened {
         color: @menu-item-active-color--dark;
 
-        .@{prefix}-icon {
+        .t-icon {
           color: @menu-item-active-color--dark;
         }
       }