Bottom tab improvements: new icons, haptic feedback, icon animation

[momo-ozawa]

Description

• Adds new tab icons (Design ref: eYeHXEMDbnFptE40xUqZ2T-fi-1862%3A3175)
• Adds haptic feedback and icon animation when switching tabs
• Updates tab bar to use native transparent styling with a blur effect After discussions with @kean I've decided to leave out this change since it has the potential to break many screens. I've created a new issue for tackling transparent nav bars / tab bars here: Change nav bar / tab bar appearance  #22334
• Controlled by a local feature flag "New Tab Icons"

How to test

• Verify new tab icons adapt to environment (light vs dark)
• Verify there's haptic feedback when switching tabs
• Verify the icons animate when switching tabs
• Verify notification icon shows the correct badge color when there are unread notifications (blue for WP, green for JP)
• Verify you can toggle the "New Tab Icons" feature flag

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-03.at.16.12.56.mp4

Regression Notes

1. Potential unintended areas of impact
   n/a

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   n/a

3. What automated tests I added (or what prevented me from doing so)
   n/a

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• VoiceOver.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• iPhone and iPad.
• Multi-tasking: Split view and Slide over. (iPad)

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr22325-01fdd40
	Version	23.9
	Bundle ID	org.wordpress.alpha
	Commit	01fdd40
	App Center Build	WPiOS - One-Offs #8329

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr22325-01fdd40
	Version	23.9
	Bundle ID	com.jetpack.alpha
	Commit	01fdd40
	App Center Build	jetpack-installable-builds #7352

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[kean]

To achieve the default transparent scroll edge appearance, I think it needs to be either configured with a transparent background explicitly or this could that configured that tab bar could be removed all together.

Here's what happens if you remove this code and scroll to the bottom of a screen:

[kean]

Blaze:

[kean]

The reader scroll view seems to have incorrect insets. I'm leaving the comment in this file, but it's not necessarily because of the extendedLayoutIncludesOpaqueBars.

reader-1.mp4

I also tested the behavior in trunk for comparison:

reader-2.mp4

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

[wpmobilebot]

	2 Warnings
⚠️	This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	This PR is assigned to the milestone 24.0. This milestone is due in less than 4 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger