From 345a3a0624c18b4eceb130dd3fd20b64de11976b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Mon, 28 Aug 2023 22:10:47 +0800
Subject: [PATCH 1/6] =?UTF-8?q?fix:=20Form=20=E4=B8=8E=20Grid=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98=20=20(#44472)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: style

* fix: style

* chore: ref
---
 components/grid/style/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index 1772f59e8f03..c90796dbd977 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';
 
@@ -92,7 +93,8 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
   const gridColumnsStyle: CSSObject = {};
   for (let i = gridColumns; i >= 0; i--) {
     if (i === 0) {
-      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
+      // ref: https://github.com/ant-design/ant-design/issues/44456
+      gridColumnsStyle[`${componentCls}${componentCls}${componentCls}${sizeCls}-${i}`] = {
         display: 'none',
       };
       gridColumnsStyle[`${componentCls}-push-${i}`] = {

From fec423ea1bb3300f4b2defa0007ffcef27c8dbad Mon Sep 17 00:00:00 2001
From: William Entriken <github.com@phor.net>
Date: Mon, 28 Aug 2023 21:14:48 -0400
Subject: [PATCH 2/6] docs: Update definition for dashed button (#44481)

This updates the English documentation for the dashed button.

This updates the English to better translate the [Chinese version](https://github.com/ant-design/ant-design/blob/345a3a0624c18b4eceb130dd3fd20b64de11976b/components/button/index.zh-CN.md).

(I'm assuming the Chinese version is normative.)

Signed-off-by: William Entriken <github.com@phor.net>
---
 components/button/index.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 6016061b5780..f26397bb1722 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.
 

From c70ba365407f2e441b0f7a4adef50f8c5c674021 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 29 Aug 2023 14:33:56 +0800
Subject: [PATCH 3/6] chore: disabled compat/compat in test files (#44496)

---
 .eslintrc.js | 6 ++++++
 1 file changed, 6 insertions(+)

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,

From fae1fef77dfd4c506c16b8405687f927c26db3f3 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 29 Aug 2023 15:04:03 +0800
Subject: [PATCH 4/6] fix: add role="button" props to div (#44494)

* fix: add role="button" props to div

* fix: fix
---
 .dumi/theme/builtins/Previewer/CodePreviewer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index 60024d8afcef..e97ee0d8faf0 100644
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   CheckOutlined,
@@ -542,7 +541,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
             styleCode={style}
             onCodeTypeChange={setCodeType}
           />
-          <div tabIndex={0} className={styles.codeHideBtn} onClick={() => setCodeExpand(false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            className={styles.codeHideBtn}
+            onClick={() => setCodeExpand(false)}
+          >
             <UpOutlined />
             <FormattedMessage id="app.demo.code.hide.simplify" />
           </div>

From 457feb7933b82c5d67d755cd06b55d54be71761a Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Tue, 29 Aug 2023 15:42:26 +0800
Subject: [PATCH 5/6] docs(select): fix incorrect link of AutoComplete (#44500)

* docs: fix incorrect link of `AutoComplete`

Signed-off-by: Andy Hsu <i@nn.ci>

* docs(select): sync `AutoComplete` related content in `zh-CN` to `en-US`

Signed-off-by: Andy Hsu <i@nn.ci>

---------

Signed-off-by: Andy Hsu <i@nn.ci>
---
 components/select/index.en-US.md | 1 +
 components/select/index.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index c6f940e1ebf6..d12000821709 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 `<select>` element.
 - Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
+- You probably need [AutoComplete](/components/auto-complete/) if you're looking for an input box that can be typed or selected. 
 
 ## Examples
 
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index e42030a462d5..a6ce1e642220 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -15,7 +15,7 @@ demo:
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
-- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/autocomplete-cn/)。
+- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。
 
 ## 代码演示
 

From 7a66d4605179ce26484c019d2e5598feb1e8f14d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 29 Aug 2023 15:48:03 +0800
Subject: [PATCH 6/6] refactor: Form style should always before Grid (#44485)

* fix: use css variable to support dynamic display

* chore: support order

* chore: add ie fallback

* chore: add ie fallback
---
 components/form/FormItemInput.tsx             |  5 +-
 components/form/style/fallbackCmp.ts          | 29 ++++++++++++
 components/form/style/index.ts                | 46 +++++++++++++------
 components/grid/style/index.ts                | 23 +++++++---
 .../theme/util/genComponentStyleHook.ts       | 17 ++++---
 5 files changed, 92 insertions(+), 28 deletions(-)
 create mode 100644 components/form/style/fallbackCmp.ts

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<FormItemInputProps & FormItemInputMiscProps> = (pr
       <Col {...mergedWrapperCol} className={className}>
         {dom}
       </Col>
+      <FallbackCmp prefixCls={prefixCls} />
     </FormContext.Provider>
   );
 };
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<FormToken> = (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 fbd8184da8e1..66e435054a98 100644
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@@ -4,6 +4,7 @@ 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';
 
 export interface FormToken extends FullToken<'Form'> {
@@ -149,7 +150,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Label                           =
       // ==============================================================
       [`${formItemCls}-label`]: {
-        display: 'inline-block',
         flexGrow: 0,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
@@ -232,7 +232,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Input                           =
       // ==============================================================
       [`${formItemCls}-control`]: {
-        display: 'flex',
+        ['--ant-display' as any]: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
 
@@ -477,20 +477,38 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
+export const prepareToken: (
+  token: Parameters<GenStyleFn<'Form'>>[0],
+  rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
   const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,
   });
 
-  return [
-    genFormStyle(formToken),
-    genFormItemStyle(formToken),
-    genFormValidateMotionStyle(formToken),
-    genHorizontalStyle(formToken),
-    genInlineStyle(formToken),
-    genVerticalStyle(formToken),
-    genCollapseMotion(formToken),
-    zoomIn,
-  ];
-});
+  return formToken;
+};
+
+export default genComponentStyleHook(
+  'Form',
+  (token, { rootPrefixCls }) => {
+    const formToken = prepareToken(token, rootPrefixCls);
+
+    return [
+      genFormStyle(formToken),
+      genFormItemStyle(formToken),
+      genFormValidateMotionStyle(formToken),
+      genHorizontalStyle(formToken),
+      genInlineStyle(formToken),
+      genVerticalStyle(formToken),
+      genCollapseMotion(formToken),
+      zoomIn,
+    ];
+  },
+  null,
+  {
+    // 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 c90796dbd977..2ebac21eb302 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -93,8 +93,7 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
   const gridColumnsStyle: CSSObject = {};
   for (let i = gridColumns; i >= 0; i--) {
     if (i === 0) {
-      // ref: https://github.com/ant-design/ant-design/issues/44456
-      gridColumnsStyle[`${componentCls}${componentCls}${componentCls}${sizeCls}-${i}`] = {
+      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
         display: 'none',
       };
       gridColumnsStyle[`${componentCls}-push-${i}`] = {
@@ -116,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/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index f729e8682fd6..3784bdf930b3 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -59,9 +59,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
   componentName: ComponentName | [ComponentName, string],
   styleFn: GenStyleFn<ComponentName>,
   getDefaultToken?:
+    | null
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
-  options?: {
+  options: {
     resetStyle?: boolean;
     // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
     deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
@@ -69,7 +70,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
      * Only use component style in client side. Ignore in SSR.
      */
     clientOnly?: boolean;
-  },
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+  } = {},
 ) {
   const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
     ComponentName,
@@ -90,10 +95,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       token,
       hashId,
       nonce: () => csp?.nonce!,
-      clientOnly: options?.clientOnly,
+      clientOnly: options.clientOnly,
 
       // antd is always at top of styles
-      order: -999,
+      order: options.order || -999,
     };
 
     // Generate style for all a tags in antd component.
@@ -117,7 +122,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           const { token: proxyToken, flush } = statisticToken(token);
 
           const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
-          if (options?.deprecatedTokens) {
+          if (options.deprecatedTokens) {
             const { deprecatedTokens } = options;
             deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
               if (process.env.NODE_ENV !== 'production') {
@@ -165,7 +170,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           });
           flush(component, mergedComponentToken);
           return [
-            options?.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+            options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
             styleInterpolation,
           ];
         },