refa(listbox): Allow sections in Combobox + Autocomplete, adjust Sect…

…ion API (#4187)

* Combobox.Item -> Combobox.Option

* refa header

* add comments

* fix types

* autocomplete.item -> autocomplete.option

* add sections to autocomplete

* add tests

* demos

* Create bright-masks-love.md

* fix types

* update

* update changeset

.changeset/bright-masks-love.md

@@ -0,0 +1,19 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/system": patch
+"@marigold/theme-b2b": patch
+---
+
+refa(listbox): Allow sections in `<Combobox>` and `<Autocomplete>`, adjust Section API in `<Select>`, `<Combobox>` and `<Autocomplete>`.
+
+- Added the possibility to use sections with `<Combobox>` and `<Autocomplete>`
+- Refactored the `<Section>` (from `<Listbox>`) to fit our API, no need for the extra `<Header>` anymore. Instead you can do `<Select.Section header="My header">`, same for the other components
+- Renamed `<Item>` to `<Option>` in `<Combobox>` and `<Autocomplete>` to align with `<Select>`
+- Updated the docs for `<Select>`, `<Combobox>` and `<Autocomplete>`
+- Updated Storybook for `<Select>`, `<Combobox>` and `<Autocomplete>` with section stories
+- Renamed the part of the `<ListBox>` accordingly (from `sectionTitle` to `header`)
+
+  **BREAKING CHANGE:** We changed the API of the `<Section>` component that is used in `<Select>`, `<Combobox>` and `<Autocomplete>`. It is no longer necessary to add a `Header` within the `<Section>`.
+
+  Use the newly added `header` prop instead. Additionally, to unify the APIs all choices of  `<Select>`, `<Combobox>` and `<Autocomplete>` are now called `<Option>` instead of `<Item>`.

docs/content/components/form/autocomplete/autocomplete-appearance.demo.tsx

@@ -12,16 +12,16 @@ export default () => {
         label="Favorite vegetable:"
         onSubmit={(id, val) => setSubmitted([id, val])}
       >
-        <Autocomplete.Item id="spinach">Spinach</Autocomplete.Item>
-        <Autocomplete.Item id="carrots">Carrots</Autocomplete.Item>
-        <Autocomplete.Item id="broccoli">Broccoli</Autocomplete.Item>
-        <Autocomplete.Item id="garlic">Garlic</Autocomplete.Item>
-        <Autocomplete.Item id="brussels-sprouts">
+        <Autocomplete.Option id="spinach">Spinach</Autocomplete.Option>
+        <Autocomplete.Option id="carrots">Carrots</Autocomplete.Option>
+        <Autocomplete.Option id="broccoli">Broccoli</Autocomplete.Option>
+        <Autocomplete.Option id="garlic">Garlic</Autocomplete.Option>
+        <Autocomplete.Option id="brussels-sprouts">
           Brussels Sprouts
-        </Autocomplete.Item>
-        <Autocomplete.Item id="kale">Kale</Autocomplete.Item>
-        <Autocomplete.Item id="peas">Peas</Autocomplete.Item>
-        <Autocomplete.Item id="beets">Beets</Autocomplete.Item>
+        </Autocomplete.Option>
+        <Autocomplete.Option id="kale">Kale</Autocomplete.Option>
+        <Autocomplete.Option id="peas">Peas</Autocomplete.Option>
+        <Autocomplete.Option id="beets">Beets</Autocomplete.Option>
       </Autocomplete>
       <Text weight="black">User subbmitted: "{submitted}"</Text>
     </Stack>

docs/content/components/form/autocomplete/autocomplete-async.demo.tsx

@@ -53,7 +53,7 @@ export default () => {
         onSubmit={handleSubmit}
       >
         {(item: any) => (
-          <Autocomplete.Item id={item.name}>{item.name}</Autocomplete.Item>
+          <Autocomplete.Option id={item.name}>{item.name}</Autocomplete.Option>
         )}
       </Autocomplete>
       {result === null ? null : result.length > 0 ? (

docs/content/components/form/autocomplete/autocomplete-section.demo.tsx

@@ -0,0 +1,78 @@
+import { Autocomplete } from '@marigold/components';
+
+export default () => (
+  <Autocomplete label="Genres" width="fit">
+    {options.map(item => (
+      <Autocomplete.Section key={item.category} header={item.category}>
+        {item.genres.map(genre => (
+          <Autocomplete.Option key={genre}>{genre}</Autocomplete.Option>
+        ))}
+      </Autocomplete.Section>
+    ))}
+  </Autocomplete>
+);
+
+const options = [
+  {
+    category: 'Pop and Dance',
+    genres: [
+      'Pop',
+      'Synth-pop',
+      'Electropop',
+      'Dance-pop',
+      'Teen pop',
+      'Disco',
+    ],
+  },
+  {
+    category: 'Rock and Alternative',
+    genres: [
+      'Rock',
+      'Hard rock',
+      'Punk rock',
+      'Alternative rock',
+      'Indie rock',
+      'Grunge',
+      'Psychedelic rock',
+    ],
+  },
+  {
+    category: 'Hip-Hop and R&B',
+    genres: ['Hip-Hop', 'Rap', 'Trap', 'R&B', 'Neo-soul'],
+  },
+  {
+    category: 'Electronic and Experimental',
+    genres: ['EDM', 'House', 'Techno', 'Dubstep', 'Ambient', 'Industrial'],
+  },
+  {
+    category: 'Jazz and Blues',
+    genres: [
+      'Jazz',
+      'Smooth jazz',
+      'Bebop',
+      'Blues',
+      'Delta blues',
+      'Chicago blues',
+    ],
+  },
+  {
+    category: 'Classical and Orchestral',
+    genres: ['Classical', 'Baroque', 'Opera', 'Symphony', 'Chamber music'],
+  },
+  {
+    category: 'Folk and Country',
+    genres: ['Folk', 'Country', 'Bluegrass', 'Americana'],
+  },
+  {
+    category: 'Latin and World',
+    genres: ['Reggaeton', 'Salsa', 'Bossa Nova', 'Flamenco', 'Afrobeats'],
+  },
+  {
+    category: 'Metal and Hard Music',
+    genres: ['Heavy metal', 'Thrash metal', 'Death metal', 'Doom metal'],
+  },
+  {
+    category: 'Reggae and Caribbean',
+    genres: ['Reggae', 'Ska', 'Dancehall', 'Soca'],
+  },
+];