- Changed
ui_tabs
andui_tab_button
to follow accessibility guidelines: replaced the<ul>
with a<div role="tablist">
and instead of nesting the buttons inside<li>
s they are now the direct children of thediv
and have arole="tab"
set. As a side effect the gap between the tabs is now a little smaller.
- Switched bitstyles version comparisons from string comparisons to tuple comparisons, which will ensure correct output if bitstyles version ever contains a number above 9.
- Modified the process of downgrading classnames to the target bitstyles version by chaining renames. This is necessary preparation work to support bitstyles
v6.0.0
. - Added support for bitstyles
v6.0.0
. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstylesv6.0.0
.
Follow the bitstyles changelog for version 6.0.0.
There are no changes to bitstyles_phoenix component APIs.
- Added support for phoenix_html
v4
. You can also continue using phoenix_htmlv3
. To replacePhoenix.HTML.Form
input helpers removed in phoenix_htmlv4
, new componentsui_raw_input
andui_raw_label
were added. - Added support for bitstyles
v5.0.0
. You can continue using bitstyles_phoenix with a lower bitstyles version, or migrate your codebase to bitstylesv5.0.0
.
Follow the bitstyles changelog for versions 5.0.0 and 5.0.0-alpha-1. Even if you're using the BitstylesPhoenix.Helper.Classnames.classnames/1
helper to apply bitstyles classes in your own codebase, you will still need to migrate some of them yourself. For example, the class u-gap-m
could not have been migrated via the helper because it exists in both bitstyles versions with different meanings (u-gap-m
and u-gap-l
in bitstyles 4.3.0 are equivalent to u-gap-l
and u-gap-xl
in bitstyles v5.0.0
).
The variant
attribute of the Button
component is deprecated in bitstyles v5.0.0
. Use the attributes shape
and color
instead.
- Bump LiveView.
- Add
Modal
component.
- Updated to LiveView 0.18.18.
- Add
Card
andAvatar
components.
- Fixed version backwards compatibility.
- Add
heading_class
option toui_section_title
to set classes on the heading ui_dl_items
now aligns the items to the baseline (following the Bitstyles examples)- Updated to bitstyles
v4.3.0
.
- Inputs now render a required label *. This can be configured via
required_label
config. If you do not want this new behaviour, define an empty component as required label.
- When
ui_button
is disabled it always renders a button now instead of a link with a disabled property. In most cases this should be fine, but it could break e2e tests that check for links or similar things.
Since there is quite some changes in liveview 0.18.0 mainly about link helpers this breaks with the existing API for the ui_button
and
ui_icon_button
components quite a lot. Since the underlying phoenix helper for generating links is now available as component as well,
the support for the ui_button
as helper is dropped completely in favor of components.
- Updated to LiveView 0.18.X
- Removed BitstylesPhoenix.Helpers.Button
- Removed
ui_button/2
helper -> Use theui_button
component - Removed
ui_icon_button/3
helper -> Use theui_icon_button
component
- Removed
ui_button
component now acts as a wrapper for Phoenix.Component.link- Removed
link_fn
onui_button
component, since it's main use-case is now deprecated.
- Removed
- Upgrade to LiveView > 0.18
<%= ui_button("some label", to: some_path) %>
=><.ui_button href={some_path}>some label</.ui_button>
<.ui_button to={some_path} %>some label</.ui_button>
=><.ui_button href={some_path}>some label</.ui_button>
<.ui_button to={some_path} link_fn={&live_redirect/2}%>some label</.ui_button>
=><.ui_button navigate={some_path}>some label</.ui_button>
<.ui_button to={some_path} link_fn={&live_patch/2}%>some label</.ui_button>
=><.ui_button patch={some_path}>some label</.ui_button>
<%= ui_icon_button("some label", to: some_path) %>
=><.ui_icon_button href={some_path}>some label</.ui_button>
...
This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent developments in Phoenix and LiveView.
All ui_*
component helpers are now instead HEEx function components. They will expect the options and arguments
now through component attributes. The only exception is ui_button
, which still delegate to the link_helper given via link_fn
, but is also available as component.
In order to migrate to the new components update to Phoenix 1.6.0 and LiveView 1.17.0 and change all templates from
*.html.eex
to *.html.heex
to be able to use the new component syntax. After that you can change your previous ui_*
helpers to use the new syntax:
<%= ui_badge("foo", variant: "warning") %>
=> <.ui_badge variant: "warning">foo</.ui_badge>
If you have contexts, where you do not want to use heex
templates yet, you can call the functions via Phoenix.LiveView.Helpers.component/2
.
Below is a list of changes that happened besides the componentization:
- Renamed
ui_error_tag
toui_error
ui_input
droppeddatetime
input type (was not working anyways)ui_input
droppedradio
input type (useui_unwrapped_input
withradio_button
instead)ui_input
droppedtextarea
input type (useui_textarea
instead)- Removed
ui_time/2
without replacement for now - Removed
xclassnames/1
. Useclassnames/1
from the same module instead. classnames/1
now returnsfalse
instead of empty string when there is no class set.- Removed
BitstylesPhoenix.Components
module. Instead ofuse BitstylesPhoenix.Components
douse BitstylesPhoenix
. - Removed all
e2e_classname
options. Useclass
instead, which will trim the e2e classes by default (like before). - Changed
trim_e2e_classes
config. In order to migrate change the following=>config :bitstyles_phoenix, :trim_e2e_classes, false
config :bitstyles_phoenix, :trim_e2e_classes, [enabled: false]
- All components now accept extra attributes that are passed on to the outermost parent attribute.
- Config option to configure
classnames/1
prefixes to remove other prefixes thane2e-
instead (e.g.test-
). - Backwards compatibility option for different versions of
bitstyles
(seebitstyles_version
config option) - The
BitstylesPhoenix.Icon
componentsfile
attribute can now get a default value viaicon_file
application config. ui_dropdown
andui_js_dropdown
(Live/Alpine3) componentsBitstylesPhoenix.Live
andBitstylesPhoenix.Alpine3
for quick imports of the live and alpine3 components- Integration tests and example configuration with the
demo
app - Added
ui_icon_button/2
&ui_icon_button/3
as helpers. - Added various new components:
Button
,Tabs
,Breadcrumbs
,Sidebar
,Dropdown
,Content
... - Added
icon
option toui_button
. - Added support for
:datetime
type inui_input
, rendered as Browser-native datetime input element
- Added dependency to
phoenix_live_view
>= 1.17.0 (for usingsigil_H/1
and new component syntax) - Doctest now use
floki
to prettify the output HTML, so docs will be a nicer read. classnames/1
is now imported by default withuse BitstylesPhoenix
- Updated to bitstyles
v3.0.0
ui_errors
now uses larger padding
- Updated
phoenix_html
dependency to~> 3
. See its changelog for backwards incompatible changes.
- Added
link_fn
option inui_button
to support LiveView'slive_patch
/live_redirect
- Updated dependencies
- Update to bitstyles 1.5.0 (Update flash component padding)
- Fix
use BitstylesPhoenix.Components
(see #34)
- Better documentation for form helpers
- Multiple errors on ones field are now rendered as a list
- Do not forward options from form helpers to each
label
anymore, but instead pass options throughlabel_opts
. - Drop
hidden
andreset
input types forui_input
.
- deprecated
ui_error/2
in favour of the newui_errors/2
BitstylesPhoenix.UseSVG.ui_svg/2
to display inline svg references with<use>
tags and support for external SVGs.- Make
BitstylesPhoenix.Icon.ui_icon/2
useui_svg
internally to support theexternal
option.
- Fix icons in docs for
BitstylesPhoenix.Icon.ui_icon/2
.
- Examples and showcases are now inlined and doctested, to assure they won't break and to be more scalable for more components.
- Restructured top level module doc
- Badge component
- Flash component
- New option to specify pixel width & height for SVG icons
- Added a CHANGELOG.md, this file
- Moved components from
BitstylesPhoenix.Components.*
toBitstylesPhoenix.*
. Not actionable if you useuse BitstylesPhoenix.Components