Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ER-45674] Allow not providing totalCount for compact Pagination #4673

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[ER-45674] Allow not providing totalCount for compact Pagination #4673

wants to merge 2 commits into from
+141 −9

Conversation

dgsuarez
Copy link

@dgsuarez dgsuarez commented Feb 19, 2025 •
edited
Loading

ER-45674

Description

Sometimes the backend doesn't have the total number results for a query (for example because getting the total count is expensive)

<Pagination variant="compact"> UX works well for this use case, but the component expects totalPages. This removes the requirement.

When we don't have the totalPages we can't know in which page we are, so we can't know if we're in the last page to show the button disabled (we can know when we are on the first one though). To fix, this also adds a nextDisabled prop.

How to test

Screenshots

See storybook

Development checks

  • Add changeset according to guidelines (if needed)
  • Double check if picasso-tailwind-merge requires major update (check its README.md)
  • Read CONTRIBUTING.md and Component API principles
  • Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
  • Annotate all props in component with documentation
  • Create examples for component
  • Ensure that deployed demo has expected results and good examples
  • Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
  • Self reviewed
  • Covered with tests (visual tests included)

Breaking change

  • codemod is created and showcased in the changeset
  • test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

  • @toptal-bot run package:alpha-release - Release alpha version
  • @toptal-anvil ping reviewers - Ping for reviews
PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

  1. You have no extra requests.
  2. You have optional requests.
    1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

  1. Something is broken after the changes.
  2. Acceptance criteria is not reached.
  3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

  1. There are leftovers like unnecessary logs, comments, etc.
  2. You have an opinionated comment regarding the code that requires a discussion.
  3. You have questions.

How to handle the comments?

  1. An owner of a comment is the only one who can resolve it.
  2. An owner of a comment must resolve it when it's addressed.
  3. A PR owner must reply with ✅ when a comment is addressed.

@dgsuarez dgsuarez self-assigned this Feb 19, 2025
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 19, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 99add57

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vedrani
Copy link
Contributor

vedrani commented Feb 19, 2025

@toptal-bot run package:alpha-release

@toptal-devbot
Copy link
Collaborator

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.6-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/base-tailwind@1.0.1-alpha-er-45674-pagination-without-totals-25a971206.86+25a971206
yarn add @toptal/picasso@53.0.15-alpha-er-45674-pagination-without-totals-25a971206.0+25a971206
yarn add @toptal/picasso-accordion@3.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-account-select@3.0.15-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-alert@3.0.30-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-amount@1.0.10-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-application-update-notification@2.0.30-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-autocomplete@5.0.20-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-avatar@6.1.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-avatar-upload@3.0.22-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-backdrop@1.0.9-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-badge@3.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-breadcrumbs@3.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-button@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-calendar@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-carousel@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-charts@59.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-checkbox@5.0.10-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-codemod@6.0.1-alpha-er-45674-pagination-without-totals-25a971206.342+25a971206
yarn add @toptal/picasso-collapse@3.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-container@3.1.2-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-date-picker@3.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-date-select@1.0.67-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-drawer@3.0.30-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-dropdown@4.2.2-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-dropzone@5.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-empty-state@2.0.12-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-er-45674-pagination-without-totals-25a971206.137+25a971206
yarn add @toptal/picasso-fade@1.0.8-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-file-input@4.0.17-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-form@6.1.8-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-forms@73.0.28-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-grid@5.0.8-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-helpbox@5.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-icons@1.11.1-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-image@3.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-input@4.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-input-adornment@3.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-link@3.0.5-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-list@5.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-loader@3.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-logo@2.0.8-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-menu@3.0.14-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-modal@3.0.30-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-modal-context@1.0.2-alpha-er-45674-pagination-without-totals-25a971206.401+25a971206
yarn add @toptal/picasso-note@4.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-notification@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-number-input@4.1.2-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-outlined-input@4.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-overview-block@4.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-page@5.1.21-alpha-er-45674-pagination-without-totals-25a971206.0+25a971206
yarn add @toptal/picasso-pagination@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-paper@4.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-password-input@5.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-pictograms@5.1.1-alpha-er-45674-pagination-without-totals-25a971206.18+25a971206
yarn add @toptal/picasso-popper@1.0.6-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-prompt-modal@2.0.30-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-provider@5.0.1-alpha-er-45674-pagination-without-totals-25a971206.220+25a971206
yarn add @toptal/picasso-query-builder@8.0.15-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-quote@2.0.6-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-radio@5.0.10-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-rating@3.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-rich-text-editor@17.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-section@5.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-select@4.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-shared@15.0.1-alpha-er-45674-pagination-without-totals-25a971206.299+25a971206
yarn add @toptal/picasso-show-more@2.0.18-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-skeleton-loader@1.0.55-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-slide@1.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-slider@4.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-step@4.0.8-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-switch@4.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-table@3.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-tabs@5.0.13-alpha-er-45674-pagination-without-totals-25a971206.8+25a971206
yarn add @toptal/picasso-tag@4.0.9-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-tagselector@3.1.20-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-tailwind@3.0.1-alpha-er-45674-pagination-without-totals-25a971206.86+25a971206
yarn add @toptal/picasso-tailwind-merge@2.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-test-utils@1.1.2-alpha-er-45674-pagination-without-totals-25a971206.299+25a971206
yarn add @toptal/picasso-timeline@5.0.4-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-timepicker@4.0.19-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-tooltip@2.0.2-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-tree-view@3.0.31-alpha-er-45674-pagination-without-totals-25a971206.6+25a971206
yarn add @toptal/picasso-typography@4.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-typography-overflow@4.0.3-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206
yarn add @toptal/picasso-user-badge@5.1.10-alpha-er-45674-pagination-without-totals-25a971206.22+25a971206
yarn add @toptal/picasso-utils@3.0.1-alpha-er-45674-pagination-without-totals-25a971206.46+25a971206

@dgsuarez dgsuarez marked this pull request as ready for review February 20, 2025 02:52
@dgsuarez dgsuarez requested a review from a team as a code owner February 20, 2025 02:53
@dgsuarez dgsuarez requested a review from a team February 20, 2025 02:54
@dgsuarez
Copy link
Author

@toptal-anvil ping reviewers

@dgsuarez dgsuarez requested a review from denieler February 21, 2025 01:56
@dgsuarez
Copy link
Author

@toptal-anvil ping reviewers

paneq
paneq reviewed Feb 21, 2025
View reviewed changes
packages/base/Pagination/src/Pagination/story/Variants.example.tsx
@@ -26,7 +26,6 @@ const Example = () => (
<Pagination
activePage={3}
onPageChange={handlePageChange}
totalPages={5}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to also show a variant with nextDisabled

denieler
denieler approved these changes Feb 21, 2025
View reviewed changes
Copy link
Collaborator

@denieler denieler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked docs - generated props descriptions look good 👍 Code looks great, thanks for playing around with TS ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@paneq paneq paneq approved these changes

@denieler denieler denieler approved these changes

Assignees

@dgsuarez dgsuarez

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@dgsuarez @vedrani @toptal-devbot @paneq @denieler