Add datalist to examples

[petesfrench]

Done

• Adds datalist to examples without any styling.

Fixes #2673

QA

• Open demo
• Choose your favorite ice cream

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-3984.demos.haus

[bartaz]

It seems it's only Chrome that adds this native arrow on hover/focus when list is available.

Firefox doesn't do anything at all.

So I think it is fine if we just hide it in Chrome as well.

Having a look through MDN and stack overflow it seems it is possible: https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome

input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

I think we should add something like that, but probably limit it to inputs that have datalist defined:

input[list]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

Also there doesn't seem to be any way to style the list itself. This is a native element similar to select or autocomplete and it can't be styled with CSS.

[bartaz]

@petesfrench Can you also add this example to "Forms" documentation page (/docs/base/forms.md)? After Select maybe (or somewhere around there, where different input types are shown).

[petesfrench]

@bartaz Is the drop down supposed to span the length of the input? Similar to it does on a select?

[bartaz]

@bartaz Is the drop down supposed to span the length of the input? Similar to it does on a select?

I don't think we can do anything about it, it is controlled by the browser and styles won't affect it.

[bartaz]

@petesfrench All looks good.

Overall I think this addition can be counted as a feature, so would be good to:

• bump vanilla version accordingly
• add this to "what's new page" table
• update the labels in the side navigation (remove ones from prev. version, and add 'new' to Forms page)