@boomerang-io/carbon-addons-boomerang-react 4.6.8-beta.22 → 4.6.8-beta.23

package/scss/components/Header/_headerTeamSwitcher.scss

@@ -0,0 +1,165 @@
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2025
+*/
+
+@use "../../global/config" as *;
+@use '@carbon/themes/scss/tokens' as theme;
+@use "../../global/utils";
+@use "../../global/themes/shell-tokens" as shell;
+
+:root {
+  .#{$prefix}--header-dropdown-menu {
+    list-style: none;
+    width: 15rem;
+
+    .#{$prefix}--header__menu-title {
+      display: flex;
+      font-weight: 700;
+      justify-content: space-between;
+      overflow: hidden;
+      width: 100%;
+
+      .#{$prefix}--header__menu-arrow {
+        min-height: 1rem;
+        min-width: 1rem;
+      }
+
+      &[aria-expanded="true"] {
+        background-color: var(--cds-layer-hover-01) !important;
+      }
+    }
+
+    .#{$prefix}--header__menu {
+      box-shadow: none;
+      width: 18.5625rem;
+
+      .#{$prefix}--bmrg-header-drop-down {
+        position: absolute;
+        max-height: 48rem;
+        overflow-y: auto;
+        margin-right: 3.5625rem;
+        width: 18.5625rem;
+
+        a.#{$prefix}--header__menu-item {
+          cursor: pointer;
+          width: 100%;
+
+          .#{$prefix}--text-truncate--end {
+            width: 100%;
+          }
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-text-icon {
+          align-items: center;
+          display: flex;
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-text {
+          display: -webkit-box;
+          line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-icon {
+          min-height: 1rem;
+          min-width: 1rem;
+          margin-left: 0.5rem;
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-container {
+          .#{$prefix}--header-dropdown-menu-item {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .#{$prefix}--header__menu-item[aria-selected="true"] {
+            background-color: var(--cds-layer-hover-01) !important;
+          }
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-account-container {
+          .#{$prefix}--header-dropdown-menu-item-account {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+
+            .#{$prefix}--header-dropdown-menu-item-account-icons {
+              align-items: center;
+              display: flex;
+              padding-left: 0.5rem;
+            }
+
+            .#{$prefix}--header-dropdown-menu-item-account-group-icon {
+              min-height: 1rem;
+              min-width: 1rem;
+              margin-right: 0.5rem;
+            }
+
+            .#{$prefix}--header-dropdown-menu-item-account-chevron-icon {
+              min-height: 1rem;
+              min-width: 1rem;
+              transition: transform 150ms ease-in-out;
+              transform: rotate(0deg);
+            }
+          }
+
+          .#{$prefix}--header__menu-item[aria-expanded="true"] {
+            background-color: var(--cds-layer-hover-01) !important;
+
+            .#{$prefix}--header-dropdown-menu-item-account-chevron-icon {
+              transform: rotate(180deg);
+            }
+          }
+
+          .#{$prefix}--header__menu-item[aria-selected="true"] {
+            background-color: var(--cds-layer-hover-01) !important;
+          }
+        }
+
+        .#{$prefix}--header-dropdown-menu-item-account-submenu {
+          max-height: 0;
+          overflow: hidden;
+          opacity: 0;
+          transition: max-height 150ms ease-in-out, opacity 150ms ease-in-out;
+
+          &[aria-expanded="true"] {
+            max-height: 40rem;
+            opacity: 1;
+            overflow-y: auto;
+          }
+        }
+
+        .#{$prefix}--header-team-switcher-create-team-button-container {
+          border-bottom: 0.0625rem solid var(--cds-border-subtle-00);
+        }
+
+        .#{$prefix}--header-team-switcher-create-team-button {
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          padding: 0;
+          width: 100%;
+
+          .#{$prefix}--header-team-switcher-create-team-button-text {
+            color: var(--cds-link-primary) !important;
+          }
+
+          .#{$prefix}--header-team-switcher-create-team-button-icon {
+            height: 1rem;
+            width: 1rem;
+
+            path {
+              fill: var(--cds-link-primary) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/global/index.scss

@@ -55,6 +55,7 @@ $use-theme-advantage-white: false !default;
 @use '../components/PrivacyRedirect/privacyRedirect';
 @use '../components/Header/header';
 @use '../components/Header/headerAppSwitcher';
+@use '../components/Header/headerTeamSwitcher';
 @use '../components/Header/headerMenu';
 @use '../components/Header/headerMenuItem';
 @use '../components/Header/userRequests';
@@ -103,7 +104,7 @@ $use-theme-advantage-white: false !default;
   svg {
     fill: shell.$bmrg-theme-primary;
   }
-} 
+}
 
 .#{$prefix}--side-nav__item--active {
   .#{$prefix}--side-nav__icon {
@@ -155,7 +156,7 @@ $use-theme-advantage-white: false !default;
   .#{$prefix}--modal {
     background-color: shell.$bmrg-header-modal-overlay; //default isrgba(theme.$layer-accent-01, 0.5)
   }
-  
+
   .#{$prefix}--modal-close {
     &:hover {
       background-color: shell.$bmrg-header-hover-background;