Improve active state design for EuiPagination

[ryankeairns]

From @maciejforcone

Hi Team 👋 we got user feedback for SLI/SLO feature, but related with our pagination pattern. I think that's mostly a problem when there are two pages, and it's unclear which one is active, which one is clickable (with 3 or more it's much more clear). Blue underlined text was conventionally reserved for clickable element/link, but we have it as active/selected, not clickable. We have the same solution in the left nav, but there it's more clear that blue one is active (because there are many fixed options always being displayed). In serverless it was solved by adding a background under the active element, without blue text style. Will this pattern be applied to other components? (I'm mostly interested in pagination).

@ryankeairns 's reply

Thanks for sharing the feedback. While it could be described as an edge case (i.e. most notable with exactly two pages), I do think there is room for overall design improvement. Personally, the design of EUI pagination has stood out to me as a bit of an outlier and leaves me feeling unsatisfied each time I apply it. I’ll convert this to a discuss item and add these notes.

For comparison, here is GitHub’s pagination with active, focus, and hover states. imo, the states are better differentiated in addition to a having an overall superior visual design aesthetic.