-
-
Notifications
You must be signed in to change notification settings - Fork 46.8k
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: input support cssinjs #34288
Conversation
Codecov Report
@@ Coverage Diff @@
## next #34288 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 431 431
Lines 7936 7946 +10
Branches 2281 2282 +1
=========================================
+ Hits 7936 7946 +10
Continue to review full report at Codecov.
|
Size Change: -1.4 kB (0%) Total Size: 948 kB
|
components/_util/theme/util.tsx
Outdated
opacity: 1, | ||
}, | ||
'&::placeholder': { | ||
color: new TinyColor({ h: 0, s: 0, v: '75%' }).toHexString(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hardcode 部分加个 // FIXME
components/_util/theme/index.tsx
Outdated
@@ -69,6 +70,10 @@ export interface DerivativeToken extends Omit<DesignToken, 'duration'> { | |||
|
|||
// TMP | |||
tmpPrimaryHoverColorWeak: string; | |||
tmpBackgroundLight: string; | |||
tmpPaddingSM: number; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个变量有的
components/_util/theme/index.tsx
Outdated
@@ -69,6 +70,10 @@ export interface DerivativeToken extends Omit<DesignToken, 'duration'> { | |||
|
|||
// TMP | |||
tmpPrimaryHoverColorWeak: string; | |||
tmpBackgroundLight: string; | |||
tmpPaddingSM: number; | |||
tmpTextColorSecondary: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个变量有的
components/input/Group.tsx
Outdated
</ConfigConsumer> | ||
); | ||
const Group: React.FC<GroupProps> = props => { | ||
const { getPrefixCls, direction } = useContext(ConfigContext); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useContext
不能在 cssinjs 里改,到 master 里改
components/input/style/index.tsx
Outdated
borderColor: token.inputBorderHoverColor, | ||
borderRightWidth: token.borderWidth, | ||
|
||
[`.${prefixCls}-rtl &`]: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RTL 全部用逻辑位置代替:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
不要出现 left 和 right
components/input/style/index.tsx
Outdated
borderStyle: token.borderStyle, | ||
borderColor: token.borderColor, | ||
borderRadius: token.borderRadius, | ||
transition: `all 0.3s`, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
0.3s
用 token.duration
代替
// | ||
//@import './search-input'; | ||
//@import './rtl'; | ||
//@import './IE11'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
建议删掉。
components/input/style/index.tsx
Outdated
top: '8px', | ||
right: '8px', | ||
insetBlockStart: '8px', | ||
insetInlineEnd: '8px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
原来还有这个。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个应该是可以通过 token.paddingXXX 得到的
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
components/input/style/index.tsx
Outdated
}); | ||
|
||
export const genActiveStyle = (theme: any, token: InputToken) => ({ | ||
borderColor: theme === 'dark' ? token.inputBorderActiveColor : token.inputBorderHoverColor, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
不要了
components/input/style/index.tsx
Outdated
|
||
export const genActiveStyle = (theme: any, token: InputToken) => ({ | ||
borderColor: theme === 'dark' ? token.inputBorderActiveColor : token.inputBorderHoverColor, | ||
boxShadow: `0 0 0 2px ${new TinyColor(token.inputBorderActiveColor).setAlpha(0.2)}`, // FIXME: outlineFade outlineWidth |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
outline width 有变量可用
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
高亮这个也有变量可以用
components/input/style/index.tsx
Outdated
|
||
// Undo padding and float of grid classes | ||
[`&[class*='col-']`]: { | ||
paddingInlineEnd: '8px', // FIXME: magic number |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
直接 token.paddingXXXX ?
components/input/style/index.tsx
Outdated
|
||
'&&-compact': { | ||
display: 'block', | ||
// .clearfix(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
clearFix 是不是该有个 util?
components/input/style/index.tsx
Outdated
}, | ||
[`&.${prefixCls}-sm`]: { | ||
height: token.controlHeightSM, | ||
paddingTop: 3, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FIXME
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
controlHeightSmall ?
components/input/style/index.tsx
Outdated
}, | ||
|
||
'&-show-count-has-suffix': { | ||
marginInlineEnd: '2px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FIXME,另外不用 px,数字即可
components/input/style/index.tsx
Outdated
|
||
[`> .${prefixCls}-group`]: { | ||
[`> .${prefixCls}-group-addon:last-child`]: { | ||
insetInlineStart: '-1px', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-1
components/input/style/index.tsx
Outdated
|
||
const inputToken: InputToken = { | ||
...token, | ||
inputAffixMargin: 4, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
token.marginXXXXX 代替
display: 'table', | ||
clear: 'both', | ||
content: '""', | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
用 flex 以后应该不太需要 clearFix 了。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
那这个还要不
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
没 float 就不需要了
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self Check before Merge