@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.8 → 4.6.11-beta.9

package/scss/components/Header/_headerTeamSwitcher.scss

@@ -0,0 +1,195 @@
+/*
+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-container {
+    display: flex;
+  }
+
+  .#{$prefix}--header-dropdown-menu-loading {
+    align-items: center;
+    display: flex;
+  }
+
+  .#{$prefix}--header-dropdown-menu-success {
+    align-items: center;
+    display: flex;
+
+    svg path {
+      fill: var(--cds-tag-border-green);
+    }
+  }
+
+  .#{$prefix}--header-dropdown-menu {
+    list-style: none;
+    max-width: 18.5625rem;
+
+    .#{$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;
+      min-width: 18.5625rem;
+      position: relative;
+      width: 100%;
+
+      .#{$prefix}--bmrg-header-drop-down {
+        max-height: min(48rem, 84vh);
+        min-width: 18.5625rem;
+        overflow-y: auto;
+        position: absolute;
+        right: 0;
+        width: 100%;
+
+        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"],
+          .#{$prefix}--header__menu-item:hover {
+            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:hover {
+            background-color: var(--cds-layer-hover-01) !important;
+          }
+
+          .#{$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: 100rem;
+            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__menu-item:hover {
+            background-color: var(--cds-layer-hover-01) !important;
+          }
+        }
+
+        .#{$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

@@ -4,7 +4,6 @@ IBM Confidential
 © Copyright IBM Corp. 2022, 2024
 */
 
-
 /**
  * Copyright IBM Corp. 2016, 2018
  *
@@ -55,6 +54,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';
@@ -77,7 +77,6 @@ $use-theme-advantage-white: false !default;
 @use '../components/Toggle/toggle' as addons-toggle;
 @use '../components/TooltipHover/tooltip' as addons-tooltip;
 
-
 // css for external libs
 @use "./tippy";
 
@@ -91,8 +90,8 @@ $use-theme-advantage-white: false !default;
 }
 
 .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active) {
-  >.#{$prefix}--side-nav__link:hover {
-    >span {
+  > .#{$prefix}--side-nav__link:hover {
+    > span {
       color: shell.$bmrg-theme-primary;
     }
   }
@@ -103,7 +102,7 @@ $use-theme-advantage-white: false !default;
   svg {
     fill: shell.$bmrg-theme-primary;
   }
-} 
+}
 
 .#{$prefix}--side-nav__item--active {
   .#{$prefix}--side-nav__icon {
@@ -113,8 +112,8 @@ $use-theme-advantage-white: false !default;
   }
 }
 
-
-.#{$prefix}--side-nav__submenu, .#{$prefix}--header__action {
+.#{$prefix}--side-nav__submenu,
+.#{$prefix}--header__action {
   &:focus {
     border-color: shell.$bmrg-accent;
     outline: shell.$bmrg-accent 0.0625rem solid !important;
@@ -155,7 +154,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;