-
Notifications
You must be signed in to change notification settings - Fork 734
Fix Incubator TextField placeholder's disabled color #2003
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
Fix Incubator TextField placeholder's disabled color #2003
Conversation
src/incubator/TextField/types.ts
Outdated
@@ -215,7 +215,7 @@ export type TextFieldProps = MarginModifiers & | |||
}; | |||
|
|||
export type InternalTextFieldProps = PropsWithChildren< | |||
TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps | |||
TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps & {placeholderColor: ColorType} |
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.
Shouldn't we add the placeholderColor
type to TextFieldProps
with the rest of the props?
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.
Found the correct prop: placeholderTextColor
, already there :)
@@ -7,6 +7,13 @@ const colorByState = { | |||
disabled: Colors.$textDisabled | |||
}; | |||
|
|||
const placeHolderTextColorByState = { |
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.
const placeHolderTextColorByState = { | |
const placeholderTextColorByState = { |
@@ -128,7 +128,7 @@ const TextField = (props: InternalTextFieldProps) => { | |||
)} | |||
{children || ( | |||
<Input | |||
placeholderTextColor={hidePlaceholder ? 'transparent' : Colors.$textNeutral} | |||
placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} |
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.
technically you're replacing the default value with undefined, no?
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.
No, I am changing the default for a non-floating placeholder from a string
(set here to: Colors.$textNeutral
) to an object
(set in default.ts
->placeholderTextColorByState
); and this way I can set the disabled
type to look like it's disabled: Colors.$textDisabled
Description
Fix Incubator TextField placeholder's disabled color (when floating is also disabled).
There are 4 examples below, the 4th has a wrong color for the placeholder, this happens when both
floatingPlaceholder={false}
andeditable={false}
.Snippet:
Changelog
Fix Incubator TextField placeholder's disabled color (when floating is also disabled).