- New: <.rating> component
- Fixed: error was showing prematurely on forms
- Updated: Slideover now accepts a close target for when it is in a live_component
- Fixed: Disabled buttons and links should not do anything when clicked
- Fixed:
hidden_inputnot working correctly inform_field. Thanks @BobbieBarker! - Fixed:
disabledattribute wasn't working on non-button buttons (eg. a live_redirect) - Fixed: Added alpine JS x-cloak hidden in CSS to avoid flash of unstyled content
- Fixed: fixed an issue where phx-feedback-for was not being properly included inside of the form_field component (thanks @BobbieBarker)
- Update: Make paragraph text easier to read
- Fixed issue "The
invalid-feedbackclass does not exist" [#141]
- Extracted classnames for each component into a CSS file using BEM naming convention. This allows for more flexibility in styling and theming.
- Fixed: support button attrs: 'value', 'name'
- Fixed: support form element attr: 'accept'
- Fixed: support link attr: 'download'
- Fix: <.th> can now accept colspan and rowspan
- New: Button now can take an icon name as an attribute. eg
<.button icon={:home} label="Home" />
- Fixed disabled buttons
- New:
<.hidden_input>form element - Added "list" attr warning for inputs
- Added "for" attr warning for label
- Changed: form_help_text colours
- New <.icon> functional component that renders a dynamic Heroicon (v2)
- Added label_class attr to all form inputs so you can change the look of labels
- Fixed "checked" attr for checkbox_group use with form_field
- Added: help text for form fields
- Enhancement: <.td> can now accept colspan and rowspan attributes
- Enhancement: Added some optional textarea attributes: cols, rows and wrap
- Fixed: checkbox_group "checked" attr wasn't getting passed through
- Fixed: checkbox label wasn't working when no label attr was passed
- Enhancement: Dropdowns are more customisable with classes
- Chore: Cleaned up form field attrs
- Fix: Changed the heading attr :no_margin to be a :boolean
- Fixed form_field class attribute - it wasn't getting appended to the input classes properly
- Added declarative assigns for all components
- Fix default green button having the wrong background
- Fix compilation error on form.ex
- Fixed compilation errors in accordion
- Fix accordion icon not animating when opening
- Add disabled classes for checkbox
- HeroiconsV1 do not have default classes anymore
- Fix issue where
.icon_buttonsvg icons were not the correct size
- Sorry, the last release was meant to be minor, not patch
- Updated to work with Live View 0.18 - see UPGRADE_GUIDE.md
- Disabled fields fixed in dark mode - thanks @moogle19
- Pagination component can receive a function as a parameter that will define the path of the page - thanks @Wigny
Breaking changes
<.link>was renamed to<.a>.- Renamed
HeroiconstoHeroiconsV1
- Fix 'modal' IDs used at SlideOver component
- Make accordion items dynamic
- Add coveralls + dependabot
- Remove credo from ci
- Add codecov token
- Add mix audit alias
- Add codecov badge
- Use string.replace to allow "-"
- Make borders for radio and checkbox consistent with other inputs
- Fixed pagination control if users set sibling_count to less than 1 or boundary_count less than 1
- Moved Pagination.get_items to PaginationInternal.get_pagination_items so we can get at it in the unit tests
- Fixed issue where closing modal/slideover caused two events to be fired
- Move card bg colors to the parent div
- modified accordion aesthetic
- differentiated white inverted button type
- Added an inverted button type that fills the outlined button on hover
- Added ring/border to card and table to add more distinction on white backgrounds
- Added a bg color and shadow to accordion
- Modals - only send close_modal event to target if provided
- New components: <.prose>, <.ul>, <.ol>
- Modals fade in (extra CSS required)
- Improve readability of card content in dark mode
- Extra assigns on <.p> are forwarded to the p tag
- Fix extra_assigns in headings
- Fix dropdown button not closing when clicked
- Generate prettier classes with build_class
- Accordion
- Now use inline-block for icon buttons
- Switch - new form component
- Slide Over
- Added info, warning and gray variants to buttons
- Added gray variant to progress
- Fixed progress test
- Form does not leak the class assign as it's already set from classes
- Made tabs text in dark mode lighter and changed assigns_to_attributes to be consistent with other components
- Added info, warning and gray variants to buttons
- Added gray variant to progress
- Fixed progress test
- Form does not leak the class assign as it's already set from classes
- Made tabs text in dark mode lighter and changed assigns_to_attributes to be consistent with other components
- Excluded label and sub_label in the user_inner_td
- Fixed pagination to work when less than 5 pages
- Fixed corners of red bg on file input error
- Removed prop references to size_class, rename size_class / css_class to :string
- Updated the heroicons generator to use "extra_assigns" instead of "extra_attributes"
- Fixed table to accept extra attributes and updated table tests
- added user_inner_td and fixed formatting where thead and tbody are required
- added row layout to radio group
- Fixed button type not working
- Table
- Icon buttons
- Made a link type button and refactored dropdown
- Removed negative margin on spinner
- Removed unnecessary underline statement in tabs
- Removed excess class "border-transparent" from white button
- Fixed bug with placeholder avatars
- Fix issue where untouched inputs were highlighted red
- Added object-cover to card_media
- Heroicons.Solid icons size defaults to "w-5 h-5" as recommended in their docs
- Form inputs no longer show errors before they have been touched by the user. To get this to work, I had to remove the error classes off the inputs themselves, so they no longer turn red on error by default. However, you can turn this back on by adding these rules to your app.css file (we will update the install docs with this):
label.has-error:not(.phx-no-feedback) {
@apply !text-red-900 dark:!text-red-200;
}
textarea.has-error:not(.phx-no-feedback), input.has-error:not(.phx-no-feedback), select.has-error:not(.phx-no-feedback) {
@apply !border-red-500 focus:!border-red-500 !text-red-900 !placeholder-red-700 !bg-red-50 dark:!text-red-100 dark:!placeholder-red-300 dark:!bg-red-900;
}
input[type=file_input].has-error:not(.phx-no-feedback) {
@apply !border-red-500 !rounded-md focus:!border-red-500 !text-red-900 !placeholder-red-700 !bg-red-50 file:!border-none dark:!border-none dark:!bg-[#160B0B] dark:text-red-400;
}
input[type=checkbox].has-error:not(.phx-no-feedback) {
@apply !border-red-500 !text-red-900 dark:!text-red-200;
}
input[type=radio].has-error:not(.phx-no-feedback) {
@apply !border-red-500;
}
- Fixed <.a> emitting white spaces
- Fixed white button background
- Removed pure_white button shadow variant and fixed white bg for shadow
- Fixed Heroicons sometimes failing
- Fixed card_media not working properly on Safari
- Added <.card_footer> for content you would like fixed to the bottom of a card
- Added
category_color_classto <.card_content> so that you can customize category colors
- <.h1>, <.h2> etc now turn into those underlying html elements (h1, h2 etc)
- <.card_media> utilises Tailwinds aspect-ratio classes
- Fix <.card>
classassigns appearing twice
- Buttons can now take custom classes
- [BREAKING CHANGE] Rename alert property "state" to "color"
- Add checkbox_group form field type
- Fix z-index issue with dropdown
- Update Alert colors
- Add icons to badges
- Fixed z-index issue with dropdowns
- Fixed
<.dropdown_menu_item>where extra_attributes weren't being passed to underlying button - Fixed z-index issue on dropdowns
- New form component
<.date_select ...> - New form component
<.date_input ...> - Add dark mode to components
- Fix dropdown failing when no label provided
- Fix dropdown button not having type=button
- Allow dropdown to have custom trigger buttons
- New component: Card
- Button colored shadow option
- Improve styling on disabled inputs
- Allow custom attributes to be forwarded to underlying svg element on Heroicons
- New component: Tabs
- Fix button that was failing when in a loading state and no size given
- Avatar now uses the
object-coverclass for non-square images - New badge variations
- Badge can now accept a class prop
- Breadcrumbs no longer need a parent flex container
- Default the modal max_width to md
- New component:
<.modal> - Fixed container not defaulting to full width when inside a flex
- Add docs for
<.p>and heading params
<.a>,<.button>and<.dropdown_menu_item>all now takemethodas a parameter. eg.<.a method={:delete} to="/logout" label="Logout" />
- Added
<.pagination> - Added
<.progress> - Improved
<.a>to work as a live_patch or live_rediect
- Added new form components ("email_input", "number_input", "password_input", "search_input", "telephone_input", "url_input", "time_input", "time_select", "datetime_local_input", "datetime_select", "color_input", "file_input", "range_input")
<.spinner>defaults to visible
- Add new component Avatar
<.form_field>now shows errors from changesets
- Added breadcrumbs components
- Removed unnecessary badge colors
- import instead of alias the functions
- removed references to assigns in the HEEX templates to allow proper change tracking
- form functions like text_input now only create an input without the label
- added a
form_fieldfunction that will include the label - fixed the spinner on different button sizes
- removed alert sizing - stick with on size for now
- Fixed Alert.alert not allowing wrapping
- Added heading parameter to Alert.alert
- Updated dropdown to include live_patch and live_redirect
- Added new component Alert
- Added new component Loading
- Added some tests