HACK week: Add new tab icons

[momo-ozawa]

Description

• Adds new tab icons (Design ref: eYeHXEMDbnFptE40xUqZ2T-fi-1862%3A3175)
• Controlled by a local feature flag "New Tab Icons"

How to test

• Verify new tab icons adapt to environment (light vs dark)
• 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.-.2023-12-08.at.09.23.41.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	pr22197-cf91ff8
	Version	23.8
	Bundle ID	org.wordpress.alpha
	Commit	cf91ff8
	App Center Build	WPiOS - One-Offs #8109

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	pr22197-cf91ff8
	Version	23.8
	Bundle ID	com.jetpack.alpha
	Commit	cf91ff8
	App Center Build	jetpack-installable-builds #7129

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

[osullivanchris]

Great to play with a build! cool stuff. Some questions/ideas (happy to discuss on slack too):

• Can we hide the tab bar by default on scroll on all views?
• Is the tab bar still using a flat 100% white color? Can we bring back the native blur and transparency?
• The unselected icons are a little lighter than I expected. Is there any alpha being applied in code? I already have an alpha in the asset.
• WDYT about using the icon for me rather than person's avatar? I'm split. The avatar is more clear. But it also puts the most visual emphasis on this tab, when its the least important one. Want to try the 'Me' assets I gave?

[mokagio]

Moving this to 24.0 as I'll run the 23.9 code freeze and this has not been approved yet.

[momo-ozawa]

@osullivanchris

Can we hide the tab bar by default on scroll on all views?

I'm not sure if we should be hiding the tab bar on scroll. Apple doesn't provide any nice APIs for animating hiding/showing the tab bar.

Is the tab bar still using a flat 100% white color? Can we bring back the native blur and transparency?

Done! f1287b9

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-11.at.10.59.04.mp4

The unselected icons are a little lighter than I expected. Is there any alpha being applied in code? I already have an alpha in the asset.

AFAICT there's no alpha being applied via code. Can you provide an icon that has 100% alpha (solid color) to see if that makes a difference? Just one icon is okay for now, so I can figure out whether the built-in alpha is causing issues.

WDYT about using the icon for me rather than person's avatar? I'm split. The avatar is more clear. But it also puts the most visual emphasis on this tab, when its the least important one. Want to try the 'Me' assets I gave?

Right now the new icon is used as a placeholder image - it's displayed if the user hasn't set a profile icon. I wasn't sure if I should completely replace the me tab icon, or just update the placeholder image, since we recently re-worked the me tab profile icon.

I can change it to always show the static icon instead. Does this mean that we should also change the profile icon shown in the menu for the simplified WP UI (see: screenshot)?

[osullivanchris]

I'm not sure if we should be hiding the tab bar on scroll. Apple doesn't provide any nice APIs for animating hiding/showing the tab bar.

Ok sure. Might be something to consider on a case by case basis instead. Relevant in Reader for example. Maybe not everywhere.

Done

Transparency looks good. Are there choices of materials/transparencies or one default provided? Do you like how it looks now? Same question for @kean

AFAICT there's no alpha being applied via code. Can you provide an icon that has 100% alpha (solid color) to see if that makes a difference? Just one icon is okay for now, so I can figure out whether the built-in alpha is causing issues.

Attached below

Right now the new icon is used as a placeholder image - it's displayed if the user hasn't set a profile icon. I wasn't sure if I should completely replace the me tab icon, or just update the placeholder image, since we recently re-worked the me tab profile icon.

Leave this with me as an open question, along with the new reader icon. I need to get some answers from the design team. Will get them this week.

tab bar non transparent.zip

[wpmobilebot]

	1 Warning
⚠️	This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

[momo-ozawa]

@osullivanchris Thanks for reviewing!

Might be something to consider on a case by case basis instead. Relevant in Reader for example. Maybe not everywhere.

Ok - will keep this in mind

Transparency looks good. Are there choices of materials/transparencies or one default provided? Do you like how it looks now? Same question for @kean

It's the default transparency. Personally I think it looks good!

Attached below

Thanks! The opaque images worked like a charm!

Leave this with me as an open question, along with the new reader icon. I need to get some answers from the design team. Will get them this week.

Sounds good - thanks!

[momo-ozawa]

Closing this in favor of #22325