diff --git a/.eslintrc.js b/.eslintrc.js
index 1178d08ee021..12e49328d21e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -126,6 +126,12 @@ module.exports = {
'comma-dangle': 0,
},
},
+ {
+ files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+ rules: {
+ 'compat/compat': 0,
+ },
+ },
],
rules: {
'react/jsx-one-expression-per-line': 0,
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 3635c74e0b88..dec2c57d99e9 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -20,7 +20,7 @@ In Ant Design we provide 5 types of button.
- Primary button: indicate the main action, one primary button at most in one section.
- Default button: indicate a series of actions without priority.
-- Dashed button: used for adding action commonly.
+- Dashed button: commonly used for adding more actions.
- Text button: used for the most secondary action.
- Link button: used for external links.
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index a806be17940c..741a86d92061 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -1,10 +1,12 @@
-import classNames from 'classnames';
import * as React from 'react';
+import classNames from 'classnames';
+
import type { ColProps } from '../grid/col';
import Col from '../grid/col';
import { FormContext, FormItemPrefixContext } from './context';
import ErrorList from './ErrorList';
import type { ValidateStatus } from './FormItem';
+import FallbackCmp from './style/fallbackCmp';
interface FormItemInputMiscProps {
prefixCls: string;
@@ -116,6 +118,7 @@ const FormItemInput: React.FC = (pr
{dom}
+
);
};
diff --git a/components/form/style/fallbackCmp.ts b/components/form/style/fallbackCmp.ts
new file mode 100644
index 000000000000..cf3e11336573
--- /dev/null
+++ b/components/form/style/fallbackCmp.ts
@@ -0,0 +1,29 @@
+/**
+ * Fallback of IE.
+ * Safe to remove.
+ */
+
+// Style as inline component
+import { prepareToken, type FormToken } from '.';
+import { genSubStyleComponent, type GenerateStyle } from '../../theme/internal';
+
+// ============================= Fallback =============================
+const genFallbackStyle: GenerateStyle = (token) => {
+ const { formItemCls } = token;
+
+ return {
+ '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)': {
+ // Fallback for IE, safe to remove we not support it anymore
+ [`${formItemCls}-control`]: {
+ display: 'flex',
+ },
+ },
+ };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Form', 'item-item'], (token, { rootPrefixCls }) => {
+ const formToken = prepareToken(token, rootPrefixCls);
+
+ return [genFallbackStyle(formToken)];
+});
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
index 1c9cac6c8a47..e77e1262cf5f 100644
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@@ -1,11 +1,12 @@
+import type { CSSProperties } from 'react';
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { genCollapseMotion, zoomIn } from '../../style/motion';
import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
import genFormValidateMotionStyle from './explain';
-import type { CSSProperties } from 'react';
export interface ComponentToken {
/**
@@ -210,7 +211,6 @@ const genFormItemStyle: GenerateStyle = (token) => {
// = Label =
// ==============================================================
[`${formItemCls}-label`]: {
- display: 'inline-block',
flexGrow: 0,
overflow: 'hidden',
whiteSpace: 'nowrap',
@@ -293,7 +293,7 @@ const genFormItemStyle: GenerateStyle = (token) => {
// = Input =
// ==============================================================
[`${formItemCls}-control`]: {
- display: 'flex',
+ ['--ant-display' as any]: 'flex',
flexDirection: 'column',
flexGrow: 1,
@@ -539,13 +539,22 @@ const genVerticalStyle: GenerateStyle = (token) => {
};
// ============================== Export ==============================
+export const prepareToken: (
+ token: Parameters>[0],
+ rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
+ const formToken = mergeToken(token, {
+ formItemCls: `${token.componentCls}-item`,
+ rootPrefixCls,
+ });
+
+ return formToken;
+};
+
export default genComponentStyleHook(
'Form',
(token, { rootPrefixCls }) => {
- const formToken = mergeToken(token, {
- formItemCls: `${token.componentCls}-item`,
- rootPrefixCls,
- });
+ const formToken = prepareToken(token, rootPrefixCls);
return [
genFormStyle(formToken),
@@ -569,4 +578,9 @@ export default genComponentStyleHook(
verticalLabelPadding: `0 0 ${token.paddingXS}px`,
verticalLabelMargin: 0,
}),
+ {
+ // Let From style before the Grid
+ // ref https://github.com/ant-design/ant-design/issues/44386
+ order: -1000,
+ },
);
diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index 1772f59e8f03..2ebac21eb302 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -1,4 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
+
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -114,11 +115,21 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
order: 0,
};
} else {
- gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
- display: 'block',
- flex: `0 0 ${(i / gridColumns) * 100}%`,
- maxWidth: `${(i / gridColumns) * 100}%`,
- };
+ gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [
+ // https://github.com/ant-design/ant-design/issues/44456
+ // Form set `display: flex` on Col which will override `display: block`.
+ // Let's get it from css variable to support override.
+ {
+ ['--ant-display' as any]: 'block',
+ // Fallback to display if variable not support
+ display: 'block',
+ },
+ {
+ display: 'var(--ant-display)',
+ flex: `0 0 ${(i / gridColumns) * 100}%`,
+ maxWidth: `${(i / gridColumns) * 100}%`,
+ },
+ ];
gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
insetInlineStart: `${(i / gridColumns) * 100}%`,
};
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 8d0c68a11134..ec0a8854cb97 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -14,6 +14,7 @@ Select component to select value from options.
- A dropdown menu for displaying choices - an elegant alternative to the native `