Remove react-tokens dependency from react-core pagination by using number formatting

Describe the issue. What is the expected and unexpected behavior? When passing large number of items to pagination it automatically expands and take too much space on toolbar. This should be resolved by using Verify Number Formats (specification for short writing large numbers) - 400, 4K,400K, 4M, 400M,4B,400B,4B ,400B , 4T. We have an account with 44296 items which will eventually be shown as 4430 number of pages. It would be easier to read if we’d show 44K items and 4K pages. If user hovers over pagination element he could see tooltip with full information

Number of items: 44 296
Number of pages: 4 430
Items per page: 10

Ideally I’d like to pass custom renderer to pagination count in order to use custom renderer for any number.

I guess that this could eventually be part of design guidelines so we can use this number formatting in any place.

I am raising this issue, because we’ve tried using the latest build (>=4.0.0) and we’ve noticed bundle increase and identified react-tokens as one culprit of this problem Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Enhancement.

What is your product and what release version are you targeting? cloud.redhat.com

[redallen]

Yes, it should! I’m seeing 23% size reduction with the seed app.

• React-core dist size down 20Kb due to smaller base.css , withOUIA removal, and smaller react-icons (down to 8Kb from 16Kb) and react-styles (down to 6Kb from 11Kb)
• Overall dist size down 63Kb due to removing no-case and create-emotion as a dependency from react-styles (26Kb + 32Kb), and then an extra 5Kb was shaved in babel helpers being able to consolidate down into tslib.es6.ts which the seed app already depends on (since it’s Typescript)

[rvsia]

@redallen So, the bundle size will be fixed in the next major release?