Skip to content

Commit

Permalink
feat(js): rename class names (#351)
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoischalifour
francoischalifour authored Nov 4, 2020
1 parent 25099e8 commit 8c53d2d
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 56 deletions.
20 changes: 5 additions & 15 deletions examples/js/autocomplete.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,7 @@
-webkit-appearance: none;
}

.aa-Completion {
color: #999;
left: 1px;
position: absolute;
transform: translateY(50%);
z-index: 1;
}

.aa-Input,
.aa-Completion {
.aa-Input {
padding: 0 2.25rem;
}

Expand All @@ -77,7 +68,7 @@
z-index: 2;
}

.aa-Dropdown {
.aa-Panel {
background-color: #fff;
border: 1px solid rgba(150, 150, 150, 0.16);
border-radius: 3px;
Expand All @@ -89,25 +80,24 @@
width: 100%;
}

.aa-Dropdown--stalled {
.aa-Panel--stalled {
filter: grayscale(1);
opacity: 0.5;
transition: opacity 200ms ease-in;
}

.aa-Dropdown a {
.aa-Panel a {
color: inherit;
text-decoration: none;
}

.aa-Dropdown ul {
.aa-Panel ul {
list-style: none;
margin: 0;
padding: 0;
}

.aa-Item {
align-items: center;
color: #23263b;
cursor: pointer;
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions packages/autocomplete-js/src/__tests__/autocomplete.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('autocomplete-js', () => {
class="aa-InputWrapper"
>
<input
aria-autocomplete="list"
aria-autocomplete="both"
aria-labelledby="autocomplete-label"
autocapitalize="off"
autocomplete="off"
Expand Down Expand Up @@ -109,7 +109,7 @@ describe('autocomplete-js', () => {
</div>
</form>
<div
class="aa-Dropdown"
class="aa-Panel"
hidden=""
style="top: 0px; left: 0px; right: 0px; max-width: unset;"
/>
Expand Down
46 changes: 19 additions & 27 deletions packages/autocomplete-js/src/autocomplete.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function autocomplete<TItem>({
const form = document.createElement('form');
const label = document.createElement('label');
const resetButton = document.createElement('button');
const dropdown = document.createElement('div');
const panel = document.createElement('div');

const autocomplete = createAutocomplete<TItem>({
...props,
Expand All @@ -51,13 +51,13 @@ export function autocomplete<TItem>({
});

const onResize = debounce(() => {
if (!dropdown.hasAttribute('hidden')) {
if (!panel.hasAttribute('hidden')) {
setDropdownPosition();
}
}, 100);

function setDropdownPosition() {
setProperties(dropdown, {
setProperties(panel, {
style: getDropdownPositionStyle({
dropdownPlacement,
container: root,
Expand All @@ -70,7 +70,7 @@ export function autocomplete<TItem>({
setProperties(window as any, {
...autocomplete.getEnvironmentProps({
searchBoxElement: form,
dropdownElement: dropdown,
dropdownElement: panel,
inputElement: input,
}),
onResize,
Expand All @@ -85,9 +85,7 @@ export function autocomplete<TItem>({
class: concatClassNames(['aa-Form', classNames.form]),
});
setProperties(inputWrapper, {
class: ['aa-InputWrapper', classNames.inputWrapper]
.filter(Boolean)
.join(' '),
class: concatClassNames(['aa-InputWrapper', classNames.inputWrapper]),
});
setProperties(input, {
...autocomplete.getInputProps({ inputElement: input }),
Expand All @@ -104,10 +102,10 @@ export function autocomplete<TItem>({
class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
innerHTML: resetIcon,
});
setProperties(dropdown, {
setProperties(panel, {
...autocomplete.getDropdownProps(),
hidden: true,
class: concatClassNames(['aa-Dropdown', classNames.dropdown]),
class: concatClassNames(['aa-Panel', classNames.panel]),
});

function render(state: AutocompleteCoreState<TItem>) {
Expand All @@ -117,23 +115,23 @@ export function autocomplete<TItem>({
autocomplete.getInputProps({ inputElement: input })
);

dropdown.innerHTML = '';
panel.innerHTML = '';

if (state.isOpen) {
setProperties(dropdown, {
setProperties(panel, {
hidden: false,
});
} else {
setProperties(dropdown, {
setProperties(panel, {
hidden: true,
});
return;
}

if (state.status === 'stalled') {
dropdown.classList.add('aa-Dropdown--stalled');
panel.classList.add('aa-panel--stalled');
} else {
dropdown.classList.remove('aa-Dropdown--stalled');
panel.classList.remove('aa-panel--stalled');
}

const sections = state.collections.map((collection) => {
Expand All @@ -142,16 +140,13 @@ export function autocomplete<TItem>({

const section = document.createElement('section');
setProperties(section, {
class: concatClassNames(['aa-Section', classNames.section]),
class: concatClassNames(['aa-Source', classNames.source]),
});

if (source.templates.header) {
const header = document.createElement('div');
setProperties(header, {
class: concatClassNames([
'aa-SectionHeader',
classNames.sectionHeader,
]),
class: concatClassNames(['aa-SourceHeader', classNames.sourceHeader]),
});
renderTemplate(
source.templates.header({ root: header, state }),
Expand All @@ -164,14 +159,14 @@ export function autocomplete<TItem>({
const menu = document.createElement('ul');
setProperties(menu, {
...autocomplete.getMenuProps(),
class: concatClassNames(['aa-Menu', classNames.menu]),
class: concatClassNames(['aa-List', classNames.list]),
});

const menuItems = items.map((item) => {
const li = document.createElement('li');
setProperties(li, {
...autocomplete.getItemProps({ item, source }),
class: concatClassNames(['aa-Item', classNames.item]),
class: concatClassNames(['aa-Item', classNames.Item]),
});
renderTemplate(source.templates.item({ root: li, item, state }), li);

Expand All @@ -188,10 +183,7 @@ export function autocomplete<TItem>({
if (source.templates.footer) {
const footer = document.createElement('div');
setProperties(footer, {
class: concatClassNames([
'aa-SectionFooter',
classNames.sectionFooter,
]),
class: concatClassNames(['aa-SourceFooter', classNames.sourceFooter]),
});
renderTemplate(
source.templates.footer({ root: footer, state }),
Expand All @@ -203,15 +195,15 @@ export function autocomplete<TItem>({
return section;
});

renderDropdown({ root: dropdown, sections, state });
renderDropdown({ root: panel, sections, state });
}

inputWrapper.appendChild(input);
inputWrapper.appendChild(label);
inputWrapper.appendChild(resetButton);
form.appendChild(inputWrapper);
root.appendChild(form);
root.appendChild(dropdown);
root.appendChild(panel);
containerElement.appendChild(root);

setDropdownPosition();
Expand Down
11 changes: 5 additions & 6 deletions packages/autocomplete-js/src/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,13 @@ export interface AutocompleteOptions<TItem>
label?: string;
inputWrapper?: string;
input?: string;
completion?: string;
resetButton?: string;
dropdown?: string;
section?: string;
sectionHeader?: string;
menu?: string;
panel?: string;
source?: string;
sourceHeader?: string;
list?: string;
item?: string;
sectionFooter?: string;
sourceFooter?: string;
};
/**
* Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
Expand Down
11 changes: 5 additions & 6 deletions packages/website/docs/autocomplete-js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,13 @@ type ClassNames = {
label?: string;
inputWrapper?: string;
input?: string;
completion?: string;
resetButton?: string;
dropdown?: string;
section?: string;
sectionHeader?: string;
menu?: string;
panel?: string;
source?: string;
sourceHeader?: string;
list?: string;
item?: string;
sectionFooter?: string;
sourceFooter?: string;
};
```

Expand Down

0 comments on commit 8c53d2d

Please sign in to comment.