Skip to content

feat(js): rename class names #351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
francoischalifour merged 5 commits into from
Nov 4, 2020
Merged

feat(js): rename class names #351

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63ccb79
feat(js): rename class names
francoischalifour Oct 29, 2020
73285f5
feat(examples): update class names
francoischalifour Oct 29, 2020
f28bc1b
Merge branch 'next' into feat/js-class-names-1
francoischalifour Nov 4, 2020
a600ed2
feat: rename ListContainer to Panel
francoischalifour Nov 4, 2020
8fcd947
feat: remove Completion class names
francoischalifour Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/autocomplete-js/src/__tests__/autocomplete.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ describe('autocomplete-js', () => {
</div>
</form>
<div
class="aa-Dropdown"
class="aa-ListContainer"
Copy link
Copy Markdown
Contributor Author

@francoischalifour francoischalifour Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any better alternative to this?

Copy link
Copy Markdown
Contributor

@Haroenv Haroenv Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think dropdown is really a bad name

Copy link
Copy Markdown
Contributor

@eunjae-lee eunjae-lee Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's going to have ul, right? Then.. I guess ListContainer is good.

Copy link
Copy Markdown
Contributor

@Haroenv Haroenv Oct 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think something with "results" could also work

Copy link
Copy Markdown
Contributor Author

@francoischalifour francoischalifour Oct 29, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Haroenv "dropdown" loses its sense in the context of modal searches like DocSearch v3, so I'm unsure.

Copy link
Copy Markdown
Contributor

@Haroenv Haroenv Oct 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

panel maybe?

Copy link
Copy Markdown
Contributor

@Haroenv Haroenv Oct 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ListsContainer or ResultsContainer seems best to me. Maybe also something like Suggestions, Collections or Sources, since you renamed that?

Copy link
Copy Markdown
Contributor Author

@francoischalifour francoischalifour Oct 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's important to note that this term will also replace the main getDropdownProps API:

https://github.com/algolia/autocomplete.js/blob/a916aea48743eaa3e97e1e421aa1ac6986fa0e83/packages/autocomplete-core/src/createAutocomplete.ts#L81

Perhaps "Panel" makes sense?

Copy link
Copy Markdown
Contributor

@Shipow Shipow Oct 30, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Panel came back several times, Menu isn't a bad name neither. Except you won't have to wait to get your order served :p

Copy link
Copy Markdown
Contributor Author

@francoischalifour francoischalifour Nov 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed "ListContainer" to "Panel" in a600ed2. That's good enough for now.

hidden=""
style="top: 0px; left: 0px; right: 0px; max-width: unset;"
/>
Expand Down
22 changes: 8 additions & 14 deletions packages/autocomplete-js/src/autocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export function autocomplete<TItem>({
setProperties(dropdown, {
...autocomplete.getDropdownProps(),
hidden: true,
class: concatClassNames(['aa-Dropdown', classNames.dropdown]),
class: concatClassNames(['aa-ListContainer', classNames.listContainer]),
});

function render(state: AutocompleteCoreState<TItem>) {
Expand Down Expand Up @@ -139,9 +139,9 @@ export function autocomplete<TItem>({
}

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

const sections = state.collections.map((collection) => {
Expand All @@ -150,16 +150,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 @@ -172,14 +169,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-ListItem', classNames.listItem]),
});
renderTemplate(source.templates.item({ root: li, item, state }), li);

Expand All @@ -196,10 +193,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 Down
12 changes: 6 additions & 6 deletions packages/autocomplete-js/src/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,12 @@ export interface AutocompleteOptions<TItem>
input?: string;
completion?: string;
resetButton?: string;
dropdown?: string;
section?: string;
sectionHeader?: string;
menu?: string;
item?: string;
sectionFooter?: string;
listContainer?: string;
source?: string;
sourceHeader?: string;
list?: string;
listItem?: string;
sourceFooter?: string;
};
/**
* Function called to render the autocomplete results. It is useful for rendering sections in different row or column layouts.
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/autocomplete-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,12 @@ type ClassNames = {
input?: string;
completion?: string;
Comment thread
Haroenv marked this conversation as resolved.
Outdated
resetButton?: string;
dropdown?: string;
section?: string;
sectionHeader?: string;
menu?: string;
item?: string;
sectionFooter?: string;
listContainer?: string;
source?: string;
sourceHeader?: string;
list?: string;
listItem?: string;
sourceFooter?: string;
};
```

Expand Down