DevOps, CI/CD and Automation

I've got a JET-based project underway based on v.1.2.0 at the moment. My UEX designer threw me a bit of a curve ball, which in turn has raised some questions about how to work with JET icon font images.

Use Case

Here is a schematic representation of the desired UI.

The user is supposed to be able to type a few characters in the "filter" box, and with each keyUp event the table should be re-filtered based on the entered characters.

While this looks superficially similar to the ojInputSearch component, that component is not a good match.

1. We won't be populating a combobox with search hits.
2. The Magnifying Glass Icon is on the wrong side (right side for LTR) and there is no configuration option to move it to the other side of the text entry area
3. The search Icon is a functional button. This would be unnecessary or even confusing here, where typing is enough to initiate the filtering. My UEX designer just wants the magnifying glass icon to be a graphic that indicates the function of the field -- in addition to the placeholder text.

My overall approach is to use the ojInputText component, which meets the text entry needs, But, I want to include the icon within the boundaries of the input component, as in the schematic above. The icon should not change color on hover and should not be clickable.

1. I want to us out of the box JET/Alta styling without introducing too much application-specific styling that will need to be updated whenever JET/Alta styles change
2. Specifically, I want to use JET icons for this.

First Approach using Icon marker classes

From reading the JET docs I know that icons can be displayed like this.

<div id="searchIcon" class="oj-inputsearch-search-icon oj-component-icon"></div>

<input id="text-input" placeholder="Filter..."

     type="text"

     data-bind="ojComponent: {component: 'ojInputText',

                              value: value}"/>

Specifying the oj-inputsearch-search-icon oj-component-icon classes on a <div> or <span> is sufficient to get the magnifying glass icon to render before of the ojInputText component.

This satisfied me, but not my UEX designer, who pointed out that it is NOT his design, nor is it in keeping with the Alta theme and ojInputSearch in particular, which has the icon inside the component boundary.

I tried adding the two marker classes directly to the <input>, no luck. I also tried adding the classes to the rootAttributes. I.E. rootAttributes: {'class':'oj-inputsearch-search-icon oj-component-icon'}". But to no avail. Neither of these approaches positioned a visible icon within the boundaries of the ojInputText component. I did mess around with some absolute positioning of the <div> and was able to get the icon in the desired position, but this proved unstable under some font-size changes and browser zoom.

Second Approach Using the icon font directly

The second approach I tried was to insert the icon via a :before style associated with the oj-inputtext class.

.rpas-filter-bar .oj-inputtext:before {

position: absolute;

font-family: 'Alta Icon Font';

top: 1.5em;

left: 1.5em;

content: "\e60d"; //that's the magnifying glass icon char

}

.rpas-filter-bar-offset {

padding-left: 2em; // this nudges the text entry area over to make room for the icon

}

This relies on the following @rule in oj-alta.css

@font-face {

font-family: 'Alta Icon Font';

src: url("fonts/JetFW_iconfont.woff") format("woff"); }

The HTML code looks like this:

<div id="div1" class="rpas-filter-bar">

<input id="text-input" class="rpas-filter-bar-offset"

     type="text"

     placeholder="Filter..."

     data-bind="ojComponent: {component: 'ojInputText',

                              value: value}"/>

</div>

This works well, at least in my case. The icon is positioned well and scales pretty well with font-size changes and with browser zoom.

At Long Last, My Question

My reservation here, is that this approach relies on my limited knowledge of implementation details, not on the more public marker classes that are discussed in the documentation. Relying on the alta.css-defined font-family name and also relying on the char value to get the icon I want seem fragile in the face of JET/Alta updates.The result is much better than I was able to achieve using the marker classes. Does anyone have a better solution or a solution that is likely to be more robust as JET/Alta evolve?