Skip to content
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.

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

feat(ui5-input): Add highlighting #1943

Merged
merged 18 commits into from
Jul 20, 2020
Merged

feat(ui5-input): Add highlighting #1943

merged 18 commits into from
Jul 20, 2020

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Jul 10, 2020

Add highlighting support for the suggestion text and suggestion description,
that can be enabled with the newly added "highlight" property of the Input.

FIXES: #1918

Screenshot 2020-07-10 at 4 35 37 PM

Technical details:

    • The idea is to add <b> tags around the characters that have to be highlighted and triple "{{{" moustache statements so these <b> are interpreted properly.
  • New item SuggestionListItem ui5-li-suggestion-item introduced that allows rendering of markup
  • Add opening tag "<" replacement to avoid XSS

@@ -6,7 +6,7 @@
<span part="title" class="ui5-li-title"><slot></slot></span>
{{/if}}
{{#if description}}
<span part="description" class="ui5-li-desc">{{description}}</span>
<span part="description" class="ui5-li-desc">{{{description}}}</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's discuss this in a wider round. If we use {{{ for the representation of a property that can be set programatically in a so common component, this could be a security risk. We could strip script tags from the description to counter the problem too.

The same goes for the other 2 places with {{{

@@ -134,6 +134,19 @@ const metadata = {
type: Boolean,
},

/**
* Defines if characters within the suggestions to be highlighted
Copy link
Contributor

Choose a reason for hiding this comment

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

to be => are to be

@@ -134,6 +134,19 @@ const metadata = {
type: Boolean,
},

/**
* Defines if characters within the suggestions to be highlighted
* in case the input value matches parts of the suggestions text.
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe also add a comment that it only works with suggestions enabled.

return;
}

const Suggestions = getFeature("InputSuggestions");
if (Suggestions) {
this.Suggestions = new Suggestions(this, "suggestionItems");
this.Suggestions = new Suggestions(this, "suggestionItems", true);
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't this be this.hightlight instead of true?

@ilhan007 ilhan007 removed their assignment Jul 14, 2020
@vladitasev vladitasev merged commit 673ed8d into master Jul 20, 2020
@vladitasev vladitasev deleted the feat-inp branch July 20, 2020 13:18
vladitasev pushed a commit that referenced this pull request Jul 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Highlight feature for ui5-li/ui5-suggestion-item
3 participants