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.

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

Jump to bottom

Search improvements #913

Merged
merged 14 commits into from
Aug 28, 2024
Merged

Search improvements #913

merged 14 commits into from
Aug 28, 2024

Conversation

philippfromme
Copy link
Contributor

@philippfromme philippfromme commented Jun 3, 2024 •
edited
Loading

Improves search by

  • treating search as truly intermediate (root element, selection and viewbox reset on escape without click or enter)
  • aligning styles with other popups
  • simplifying selection visuals when "pre-selecting" elements before selecting (click or enter)
    • simply use existing outline
    • don't show context pad during pre-select

brave_MvTovcBG1j

Related to bpmn-io/bpmn-js#2187

@bpmn-io-tasks bpmn-io-tasks bot added the in progress Currently worked on label Jun 3, 2024
@philippfromme philippfromme mentioned this pull request Jun 3, 2024
Merged
nikku
nikku reviewed Jun 4, 2024
View reviewed changes
lib/features/search-pad/SearchPad.js Outdated
@@ -525,7 +486,7 @@ function createHtmlText(tokens) {

tokens.forEach(function(t) {
if (t.matched) {
htmlText += '<strong class="' + SearchPad.RESULT_HIGHLIGHT_CLASS + '">' + escapeHTML(t.matched) + '</strong>';
htmlText += '<b>' + escapeHTML(t.matched) + '</b>';
Copy link
Member

Choose a reason for hiding this comment

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

Why do we remove the ability to customize here?

Copy link
Member

Choose a reason for hiding this comment

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

Also, let's keep using semantic html. <strong> for important stuff, <em> for emphasis.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I can revert the CSS class removal.

For <b> vs <strong> I'd disagree based on what I read.

The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.

I'd say we only want the styling, not the importance.

Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS font-weight property.

So you could even argue we don't want to use tags at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In terms of a11y, <strong> matters to screen readers while <b> doesn't which is what I'd expect in that case. I wouldn't expect the screen reader to focus on specific parts of the results.

Copy link
Member

Choose a reason for hiding this comment

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

👍 for "just for decoration.

Copy link
Member

@barmac barmac Jun 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I like how the tag meaning was changed from "<b>oldface" to "<b>ring attention". I'm ok with leaving it as is.

@philippfromme philippfromme mentioned this pull request Jun 5, 2024
Merged
@philippfromme philippfromme force-pushed the search-improvements branch 2 times, most recently from 734ed74 to 4704746 Compare June 5, 2024 10:11
@philippfromme philippfromme marked this pull request as ready for review June 5, 2024 14:05
@bpmn-io-tasks bpmn-io-tasks bot added needs review Review pending and removed in progress Currently worked on labels Jun 5, 2024
@nikku
Copy link
Member

nikku commented Jun 24, 2024

Heads-up: I reviewed this but somehow the remarks were lost. Going to repeat, once back from FTO.

@philippfromme philippfromme mentioned this pull request Aug 6, 2024
Closed
1 task
@barmac
Copy link
Member

barmac commented Aug 21, 2024

I'll look into this today.

@philippfromme @barmac
chore(search-pad): adjust element overlay styling
7c2fb65
@philippfromme @barmac
test(search-pad): remove ununsed dependencies
5e04a64
@philippfromme @barmac
test(search-pad): simplify test setup
5c83fc0
@philippfromme @barmac
feat(search-pad): reset root, selection, viewbox on escape without enter
b1a1cf8
@philippfromme @barmac
chore(search-pad): use <b> instead of <strong>
6f2b897 
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#usage_notes
@philippfromme @barmac
fix(search-pad): fix types
8e1bf2a
@philippfromme @barmac
chore(search-pad): remove non-applicable CSS class
523eb15
@philippfromme @barmac
fix(search-pad): prevent horizontal scrolling
a7c0892
@philippfromme @barmac
fix(search-pad): fix text overflow through ellipsis
feda77c
@philippfromme @barmac
chore: simplify CSS
7ccada0
@philippfromme @barmac
chore(search-pad): align styling with popups
65961dd
@philippfromme @barmac
chore(search-pad): simplify element selection styles
8853e6e
@philippfromme @barmac
fix(search-pad): close on outside interaction
e49c239
@philippfromme @barmac
fix(search): do not show root elements in search results
845b6c2
@barmac barmac force-pushed the search-improvements branch from 4704746 to 845b6c2 Compare August 21, 2024 14:06
barmac
barmac approved these changes Aug 21, 2024
View reviewed changes
Copy link
Member

@barmac barmac left a comment

Choose a reason for hiding this comment

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

It works great, and I believe this also fixes a downstream issue: bpmn-io/bpmn-js#2189 Let's mark it on the PR.
I'd suggest to squash the changes as there are so many commits now.

jarekdanielak
jarekdanielak approved these changes Aug 28, 2024
View reviewed changes
Copy link
Contributor

@jarekdanielak jarekdanielak left a comment

Choose a reason for hiding this comment

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

Works great 👍

@jarekdanielak jarekdanielak merged commit 7d41f25 into develop Aug 28, 2024
8 of 10 checks passed
@bpmn-io-tasks bpmn-io-tasks bot removed the needs review Review pending label Aug 28, 2024
@jarekdanielak jarekdanielak deleted the search-improvements branch August 28, 2024 13:38
@nikku nikku mentioned this pull request Sep 22, 2024
Closed
41 tasks
@nikku nikku mentioned this pull request Nov 5, 2024
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@barmac barmac barmac approved these changes

@jarekdanielak jarekdanielak jarekdanielak approved these changes

@nikku nikku Awaiting requested review from nikku

@marstamm marstamm Awaiting requested review from marstamm

Assignees

@philippfromme philippfromme

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@philippfromme @nikku @barmac @jarekdanielak