Skip to content

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

Merged
merged 3 commits into from
Apr 25, 2022

Conversation

M-i-k-e-l
Copy link
Collaborator

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} and editable={false}.

Snippet:

<TextField migrate floatingPlaceholder editable placeholder="Placeholder"/>
<TextField migrate floatingPlaceholder editable={false} placeholder="Placeholder"/>
<TextField migrate floatingPlaceholder={false} editable placeholder="Placeholder"/>
<TextField migrate floatingPlaceholder={false} editable={false} placeholder="Placeholder"/>

Changelog

Fix Incubator TextField placeholder's disabled color (when floating is also disabled).

@@ -215,7 +215,7 @@ export type TextFieldProps = MarginModifiers &
};

export type InternalTextFieldProps = PropsWithChildren<
TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps
TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps & {placeholderColor: ColorType}
Copy link
Collaborator

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?

Copy link
Collaborator Author

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 :)

@M-i-k-e-l M-i-k-e-l requested a review from ethanshar April 25, 2022 08:35
@@ -7,6 +7,13 @@ const colorByState = {
disabled: Colors.$textDisabled
};

const placeHolderTextColorByState = {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
const placeHolderTextColorByState = {
const placeholderTextColorByState = {

@@ -128,7 +128,7 @@ const TextField = (props: InternalTextFieldProps) => {
)}
{children || (
<Input
placeholderTextColor={hidePlaceholder ? 'transparent' : Colors.$textNeutral}
placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor}
Copy link
Collaborator

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?

Copy link
Collaborator Author

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

@M-i-k-e-l M-i-k-e-l requested a review from ethanshar April 25, 2022 12:50
@ethanshar ethanshar merged commit c36dc25 into master Apr 25, 2022
@M-i-k-e-l M-i-k-e-l deleted the fix/incubator-text-field-placeholder-disabled-color branch April 25, 2022 13:35
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.

2 participants