🔥feat: new component Flex

[li-jia-nan]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

💡 Background and solution

• [RFC] New Flex component #44070

📝 Changelog

Language	Changelog
🇺🇸 English	🔥feat: new component Flex
🇨🇳 Chinese	🔥feat: 新增组件 Flex

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

🚀 Summary

🤖 Generated by Copilot at ff95b08

This pull request introduces a new Flex component that provides a flexible layout system based on CSS flexbox and supports the antd theme system. It adds the component's implementation, types, styles, class names, and documentation files to the ./components/flex module and exports them from the ./components/index.ts file. It also adds the component's design tokens to the ./components/theme/interface/components.ts file. It includes demo code and markdown files for both Chinese and English languages to showcase the component's features and API.

🔍 Walkthrough

🤖 Generated by Copilot at ff95b08

• Implement and export the Flex component that provides a flexible layout system based on CSS flexbox (link, link)
• Define and export the FlexProps interface that specifies the types of the props for the component (link)
• Define and export the createFlexClassNames function that generates class names for the component based on the props (link)
• Define and export the createContainer function that creates a container element based on the component prop (link)
• Define and export the useStyle hook that generates the CSS rules for the component based on the theme tokens (link)
  • Define the ComponentToken and FlexToken interfaces that specify the component-specific and custom tokens for the component (link)
  • Define the genFlexStyle function that returns an object with the CSS rules for the component (link)
• Use the ConfigContext, classnames, and wrapSSR utilities to render the component with the appropriate class names, style props, and ref (link)
• Add and update the documentation for the Flex component that showcases its features and API (link, link, link, link)
  • Add the demo code for the basic usage of the component in ./components/flex/demo/basic.tsx (link)
  • Add the markdown files for the basic demo in both Chinese and English in ./components/flex/demo/basic.md (link)
  • Add the markdown files for the component introduction, when to use, examples, API, and design tokens in both Chinese and English in ./components/flex/index.zh-CN.md and ./components/flex/index.en-US.md (link, link)
    • Use the YAML front matter to specify the metadata of the component (link, link)
    • Use the <code> and <ComponentTokenTable> tags to reference the demo code and render the component's design tokens (link, link)
• Add the Flex key and value to the ComponentTokenMap interface in ./components/theme/interface/components.ts to support the theme system of antd (link)
  • Import the ComponentToken type from the ./components/flex/style module (link, link)

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

[github-actions]

size-limit report 📦

Path	Size
./dist/antd.min.js	395.62 KB (+670 B 🔺)
./dist/antd-with-locales.min.js	454.81 KB (+665 B 🔺)

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	2 changes	Sep 14, 2023, 8:51 AM

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (c5bed69) 100.00% compared to head (17c5dab) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #44362   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          683       686    +3     
  Lines        11582     11647   +65     
  Branches      3116      3123    +7     
=========================================
+ Hits         11582     11647   +65     

Files Changed	Coverage Δ
components/config-provider/context.ts	100.00% <ø> (ø)
components/config-provider/index.tsx	100.00% <ø> (ø)
components/flex/index.tsx	100.00% <100.00%> (ø)
components/flex/style/index.ts	100.00% <100.00%> (ø)
components/flex/utils.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[zombieJ]

使用 horizontal 和 vertical 语义化表达，horizontal 放前面。

[zombieJ]

通用属性不用写

[zombieJ]

写一下它实际布局用的是 column

另外要说一下，默认情况下水平布局 align 是 start，垂直是 strecth

[li-jia-nan]

使用 horizontal 和 vertical 语义化表达，horizontal 放前面。

done~

[li-jia-nan]

通用属性不用写

done~

[li-jia-nan]

写一下它实际布局用的是 column

另外要说一下，默认情况下水平布局 align 是 start，垂直是 strecth

done~