Current section
48 Versions
Jump to
Current section
48 Versions
Compare versions
14
files changed
+757
additions
-71
deletions
| @@ -1,5 +1,43 @@ | |
| 1 1 | # Changelog |
| 2 2 | |
| 3 | + ## 0.5.0 |
| 4 | + |
| 5 | + Form elements have been revamped and aligned with the most recent [form element documentation at Primer Style](https://primer.style/design/ui-patterns/forms/overview). |
| 6 | + |
| 7 | + ### Deprecated |
| 8 | + |
| 9 | + For all listed deprecations below: existing syntax will keep working, but log warnings will inform about the deprecation. |
| 10 | + |
| 11 | + - `form_group` is replaced by `form_control` (and `is_form_group` is replaced by `is_form_control`). When updating your code: |
| 12 | + - You may need to add styling to correct the missing whitespace at top and bottom, because class "form-group" (which is also added when using attrs `form_group` and `is_form_group`) contains a top and bottom margin. |
| 13 | + - Without a form group, text inputs (as well as selects) [will be given a default width by the browser](https://primer.style/design/components/text-input#width) and will probably be displayed smaller than they currently are. |
| 14 | + - The horizontal "tab-row" layout of `radio_group` is not mentioned in the Primer Design specification, while "Radio group" is (with vertical layout). |
| 15 | + - The current `radio_group` has been renamed to `radio_tabs`. |
| 16 | + - The new component `radio_group` uses a vertical layout. |
| 17 | + - `checkbox` and `radio_button` slot `hint` has been renamed to `caption`. |
| 18 | + - `button_group` slot `button` is replaced by `button` components as children. |
| 19 | + - For consistency, attr `is_full` has been renamed to `is_full_width` (in `alert` and `header` slot: `item`). |
| 20 | + |
| 21 | + ### Improvements |
| 22 | + |
| 23 | + - Added component `checkbox_group`. |
| 24 | + - Added convenience component `checkbox_in_group` for checkboxes inside a `checkbox_group`. |
| 25 | + - Added component `radio_group` (with vertical layout). |
| 26 | + - Added attr `caption` to show **hint message** below the form fields. |
| 27 | + - Implemented for `select`, `text_input` and `textarea`. |
| 28 | + - Implemented for `checkbox_group` and `radio_group` to show a hint below the group label. |
| 29 | + - Added a **required marker** to `form_control`, `checkbox_group` and `radio_group`. The form control label will show a required marker if the field is required. |
| 30 | + - Added `is_required?` to `FieldState`, so it can also be queried in `validation_message` and `caption` callbacks. |
| 31 | + - Added **disabled state** to `form_control`: |
| 32 | + - With components `select`, `text_input` and `textarea`: the attribute `disabled` is automatically passed to `form_control`. |
| 33 | + - When using component `form_control` on its own: set explicitly with attr `is_disabled`. |
| 34 | + |
| 35 | + ### Removed |
| 36 | + |
| 37 | + - Form element width variation attrs `is_short` and `is_shorter`. These are no longer supported by Primer System. |
| 38 | + - `form_control` class `body`: this extra div is removed to simplify the styling of validation states. |
| 39 | + |
| 40 | + |
| 3 41 | ## 0.4.0 |
| 4 42 | |
| 5 43 | ### Improvements |
| @@ -5,7 +5,7 @@ An implementation of GitHub's <a href="https://primer.style/design/" target="bla | |
| 5 5 | </p> |
| 6 6 | |
| 7 7 | <p> |
| 8 | - The Primer Design System provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms. |
| 8 | + Primer Design provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms. |
| 9 9 | </p> |
| 10 10 | |
| 11 11 | <p> |
| @@ -1,7 +1,7 @@ | |
| 1 1 | {<<"links">>, |
| 2 2 | [{<<"GitHub">>,<<"https://github.com/ArthurClemens/primer_live">>}]}. |
| 3 3 | {<<"name">>,<<"primer_live">>}. |
| 4 | - {<<"version">>,<<"0.4.1">>}. |
| 4 | + {<<"version">>,<<"0.5.0">>}. |
| 5 5 | {<<"description">>, |
| 6 6 | <<"An implementation of GitHub's Primer Design System for Phoenix LiveView.">>}. |
| 7 7 | {<<"app">>,<<"primer_live">>}. |
unknownlib/component.ex
File is too large to be displayed (100 KB limit).
| @@ -3,17 +3,21 @@ defmodule PrimerLive.FieldState do | |
| 3 3 | State object with validation data for a particular form field. |
| 4 4 | |
| 5 5 | Struct fields: |
| 6 | + - `caption` - Field hint message that may be rendered dependent on the field state. |
| 6 7 | - `changeset` - `Ecto.Changeset` struct. |
| 7 8 | - `field_errors` - Changeset `errors`, filtered for the field. |
| 8 | - - `valid?` - True if changeset's `field_errors` is empty for the field. |
| 9 9 | - `ignore_errors?` - Changeset has errors but should not be displayed (currently when `changeset.action` is `nil`) |
| 10 | - - `message` - Default message derived from changeset `errors`, unless overridden by `validation_message` attribute. |
| 11 10 | - `message_id` - Generated id that is used for `aria_describedby`. |
| 11 | + - `message` - Default message derived from changeset `errors`, unless overridden by `validation_message` attribute. |
| 12 | + - `required?` - True if the field is marked as required in the changeset (the `changeset.errors` contains value `[validation: :required]`). |
| 13 | + - `valid?` - True if changeset's `field_errors` is empty for the field. |
| 12 14 | """ |
| 13 | - defstruct valid?: false, |
| 14 | - ignore_errors?: false, |
| 15 | + defstruct caption: nil, |
| 15 16 | changeset: nil, |
| 16 | - message: nil, |
| 17 | + field_errors: [], |
| 18 | + ignore_errors?: false, |
| 17 19 | message_id: nil, |
| 18 | - field_errors: [] |
| 20 | + message: nil, |
| 21 | + required?: false, |
| 22 | + valid?: false |
| 19 23 | end |
Loading more files…