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

[TextField] - Implement helper text/error text as a separate component #4526

Closed
wants to merge 11 commits into from
Closed

[TextField] - Implement helper text/error text as a separate component #4526

wants to merge 11 commits into from

Conversation

avocadowastaken
Copy link
Contributor

@avocadowastaken avocadowastaken commented Jun 19, 2016

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

PR for this issue #2555, and it's also covers this #2474 issue, but I don't think that PR is complete and we need to discuss few things.

For example here I've used adjustForMultiLine and adjustForFloatingLabel "private" props that should be sent only from TextField.

Reason why I used it - it's to encapsulate component stylings in it, otherwise it would be hard to find where changed comes from - custom TextField styles, own TextField styles, custom TextFieldHelper styles or own TextFieldHelper styles.

So as I see the future implementation will look like:

<TextField helperText="Here is your tip." errorText={null} /> // Will show helper text

<TextField helperText="Here is your tip." errorText="Nay!" /> // Will show error text

or if you want to add some stylings

<TextField
    helper={<TextFieldHelper style={{color: error ? 'orange' : 'blue'}} helperText="Here is your tip." errorText={error} />}
 />

// here `TextField` should just clone element and pass `muiTheme`, `adjustForMultiLine`, `adjustForFloatingLabel` to it

Similar for all TextField child components

Some thing that can be also done here:

  • Add errorStyle prop to avoid things like that - {color: error ? 'orange' : 'blue'}
  • Pass ...restProps to div

@avocadowastaken avocadowastaken changed the title #2555 - Implement helper text/error text as a separate component [TextField] - Implement helper text/error text as a separate component Jun 19, 2016
@avocadowastaken avocadowastaken deleted the 2555 branch July 11, 2016 05:50
@zannager zannager added the component: text field This is the name of the generic UI component, not the React module! label Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants