mozilla-vpn-client icon indicating copy to clipboard operation
mozilla-vpn-client copied to clipboard

Create custom navigation tab bar component

Open data-sync-user opened this issue 2 years ago • 0 comments

This task is to create a custom navigation tab bar component that will beused to navigate to different high-level areas of the application.

Design spec: https://www.figma.com/file/Disx2dX7tw81NQIN39BrYo/In-app-Messaging?node-id=2%3A531

【 highlighted #ff5630 】*IMPORTANT NOTE: 【 end highlighted 】For the sake of this task, these tabs will have no functionality. Actual navigation will be implemented in https://mozilla-hub.atlassian.net/browse/VPN-2555. This task is to just implement the navigation bar with the following acceptance criteria

Acceptance Criteria:

  • the tab bar should always appear at the bottom of the screen
  • [Dev only] the tab bar component should be capable of holding up to 4 tabs
  • For now, the tab bar should have 3 tabs - Home, Messages, and Settings
  • Unselected tab icons should be white, selected tab icons should be green with a circular backdrop behind it
  • Tab icons should display a red dot in the top right corner of the icon when a notification for that tab is available
    • For this iteration, this will be limited to just the messages tab
  • The tab bar should be accessible to screen readers and navigable using tab
  • Scroll views anywhere in the app that contain content that appears behind the tab bar should have room to be scrolled to so that all content is visible
    • This includes all views that don’t have enough content to scroll, but still have content at the bottom of the screen where the nav bar will be (i.e. sign out button on settings page)
    • The app should be audited on multiple screen sizes to make sure the nav bar is not making any content inaccessible
  • The tab bar should NOT be interactive when a modal is presented
  • The tab bar should NOT be visible during onboarding
  • The tab bar shoud transition out during a speed test or account deletion flow, and transition back in once the speed test or account deletion flow has ended
  • Hover state and pressed state should match the settings button

┆Issue is synchronized with this Jira Task ┆author: Matt Lichtenstein

data-sync-user avatar Jun 30 '22 18:06 data-sync-user