AppMenu: Not able to set module tabs appMenuTriggerText to empty string

[whernebrink]

Describe the bug
For the module tabs you can provide options to have and set the application menu trigger text:

const TABS_DEFAULT = {
  ...otherStuff,
  appMenuTrigger: false,
  appMenuTriggerText: undefined,
  ...moreStuff,
};

If appMenuTrigger is true but appMenuTriggerText is not set, it will default to Locale.translate('AppMenuTriggerText'). We would like to be able to not have a title text i.e. "" (blank). Currently, if we provide empty string it defaults to 'Menu' due to the following on line 543 in tabs.js:

<span>${this.settings.appMenuTriggerText || Locale.translate('AppMenuTriggerText')}</span>

So we currently specify " " a space which won't evaluate false, but has the side effect of the icon becomes misplaced.

To Reproduce
Steps to reproduce the behavior:

1. Set appMenuTrigger to true and appMenuTriggerText to "" (empty)
2. You will have 'Menu' as the trigger text

Expected behavior
When provide empty string i.e. "" there shouldn't be a default.

Version

• ids-enterprise: 4.35.0-dev

Screenshots
The menu icon becomes misplaced by adding the space:

Platform

• All

Additional context
Using the nullish coalescing operator (??) (CanIuse) instead of the logical or (||) would let empty string through, but at the same time set the default text appMenuTriggerText
is null or undefined.

<span>${this.settings.appMenuTriggerText ?? Locale.translate('AppMenuTriggerText')}</span>

[tmcconechy]

As an alternate workaround does setting it to   work?

[whernebrink]

@tmcconechy Forgot to mention that I've already tested that too, with the same outcome as " ". And I've come to the conclusion that it is probably due to the following style selector (see print screen for applied styles): .tab-container.module-tabs .tab a > span:not(.icon)
I noticed when removing the margin when there isn't a text value, it would give me the desired outcome (in spite of " " or "&nbsp").

So in order for the menu icon to look centered on hover (before one clicks it) when there isn't a trigger text in the span:not(.icon), this margin cannot be applied.

How it looks (on inspec/hover) when the margin is applied:

[whernebrink]

Also, I forgot to mention: in our code we have to unset the min-width for the application-menu-trigger in order to get the trigger not look huge:

This is how it looks by default if one set the trigger text to " ":

We have to add the following style:

:host::ng-deep {
    [soho-tab-list] {
      .tab.application-menu-trigger {
        min-width: unset;
      }
    }
  }

Ouput:

When also removing the previously mentioned margin, we get the desired output (which I do think should be default if you were to add set " " as value for the appMenuTriggerText:

With removal of margins:

:host::ng-deep {
    [soho-tab-list] {
      .tab.application-menu-trigger {
        min-width: unset;

        span:not(.icon) {
          margin: 0;
        }
      }
    }
  }

[tmcconechy]

Is this using this example https://master-enterprise.demo.design.infor.com/components/tabs-module/example-app-menu-button.html but just without the Menu text? Or maybe you werent aware of this configuration?

The more i look at this it looks like that example

[whernebrink]

Correct, I'm using that appMenuTrigger with appMenuTriggerText set to " ". Yep, without the menu text is what we want and also, when the button only consist of the bars, that the width of that trigger button is no bigger than the actual icon.

[janahintal]

QA Passed.
Verified in https://master-enterprise.demo.design.infor.com/components/tabs-module/example-app-menu-button-audible.html?layout=nofrills. Used Chrome Reader Extension for verification.