0.9.0

Changes

Note: access links from the official documentation

• Text input: Set disabled color on read-only field with inset style.
• Checkbox group and Radio group: Show required marker in legend.
• Action menu and Select menu: Added attribute offset_x to define the absolute offset for the menu on the horizontal axis.
• Header: added attributes variant="base" to create a light colored header, and is_compact for a smaller vertical height.
• Updated upstream Primer Design System libraries. This update includes a number of changes to modified CSS Custom Properties.
  • Updated upstream dependency @primer/css to 21.5.0.
  • Added @primer/view-components version 0.34.0. This is the Rails version of Primer Design, which is the most developed so far.
  • Updated Octicon icons to version v19.12.0.
• Added support for right-to-left languages.
• Added support for @scope, allowing PrimerLive to be used alongside other CSS libraries. See usage instructions in Installation.
• Added documentation Styling. This contains notes about styling with custom CSS and pre-made classes, reusing styled components and support for right-to-left languages.

Depreciations

Standalone form_control as wrapper is soft-deprecated.

The use of form_control as wrapper component around a form input component was causing compatibility issues with displaying validation messages. Since input components should be able to display a validation message even when not wrapped inside a form_control, it became difficult to distinguish between a validation messages originating from the form_control and one originating from the nested input.

With the introduction of checkbox_group and radio_group in version 0.5, there has been less need for a standalone form control wrapper.

Overall, moving form_control to the background and using it only as an internal component resolves a range of problems.

See "Updating to 0.9" below.

Removals

• form_group was soft-deprecated in 0.5.0 and has been removed, along with component attributes form_group and is_form_group.

Bug fixes

• Checkbox group and Radio group: Restored display of validation message.
• Textarea: Set correct success color when displaying success feedback.

Updating to 0.9

form_control

There have 2 ways to create a form control: as a wrapper, and as an input attribute. If you've been using form_control as wrapper around inputs, change:

<.form :let={f} for={@changeset}>
  <.form_control form={f} field={:first_name} for="first-name">
    <.text_input form={f} field={:first_name} id="first-name" />
  </.form_control>
</.form>

to

<.form :let={f} for={@changeset}>
  <.text_input form={f} field={:first_name} id="first-name" is_form_control />
</.form>

0.8.0

Changes

Refactoring of dialogs, drawers, and menus

This refactoring builds on the Phoenix.LiveView.JS API - taking example from CoreComponent's modal component. These changes reduce reliance on additional JavaScript, improve alignment with standard practice, and include accessibility improvements.

Overview:

• Menus and dialogs

See component documentation for further details:

• Action menu
• Dialog
• Drawer
• Dropdown
• Select menu

Additions

• Dialogs, drawers and menus can now be shown conditionally, for example on a live_action route:

<.dialog
  :if={@live_action == :create}
  is_show
  id="new-post-dialog"
  on_cancel={JS.patch(~p"/posts")}
>
  ...
</.dialog>

• Added PrimerLive.StatefulConditionComponent.
• Dialog state is now preserved on form updates.
• Added attribute focus_after_closing_selector, mirroring the (renamed) focus_after_opening_selector.
• Added attribute on_cancel.
• Added attribute transition_duration.
• Added attribute show_state to persist dialogs, drawers and menus across different LiveViews.
• Added backdrop_tint with values "dark" (default) and "light". The latter (combined with backdrop_strength="strong") (see below) creates a backdrop that is similar to the CoreComponent's modal.
• Added focus trap.

Changes and removals

See for update instructions: "Updating to 0.8" below.

• Prompt functions show and hide are replaced with open_dialog, close_dialog and cancel_dialog.
• Replaced attribute prompt_options for status callbacks with status_callback_selector that sends status events to the component, so that state changes can be used in Elixir code.
• Removed attribute phx_click_touch in favor of using status_callback_selector, because closing can be initiated in several ways, not only through backdrop clicks, and we can't assume that the event handler always hosts the dialog/drawer as well.
• Renamed attribute focus_first to focus_after_opening_selector. Focus on the first interactive element is now default; with focus_after_opening_selector a specific element can be appointed.
• Removed attrs form and field from all prompt components.
• Added separate z-index settings for menus, so that the menu panel (and optional backdrop) are closer to the page, allowing them to be covered by other elements such as top bars. Using a z-index of 100 for a top bar ensures that it sits in between menus and dialogs/drawers.
• Replaced backdrop attributes is_dark_backdrop, is_medium_backdrop and is_light_backdrop with backdrop_strength and values "strong", "medium" and "light".
• Menus and dialogs can now be closed with Escape by default.

