bug: toolbar and tabbar did not support Dynamic Font Scaling

[yuuk]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

toolbar and tabbar are still use px not rem

Expected Behavior

Use rem instead of px

Steps to Reproduce

1. Upgrade ionic version to 7.5.0 and run
2. Change root font size

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/apple/.nvm/versions/node/v16.16.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.0

Capacitor:

Capacitor CLI : 5.4.1
@capacitor/android : 5.4.1
@capacitor/core : 5.4.1
@capacitor/ios : 5.4.1

Utility:

cordova-res : 0.15.4
native-run : 1.7.3

System:

NodeJS : v16.16.0 (/Users/apple/.nvm/versions/node/v16.16.0/bin/node)
npm : 8.11.0
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. As noted in the Dynamic Font Scaling documentation Tab Bar does not participate in Dynamic Font Scaling according to Apple's Human Interface Guidelines.

Additionally, Dynamic Font Scaling has to do with fonts and dimensions, not padding or margins. This means that the current padding values on Toolbar are correct as they should not change as the font size changes. The content inside of the Toolbar will grow. However, the content in the Toolbar will have maximum font sizes to prioritize the Content component.

Here is an example: https://codepen.io/liamdebeasi/pen/vYvMRVr

Notice that while the content in the Toolbar does grow, it has a maximum font size to prioritize Content.

[yuuk]

Thanks for the reply.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.