Added

• Add guide about load-more buttons and infinite scroll.
• Add guide about CSS styles.
• Add guide about page size controls.

Changed

• Remove opts attribute from Flop.Phoenix.pagination/1 and remove configuration of the pagination component via application environment.
• Remove all default classes from pagination component.
• Remove wrapper_attrs from pagination component in favor of global attributes.
• Set page link aria label function with page_link_aria_label_fun attribute on Flop.Phoenix.pagination/1 component instead of using pagination_link_aria_label option.
• Set previous and next link attributes and content with slots instead of options.
• Set ellipsis content with slot instead of option.
• Set pagination list attributes with page_list_attrs attribute instead of pagination_list_attrs option.
• Set pagination list item attributes with page_list_item_attrs attribute instead of pagination_list_item_attrs option.
• Set pagination link attributes with page_link_attrs attribute instead of pagination_link_attrs option.
• Set current pagination link attributes with current_page_link_attrs attribute instead of current_link_attrs option.
• Set disabled link attributes with disabled_link_attrs attribute instead of disabled_attrs option.
• Remove default classes for pagination root element, pagination list and pagination links.
• Use <button> elements for pagination if no path is set.
• Remove role attribute from the pagination component. The <nav> element already has the implicit ARIA role navigation.
• Add rel attribute to previous/next links.
• Mark up disabled previous/next links of the pagination component as <a role="link" aria-disabled="true"> instead of <span>.
• Update documentation for hidden_inputs_for_filter/1 to use Phoenix.Component.inputs_for/1 with the skip_persistent_id option.
• Require Phoenix >= 1.6.0 and < 1.9.0.

How to upgrade

The configuration via pagination_opts is deprecated. Instead of referencing a function that returns the pagination opts, it is recommended to define a component that wraps the Flop.Phoenix.pagination/1 component and sets the necessary attributes.

Follow the upgrade guide of version 0.24.0 to update the pagination component configuration, including the removal of the application configuration, if you haven't done so already.

Remove the wrapper_opts from your pagination options and pass them directly as attributes instead.

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     wrapper_attrs: [
-       class: "pagination",
-       aria: [label: "Quppernerit"]
-     ]
    ]}
+   class="pagination"
+   aria-label="Quppernerit"
  />

Replace the :previous_link_attrs, :previous_link_content, next_link_attrs, and next_link_content attributes with the previous and next slots.

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     previous_link_attrs: [class: "previous"],
-     previous_link_content: Phoenix.HTML.raw(~s(<i class="fas fa-chevron-left" />)),
-     next_link_attrs: [class: "next"],
-     next_link_content: Phoenix.HTML.raw(~s(<i class="fas fa-chevron-right" />))
    ]}
- />
+ >
+   <:previous attrs={[class: "previous"]}>
+     <i class="fas fa-chevron-left" />
+   </:previous>
+   <:next attrs={[class: "next"]}>
+     <i class="fas fa-chevron-right" />
+   </:next>
+ </Flop.Phoenix.pagination>

Replace the :ellipsis_attrs and :ellipsis_content attributes with the ellipsis slot.

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     ellipsis_attrs: [class: "ellipsis", aria-hidden: "true"],
-     elipsis_content: "‥"
    ]}
- />
+ >
+   <:ellipsis>
+     <span class="ellipsis" aria-hidden="true">‥</span>
+   </:ellipsis>
+ </Flop.Phoenix.pagination>

Remove the :disabled_attrs option. Note that the disabled and aria-disabled attributes are set automatically and do not need to be passed here.

To style disabled links/buttons without a CSS class, use the CSS selector [disabled], [aria-disabled="true"].

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     disabled_attrs: [class: "is-disabled"]
    ]}
+     disabled_link_attrs: [class: "is-disabled"]
  >

Remove the :pagination_link_aria_label option and set the page_link_aria_label_fun attribute instead.

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     pagination_link_aria_label: &"#{&1}ページ目へ"
    ]}
+     page_link_aria_label_fun={&"#{&1}ページ目へ"}
  >

Remove the :pagination_list_attrs, :pagination_list_item_attrs, :pagination_link_attrs, and :current_link_attrs options and set the page_list_attrs, page_list_item_attrs, page_link_attrs, and current_page_link_attrs attributes instead. If you relied on the default page list class and page link classes, set them explicitly. Note that the aria-current attribute is set automatically and does not need to be set here.

To style the current page link without a CSS class, use the CSS selector [aria-current="page"].

  <Flop.Phoenix.pagination
    meta={@meta}
    path={@path}
    opts={[
-     pagination_list_attrs: [class: "pagination-list"]
-     pagination_list_item_attrs: [class: "pagination-list-item"]
-     pagination_link_attrs: [class: "pagination-link"]
-     current_link_attrs: [
-       class: "pagination-link is-current",
-       aria: [current: "page"]
-     ]
    ]}
+     page_list_attrs={[class: "pagination-list"]}
+     page_list_item_attrs={[class: "pagination-list-item"]}
+     page_link_attrs={[class: "pagination-link"]}
+     current_page_link_attrs={[class: "pagination-link is-current"]}
  >

Ensure that your CSS styles work with both <a> elements (used when a path is set) and <button> elements (used when no path is set). Check the appearance of the pagination component carefully.