4.0.0-beta.3 :: Paginator :: Add background and padding variables for nav buttons

[mcmimik]

First of all, fantastic work on the theme API in version 4! We are currently creating a theme for our UIKit based on PrimeVue. Using the prefix in theme settings for versioning styles is extraordinarily convenient. The implementation of versioned CSS variables is truly impressive!

Today we encountered an issue: the padding and background of buttons in the Paginator do not have their own component tokens. Currently, the background in the source code is styled like this:

.p-paginator-page,
.p-paginator-next,
.p-paginator-last,
.p-paginator-first,
.p-paginator-prev {
  /* ... */
  background: transparent;
  padding: 0;
  /* ... */
}

Meanwhile, the navButton has only a token for hoverBackground.

As a workaround, we can use pt to pass tokens through $dt and the style attribute:

page: () => ({
  style: {
    padding: `0 ${$dt("size.x1_5").value}`,
    background: $dt("bg.control.secondary.a.default").value,
  },
}),

— but then inline styles will override the hoverBackground token styles...

Additionally, there are no separate tokens for the active state of the page nav button, as well as for the :active pseudo-class. The current styles are:

.p-paginator-page.p-paginator-page-active {
    background: ${dt('highlight.background')};
    color: ${dt('highlight.color')};
}

It seems that there should be tokens like paginator.nav.button.active.color, analogous to the "hover" tokens. These should then be assigned semantic variables like highlight.color in the appropriate theme files (e.g., components/lib/themes/aura/paginator/index.js).

Please add variables for padding and background, including the :active state (similar to the tokens in the Button component).

For convenience, here is the list of missing tokens:

paginator.nav.button.padding
paginator.nav.button.background
paginator.nav.button.active.background

Honestly, I think a border width token might be useful for someone as well, but I'll be modest :)

[cagataycivici]

Greetings, glad you like our work. I'll work on this today and get back to you. Along the way, many more tokens will be added eventually so feedback is important.

[cagataycivici]

Added some new tokens, we'll keep enhancing with new tokens after v4 final.

primefaces/primevue@a2db31a

[mcmimik]

Oh, Thank you so much for the quick response and the amazing updates! The new tokens will greatly help us. Can't wait to see the release; your team has done an amazing job.

P.S. It's not critical, but it would be very convenient to have a padding token for the paginator buttons, similar to the Button.
Thanks again for everything you do in v4 🙏

[cagataycivici]

You are welcome. Paginator buttons are usually circle, they should have width and height for sizing, for which case do you need padding?

[mcmimik]

Thanks for getting back to me!

We need padding for the paginator buttons to accommodate three-digit and larger numbers. Additionally, in many designs, the buttons aren't strictly circular. For example, Bootstrap, which serves as the foundation for numerous libraries and dashboard templates, often features non-circular pagination buttons. You can see an example of this here: CoreUI Pagination.

Here are a few examples from major websites that also use non-circular pagination buttons with really big numbers:

• Amazon
• GitHub Issues
• Stack Overflow

Here are some examples from regional websites:

• Hepsiemlak
• Şikayetvar
• Kariyer.net

Additionally, here are examples from storybooks of major companies:

• Skyscanner: Backpack Storybook
• GitLab: GitLab UI Storybook
• Grafana: Grafana Storybook
• JetBrains: JetBrains Ring UI Storybook

Thanks again for all your hard work on v4 🙏