feat: Allow autocomplete to be styled from parent #124
Conversation
✅ Deploy Preview for oslmap ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| id="${this.id}-container" | ||
| role="status" | ||
| spellcheck="false" | ||
| ></div>`; |
There was a problem hiding this comment.
👍 thanks for catching these extra props!
| @@ -1,6 +1,46 @@ | |||
| @import "node_modules/govuk-frontend/govuk/all"; | |||
| // @import "accessible-autocomplete"; | |||
|
|
|||
| :host { | |||
| $font-size: var(--autocomplete__input__font-size, 19px); | |||
| $input-height: var(--autocomplete__input__height, 35px); | |||
There was a problem hiding this comment.
maybe option to pass $font-family here too? i think this could default to "GDS Transport", arial, sans-serif" as it renders now, but we'll probably want it to inherit Inter in planx? (otherwise i think it would become the new stray rounded-corners that would really haunt alastair lol 🙃)
i have a weird little hack below for the ul, li elements you should feel free to remove too - i realize that font does not actually match the autocomplete label currently!
| --autocomplete__option__hover-border-color: pink; | ||
| --autocomplete__option__hover-background-color: pink; | ||
| } | ||
| </style> --> |
There was a problem hiding this comment.
cool to see theming in action, this all works smoothly for me locally 🌺
This PR allows certain properties of the
address-autocompletecomponent to be styled from a parent. The properties that have been given variables should marry up with any that we need to match the PlanX style.Lit Docs - https://lit.dev/docs/components/styles/#theming
Example with Lambeth primary colour
To Do