Skip to content

Commit

Permalink
feat: Allow autocomplete to be styled from parent (#124)
Browse files Browse the repository at this point in the history
  • Loading branch information
DafyddLlyr authored Mar 23, 2022
1 parent 1c0ad0f commit 4edfc56
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 5 deletions.
17 changes: 17 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<!-- Examples of available style options for address-autocomplete -->
<!-- <style>
address-autocomplete {
--autocomplete__input__padding: 6px 12px 7px 12px;
--autocomplete__input__font-size: 15px;
--autocomplete__input__height: 50px;
--autocomplete__dropdown-arrow-down__top: 16px;
--autocomplete__dropdown-arrow-down__z-index: 2;
--autocomplete__option__font-size: 15px;
--autocomplete__option__padding: 6px 12px 7px 12px;
--autocomplete__menu__max-height: 336px;
--autocomplete__option__border-bottom: solid 1px grey;
--autocomplete__option__hover-border-color: rgb(0, 99, 96);
--autocomplete__option__hover-background-color: rgb(0, 99, 96);
--autocomplete__font-family: "Courier New";
}
</style> -->
</head>
<body>
<div style="display:flex;flex-direction:column;">
Expand Down
8 changes: 7 additions & 1 deletion src/components/address-autocomplete/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export class AddressAutocomplete extends LitElement {
source: this._options,
defaultValue: this.initialAddress,
showAllValues: true,
displayMenu: "overlay",
tNoResults: () => "No addresses found",
onConfirm: (option: string) => {
this._selectedAddress = this._addressesInPostcode.filter(
Expand Down Expand Up @@ -175,7 +176,12 @@ export class AddressAutocomplete extends LitElement {
href="https://cdn.jsdelivr.net/npm/accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.css"
/>
<label class="govuk-label" htmlFor=${this.id}>${this.label}</label>
<div id="${this.id}-container" role="status" tabindex="0"></div>`;
<div
id="${this.id}-container"
role="status"
tabindex="0"
spellcheck="false"
></div>`;
}

/**
Expand Down
53 changes: 49 additions & 4 deletions src/components/address-autocomplete/styles.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,53 @@
@import "node_modules/govuk-frontend/govuk/all";
// @import "accessible-autocomplete";

// makes listbox items consistent with label font, etc
ul,
li {
font-family: Inter, Helvetica, sans-serif;
:host {
$font-family: var(
--autocomplete__font-family,
"GDS Transport",
arial,
sans-serif
);
$font-size: var(--autocomplete__input__font-size, 19px);
$input-height: var(--autocomplete__input__height, 35px);

.govuk-label {
font-family: $font-family;
}

.autocomplete__input {
font-family: $font-family;
font-size: $font-size;
height: $input-height;
padding: var(--autocomplete__input__padding, 5px 34px 5px 5px);
}

.autocomplete__dropdown-arrow-down {
z-index: var(--autocomplete__dropdown-arrow-down__z-index, -1);
// Ensure the down arrow is vertically centred
$arrow-down-height: 17px;
top: calc(($input-height - $arrow-down-height) / 2);
}

.autocomplete__option {
font-family: $font-family;
font-size: $font-size;
padding: var(--autocomplete__option__padding, 5px);
border-bottom: var(
--autocomplete__option__border-bottom,
solid 1px #b1b4b6
);
&:hover,
&:focus {
border-color: var(--autocomplete__option__hover-border-color, #1d70b8);
background-color: var(
--autocomplete__option__hover-background-color,
#1d70b8
);
}
}

.autocomplete__menu {
max-height: var(--autocomplete__menu__max-height, 342px);
}
}

0 comments on commit 4edfc56

Please sign in to comment.