[Design review] Navigation list

[8OYx4JT4MsadkJ5CPwN52Fdm7fbRLSNYd0h4y5I]

Thanks a lot for adding this component.

• [x] Subtitle should expand the size of the whole cell (adding top/bottom padding for the text area will help (see the image or Figma file below). Paddings will also help with better resizing (Dynamic Type accessibility changes made by user).
• [x] When cell is higher because of the subtitle's presence, all the texts and icons should stay in place (stay aligned to the top)
• [x] When left icon is not present the space in front of the text should be only 16px
• [x] There should be $border-subtle-01 divider between the cell - last item in the group shouldn't have it. Not sure if we have / will have a group component for the list, so the last item automatically doesn't show the divider and header and footer are optional props. Are the header/footer separate components now? The header could be re-used for example in the left drawer/panel component etc.

Specs Here is some visual specification. https://www.figma.com/file/YMg6MNB1JFF73IFZkrx5P1/(v11-ALPHA)-Light-Theme---Carbon-Native-Mobile?node-id=2017%3A8059

• Purple - paddings
• Magenta - sizes of elements
• Green - tap area of the element (I know that RN can have bigger tap area than the item size inside the layout). Info icon can lead to some other destination than the whole cell (see iOS calendar example)

Review Here are some checks I've made, basically only the red ones are something to look at.

[WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH]

For right icon that is green. Isn’t the full component what is pressable. You can’t have pressable in pressable. Do you want that icon to be a button instead (we have to remove the onClick on the parent so they can’t be both pressable).

[8OYx4JT4MsadkJ5CPwN52Fdm7fbRLSNYd0h4y5I]

Hi, If you check the link to the iOS calendar above, you can see some screenshots there directly from Apple's app - Left side of the cell is basically a checkbox (you can select or deselect the item) and the Info icon on the right leads to a different screen (some details).

If the pressable can be embedded in another one, than the only solution I see is splitting areas, but because chevron does the same as the left side of the cell then this is not elegant at all. Let's leave it for now with no change and see if the community comes up with a need for it. I see some apps having a bunch of icon buttons with separate actions, but they don't use RN and their cell is not interactive, just the buttons.

[WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH]

OK. Will hold off on nested pressables until there is need from a team. For DataTable we change the parent wrap for a row if you want inner pressables which works as expected. But it is a messy use case. When someone needs this we will revisit when they open the request. :)

[WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH]

Are the header/footer separate components now? The header could be re-used for example in the left drawer/panel component etc.

Everything is broken into small components pieces. So hopefully no limiting for using as children or in custom use cases.

[WYXEhlEtzb2Gfe6HgrQLAf6MeMEatE77yYzHHIH]

NavigationList component introduced as wrapper and handles lastItem style overriding.

Check GIF for changes. As request for features come in we can constantly expand this with the additional features. But we will test the water for needs before muddying the component.