GC Combo-box component (WET-631)

[BrahimMahadi]

An accessible combo-box component that provides a modern, user-friendly interface for selecting multiple items. Reference JIRA ticket WET-631.

• Complete feature implementation and implement/remove any additional features after review
• Complete documentation
• Refactor code
• Perform accessibility assessment

[Garneauma]

This is just a quick partial review.

[Garneauma]

Let's go with "gc-combobox" for now.

[Garneauma]

Can you find a way to get styles from a CSS file instead? This would be easier to test using our linting tools.

[Garneauma]

Those default values would need to use i18n strings.

[duboisp]

A few comment after your presentation.

• Use/allow the slot for label
• Use named slot for options instead of JSON array in an attribute
• Use series of hidden input for an integration into form API
• Use "is" ex: . (But this will require functional + compatibility testing in safari + safari mobile)
• Allow an option where we manually add my own custom tag. vs using datalist (for more info, check the HTML5 specification around it)
• Allow the customization of colour used for tags (background+colour) by using the part attribute

Authoring code sample example

<label for="mycbx">Label</label>
<input id="mycbx" is="combo-box-component" multiple name="cbx" list="function-types">
<datalist id="function-types">
  <option value="function">function</option>
  <option value="async function">async function</option>
  <option value="function*">generator function</option>
  <option value="=>">arrow function</option>
  <option value="async =>">async arrow function</option>
  <option value="async function*">async generator function</option>
</datalist>

Or alternatively

<combo-box-component
	id="demo"
	placeholder="Select technologies...">

<div slot="label">Select<sup>sup</sup> Technologies label</div>

<datalist slot="options">
  <option>JavaScript</option>
  <option>TypeScript</option>
  <option>React</option>
  <option>Vue</option>
  <option>Angular</option>
  <option>Node.js</option>
</datalist>


</combo-box-component>

Other ref.

• https://html.spec.whatwg.org/multipage/input.html#attr-input-multiple
• https://html.spec.whatwg.org/multipage/input.html#attr-input-list

And regardless of my above comment, we know that eventually this component, after our immediate need satisfied, we are going to transform / re-code it as a GCDS component, so feel free to take decision that will be aligned with how GCDS component will be develop.