search

carbon-design-system / carbon-react-native

The React Native implementation of the Carbon Design System
https://carbon-design-system.github.io/carbon-react-native/
Apache License 2.0
30 stars 8 forks source link

Navigation Based Components #18

Closed WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH closed 2 years ago

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

These are components that are designed that are around navigation (specific to platform and mobile flow).

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

Bottom Navigation Bar android

NOTE. the test app is using Carbon header (WEB). Therefore the not safe zone matches that color. Once we migrate to using the new navigation the safe zone color will change to be layer01.

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

Bottom toolbar split into two components (, ) to keep the logic clean.

Example:

android2

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

For Top Nav added Search component that was skipped originally (same rules/setup as BaseTextInput):

Screen Shot 2022-08-17 at 3 11 14 PM

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

@Mariusz-Mickiewicz the Title on here seems to be heading-05 with 400 (instead of 300). I forced heading-05 to be 400.

heading-05 
Type: IBM Plex Sans
Size: 32px / 2rem
Line height: 40px / 2.5rem
Weight: 300 / Light
Letter spacing: 0px
Type set: Productive
$heading-05

Screen Shot 2022-08-17 at 4 22 44 PM

Similar thing for BottomNavigationBar for active text (bold label-01 it seems)?

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

Top navigation header:

android2

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

Added basic LIST support (Right/Left icon, text, subtext, chevron).

Will expand more and then close that one out.

8OYx4JT4MsadkJ5CPwN52Fdm7fbRLSNYd0h4y5I commented 2 years ago

It is looking great, thank you. I will review as soon as I can.

I see that for the Bottom Nav Bar we don't have the typical RN SafeArea issue, which is great. I wonder how this is solved? On devices with no Home Indicator the height of the Nav bar will be smaller, right? Is the SafeArea adapting in a smart way?

WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH commented 2 years ago

The parent app should handle SafeZone. Which we do in our demo app (pretty standard flow for RN apps). So the component itself does not have to worry about it. And then we can simply use the proper color for our SafeZone background that matches our nav items (layer-01 I believe) and then it just all works :)

So here is example on iPhone with physical home button: Screen Shot 2022-08-22 at 11 44 08 AM