carbon-for-ibm-dotcom icon indicating copy to clipboard operation
carbon-for-ibm-dotcom copied to clipboard

Published 20 hours ago • verified publisher icon carbon-design-system

fix(search-with-typeahead): correct RTL result strings

Open jkaeser opened this issue 10 months ago • 3 comments

Related Ticket(s)

Closes #11342

Description

This fixes two issues:

  1. For each search result, we split it on a substring that matches the current search query, bold that part, then reconstruct the string. The issue is that the strings were reconstructed assuming an LTR text display, and we need to reverse them for RTL.
  2. Group titles in search results use the same web component as regular search results, and as a result any portion of their text that matched the current query would get highlighted (bolded). We can avoid this by skipping such elements in the highlighting logic.

The related issue also reported the search actions are not aligned properly, but I was not able to reproduce. Looks like we shifted to using CSS logical properties not long before the issue was opened, which I think solved the problem.

Changelog

New

  • Adds and configures storybook-addon-rtl package, which adds a toggle in Stories to flip to RTL display.

Changed

  • Ensures search result strings with highlighted portions are assembled in the correct order depending on language direction.
  • Prevents search result group titles from being highlighted as if they were query matches.
  • Adds knob in Storybook to demonstrate grouped search results.

jkaeser avatar Apr 02 '24 16:04 jkaeser

Deploy preview created for package Carbon Web Components: https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11693/index.html

Built with commit: 5801cfeb7c4d0c93d6f4f62e6a60d9604c8d5a5b

ibmdotcom-bot avatar Apr 02 '24 16:04 ibmdotcom-bot

Deploy preview created for package Web Components: https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11693/index.html

Built with commit: 5801cfeb7c4d0c93d6f4f62e6a60d9604c8d5a5b

ibmdotcom-bot avatar Apr 02 '24 17:04 ibmdotcom-bot

Deploy preview created for package Web Components (React wrapper): https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11693/index.html

Built with commit: 5801cfeb7c4d0c93d6f4f62e6a60d9604c8d5a5b

ibmdotcom-bot avatar Apr 02 '24 17:04 ibmdotcom-bot

Deploy preview created for package Web Components HTML Test Application: https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11693/index.html

Built with commit: 5801cfeb7c4d0c93d6f4f62e6a60d9604c8d5a5b

ibmdotcom-bot avatar May 05 '24 00:05 ibmdotcom-bot