Commit graph

20 commits

Author SHA1 Message Date
J. Ryan Stinnett
d4dbba3938 Convert uncontrolled Field usages to controlled
As part of adding validation to Field, the logic is simpler to follow if we can
assume that all usages of Field use it as a controlled component, instead of
supporting both controlled and uncontrolled.

This converts the uncontrolled usages to controlled.
2019-03-12 16:17:21 +00:00
J. Ryan Stinnett
5a648ecfe4 Ensure we always set some value in Field
Always set some value on the Field's input so that it doesn't flip flop between
controlled and uncontrolled.
2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
ea050683bd Use the right prop type for functions 2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
57ce4d6e7d Call the parent component's onChange if it exists 2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
7241418eba Appease the linter
This checks `onValidate` in `render` to make the linter happy.
2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
edb7f39ec9 Validity class currently unused on tooltip 2019-03-12 14:02:54 +00:00
Matthew Hodgson
40f16fa310 adds validation for fields.
* renames RoomTooltip to be a generic Tooltip (which it is)
 * hooks it into Field to show validation results
 * adds onValidate to Field to let Field instances call an arbitrary validation function

Rebased from @ara4n's https://github.com/matrix-org/matrix-react-sdk/pull/2550
by @jryans. Subsequent commits revise and adapt this work.
2019-03-12 14:02:54 +00:00
J. Ryan Stinnett
35ee9c9ac7 One line for prefix container 2019-03-06 10:58:54 +00:00
J. Ryan Stinnett
26b2aa174b Add prefix support to Fields
This allows Fields to have an optional prefix component which is placed inside
the border of the Field and to the left of the input. Since this label animation
would be complex to get right for this case, it is instead fixed to the top left
if there is a prefix component.

This canonical example of this today would be a phone number field which
includes a country dropdown.
2019-03-05 15:25:43 +00:00
J. Ryan Stinnett
d4a148d56c Use oneOf to check the input element 2019-03-05 11:18:58 +00:00
J. Ryan Stinnett
7c672e608d Reorganise props handling in Field
Several small tweaks to the props handling:

* Use destructuring instead of `delete`
* Emphasize the `element` as a primary prop
* Document `textarea` as supported
2019-03-04 17:25:19 +00:00
J. Ryan Stinnett
d6f55a508c Use custom appearance and arrow for select fields 2019-01-30 16:40:53 -06:00
Travis Ralston
d819095a76 Default a Field's placeholder to the label
Fixes https://github.com/vector-im/riot-web/issues/8250

This keeps all fields in line with the design without them having to defining it twice. The option is kept in the first place as some fields might want to override the placeholder to be longer than the label or something.
2019-01-24 19:36:23 -07:00
Travis Ralston
875c0f94d3 Include a ref so that get/set value works again 2019-01-23 09:29:44 -07:00
Travis Ralston
aa7afe819f Bring over email address management 2019-01-23 09:28:53 -07:00
Travis Ralston
19de6694ca Bring in the change password section
This also changes the layout slightly in the user settings, but nothing detrimental.
2019-01-23 09:28:53 -07:00
Travis Ralston
2b3c8c4450 Correctly form a select/input element 2019-01-22 20:03:59 -07:00
Travis Ralston
f0e8182ff3 Support selects on Field
Luckily, the styling is copy/paste capable.
2019-01-22 19:25:09 -07:00
Travis Ralston
36ffbef010
Tweak comment about field ID
Co-Authored-By: jryans <jryans@gmail.com>
2019-01-19 22:29:57 -06:00
J. Ryan Stinnett
efd5405267 Add a form field component for the redesign
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.

Adapted from @ara4n's experiment into a React component with a CSS only
approach.
2019-01-19 22:13:53 -06:00