-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from jouni/v0.3
v0.3
- Loading branch information
Showing
69 changed files
with
9,260 additions
and
4,057 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,72 @@ | ||
| # Field <maturity-badge proto>(Prototype)</maturity-badge> | ||
| # Field <maturity-badge preview>(Preview)</maturity-badge> | ||
|
|
||
| ```javascript | ||
| import {JField} from 'j-elements'; | ||
| ``` | ||
|
|
||
| `<j-field>` is a wrapper element that allows you to add a label and an error message to any input element. | ||
|
|
||
| ### Text field | ||
| It handles accessibility for you automatically, without the need to manually use `id` and `for` attributes to bind the label and the field, as well as showing validation error messages (and making them accessible as well). | ||
|
|
||
| > The label is currently announces twice on VoiceOver on macOS Safari. | ||
| ## Label | ||
| ```html,live | ||
| <j-field> | ||
| <label>Label</label> | ||
| <input type="text" required> | ||
| <p error-message>Error message</p> | ||
| <j-input></j-input> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Text field (no label) | ||
| ## Required validation | ||
| ```html,live | ||
| <j-field> | ||
| <input type="text" required> | ||
| <p error-message>Error message</p> | ||
| <label>Label</label> | ||
| <j-input required minlength="3"></j-input> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Text area | ||
| ## Pattern validation | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <textarea required></textarea> | ||
| <p error-message>Error message</p> | ||
| <label>Label</label> | ||
| <j-input pattern="[0-9]+"></j-input> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Date field | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <input type="date" required> | ||
| <p error-message>Error message</p> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Checkbox group | ||
| ## Custom error message | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <label><input type="checkbox"> Option</label> | ||
| <label><input type="checkbox" required> Option</label> | ||
| <p error-message>Error message</p> | ||
| <label>Label</label> | ||
| <j-input required error-message="You should really type something here"></j-input> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Radio button group | ||
| ## Native text input | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <label><input type="radio" required> Option</label> | ||
| <label><input type="radio"> Option</label> | ||
| <label><input type="radio"> Option</label> | ||
| <p error-message>Error message</p> | ||
| <label>Label</label> | ||
| <input type="text" required pattern="[0-9]+"> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Slider | ||
| ## Native date input | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <input type="range"> | ||
| <label>Choose a date</label> | ||
| <input type="date" required> | ||
| </j-field> | ||
| ``` | ||
|
|
||
| ### Vaadin Text Field | ||
| ## Native select | ||
| ```html,live | ||
| <j-field> | ||
| <label slot="label">Label</label> | ||
| <vaadin-text-field required></vaadin-text-field> | ||
| <p error-message>Error message</p> | ||
| <label>Select an option</label> | ||
| <select required> | ||
| <option></option> | ||
| <option>Option one</option> | ||
| <option>Option two</option> | ||
| <option>Option three</option> | ||
| </select> | ||
| </j-field> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| # Input <maturity-badge preview>(Preview)</maturity-badge> | ||
|
|
||
| ```javascript | ||
| import {JInput} from 'j-elements'; | ||
| ``` | ||
|
|
||
| ## Problem | ||
|
|
||
| The native `<input>` element is not styled consistently across different browsers and does not allow placing additional content inside it. | ||
|
|
||
| ## Solution | ||
|
|
||
| `<j-input>` is a text input element which adds prefix and suffix element support, multi-line and autosizing (both horizontal and vertical) for the native `<input>` element. | ||
|
|
||
|
|
||
| ## Examples | ||
|
|
||
| ### Default configuration | ||
| ```html,live | ||
| <j-input placeholder="Type here"></j-input> | ||
| ``` | ||
|
|
||
| ### Autosize | ||
| ```html,live | ||
| <j-input value="Auto width" autosize></j-input> | ||
| ``` | ||
|
|
||
| ### Number input | ||
| With prefix and suffix elements. | ||
| ```html,live | ||
| <j-input value="123" type="number" autosize> | ||
| <span slot="start">$</span> | ||
| <span slot="end" style="margin-left: 0;">.00</span> | ||
| </j-input> | ||
| ``` | ||
|
|
||
| ### Multi-line | ||
| Multi-line inputs are user-resizable by default in both directions. You can control this with the `resize` CSS property. | ||
| ```html,live | ||
| <j-input multiline placeholder="Type a lot here"></j-input> | ||
| ``` | ||
|
|
||
| ### Multi-line, autosize | ||
| The autosizing multi-line input prevents user-resizing by default. | ||
| ```html,live | ||
| <j-input multiline value="Auto\nheight" autosize></j-input> | ||
| ``` | ||
|
|
||
| ## Styling | ||
|
|
||
| The input can be styled similarly as the native `<input>` element, using border, background, padding, box-shadow, display, etc. | ||
|
|
||
| The only exception is the `:focus` and `:focus-visible` pseudo-classes – use the `[focus]` and `[focus-visible]` state attributes instead. | ||
|
|
||
| ```html,live | ||
| <j-input class="custom"></j-input> | ||
| <style> | ||
| j-input.custom { | ||
| border-width: 2px; | ||
| background-color: #eee; | ||
| font-weight: bold; | ||
| padding: 0.8em 1em; | ||
| border-radius: 1em; | ||
| } | ||
| j-input.custom:hover { | ||
| border-color: #666; | ||
| background-color: #fff; | ||
| } | ||
| j-input.custom[focus] { | ||
| border-color: orange; | ||
| box-shadow: 0 0 0 4px yellow; | ||
| } | ||
| </style> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.