adobe / adobe/react-spectrum

Pickers sections mixed with items aren't visually distinct

Open
#5,875 3 comments 0 reactions 0 assignees View on GitHub
Picker spectrum design
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

If I have a picker with some items grouped by section and some not, it can be hard to tell where a section ends. For Example consider the following example:

```jsx

Boat

Kangaroo
Snake


Danni
Devon

Refrigerator

```

Where some items belong to sections, and others do not.

### 🤔 Expected Behavior?

Users are able to tell when an item belongs to a section or not.

### 😯 Current Behavior

Items all look the same, unable to tell if items after a section are part of the section or not. `Refrigerator` looks like it is in `People` but a fridge is in fact not a person.

![image](https://github.com/adobe/react-spectrum/assets/1576283/c200335f-54c1-41d7-82bf-0353a51c0eb8)

### 💁 Possible Solution

Maybe indenting each item under a section with some margin would help?
![image](https://github.com/adobe/react-spectrum/assets/1576283/bdc26660-a141-450a-b739-d360cfcb676d)

### 🔦 Context

I have a mixed list of categories and single items that aren't in any category and would like it to be visually identifiable which are which.

The spectrum guidelines don't seem to provide any guidance here one way or the other. https://spectrum.adobe.com/page/picker/

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.