Enterprise-ng: soho-toolbar component doesn't behave well with search field when the screen width is 360px

[ahnpnl]

Describe the bug
For homepage widgets, the normal size of widget SDK frame is 360px and when the app inside widget SDK frame uses soho-toolbar component, the toolbar component doesn't behave well.

To Reproduce
Steps to reproduce the behavior:

1. Open the example app in enterprise-ng project
2. Go to toolbar-basic.demo.html
3. Modify the html to be like

<soho-toolbar
        [maxVisibleButtons]="2"
        [resizeContainers]="true"
        [favorButtonset]="true"
        (selected)="onSelected($event)">

      <soho-toolbar-title>
        <input soho-toolbar-searchfield id="my-search-field" placeholder="Search" title="Search" name="Search"/>
      </soho-toolbar-title>

      <soho-toolbar-button-set>
        <!-- buttons -->
        <button soho-button="icon" icon="filter" title="Filter" isToggle=true data-action="{'button':'filter'}">
          <span class="audible">Filter</span>
        </button>

        <button soho-button="icon" icon="add" title="Add" data-action="{'button':'add'}">
          <span class="audible">Add</span>
        </button>
      </soho-toolbar-button-set>
    </soho-toolbar>

1. Run the example app, resize the screen to be at 360px.
2. Observe that, the search field is on the left and the 2 buttons are on the right.
3. Click on search field, observe that the 2 buttons are grouped into more button and search field jumps from left to right.
4. Click outside to close search field, the 2 buttons are not back to original position.

Expected behavior
The search field should stay on the left side and the 2 buttons shouldn't be grouped into more button because there are enough space to display for all of them.

Version

• ids-enterprise-ng: master branch

Screenshots
When first time loading the page

After clicking on search field

After clicking outside to close search field

Platform

• Device N.A.
• OS Version: Windows 10
• Browser Name: Chrome
• Browser Version: Version 73.0.3683.103 (Official Build) (64-bit)

Additional context
N.A.

[tmcconechy]

We arent totally fixing toolbar issues anymore. Can you try to look at its eventual replacement (flex toolbar) and see if it works better there? Can this be reproduced in the the enterprise project as well.

[ahnpnl]

Hi Tim, does flex toolbar use flexbox ? I haven't checked flex toolbar yet but this issue can be easily solved with flexbox if flex toolbar uses it.

[tmcconechy]

yes it does, thats the new version of the toolbar but we couldnt remove the older one yet. give it a try

[ahnpnl]

I made an attempt with soho-toolbar-flex, it works better than the old one soho-toolbar. Perhaps this issue can resolve in a PR like adding deprecated warning to soho-toolbar and suggest users to switch to soho-toolbar-flex instead of fixing the issue ?

[tmcconechy]

I think thats being covered by https://github.com/infor-design/enterprise/issues/1120 once we get everything working that worked in the old one. So will close this as working for now. 👍

[EdwardCoyle]

@ahnpnl, we merged #1917 into IDS Enterprise's master today (which will eventually be 4.18.0). As of that merge, it's now possible to use the Flex Toolbar with correct styling in Headers, Mastheads, and Editor components. This may not immediately be reflected in the Angular component just yet, but it should be possible now.

[pwpatton]

We can also make a nightly ng build once 1917 makes it into an ep nightly.