Other changes

Box with streams

The box component now supports streams:

<.box stream={@streams.clients} id="clients">
  <:row :let={{_dom_id, data}}>
    <%= data.name %>
  </:row>
</.box>

This includes a breaking change: let is now reserved for stream data, so the callback data no longer contains classes.

Event attributes for slots

Slots now accept these "all-purpose" event attributes:

• phx-click
• phx-target
• phx-value-item

Components:

• box: slot row
• breadcrumb: slot item
• dialog: slot row
• dropdown: slot item
• filter_list: slot item
• header: slot item
• menu: slot item
• select_menu: slot item
• side_nav: slot item
• subnav_links: slot item
• tabnav: slot item
• truncate: slot item
• underline_nav: slot item

Example with tabnav:

<:item
  :for={%{label: label, id: tab_id} <- @tabs}
  is_selected={id == @selected_tab}
  phx-click="set_tab"
  phx-value-item={tab_id}
>
  ...

def handle_event(
  "set_tab", %{"item" => tab_id}, socket) do
  ...

Fieldset wrapper for checkbox_group and radio_group

The form group created by checkbox_group and radio_group is now automatically wrapped in a fieldset. The label attribute generates a legend element.

Updated Octicons

This update to version 19.11.0 includes around 50 additions. See primer-live.org/octicon for a visual list.

Accessibility

• Added ARIA tags aria-haspopup and aria-owns.
• DOM ids are reformatted to a DOM-safe ID string.

Updating to 0.8

• Replace Promp.show and Prompt.hide:

  • For example:

    onclick="Prompt.show('#my-dialog')"
    onclick="Prompt.hide('#my-dialog')"
    

  • Becomes:

    phx-click={open_dialog("my-dialog")}
    phx-click={close_dialog("my-dialog")}
    

• Replace backdrop darkness attributes:

  • is_dark_backdrop becomes backdrop_strength="strong"
  • is_medium_backdrop becomes backdrop_strength="medium"
  • is_light_backdrop becomes backdrop_strength="light"

• Attribute is_escapable can be removed because this is now the default. If the component should not be removed using Escape, use is_escapable={false}.

Less used attributes

• Form state: the previous method to preserve state, using "a fictitious and unique field name" can be removed.

  • Remove form and field from menu and dialog component attributes.

• Because focus_first (without a selector) is now the default, nothing needs to be changed when using this attribute.

  • If in existing code a selector value is used, rename the attribute to focus_after_opening_selector.

• Replace prompt_options and phx_click_touch with status_callback_selector. There's no simple way to replace prompt_options, because passing JavaScript functions is no longer supported. A solution could be very similar to the previous phx_click_touch method. See Status callbacks for an example.

• If you use checkbox_group or radio_group inside a fieldset, remove the fieldset as it is now redundant.

• If you are using box with a :let callback:

  • Previous:

    <:row :let={classes}>
      <.link href="/" class={classes.link}>Home</.link>
    </:row>
    

  • Becomes:

    <:row>
      <.link href="/" class="Box-row-link">Home</.link>
    </:row>
    

0.7.2

Changes

• Fixes support for Ash 3. Thanks @ademenev!
• Internal improvements

0.7.1

• Added dialog attr is_show_on_mount.
• Downgraded dependency @primer/css to 21.0.7 due to regressions.

0.7.0

Updated dependencies:

• phoenix_ecto to 4.5
• phoenix_html to 4.1
  • Added phoenix_html_helpers
• phoenix_live_view to 0.20
• @primer/css to 21.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.

Upstream bug report: primer/css#2567

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

0.6.1

Fixes reading the required state of input fields.

0.6.0

0.6.0

Added support for forms created with Ash Framework. See test/frameworks/ash/form_test.exs for an example.