Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Add `typeClass` to search `AssistantItem` (#29369) 

When rendering the initial search options, we re-use the `AssistantItem` component. 

`AssistantItem` requires that you pass in the required params to define what _type_ of component it will be - category, tag, tag intersection, user, etc. This flexibility is nice, as we can just loop through all `@results` and pass in params, without having to predefine what _type_ of result it is. 

It is is not very good when it comes to seperating the html strucutre of each unique _type_. This is an example of the initial search results: 

<img width="408" alt="Screenshot 2024-10-23 at 9 04 18 AM" src="https://github.com/user-attachments/assets/46795697-6246-4b60-be18-fea200a57baa">

You can see that both categories **and** tags are being rendered. The HTML strcuture looks like so: 

```html
<ul class="search-menu-assistant">
  <li class="search-menu-assistant-item">
    <a class="search-link" href="#"> CATEGORY </a>
  </li>
  <li class="search-menu-assistant-item">
    <a class="search-link" href="#"> CATEGORY </a>
  </li>
  <li class="search-menu-assistant-item">
    <a class="search-link" href="#"> TAG </a>
  </li>
  <li class="search-menu-assistant-item">
    <a class="search-link" href="#"> TAG </a>
  </li>
</ul>
```

There is no way to differentiate between the types, even though some are categories and others tags.

This PR adds a _typeClass_ to each component, that will be a additional class included at the top level of the component HTML structure. 

```html
<ul class="search-menu-assistant">
  <li class="category search-menu-assistant-item">
    <a class="search-link" href="#"> CATEGORY </a>
  </li>
  <li class="category search-menu-assistant-item">
    <a class="search-link" href="#"> CATEGORY </a>
  </li>
  <li class="tag search-menu-assistant-item">
    <a class="search-link" href="#"> TAG </a>
  </li>
  <li class="tag search-menu-assistant-item">
    <a class="search-link" href="#"> TAG </a>
  </li>
</ul>
```
_See `.category` and `.tag` attached to each `search-menu-assistant-item`._ 

This will help us identify which _type_ it is, and allow devs to target and customize each element by _type_.
This commit is contained in:
Isaac Janzen 2024-10-23 09:47:45 -05:00 committed by GitHub
parent a59c07fc45
commit 87359cf7aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.hbs
View File

@ -1,7 +1,7 @@
{{! template-lint-disable no-pointer-down-event-binding }}
{{! template-lint-disable no-invalid-interactive }}
<li
class="search-menu-assistant-item"
class={{concat-class @typeClass "search-menu-assistant-item"}}
{{on "keydown" this.onKeydown}}
{{on "click" this.onClick}}
data-usage={{@usage}}

7
app/assets/javascripts/discourse/app/components/search-menu/results/assistant.hbs
View File

@ -14,6 +14,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="tag-intersection"
/>
{{/each}}
{{else if (eq this.suggestionType "categoryOrTag")}}
@ -29,6 +30,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="category"
/>
{{else}}
{{! render tag }}
@ -40,6 +42,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="tag"
/>
{{/if}}
{{/each}}
@ -55,6 +58,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="user"
/>
<SearchMenu::Results::AssistantItem
@ -64,6 +68,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="user"
/>
{{else}}
{{#each @results as |result|}}
@ -74,6 +79,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="user"
/>
{{/each}}
{{/if}}
@ -90,6 +96,7 @@
@closeSearchMenu={{@closeSearchMenu}}
@searchTermChanged={{@searchTermChanged}}
@suggestionKeyword={{@suggestionKeyword}}
@typeClass="shortcut"
/>
{{/each}}
{{/if}}