hypothesis / hypothesis/product-backlog

Read-only Badge Responsivity

Open
#552 1 comment 0 reactions 1 assignee Claimed by @dawachan View on GitHub
Design groups
Dominant language
No language data
Stars
122
Forks
7
PR merge metrics
No merged PRs in 30d

Description

### User Need ###
As a user I would like to have an indication that a group is 'read-only' across platforms and contexts.

### The Problem ###
In order to meet this user need, we need to have a badge that is responsive to group name char count and platform.

Due to limitations in real estate space in the header because of group name size and the platform users will view the H sidebar on, we need to scale the badge accordingly. Below are proposals for how the badge can scale to meet these various scenarios.

### Proposal ###

**Shorter group names 14 chars or less - web:**
![shorter-web](https://user-images.githubusercontent.com/5212631/37726286-efc37304-2d2c-11e8-9189-7e49ae7e55a0.png)

**Medium group names 20 chars or less - web:**
![medium -web](https://user-images.githubusercontent.com/5212631/37726309-fd5b2e58-2d2c-11e8-9ad1-7c0aa431792b.png)

**Longer group names 20-25 chars - web:**
![longer -web](https://user-images.githubusercontent.com/5212631/37726315-030628e4-2d2d-11e8-93bf-72f1b096a7ca.png)

**Mobile - long and short group names:**
![mobile - badges](https://user-images.githubusercontent.com/5212631/37726332-07ff122a-2d2d-11e8-8bd2-cedb4af36326.png)

The optimal break points for determining which badge type is displayed: Read only -> Read -> R is TBD. I will create a new user story for the badge responsivity work.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.