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.