Add badge icon to the Uncaptured tab in Transactions page

[mgascam]

Description

The number of transactions in the Uncaptured tab should be displayed inside a badge icon

Acceptance criteria

• The number of transactions in the Uncaptured tab should be displayed inside a badge icon, not between parenthesis

Designs

Dev notes

The TabPanel component that we used to implement the first iteration does not support passing an icon, only text. We need to find a way to pass the icon using the same component, or use a different component. Check additional context section.

Additional context

P2:
paJDYF-4N1-p2#comment-14875
paJDYF-4N1-p2#comment-14930

[kalessil]

Update: The components should be evaluated to see if the recommended one is production-ready.

[mgascam]

Update: The components should be evaluated to see if the recommended one is production-ready.

I had a look at the Tabs component, which was the recommended component, mentioned in the linked discussions: pbIJXs-2db-p2. Unfortunately, the component is labeled as experimental at this moment. It was first released as part of wordpress/components v25.9.0. For reference, the latest WordPress v6.4.3 uses wordpress/components v25.8.14.

In my opinion, it's too early to start using this component and we should wait until a more stable version is consolidated.
cc: @kalessil

[mgascam]

After discussing with the team we decided to close the issue since the suggested wordpress/component is not ready for production use and this does not seem to be a high priority issue.

FYI: @bradyv since you were involved in the original discussion.

[kalessil]

@elizaan36, @vbelolapotkov: you are likely the right people to ask.

In the context of updating UI/UX components, we have two factors: updating dependencies and experimental components.

Who are the right people to own and move forward with the related initiatives (example issues)?:

• Add badge icon to the Uncaptured tab in Transactions page #5180 (experimental component)
• Reposition navigation tabs in Transactions page #5179 (experimental component)
• Use redesigned table component in the Uncaptured transactions page #5176 (wider effort as per my understanding)

It feels like a waste of a good initiative, and if you have pointers to an umbrella ticket we'll link the closed ones.

[elizaan36]

hey @kalessil thanks for reaching out about these issues. We do need to focus on making these UI improvements holistically on Payments tables, and there's an initiative to redesign the UI to be more in line with the future state of the WordPress admin. @rogermattic has been taking a close look at this in relation to reporting and we should have more to share soon!

[rogermattic]

@kalessil just the heads up that those three issues are on my radar now and I will report back when I have some more context to share!

[kalessil]

Sounds good @rogermattic !