carbon-design-system/carbon

Design for pagination number input

Open

#5,546 opened on Mar 5, 2020

View on GitHubContributor guide
 (2 comments) (2 reactions) (1 assignee)JavaScript (1,733 forks)batch import
afrohackscomponent: number-inputcomponent: paginationhacktoberfestproposal: acceptedrole: design :pencil2:type: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

Summary

A large number of total items in the pagination select causes problems described in https://github.com/carbon-design-system/carbon/issues/5129 and https://github.com/carbon-design-system/carbon/issues/4365

Without alternative designs, a proposed workaround is to remove the ability to select a page or limit the height of the select window https://github.com/carbon-design-system/carbon/pull/5485

Desired UX and success metrics

Create designs that allow the user to navigate to a specific page without incrementally clicking the forward and back pagination nav arrow.

Considerations:

  • Error message
  • Always require a value
  • The behavior when the number entered is greater than the number of pages (Reset to the highest page?)
  • What other components have this type of input inside a toolbar or component? What needs to be established for this type of pattern?

Exploration

Number input specs that are similar to the mobile ipnut component. image

Contributor guide

Research direction
Review the linked issues and existing pagination component, then propose a number input design for direct page navigation.
Tech stack
None
Domain
design
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70