fix(styles): pagination styles update

[platon-rov]

Related Issue

Part of SAP/fundamental-ngx#7172

Description

Pagination components styles update due to changed specifications.

Screenshots

Please check the pagination component examples. There are too many changes to place here.

https://deploy-preview-2912--fundamental-styles.netlify.app/?path=/docs/components-pagination--first-page

Breaking changes

https://github.com/SAP/fundamental-styles/wiki/Breaking-Changes#pagination-2912

[netlify]

✔️ Deploy Preview for fundamental-styles ready!

🔨 Explore the source changes: 2c37bde

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-styles/deploys/619cb1c46a838c00078afc15

😎 Browse the preview: https://deploy-preview-2912--fundamental-styles.netlify.app

[InnaAtanasova]

Why is the width of the input different in these cases?

[InnaAtanasova]

The space between 2 and the ... is different from the space between the ... and 500, aka the dots are not in the middle of the page numbers.

[InnaAtanasova]

Why does the input have such big width?

I think you need to use: width: auto, not width:100%. This will result in this

:

[InnaAtanasova]

You have Cozy and Mobile modes but the specs says Desktop and Tablet are the same.
Fundamentals:

Specs:

[InnaAtanasova]

Please refactor this. The user should be able to copy the markup in the code section.

[InnaAtanasova]

You are not supposed to have compact buttons in mobile mode.

[droshev]

@platon-rov can you maintain the scope too?

[platon-rov]

@InnaAtanasova

#2912 (comment)

Why is the width of the input different in these cases?

#2912 (comment)

Why does the input have such big width? I think you need to use: width: auto, not width:100%. This will result in this

I partially fixed it by setting width: auto as you recommended, thank you. But it's also depends on min\max attribute of the input, for example if we have 500 (three digits) pages then input will be wider then if we have 5 (one digit).

#2912 (comment)

The space between 2 and the ... is different from the space between the ... and 500, aka the dots are not in the middle of the page numbers.

Link always has 9px of horizontal padding, but since content 500 is longer than 2 we have buttons of the different width. So we're seeing illusion that ... is not centered.

#2912 (comment)

You have Cozy and Mobile modes but the specs says Desktop and Tablet are the same.

But below in the table described to use Cozy for tablets.

[platon-rov]

@platon-rov can you maintain the scope too?

@droshev What do you mean, change it to feat?

[InnaAtanasova]

@platon-rov can you maintain the scope too?

@droshev What do you mean, change it to feat?

nope, he means you are missing the (styles) part in the PR title. You have: fix: pagination styles update and it should be fix(styles): pagination styles update. I updated it :)

[InnaAtanasova]

The input follows the specs for Input Field and I couldn't find anything about max-width, only for mix-width, which means the input should grow to fit the content?

[github-actions]

This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days

[platon-rov]

#2912 (review)

The input follows the specs for Input Field and I couldn't find anything about max-width, only for mix-width, which means the input should grow to fit the content?

min-width: 2.75rem; width: auto accordingly to the Fiori 3 specs.