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

React UI Library - Input Component

    XMLWordPrintable

Details

    • Story
    • Status: Closed
    • TBD
    • Resolution: Done
    • 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

      Gliffy Diagrams

        Attachments

          Activity

            People

              navareth Bartłomiej Rasztabiga
              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