Ensure same padding around text in pagination

[bjarnef]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.4.0

Bug summary

I played with <uui-table> and <uui-pagination> in a dashboard in Umbraco 12.3.3 combined with Angular.

However it seems the "Previous" doesn't get much padding compared to the others due a minimum width.

I think the minimum width it not needed or eventually just be e.g. 40px.

It seems to work better changing these:

--uui-button-padding-left-factor: 1;
--uui-button-padding-right-factor: 1;

to

--uui-button-padding-left-factor: 2;
--uui-button-padding-right-factor: 2;

it does look a bit nicer here though.
https://uui.umbraco.com/?path=/docs/uui-pagination--docs

however without the minimum width the buttons has same visually spacing around the text:

Specifics

No response

Steps to reproduce

Add <uui-pagination> component and notice spacing around button text.

Expected result / actual result

No response

[bjarnef]

Odd now it render the pagination like this evet current page is 1.

it seems it is because of the Angular binding. If I use a static value it works, e.g `current="1".

I think also it would be great to document the change or show an example in the code:
https://uui.umbraco.com/?path=/docs/uui-pagination--docs

I have this in Angular though:

<uui-pagination
    class="pagination"
    current="{{vm.pagination.pageNumber}}"
    total="{{vm.pagination.totalPages}}"
    ng-on-change="vm.onChange($event)">
</uui-pagination>

function onChange(event) {
    vm.pagination.pageNumber = event.currentTarget._current;
    vm.doFilter();
}

[bjarnef]

I think it need ng-attr- prefix for current and total property property.

<uui-pagination
    class="pagination"
    ng-attr-current="{{vm.pagination.pageNumber}}"
    ng-attr-total="{{vm.pagination.totalPages}}"
    ng-on-change="vm.onChange($event)">
</uui-pagination>

I tried with ng- og ng-bind- which most worked on "current", but for "total" it rendered 100 pages.