(OUI Next Theme) Observability Notebooks

[KrooshalUX]

This issue to be transferred to corresponding repository

I am working on launching new light and dark mode themes provided by OUI component library for a target launch within 2.10. These changes support the vision expressed in Future Vision for Dashboards

I have identified the following front end related issues that prevent the theme from appearing complete and potential solutions within this feature:

• In a few examples within Observability notebooks, text wrapping fails in "code block"

Screenshot taken from [Flights] OpenSearch SQL Quick Start Guide:

[wbeckler]

I think there may not be an issue here. The example in the screenshot shows a long string with no spaces. The right way to display it may in fact be to go beyond the text box. For example, the following string is force-wrapped to stay in the text box, but that means that a reader cannot tell how many contiguous X's are in the string and it appears like it has spaces when it doesn't. It's not clear to me that it's a better experience to force wrap a long string.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

[KrooshalUX]

@wbeckler the other examples wrap and the user is able to consume the entire string. In this example I had to resize my browser beyond my monitors width multiple times to see the end. I would expect this to be scrollable if the case is that the wrapping is not desired.

[derek-ho]

@pjfitzgibbons temporarily assigning to you until we figure out how to divide up these tasks - seems like a lot of OUI compliance issues coming our way

[pjfitzgibbons]

@wbeckler the other examples wrap and the user is able to consume the entire string. In this example I had to resize my browser beyond my monitors width multiple times to see the end. I would expect this to be scrollable if the case is that the wrapping is not desired.

@KrooshalUX could you show us an example of correct wrapping?
If any correct wrapping requires spaces, then that would be artificial rendering of the users direct input -- so we'd have to think carefully about how to address the situation as found above.

Also, could you tell us where you found the example above? It might be a degenerate case ?

[KrooshalUX]

@peternied The sample came from [Flights] OpenSearch SQL Quick Start Guide. Unfortunately, I no longer have access to this sample notebook. Previous sections in the notebook wrapped "correct" as in they did not break the container as the one in the screenshot does.

[pjfitzgibbons]

@KrooshalUX (@pjfitzgibbons )
I'm confused. Is this sample no longer available? If this sample is believed-availailable and you no longer have access - could you tell me who POC I can contact?

[KrooshalUX]

@pjfitzgibbons its no longer available on the endpoint where we were doing walkthroughs of the new theme, that is correct.

@AMoo-Miki - do you have any additional info here?

I would not say this is critical for 2.10 release.

[AMoo-Miki]

I am not sure I follow what @pjfitzgibbons is referring to when he says "wrapping requires spaces"; I believe a simple word-wrap and break-word is sufficient. It is used here.

[pjfitzgibbons]

Welp. learn something every day.
We'll work on a fix for this one.

[pjfitzgibbons]

Fixed by #974

[joshuarrrr]

There's also an OUI utility class available for this:

<div className="eui-textBreakWord">
  /* Your content */
</div>

https://oui.opensearch.org/1.0/#/utilities/css-utility-classes