search

alphagov / accessible-autocomplete

An autocomplete component, built to be accessible.
https://alphagov.github.io/accessible-autocomplete/examples/
MIT License
911 stars 149 forks source link

Font is not set on results #285

Open joelanman opened 6 years ago

joelanman commented 6 years ago

Seems like we need a font declaration in the CSS

image

joelanman commented 6 years ago

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 commented 6 years ago

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

sample diff

edwardhorsford commented 5 years ago

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

samuelhwilliams commented 5 years ago

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 commented 4 years ago

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.