Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: form cssinjs #34679

Merged
merged 22 commits into from
Mar 30, 2022
Merged

refactor: form cssinjs #34679

merged 22 commits into from
Mar 30, 2022

Conversation

MadCcc
Copy link
Member

@MadCcc MadCcc commented Mar 23, 2022

[中文版模板 / 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
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Form support cssinjs
🇨🇳 Chinese Form 支持 cssinjs

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • 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

@MadCcc MadCcc changed the title refactor: form cssinjs [WIP]refactor: form cssinjs Mar 23, 2022
@MadCcc
Copy link
Member Author

MadCcc commented Mar 23, 2022

Some components are broken in Form.Item because components.less wasn't migrated.
Refactoring it with context...

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2022

@github-actions
Copy link
Contributor

github-actions bot commented Mar 24, 2022

Size Change: -2.9 kB (0%)

Total Size: 929 kB

Filename Size Change
./dist/antd-with-locales.min.js 410 kB +1.99 kB (0%)
./dist/antd.compact.min.css 40.2 kB -1.72 kB (-4%)
./dist/antd.dark.min.css 40.9 kB -1.72 kB (-4%)
./dist/antd.min.css 40.2 kB -1.72 kB (-4%)
./dist/antd.min.js 357 kB +1.98 kB (+1%)
./dist/antd.variable.min.css 40.7 kB -1.72 kB (-4%)

compressed-size-action

@codecov
Copy link

codecov bot commented Mar 24, 2022

Codecov Report

Merging #34679 (d7990cc) into next (34d49b1) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              next    #34679   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          438       438           
  Lines         8107      8115    +8     
  Branches      2302      2301    -1     
=========================================
+ Hits          8107      8115    +8     
Impacted Files Coverage Δ
components/input/TextArea.tsx 100.00% <ø> (ø)
components/_util/theme/util/alias.ts 100.00% <100.00%> (ø)
components/form/Form.tsx 100.00% <100.00%> (ø)
components/form/FormItem.tsx 100.00% <100.00%> (ø)
components/mentions/index.tsx 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 34d49b1...d7990cc. Read the comment docs.

@MadCcc MadCcc changed the title [WIP]refactor: form cssinjs refactor: form cssinjs Mar 25, 2022
@@ -5188,7 +5188,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<div
class="ant-input-textarea ant-input-textarea-show-count"
class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个应该是在 feature 上的?怎么 snapshot 也变了?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个样式没写在 components.less 里,漏掉了,我去 feature 上补一下

@@ -55,7 +55,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
const prefixCls = getPrefixCls('input-number', customizePrefixCls);

// Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls || '');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉有问题,这个 iconPrefixCls 应该总是存在才对

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 iconPrefixCls 不知道什么时候类型变成 string | undefined

// Adjust output element
output: {
display: 'block',
paddingTop: '15px',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

number

input[type='checkbox']:focus`]: {
// outline: 'thin dotted',
outline: '5px auto -webkit-focus-ring-color',
outlineOffset: -2,
Copy link
Member

@zombieJ zombieJ Mar 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

和标准 Input 一样用 token

marginBottom: 0,

'&-with-help': {
marginBottom: 24, // FIXME: magic
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有没有发现 24 反复出现,可以抽一个变量出来

@zombieJ
Copy link
Member

zombieJ commented Mar 28, 2022

截屏2022-03-28 下午2 46 19

@zombieJ zombieJ merged commit 833ff22 into next Mar 30, 2022
@zombieJ zombieJ deleted the refactor/form-cssinjs branch March 30, 2022 06:13
@MadCcc MadCcc mentioned this pull request Apr 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants