Pickers sections mixed with items aren't visually distinct

[dsmmcken]

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:

<Picker label="Pick your favorite">
  <Item key="Boat">Boat</Item>
  <Section title="Animals">
    <Item key="Kangaroo">Kangaroo</Item>
    <Item key="Snake">Snake</Item>
  </Section>
  <Section title="People">
    <Item key="Danni">Danni</Item>
    <Item key="Devon">Devon</Item>
  </Section>
  <Item key="Refrigerator">Refrigerator</Item>
</Picker>

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.

💁 Possible Solution

Maybe indenting each item under a section with some margin would help?

🔦 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

[LFDanLu]

We ran into a similar issue for ListView during our first attempt implementing sections there and decided that all items must be within a section if any sections existed. Spectrum Design has historically suggested that a divider be used to separate the section above from the non-grouped items below but that hasn't been settled as of yet.

For your use case, how many non-grouped items exist? Could they fall under a umbrella grouping or does it make more sense for them to be non-grouped?

[dsmmcken]

My use case was pretty mixed, (a listing of servers, some belonging to clusters (sections), some not, sorted alphabetically by name). A divider before items that come after sections would also be visually acceptable.

cluster a
cluster b
  server b - a
  server b - b
  server b - c
cluster c
cluster d
  server d - a
  server d - b
cluster e

[LFDanLu]

Gotcha, I'll bring this up with Spectrum Design.