[75258] Hide pagination buttons when they are disabled

.changeset/hot-taxis-hunt.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+[75258] Hide pagination buttons when they are disabled

app/components/primer/open_project/pagination.rb

@@ -81,36 +81,45 @@ def default_href_builder(page_num)
       end
 
       def build_pagination_model
-        prev_page = previous_page_item
-        next_page = next_page_item
-
-        return [prev_page, next_page] unless show_pages || page_count <= 0
+        pages = []
 
-        pages = if all_pages_fit?
-                  full_pagination_without_breaks
-                else
-                  paginated_number_items
-                end
+        pages << previous_page_item unless first_page?
+        pages.concat(number_page_items) if show_pages
+        pages << next_page_item unless last_page?
 
-        [prev_page, *pages, next_page]
+        pages
       end
 
       def previous_page_item
         {
           type: PAGE_TYPE__PREV,
-          num: current_page - 1,
-          disabled: current_page == 1
+          num: current_page - 1
         }
       end
 
       def next_page_item
         {
           type: PAGE_TYPE__NEXT,
-          num: current_page + 1,
-          disabled: current_page == page_count
+          num: current_page + 1
         }
       end
 
+      def first_page?
+        current_page == 1
+      end
+
+      def last_page?
+        current_page == page_count
+      end
+
+      def number_page_items
+        if all_pages_fit?
+          full_pagination_without_breaks
+        else
+          paginated_number_items
+        end
+      end
+
       def full_pagination_without_breaks
         pages = []
         add_pages(pages, 1, page_count)
@@ -233,20 +242,12 @@ def build_component_data(page)
           key_string = key.to_s
           content = I18n.t("pagination.#{key_string}")
 
-          if page[:disabled]
-            props.merge!(
-              rel: key_string,
-              "aria-hidden": "true",
-              "aria-disabled": "true"
-            )
-          else
-            props.merge!(
-              rel: key_string,
-              href: href_builder.call(page[:num]),
-              "aria-label": I18n.t("pagination.#{key_string}_page"),
-              **@link_arguments
-            )
-          end
+          props.merge!(
+            rel: key_string,
+            href: href_builder.call(page[:num]),
+            "aria-label": I18n.t("pagination.#{key_string}_page"),
+            **@link_arguments
+          )
 
         when PAGE_TYPE__NUM
           key = :"page-#{page[:num]}"

previews/primer/open_project/pagination_preview.rb

@@ -23,6 +23,10 @@ def playground(
         margin_page_count = (margin_page_count.presence || 1).to_i
         surrounding_page_count = (surrounding_page_count.presence || 2).to_i
 
+        # Ensure current_page doesn't exceed page_count
+        current_page = [current_page, page_count].min
+        current_page = [current_page, 1].max # Ensure at least 1
+
         render(
           Primer::OpenProject::Pagination.new(
             current_page: current_page,
@@ -46,6 +50,39 @@ def default
           )
         )
       end
+
+      # @label First Page
+      def first_page
+        render(
+          Primer::OpenProject::Pagination.new(
+            current_page: 1,
+            page_count: 20,
+            href_builder: ->(page) { "#page-#{page}" }
+          )
+        )
+      end
+
+      # @label Last Page
+      def last_page
+        render(
+          Primer::OpenProject::Pagination.new(
+            current_page: 20,
+            page_count: 20,
+            href_builder: ->(page) { "#page-#{page}" }
+          )
+        )
+      end
+
+      # @label Single Page
+      def single_page
+        render(
+          Primer::OpenProject::Pagination.new(
+            current_page: 1,
+            page_count: 1,
+            href_builder: ->(page) { "#page-#{page}" }
+          )
+        )
+      end
       #
       # @!endgroup
     end

static/info_arch.json

@@ -21610,6 +21610,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/first_page",
+        "name": "first_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/last_page",
+        "name": "last_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/single_page",
+        "name": "single_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []

static/previews.json

@@ -6644,6 +6644,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/first_page",
+        "name": "first_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/last_page",
+        "name": "last_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/single_page",
+        "name": "single_page",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

test/components/primer/open_project/pagination_test.rb

@@ -28,16 +28,18 @@ def test_marks_current_page
     assert_selector("[aria-current='page']", text: "3")
   end
 
-  def test_disables_previous_on_first_page
+  def test_hides_previous_on_first_page
     render_inline(Primer::OpenProject::Pagination.new(page_count: 5, current_page: 1))
 
-    assert_selector("[rel='prev'][aria-disabled='true']")
+    refute_selector("[rel='prev']")
+    assert_selector("[rel='next']")
   end
 
-  def test_disables_next_on_last_page
+  def test_hides_next_on_last_page
     render_inline(Primer::OpenProject::Pagination.new(page_count: 5, current_page: 5))
 
-    assert_selector("[rel='next'][aria-disabled='true']")
+    assert_selector("[rel='prev']")
+    refute_selector("[rel='next']")
   end
 
   def test_renders_ellipsis_for_many_pages
@@ -300,4 +302,16 @@ def test_link_arguments_are_not_applied_to_break_elements
     refute_selector("span[role='presentation'][data-turbo='false']")
   end
 
+  def test_single_page_hides_prev_and_next
+    render_inline(
+      Primer::OpenProject::Pagination.new(
+        page_count: 1,
+        current_page: 1
+      )
+    )
+
+    refute_selector("[rel='prev']")
+    refute_selector("[rel='next']")
+  end
+
 end