From ccd2820ce72b5f319b1b205587a8b80894027117 Mon Sep 17 00:00:00 2001
From: Teng YANG <morenyang88@gmail.com>
Date: Tue, 26 May 2020 10:32:35 +0800
Subject: [PATCH] fix: #24205 less class name prefix enhancement (#24459)

* replace ant class prefix with variable in mixin

* replace ant class prefix with variable in wave
---
 components/_util/wave.tsx               | 18 ++++++++++++++----
 components/input/style/mixin.less       |  4 ++--
 components/style/core/motion/other.less | 13 +++++++++----
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index aa6aa96062..a808e6496b 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { findDOMNode } from 'react-dom';
 import TransitionEvents from '@ant-design/css-animation/lib/Event';
 import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
+import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
 
 let styleForPesudo: HTMLStyleElement | null;
 
@@ -24,6 +24,8 @@ function isNotGrey(color: string) {
 }
 
 export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
+  static contextType = ConfigContext;
+
   private instance?: {
     cancel: () => void;
   };
@@ -40,6 +42,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
 
   private csp?: CSPConfig;
 
+  context: ConfigConsumerProps;
+
   componentDidMount() {
     const node = findDOMNode(this) as HTMLElement;
     if (!node || node.nodeType !== 1) {
@@ -66,7 +70,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     const { insertExtraNode } = this.props;
     this.extraNode = document.createElement('div');
     const { extraNode } = this;
-    extraNode.className = 'ant-click-animating-node';
+    const { getPrefixCls } = this.context;
+    extraNode.className = `${getPrefixCls('')}-click-animating-node`;
     const attributeName = this.getAttributeName();
     node.setAttribute(attributeName, 'true');
     // Not white or transparnt or grey
@@ -86,7 +91,9 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
 
       extraNode.style.borderColor = waveColor;
       styleForPesudo.innerHTML = `
-      [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
+      [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
+        '',
+      )}-click-animating-node {
         --antd-wave-shadow-color: ${waveColor};
       }`;
       if (!document.body.contains(styleForPesudo)) {
@@ -121,8 +128,11 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
   };
 
   getAttributeName() {
+    const { getPrefixCls } = this.context;
     const { insertExtraNode } = this.props;
-    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
+    return insertExtraNode
+      ? `${getPrefixCls('')}-click-animating`
+      : `${getPrefixCls('')}-click-animating-without-extra-node`;
   }
 
   bindAnimationEvent = (node: HTMLElement) => {
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index f0d7e73519..29e40e228b 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -259,11 +259,11 @@
   }
 
   // Fix https://github.com/ant-design/ant-design/issues/5754
-  &-lg .@{ant-prefix}-select-single .ant-select-selector {
+  &-lg .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
     height: @input-height-lg;
   }
 
-  &-sm .@{ant-prefix}-select-single .ant-select-selector {
+  &-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
     height: @input-height-sm;
   }
 
diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 8a1584bbc9..d1a25494e7 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -4,8 +4,11 @@
   }
 }
 
-[ant-click-animating='true'],
-[ant-click-animating-without-extra-node='true'] {
+@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
+@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";
+
+@{click-animating-true},
+@{click-animating-with-extra-node-true} {
   position: relative;
 }
 
@@ -14,8 +17,10 @@ html {
   --scroll-bar: 0;
 }
 
-[ant-click-animating-without-extra-node='true']::after,
-.ant-click-animating-node {
+@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
+
+@{click-animating-with-extra-node-true-after},
+.@{ant-prefix}-click-animating-node {
   position: absolute;
   top: 0;
   right: 0;