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. |
jessicamcinchak
left a comment
jessicamcinchak
left a comment
There was a problem hiding this comment.
thank you, this is great! one minor suggestion, but excited to try this in planx asap 🚀
| id="${this.id}-container" | ||
| role="status" | ||
| spellcheck="false" | ||
| ></div>`; |
There was a problem hiding this comment.
👍 thanks for catching these extra props!
|
|
||
| :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 🌺
2 participants
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