After clicking on the header-action button, the background color remains in active state

[LouisRoth]

Is this a feature request (new component, new icon), a bug, or a general issue? Bug

Is this issue related to a specific component? Yes, the cds-header-action component

What did you expect to happen? What happened instead? What would you like to see changed? After the button was pressed, I expected the 'normal' background color to be displayed. However, the background color remained on the 'active' color token. Strangely, when you press a second time, the background color will return to its 'normal' color.

What browser are you working in? Google Chrome Version 117.0.5938.92

What version of the Carbon Design System are you using? Version 5.14.10

What offering/product do you work on? Any pressing ship or release dates we should be aware of? Privat project, no deadlines :-)

Steps to reproduce the issue

I want to share a sandbox, however, the provided template is not up to date and I don't know, how to change the CSS styling into SCSS styling from the Angular template. I will provide all the necessary files.

Additional information

Before button press:

After button press:

[LouisRoth]

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocationModule } from './location/location.module';

import { IconModule, IconService, UIShellModule, ThemeModule } from 'carbon-components-angular';

//@ts-ignore
import User20 from '@carbon/icons/es/user/20';
//@ts-ignore
import Notification20 from '@carbon/icons/es/notification/20';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LocationModule,
    UIShellModule,
    ThemeModule,
    IconModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

  constructor(protected iconService: IconService) {
    iconService.registerAll([
      User20,
      Notification20
    ]);
  }
}

app.component.html

<div cdsTheme="g100">
  <cds-header brand="Brand" name="CMS">
    <cds-hamburger></cds-hamburger>

    <cds-header-navigation>
      <cds-header-item>Locations</cds-header-item>
      <cds-header-menu title="Accounts">
        <cds-header-item>Employees</cds-header-item>
        <cds-header-item>Customers</cds-header-item>
      </cds-header-menu>
      <cds-header-menu title="Inspection">
        <cds-header-item>Windows</cds-header-item>
      </cds-header-menu>
    </cds-header-navigation>

    <cds-header-global>
      <cds-header-action description="Notification">
        <svg cdsIcon="notification" size="20"></svg>
      </cds-header-action>
      <cds-header-action description="User">
        <svg cdsIcon="user" size="20"></svg>
      </cds-header-action>
    </cds-header-global>

  </cds-header>
</div>

<router-outlet></router-outlet>

[nipun005]

Hi @LouisRoth , Are you still facing this issue? I am checking on this link- https://angular.carbondesignsystem.com/

Can you please confirm on which component you are facing this issue, and It would be helpful if you share some screenshot or video so that I can know which colour we are expecting. Thanks.

[abiramcodes]

Hello @LouisRoth , I hope you already have figured out how to fix the issue on your own.

If not , here is what I found working for me. (might / might not work for you).

Image 01 - My observation : I found that in carbon components, they have used an active class whenever you click on the action item., the active class CSS is activated so that the background color remains in active state.

I hope they have added this as a feature!!

Image 02 - My suggestion : If you try to over-ride the class cds--header__action--active like in the image below.., You won't be getting the active class once you click the action button in the header.

PS : I used this link for reference (https://angular.carbondesignsystem.com/ )