- Added Marquee component
- Added review_card
- add no_margin to p tags
- add tests and a11y checks pass
- style icon better for cross browser support
- update stepper with better responsiveness across vertical and horizontal orientations
- update input to accept clearable, copyable and viewable
- New Stepper component
- New Radio Card field
- Adds viewable icon to password field and upgrades date and time icons to heroicons for cleaner look and to facilitate dark mode better
- Adds copyable and clearable functionality to respective fields
- bump default switch size to md
- fix rendering .alert with HTML fails #361
- missing w-full and adds test for pc-accordion--ghost
- fix, variant classes not passing through correctly
- Allow for different switch sizes and fix some error state colors
- Provide more variants for alert and badge (soft) to allow better support for dark mode
- Bump a11y_audit from 0.2.0 to 0.2.1
- Fixes slide over opening animation
- Update accordion so that you can set a particular item to be open at render
- update button_group to support custom bg and border style props
- move button_group classes into default css file
- update button_group classes
- Adds new ghost table variant for extremely clean look
- Items center correctly for the Icon Button by @mitkins in petalframework#352
- implement button_group/1 component by @tylerbarker in petalframework#351
- Add skeleton css classes to default css to allow for configurability
- Fixed margin and dark mode for Avatar placeholder
- Fixed: heroicon pattern matching is based on deps folder - rather than dependencies listed for petal_components
- Improved error messages for incorrect heroicon names
- Ensure css transitions don't cause flaky tests
- Remove text placeholder from image skeleton to match video skeleton
- a11y improvements by @tylerbarker in petalframework#331
- Make Petal Components Accessible by @tylerbarker in petalframework#326
- Aligns .icon with latest heroicon method by @mitkins in petalframework#340
- Generate list of heroicons if the dependency exists by @mitkins in petalframework#345
- Skeleton placeholder to be shown when loading content by @GraphiteSprite in petalframework#319
- Hide dropdown when pressing escape by @RobinBoers in petalframework#334
- Remove
for
attribute inradio-group
label by @tegon in petalframework#333 - Remove for attribute in checkbox-group label by @mitkins in petalframework#336
- Use
spans
instead oflabels
if there is nofor
attribute by @mitkins in petalframework#344 - Cleanup type of class attrs by @nallwhy in petalframework#329
- Add default_js_lib config by @nallwhy in petalframework#335
- Rounds the width of the progress component to 2 decimal places
- Adds optional empty states for tables.
- named slot :empty_state
- always rendered at the top of the table into a cell that spans the whole width (the width is derived from the number of :col slots supplied)
- the row that holds the cell has hidden only:table-row Tailwind classes so it's only visible if it's the only row
- the slot takes row_class that is then forwarded to the cell
- renders multiple cells if more than one :empty_state slot is given
- Fix modal class
- Removes scale classes on sm size and up for slideover
- <.vertical_menu> - add support for liveview JS (thanks to @mrdotb)
- <.table> - now supports dynamic data and col slots
- Updated deps
- Use new PhoenixHTMLHelpers lib
- Fix bug where the close_modal event gets sent twice to the LiveView if you push_patch from the close_modal handle_event in the LiveView - thanks @axelclark
- Fix form_field switch class bug [#275]
- Vertical menu items no longer require an icon
- Added close_on_click_away to
<.slide_over>
(thx @samuelpordeus) - Added close_on_escape to
<.slide_over>
(thx @samuelpordeus) - Added fade in transition to
<.slide_over>
- Cleaned up classes in codebase (deprecated build_class)
- Default loading spinner to shrink-0 to enforce its size
- Add pagination attribute allowing always shown prev and next buttons
- Pagination support encoded path
- icon-support-to-breadcrumb-link
- Fix: <.button disabled> where link_type not "button" now shows proper cursor and isn't clickable
- Fix: <.a> now uses <.link> underneath to avoid warnings with live_view 0.20.0
- Update: live_view bumped to 0.20.0
- adds an attribute to
hide_close_button
in the modal header
- Changed close icon svg to Heroicons
- Allow configurability of menu icons active/inactive state + test
- Added BEM classnames for menu components
- Add
disabled
attribute to Tab component
- New high-contrast
dark
button color - Breaking change: please update Tailwind in config.exs to
3.3.3
then runmix tailwind.install
- Add target attribute for sending pagination events to LiveComponents
- Add
close_on_click_away
attr on modal [Issue 253)[petalframework#253] - Add
close_on_escape
on modal
- Added type=button to close modal button
- Added support for disabled attribute on dropdown menu items
- Added type=button to close slide over button
- Fix: Icon button setting info to primary + test
- input can now be passed a class attribute
- Add option to send events in pagination component
- Added support for styling last accordion item
- Added checked_value and unchecked_value to switch global rest
- Updated accordion class name from "pc-accordion-item--last" to "pc-accordion-item--all-except-last"
- New: <.vertical_menu> component
- New: <.user_dropdown_menu> component
- Fix: Modal phx-remove call to hide_modal
- New: form fields now show a red asterisk for required fields
- Updated: button can accept a "form" attribute
- Improvement: file input looks better in dark mode
- Fix: allow checkbox/radio labels to support links. eg.
<.field type="checkbox" field={@form[:checkbox]} label={raw(~s|Please accept these <a href="#" class="text-blue-500">Terms and Conditions</a> before continuing|)} />
- Bumped phoenix_live_view dep to 0.19
- Updated: add empty_message attr to
<.field>
(<.field type="checkbox-group|radio_group" empty_message="No options">
) - Fixed:
<.field type="switch">
not providing afalse
value when unchecked
- Add light button variant for dark mode friendliness
- Fixed radio-group value not being checked for integers
- Fix radio-group checked options for <.field>
- Fix select selected options
- Fix: <.field type="textarea" rows="1"> - rows for textarea are now overridable
- Fixed button with icon (reverted tooltip)
- Updated: Move custom css classes to last so they can potentially override default ones (button, loading)
- Added:
tooltip
option to<.button>
- Updated: checkbox_group now supports
disabled_options
attr
- Fixed transitions on modal
- Updated
<.field>
to take alabel_class
attr
- Breaking change:
<.field type="checkbox_group">
is now<.field type="checkbox-group">
(to matchdatetime-local
) - Breaking change:
<.field type="radio_group">
is now<.field type="radio-group">
(to matchdatetime-local
) - Fixed: radio group state
- Fixed: textarea height
- Fixed: CSS now conforms to tailwind config colors (eg. changing
danger
in tailwind config will now change the color of thedanger
button/alert/etc.) - Fixed error CSS on textarea/select/switch
- Fix <.field> checkbox_group not keeping state
- Changed <.field> textarea to be the same size as v1 form_field version
- Fixed
class
attr not working in<.field>
for types "select", "checkbox_group", "radio_group" and "textarea" - Fixed <.card_footer>
class
attr not working
- For consistency, the group_layout attr on <.field> should be a string like the type
- Ensure help_text div isn't in DOM when no help text is provided
- Added help_text to <.field>
- Renamed .error to .field_error
- Renamed .label to .field_label
- New: <.field> component to replace <.form_field>. <.field> takes the new
%Phoenix.HTML.FormField{}
struct, which better optimizes forms for live views - New: <.input> component - these represent inputs but styled with Petal Components. It differs from <.field> in that you don't get a label or error messages.
- New: <.label> component - just a label styled with Petal Components. These are used inside a <.field>.
- New: <.error> component - an error message for form fields. These are used inside a <.field>.
- Updated: <.tab> can now take a class attr
- Fix checkbox group issue introduced in 1.0.7
- Fixed checkbox group giving an empty string instead of a list when submitted
- Added transitions to the icon button tooltip
- New: Add
separator_class
option to<.breadcrumb>
- New: Add
tooltip
option to<.icon_button>
- 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_input
not working correctly inform_field
. Thanks @BobbieBarker! - Fixed:
disabled
attribute 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-feedback
class 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_button
svg 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
Heroicons
toHeroiconsV1
- 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_class
to <.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>
class
assigns 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-cover
class 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 takemethod
as 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_field
function 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