Font is not set on results

[joelanman]

Seems like we need a font declaration in the CSS

[joelanman]

So I guess this is because currently this component is not like the components in the Design System. I think there's an issue there in that it's hard for people to understand this component is different to our others. Possibly this is an issue to look at when we add this to the Design System.

At the least, we could add this information to 'Styling the Autocomplete' in the readme.

[colinrotherham]

Hi @joelanman, we use this component alongside the new design system.

The biggest changes were:

1. Padding and line heights on input/hint/option has changed
This needed to be aligned with the autocomplete results (40px height on input/hint)

2. No defaults fonts on li or input anymore
i.e. Design system doesn't set font-family: 'nta', Arial, sans-serif; by default

Plus we switched to using govuk-media-query().

Perhaps the accessible autocomplete should be updated to compile Sass to CSS using the mixins/variables from govuk-frontend?

Gist here of our tweaks, would be good to get some feedback:
https://gist.github.com/colinrotherham/6704c869ed6bc687785158006eba2a04

[edwardhorsford]

One of our designers had this whilst trying to add the autocomplete to a prototype.

[samuelhwilliams]

We just had this as well. The only change we needed (/decided) to make was to add @include govuk-typography-common(); into the .autocomplete__wrapper class.

[edwardhorsford]

We've found we needed to set

.autocomplete__wrapper * {
  @include govuk-typography-common();
}

Not including the * does not apply the font to the intput or hint.

I note that @joelanman's example in the first message has the wrong font on the input too - so the entire autocomplete is missing the font, not just the results. The input uses system-ui so looks close enough that it's not as easily seen.

cc @samuelhwilliams since you may have the same issue.