Changelog
0.7.0
Updated dependencies:
phoenix_ecto
to4.5
phoenix_html
to4.1
- Added
phoenix_html_helpers
- Added
phoenix_live_view
to0.20
@primer/css
to21.2.2
Removed support for Ash Framework due to incompatible dependencies.
0.6.4
Reverted dependency @primer/css
to 21.0.9
because of an excessively increased file size in later versions.
0.6.3
Changes
- Class attrs now support class notation from Surface. Thanks @tunchamroeun!
- Component
pagination
: added class entry for "current_page" which now can receive a custom class.
0.6.2
Bug fixes
- Pagination: fixes the calculation when a gap between page numbers should be shown.
Other changes
- Pagination: added
role
and improved ARIA labels.
0.6.1
Bug fixes:
- Fixes reading the required state of input fields.
0.6.0
Added support for forms created with Ash Framework. See test/frameworks/ash/form_test.exs for an example.
0.5.4
Fixed a bug where the required marker would always be displayed, regardless of the field's required state.
0.5.3
Downgraded phoenix_live_view
version to 0.19
; both 0.19
and 0.20
should be compatible.
0.5.2
Added JS and CSS exports for Prompt functionality only. This is useful when you want to use menu/dialog/drawer behavior without Primer Design CSS. See the installation documentation for details.
0.5.1
Deprecated
- Component
avatar_pair
: renamedparent_child_avatar
toavatar_pair
. - Components
action_menu
andselect_menu
: renamedis_right_aligned
tois_aligned_end
(added RTL support). - Component
spinner
: renamedgap_color
tohighlight_color
.
New component
toggle_switch
: Toggle switch is used to immediately toggle a setting on or off.
Updated components
avatar
: Added attris_round
.avatar_pair
: Improved styling: support display inside flex container, add inner border to child avatar.button
- Improved dimensions according to Primer Style specs, including placing a trailing icon.
- Added attr
is_aligned_start
. Aligns contents to the start (at the left in left-to-right languages), while the dropdown caret (if any) is placed at the far end.
spinner
: Updated to latest Primer Style design.
0.5.0
Form elements have been revamped and aligned with the most recent form element documentation at Primer Style.
Deprecated
For all listed deprecations below: existing syntax will keep working, but log warnings will inform about the deprecation.
form_group
is replaced byform_control
(andis_form_group
is replaced byis_form_control
). When updating your code:- 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
andis_form_group
) contains a top and bottom margin. - Without a form group, text inputs (as well as selects) will be given a default width by the browser and will probably be displayed smaller than they currently are.
- 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
- The horizontal "tab-row" layout of
radio_group
is not mentioned in the Primer Design specification, while "Radio group" is (with vertical layout).- The current
radio_group
has been renamed toradio_tabs
. - The new component
radio_group
uses a vertical layout.
- The current
checkbox
andradio_button
slothint
has been renamed tocaption
.button_group
slotbutton
is replaced bybutton
components as children.- For consistency, attr
is_full
has been renamed tois_full_width
(inalert
andheader
slot:item
).
Improvements
- Added component
checkbox_group
. - Added convenience component
checkbox_in_group
for checkboxes inside acheckbox_group
. - Added component
radio_group
(with vertical layout). - Added attr
caption
to show hint message below the form fields.- Implemented for
select
,text_input
andtextarea
. - Implemented for
checkbox_group
andradio_group
to show a hint below the group label.
- Implemented for
- Added a required marker to
form_control
,checkbox_group
andradio_group
. The form control label will show a required marker if the field is required.- Added
is_required?
toFieldState
, so it can also be queried invalidation_message
andcaption
callbacks.
- Added
- Added disabled state to
form_control
:- With components
select
,text_input
andtextarea
: the attributedisabled
is automatically passed toform_control
. - When using component
form_control
on its own: set explicitly with attris_disabled
.
- With components
Removed
- Form element width variation attrs
is_short
andis_shorter
. These are no longer supported by Primer System. form_control
classbody
: this extra div is removed to simplify the styling of validation states.
0.4.0
Improvements
- The open state of menus and dialogs can now be maintained when used inside forms - see Menus and dialogs.
- Improved validation message logic.
- Updated components:
theme_menu_options
: added attrupdate_theme_event
: the event name to be called for updating the theme.radio_group
: added to slotradio_button
the attrlabel
to set a custom label.
- Updated
@primer/css
to21.0.7
.
Breaking changes
- Removed functions related to using session for theme state - see
PrimerLive.Theme
for alternatives. Removed:ThemeSessionController
ThemeEvent
- Theme hook
- IDs of checkboxes and radio buttons have been updated to only include valid characters.
Deprecated
- For all menu components, including 'dialog' and 'drawer': passing prompt options to the
toggle
slot is replaced by passingprompt_options
to the main component. - In the
drawer
component, replace the subcomponentdrawer_content
with the slotbody
.- This allows the focus wrap ID to be derived from the drawer's 'id' attribute, similar to how it is done for 'dialog'.
- When using the previous syntax, a warning message will be shown in the shell.
Other changes
- The HTML structure and some of the CSS classes of
action_menu
,dropdown_menu
andselect_menu
have changed. Instead of<details>
and<summary>
elements, the open state is now controlled with<input type="checkbox">
and<label>
. - HTML attributes are sorted alphabetically.
0.3.1
Replaced underscores in HTML element attributes with dashes because Phoenix LiveView 0.19 no longer does automatic substitution.
Updated components:
select
: attrprompt
is ignored whenis_multiple
is also used. This preventsPhoenix.HTML.Form.multiple_select
from raising an error.
0.3.0
Breaking change: action_list_item
now always renders a checkbox group, also when is_multiple_select
is set on the list items. This change makes handling form data in events more consistent: the data will always consist of a list of checkbox values.
0.2.7
Fixes a bug introduced in 0.2.6
where single select action_list_item
s did not get unique ids.
0.2.6
- Fixes a bug where
FormHelpers.field_state
did not handle forms without a changeset. - Updated components:
text_input
: added attrsname
andvalue
checkbox
: add attrschecked
,checked_value
,hidden_input
- Update
@primer/css
to21.0.0
.
0.2.5
Updated components:
action_menu
andselect_menu
:- Added
prompt
slot attroptions
to pass Prompt options. This enables (for example) to postpone submitting a form in the menu by callingsubmit
event in the Prompt functionswillHide
ordidHide
.
- Added
0.2.4
- Fixes a bug where variables in error messages where not interpolated.
- Update to
phoenix_html
3.3.x
0.2.3
- Clarified
layout
attributes to change the rendered order of slots. - Improve field name and id generation.
- Use checkboxes and radio buttons in action lists.
Updated component:
checkbox
:- Added attr
is_multiple
: When creating a list of checkboxes. Appends[]
to the input name so that a list of values is passed to the form events. - Added attr
is_omit_label
: Omits any label.
- Added attr
0.2.2
Updated component:
text_input
:- Moved attr
is_trailing_action_divider
to slottrailing_action
asis_divider
- Added attr
is_visible_with_value
to slottrailing_action
to only show the trailing action when the input has a value. Use this cor example to show a clear button only when the input has a value to clear.
- Moved attr
0.2.1
Rework of form controls
The rework includes styles from Primer ViewComponents. The form styles from this flavor of Primer is more mature than the generally used Primer CSS.
Updated components:
text_input
:- Added attr
is_monospace
- Added slots
leading_visual
andtrailing_action
- Added attr
is_trailing_action_divider
- Inputs inside a form group no longer have a background color by default; use
is_contrast
to set it explicitly - Removed validation message for hidden inputs
- Added attr
textarea
:- Added attr
is_monospace
- Use
is_contrast
to explicitly set a contrasting background color
- Added attr
checkbox
andradio_button
- Have a clearer (more colorful) appearance
- Changed the HTML structure
radio_group
- For consistency, added input styling from Primer ViewComponents radio button (keeping the initial size)
select
:- Added wrapper HTML element
- Added attr
is_monospace
- Added attr
is_large
- Added attr
is_short
- Added attr
is_shorter
- Added attr
is_full_width
- Improved styling for multiple select
subnav
with search field:- Added attr
is_wrap
to wrap child elements - Improved CSS for small screens
- Added attr
Added component:
input_validation_message
- can be used as standalone message component for inputs where the position of the validation feedback is not so obvious, for example lists of checkboxes or radio buttons
Additional:
- Added styling for input elements inside a disabled fieldset
Integration of npm dependencies
JavaScript and CSS dependencies (from npm library primer-live
) are now incorporated in the Elixir package. The installation instructions are slightly simplified (see the documentation) and are recommended for a fresh setup. The previous installation method works just fine for existing projects.
0.1.16
Added anchor link attributes to button
to create a link that looks like a button.
0.1.15
Removed Octicon builder template files from distribution.
0.1.14
- Updated
octicons
dependency to17.10.1
- Code quality refactoring
- Documentation updates
0.1.13
Added:
theme_menu_options
to create a theme menuTheme.html_attributes
to set theme attributes on elements- Theme functions for persistent theme data in the session
0.1.12
Fixes an issue where validation messages did not show.
0.1.11
Added:
theme
0.1.10
Updated:
- Prevent attribute open on select menu
0.1.9
Added:
styled_html
0.1.8
Updated:
- Removed requirement for Elixir version
0.1.7
Updated:
- Added
is_small
fortabnav
items
0.1.6
Updated:
oticon
icons
0.1.5
Added:
drawer
0.1.4
Bug fix:
- Improve
action_menu
on mobile
0.1.3
Added:
action_menu
0.1.2
Bug fix:
action_link_item
: pass class tolink
slot.
0.1.1
First release.