## Pagination component - Added attribute `button_attrs` to render buttons with `phx-` attributes. This is useful on pages where handling of url parameters is too complex - for example when using search within a nested component. - Changed styling from inline-block to inline-flex to prevent spaces in labels from creating redundant whitespace. ## Other changes - Added possible attributes to slots to prevent "undefined attribute" warnings. - Updated upstream dependency `@primer/view-components` to `0.40.0`. - Updated LiveView JS dependency to `1.0.0`.

### LiveView 1.0 - Support for Phoenix.LiveView 1.0. See [Installation](doc-extra/installation.md) for using PrimerLive with Phoenix.LiveView 0.20. ### Other changes - Improve disabled [Toggle switch](`PrimerLive.Component.toggle_switch/1`) styles. - Updated upstream dependency `@primer/css` to `21.5.1`. - Updated upstream dependency `@primer/view-components` to `0.36.1`.

Improvements for theme color CSS variables: - The light theme variables are now set as default, so it is no longer needed to wrap components inside a theme wrapper. - When using the `@scope` rule, color CSS variables now work inside the scope.

### Changes *Note: access links from the [official documentation](https://hexdocs.pm/primer_live/0.9.0/changelog.html)* - [Text input](`PrimerLive.Component.text_input/1`): Set disabled color on read-only field with inset style. - [Checkbox group](`PrimerLive.Component.checkbox_group/1`) and [Radio group](`PrimerLive.Component.radio_group/1`): Show required marker in legend. - [Action menu](`PrimerLive.Component.action_menu/1`) and [Select menu](`PrimerLive.Component.select_menu/1`): Added attribute `offset_x` to define the absolute offset for the menu on the horizontal axis. - [Header](`PrimerLive.Component.header/1`): 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](`PrimerLive.Component.octicon/1`) 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](doc-extra/installation.md#scoped-css). - Added documentation [Styling](doc-extra/styling.md). 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](`PrimerLive.Component.checkbox_group/1`) and [Radio group](`PrimerLive.Component.radio_group/1`): Restored display of validation message. - [Textarea](`PrimerLive.Component.textarea/1`): 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> ```

## 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](doc-extra/menus-and-dialogs.md) See component documentation for further details: - [Action menu](`PrimerLive.Component.action_menu/1`) - [Dialog](`PrimerLive.Component.dialog/1`) - [Drawer](`PrimerLive.Component.drawer/1`) - [Dropdown](`PrimerLive.Component.dropdown/1`) - [Select menu](`PrimerLive.Component.select_menu/1`) #### 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](`PrimerLive.Component.box/1`) 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](`PrimerLive.Component.checkbox_group/1`) and [radio_group](`PrimerLive.Component.radio_group/1`) 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](https://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](menus-and-dialogs.html#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>

### Changes - Fixes support for Ash 3. Thanks @ademenev! - Internal improvements

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

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.