Enterprise: Module Tabs: No selected/opened tab indicator after changing color

Created on 10 Jan 2020  路  8Comments  路  Source: infor-design/enterprise

Describe the bug
Pre-condition:
Module tabs should be open.

After changing theme to uplift and then a color, there is no obvious indicator on which of the multiple tabs is selected/opened.

To Reproduce
Steps to reproduce the behavior:

  1. Open http://master-enterprise.demo.design.infor.com/patterns/module-tabs.html?colors=db7726&theme=soho&variant=light#order-123456
  2. Change the theme to uplift
  3. select a color
  4. notice all tabs are the same color (and notice the line below the Tab) is not correctly styled

Or simply go to http://master-enterprise.demo.design.infor.com/patterns/module-tabs.html?colors=db7726&theme=soho&variant=light#order-123456

Expected behavior
After changing the theme, there should be an indicator in the color of the tabs to identify which is selected/open at the moment.

Version

  • ids-enterprise: 4.20.1

Screenshots
See attached gif file for reference
tabs-theme-issue

Platform

  • OS Version: Windows 10
  • Browser Name: chrome
  • Browser Version: 79.0.3945.88
[2] uplift theme type

All 8 comments

Selected tabs are now indicated or have different color from the unselected tabs after changing Color. Tested in http://master-enterprise.demo.design.infor.com/patterns/module-tabs.html.

However, I found a related minor issue. It seems like after changing the Color, unselected tabs remember the previously selected color in the Color menu.

  1. Go to http://master-enterprise.demo.design.infor.com/patterns/module-tabs.html
  2. Change the Color to Amber
  3. Click the unselected tab "Order Entry"
  4. Open the ... menu > Colors, See issue: Default is still checked instead of Amber
    image
  5. Change the Color again to Emerald
  6. Click the unselected tab "New Tab Builder"
  7. Open the ... menu > Colors, See issue: Amber is still checked instead of Emerald
    image

Same issue also happens when changing Theme or Variant.

@ericangeles - see if its possible to correct that case by @brianjuan
Perhaps the code needs to change to check/change multiple menus - this is here in the demo app https://github.com/infor-design/enterprise/blob/master/app/views/includes/head.html#L152

OK, with moving the switcher to be just on the first page if that helps?

I was looking at this too... the Theme Switcher itself is specific to the demoapp, and the demoapp doesn't really have any kind of serious state management built in at the moment. If we wanted to show the menu in multiple places, ideally we'd have a shared state object somewhere that would be aware of the theme/color/etc that this info could be pulled from.

Making the menu available on the first page is definitely easier for now.

@tmcconechy @EdwardCoyle should we create a separate ticket for the switcher?

I'd say lets not worry about it for now. Lets let it go. Its just this one case so far i've seen where it might make sense.

Alright then. Will create another PR with just a single switcher.

This issue is now resolved. Moving this ticket to the Done column.

Was this page helpful?
0 / 5 - 0 ratings