Skip to content

Commit

Permalink
feat: normalize validation states (#704)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbadan
jbadan committed Feb 26, 2020
1 parent 3fd3c50 commit fdba361
Show file tree
Hide file tree
Showing 17 changed files with 76 additions and 76 deletions.
62 changes: 31 additions & 31 deletions docs/pages/components/form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,14 @@ Do not use the input field if:
<br />
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="input-01">Invalid (Error) Input:</label>
<input class="fd-input is-invalid" type="text" id="input-01" placeholder="Field placeholder text">
<label class="fd-form-label" for="input-01">Error Input:</label>
<input class="fd-input is-error" type="text" id="input-01" placeholder="Field placeholder text">
</div>
<br />
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="input-02">Valid (Success) Input:</label>
<input class="fd-input is-valid" type="text" id="input-02" placeholder="Field placeholder text">
<label class="fd-form-label" for="input-02">Success Input:</label>
<input class="fd-input is-success" type="text" id="input-02" placeholder="Field placeholder text">
</div>
<br />
<br />
Expand Down Expand Up @@ -125,14 +125,14 @@ Do not use the input field if:

## Input States
The state of the input field can reflect validity of the data entered, whether the input data is editable or disabled.
* **Normal**: The field is editable but no validation has occurred
* **Valid**: The data format entered has been validated and it's correct, such as an email address.
* **Invalid**: The data entered is not valid and must be corrected.
* **Default**: The field is editable but no validation has occurred
* **Success**: The data format entered has been validated and it's correct, such as an email address.
* **Error**: The data entered is not valid and must be corrected.
* **Warning**: The data entered is formatted correctly but there are other issues are problematic but will not stop the user from moving forward.
* **Disabled**: This indicates the field is not editable. A common use case is that this field is dependent on a previous entry or selection within the form.
* **Read Only**: Used to display static information in the context of a form.

Along with Invalid and Warning, error messages should be displayed below the field so the user can correct the error and move forward.
Along with Error and Warning, error messages should be displayed below the field so the user can correct the error and move forward.

{% capture inputs %}
<div class="fd-form-item">
Expand All @@ -143,10 +143,10 @@ Along with Invalid and Warning, error messages should be displayed below the fie
<br /><br />

<div class="fd-form-item">
<label class="fd-form-label" for="input-1bb">Valid input:</label>
<label class="fd-form-label" for="input-1bb">Success input:</label>
<div class="fd-form-input-message-group fd-popover fd-popover--input-message-group">
<div class="fd-popover__control" aria-controls="popoverB2" aria-expanded="false" aria-haspopup="true">
<input class="fd-input is-valid" type="text" id="input-1bb" placeholder="Field placeholder text" aria-label="Image label">
<input class="fd-input is-success" type="text" id="input-1bb" placeholder="Field placeholder text" aria-label="Image label">
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="popoverB2">
<div class="fd-form-message fd-form-message--success">Success message</div>
Expand All @@ -160,7 +160,7 @@ Along with Invalid and Warning, error messages should be displayed below the fie
<label class="fd-form-label" for="input-1cc">Error input:</label>
<div class="fd-form-input-message-group fd-popover fd-popover--input-message-group">
<div class="fd-popover__control" aria-controls="popoverB3" aria-expanded="false" aria-haspopup="true">
<input class="fd-input is-invalid" type="text" id="input-1cc" placeholder="Field placeholder text" aria-label="Image label">
<input class="fd-input is-error" type="text" id="input-1cc" placeholder="Field placeholder text" aria-label="Image label">
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="popoverB3">
<div class="fd-form-message fd-form-message--error" >Error message</div>
Expand Down Expand Up @@ -235,26 +235,26 @@ Do not use the text area if
</div>
<br/>
<div class="fd-form-item">
<label class="fd-form-label" for="textarea-3">Success (valid) text area:</label>
<label class="fd-form-label" for="textarea-3">Success text area:</label>
<div class="fd-form-input-message-group fd-popover fd-popover--input-message-group">
<div class="fd-popover__control" aria-controls="popoverT51" aria-expanded="false" aria-haspopup="true">
<textarea class="fd-textarea is-valid" id="textarea-3" placeholder="Write something here"></textarea>
<textarea class="fd-textarea is-success" id="textarea-3" placeholder="Write something here"></textarea>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="popoverT51">
<div class="fd-form-message fd-form-message--success">Valid message</div>
<div class="fd-form-message fd-form-message--success">Success message</div>
</div>
</div>
<div class="fd-textarea-counter">150 characters left</div>
</div>
<br/>
<div class="fd-form-item">
<label class="fd-form-label" for="textarea-4">Error(invalid) text area:</label>
<label class="fd-form-label" for="textarea-4">Error text area:</label>
<div class="fd-form-input-message-group fd-popover fd-popover--input-message-group">
<div class="fd-popover__control" aria-controls="popoverT52" aria-expanded="false" aria-haspopup="true">
<textarea class="fd-textarea is-invalid" id="textarea-4" placeholder="Write something here"></textarea>
<textarea class="fd-textarea is-error" id="textarea-4" placeholder="Write something here"></textarea>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="popoverT52">
<div class="fd-form-message fd-form-message--error">Invalid message</div>
<div class="fd-form-message fd-form-message--error">Error message</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -451,13 +451,13 @@ In special cases, there are only two mutually exclusive options. Combine them in
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio is-valid" id="iSpDidh7612" name="radio5">
<input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5">
<label class="fd-radio__label" for="iSpDidh7612">
Field label
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio is-invalid" id="iSpDidh7613" name="radio5">
<input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5">
<label class="fd-radio__label" for="iSpDidh7613">
Field label
</label>
Expand Down Expand Up @@ -487,13 +487,13 @@ In special cases, there are only two mutually exclusive options. Combine them in
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio fd-radio--compact is-valid" id="iSpDidh76129" name="radio6">
<input type="radio" class="fd-radio fd-radio--compact is-success" id="iSpDidh76129" name="radio6">
<label class="fd-radio__label" for="iSpDidh76129">
Field label
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio fd-radio--compact is-invalid" id="iSpDidh76139" name="radio6">
<input type="radio" class="fd-radio fd-radio--compact is-error" id="iSpDidh76139" name="radio6">
<label class="fd-radio__label" for="iSpDidh76139">
Field label
</label>
Expand Down Expand Up @@ -521,13 +521,13 @@ In special cases, there are only two mutually exclusive options. Combine them in
<label class="fd-radio__label" for="iSpDidh7619d">Field label</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio fd-radio--compact is-valid" id="iSpDidh76129d" name="radio7" disabled>
<input type="radio" class="fd-radio fd-radio--compact is-success" id="iSpDidh76129d" name="radio7" disabled>
<label class="fd-radio__label" for="iSpDidh76129d">
Field label
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio fd-radio--compact is-invalid" id="iSpDidh76139d" name="radio7" disabled>
<input type="radio" class="fd-radio fd-radio--compact is-error" id="iSpDidh76139d" name="radio7" disabled>
<label class="fd-radio__label" for="iSpDidh76139d">
Field label
</label>
Expand Down Expand Up @@ -556,13 +556,13 @@ In special cases, there are only two mutually exclusive options. Combine them in
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio is-valid" id="radioRtl2" name="radiortl">
<input type="radio" class="fd-radio is-success" id="radioRtl2" name="radiortl">
<label class="fd-radio__label" for="radioRtl2">
Field label
</label>
</div>
<div class="fd-form-item">
<input type="radio" class="fd-radio is-invalid" id="radioRtl3" name="radiortl">
<input type="radio" class="fd-radio is-error" id="radioRtl3" name="radiortl">
<label class="fd-radio__label" for="radioRtl3">
Field label
</label>
Expand Down Expand Up @@ -706,19 +706,19 @@ Do not use the checkbox control if:
<legend class="fd-fieldset__legend">Checkboxes Error</legend>
<div class="fd-form-group">
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-invalid" id="Ai4ez6119">
<input type="checkbox" class="fd-checkbox is-error" id="Ai4ez6119">
<label class="fd-checkbox__label" for="Ai4ez6119">
Text Option
</label>
</div>
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-invalid" id="Ai4ez6129" checked>
<input type="checkbox" class="fd-checkbox is-error" id="Ai4ez6129" checked>
<label class="fd-checkbox__label" for="Ai4ez6129">
Selected State
</label>
</div>
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-invalid" id="Ai4ez613i1">
<input type="checkbox" class="fd-checkbox is-error" id="Ai4ez613i1">
<label class="fd-checkbox__label" for="Ai4ez613i1">
TriState Text
</label>
Expand All @@ -730,19 +730,19 @@ Do not use the checkbox control if:
<legend class="fd-fieldset__legend">Checkboxes Success</legend>
<div class="fd-form-group">
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-valid" id="Ai4ez61192">
<input type="checkbox" class="fd-checkbox is-success" id="Ai4ez61192">
<label class="fd-checkbox__label" for="Ai4ez61192">
Text Option
</label>
</div>
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-valid" id="Ai4ez61292" checked>
<input type="checkbox" class="fd-checkbox is-success" id="Ai4ez61292" checked>
<label class="fd-checkbox__label" for="Ai4ez61292">
Selected State
</label>
</div>
<div class="fd-form-item">
<input type="checkbox" class="fd-checkbox is-valid" id="Ai4ez613i2">
<input type="checkbox" class="fd-checkbox is-success" id="Ai4ez613i2">
<label class="fd-checkbox__label" for="Ai4ez613i2">
TriState Text
</label>
Expand Down
18 changes: 9 additions & 9 deletions docs/pages/components/input-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,16 +174,16 @@ The Input with add-on supports actions. Actions can be shown with a text label o

{% capture states %}
<div class="fd-form-item">
<label class="fd-form-label" for="">Valid (Success)</label>
<div class="fd-input-group is-valid">
<label class="fd-form-label" for="">Success</label>
<div class="fd-input-group is-success">
<span class="fd-input-group__addon">$</span>
<input class="fd-input fd-input-group__input" type="text" id="" name="" value="1234568910">
</div>
</div>
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="">Invalid (Error)</label>
<div class="fd-input-group is-invalid">
<label class="fd-form-label" for="">Error</label>
<div class="fd-input-group is-error">
<input class="fd-input fd-input-group__input" type="text" id="" name="" value="1000000">
<span class="fd-input-group__addon">
<span class="sap-icon--hide" role="presentation"></span>
Expand Down Expand Up @@ -220,16 +220,16 @@ The Input with add-on supports actions. Actions can be shown with a text label o
</div>
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="">Disabled Valid (Success)</label>
<div class="fd-input-group is-valid is-disabled">
<label class="fd-form-label" for="">Disabled Success</label>
<div class="fd-input-group is-success is-disabled">
<span class="fd-input-group__addon">$</span>
<input class="fd-input fd-input-group__input" disabled type="text" id="" name="" value="1234568910">
</div>
</div>
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="">Disabled Invalid (Error)</label>
<div class="fd-input-group is-invalid is-disabled">
<label class="fd-form-label" for="">Disabled Error</label>
<div class="fd-input-group is-error is-disabled">
<input class="fd-input fd-input-group__input" disabled type="text" id="" name="" value="1000000">
<span class="fd-input-group__addon">
<span class="sap-icon--hide" role="presentation"></span>
Expand Down Expand Up @@ -274,7 +274,7 @@ The Input Group supports **focus** state, it can be added by putting `.is-focus`
<br />
<div class="fd-form-item">
<label class="fd-form-label" for="">Error State</label>
<div class="fd-input-group is-invalid is-focus">
<div class="fd-input-group is-error is-focus">
<input class="fd-input fd-input-group__input" type="text" id="" name="" value="1000000">
<span class="fd-input-group__addon">
<span class="sap-icon--hide" role="presentation"></span>
Expand Down
8 changes: 4 additions & 4 deletions docs/pages/components/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,15 +430,15 @@ This can also be done by adding the `.is-readonly` class or the `aria-readonly="

## Semantic States
The semantic mode can be used to modify the select component by adding one of the
`is-invalid` | `is-valid` | `is-warning` | `is-information` classes into the `fd-select__control` element.
`is-error` | `is-success` | `is-warning` | `is-information` classes into the `fd-select__control` element.
To add text in the body of the component, simply include your text in the `fd-list__message` under the `ul` element.

{% capture semantic-select %}
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-valid" tabindex="0" aria-controls="h07jjhYH" aria-expanded="false" aria-haspopup="true">
Valid
<div class="fd-select__control is-success" tabindex="0" aria-controls="h07jjhYH" aria-expanded="false" aria-haspopup="true">
Success
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
</div>
Expand Down Expand Up @@ -476,7 +476,7 @@ To add text in the body of the component, simply include your text in the `fd-li
<div class="fd-popover">
<div class="fd-popover__control">
<div class="fd-select">
<div class="fd-select__control is-invalid" tabindex="0" aria-controls="h07j9978H" aria-expanded="false" aria-haspopup="true">
<div class="fd-select__control is-error" tabindex="0" aria-controls="h07j9978H" aria-expanded="false" aria-haspopup="true">
Error
<button class="fd-button sap-icon--slim-arrow-down fd-select__button"></button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/components/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ It is recommended to add the parameter `aria-selected="true"` to the row that is


## Table with semantic row highlighting
Table rows support semantic row highlighting with the modifiers `fd-table__row--valid`, `fd-table__row--warning`, `fd-table__row--error` and `fd-table__row--information`
Table rows support semantic row highlighting with the modifiers `fd-table__row--success`, `fd-table__row--warning`, `fd-table__row--error` and `fd-table__row--information`

{% capture table-checkbox %}
<table class="fd-table">
Expand All @@ -246,7 +246,7 @@ Table rows support semantic row highlighting with the modifiers `fd-table__row--
<td class="fd-table__cell">Last Name</td>
<td class="fd-table__cell">01/26/17</td>
</tr>
<tr class="fd-table__row fd-table__row--valid">
<tr class="fd-table__row fd-table__row--success">
<th class="fd-table__cell" scope="col">
<input type="checkbox" class="fd-checkbox" id="Ai4ez617">
<label class="fd-checkbox__label" for="Ai4ez617"></label>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/components/time.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ Multiple instances can be used in the `time-picker` to choose hours, minutes, se

## With Button State
Since the controls and inputs are standard components, they can take all states available to
buttons and forms respectively, e.g., disabled, .is-invalid. In this case, the buttons are
buttons and forms respectively, e.g., disabled, .is-error. In this case, the buttons are
disabled when the first or last values are reached.

{% capture default-timewplaceholder %}
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/patterns/combobox-input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,14 +255,14 @@ This can also be done by using the `.is-readonly` class or `aria-readonly="true"
For a complete list of states supported by the `combobox` component, please see the documentation for the form or select components.
<br/><br/>
The semantic mode can be used to modify the combobox component by adding one of
`is-invalid` | `is-valid` | `is-warning` | `is-information` classes into fd-input-group element.
`is-error` | `is-success` | `is-warning` | `is-information` classes into fd-input-group element.
To add text in the `body` of the component, simply include your text in the `fd-list__message` under the `ul` element.


{% capture semantic %}
<div class="fd-popover">
<div class="fd-popover__control" aria-controls="F4GcEX34" aria-expanded="false" aria-haspopup="true">
<div class="fd-input-group fd-input-group--control is-valid">
<div class="fd-input-group fd-input-group--control is-success">
<input type="text" class="fd-input fd-input--compact fd-input-group__input" id="" placeholder="Select Fruit">
<span class="fd-input-group__addon fd-input-group__addon--compact fd-input-group__addon--button">
<button class="fd-input-group__button fd-button--compact fd-button--light sap-icon--navigation-down-arrow fd-select__button"
Expand Down

0 comments on commit fdba361

Please sign in to comment.