Uploaded image for project: 'Google Code-in'
  1. Google Code-in
  2. GCI-269

React UI Library - Input Component

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Closed
    • Priority: TBD
    • Resolution: Done
    • Labels:
    • Complexity:
      Medium

      Description

      Create an input field component that can show different behaviour depending on passed props.

      Create a Controlled Component that can be used as the following;

      • Normal Input field
      • Disabled Input field

      Considerations:

      • Build this component from scratch. You can check other libraries for inspiration.
      • Component should expose props to handle relevant events.
      • Allow passing a separate validator function as a prop to validate input.
      • If the input is invalid as per the passed validator function, the user should be notified visually. How to do this is up to you. It should also be possible to check if the component has valid input or not, programmatically. This is important to control form submissions.
      • Must allow showing a placeholder if provided.
      • Width and height should be customizable. Also provide knobs on storybook.
      • Follow OpenMRS design theme - colors, fonts, icons. Use Material design icons if needed and available.
      • Feel free to make suggestions and improvements.
      • Follow the instructions at the repository (especially the Gitflow workflow) and the OpenMRS pull request tips.

      Repository: https://github.com/merovingienne/openmrs-module-ui-react

        Attachments

          Activity

            People

            Assignee:
            navareth Bartłomiej Rasztabiga
            Reporter:
            merovingienne Chanuka Wijayakoon
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 4 days
                4d
                Remaining:
                Remaining Estimate - 4 days
                4d
                Logged:
                Time Spent - Not Specified
                Not Specified