mapbox / mapbox/mapbox-navigation-ios

Compose a theme template visualizer

Open
#1,504 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature jira-sync-complete UI
Dominant language
Swift
Stars
918
Forks
326
Avg merge
1h 16m
Merged PRs (30d)
3

Description

Finding all classes and styling all necessary components can be tedious. We can make this a little bit easier by adding a snapshot test that renders all stylable UIViews and UIControls in the same image that we can link to from our documentation. This would help w/ connecting the class name to a stylable component but also visualize the entire theme.

I'm thinking something like the navigation view, but for all components that can be visible at any given time, including the sub banner and hidden buttons.

func draw(views: [UIView & Stylable], using style: Style) { 
    // Draw all views using `style`
    FBSnapshotVerifyView(containerView)
}

/**
 A view that represents the root view of the MapboxNavigation drop-in UI.
 
 ## Components
 
 1. InstructionsBannerView
 2. InformationStackView
 3. BottomBannerView
 4. ResumeButton
 5. WayNameLabel
 6. FloatingStackView
 7. NavigationMapView
 
 +--------------------+
 |         1          |
 +--------------------+
 |         2          |
 +----------------+---+
 |                |   |
 |                | 6 |
 |                |   |
 |         7      +---+
 |                    |
 |                    |
 |                    |
 +------------+       |
 |  4  ||  5  |       |
 +------------+-------+
 |         3          |
 +--------------------+
*/

@mapbox/navigation-ios

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the existing navigation view and the snapshot-test usage represented by FBSnapshotVerifyView. Identify the stylable UIViews and UIControls, including the listed navigation components and hidden buttons, then verify that one rendered image covers the full themed layout and can be linked from the documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
swift
Domain
design, mobile, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.