Commit graph

27 commits

Author SHA1 Message Date
J. Ryan Stinnett
87f13cfe55 Add focus handling to validation
Update the Field component and validation handling to show / hide validation
feedback on focus / blur events.
2019-04-25 14:29:09 +01:00
J. Ryan Stinnett
338d83ab55 Add validation feedback helper
This adds a general validation feedback mechanism for checking input values. An
initial example is wired up for the username input on registration.
2019-04-25 14:29:09 +01:00
J. Ryan Stinnett
37ecf2a623 Remove unused ref from Field component
The `fieldInput` ref is no longer used now that we have controlled components
everywhere.
2019-04-25 14:29:09 +01:00
J. Ryan Stinnett
f2da833ac9 Fix validation to avoid undefined class on fields
The class name handling for validation inadvertently added `undefined` as a
class when validation is not used. This rearranges the logic to avoid the issue.

Fixes https://github.com/vector-im/riot-web/issues/9345
2019-04-09 16:10:36 +01:00
J. Ryan Stinnett
ec51aee656 Remove refs from RegistrationForm
This aligns the code in `RegistrationForm` with other users of the `Field`
component. (In https://github.com/matrix-org/matrix-react-sdk/pull/2780, I had
thought that this code would be okay to leave alone, but I had missed the usage
of the `Field` value getter.)

Fixes https://github.com/vector-im/riot-web/issues/9172
2019-03-14 14:29:04 +00:00
J. Ryan Stinnett
c70925ab0d Restore Field value getter for RegistrationForm
When working on the `Field` validation support, I thought `RegistrationForm`'s
refs would be okay to leave as is, but I missed that they also depended on the
value getter.

For the moment, it's quicker to temporarily revive the value getter to get
registration working.

Fixes https://github.com/vector-im/riot-web/issues/9171
2019-03-14 12:29:00 +00:00
J. Ryan Stinnett
69a066657b Remove bits of Field that supported uncontrolled
Field is no longer used as an uncontrolled component, so we can remove some
supporting code that we no longer need.
2019-03-12 16:51:19 +00:00
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