From 4daba832a2a32c347228f35593f68548746cf463 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Mon, 9 Dec 2024 15:13:42 -0500
Subject: [PATCH] [CL-351] Prevent tw-group styling conflicts by namespacing
 (#12261)

---
 .../app/billing/organizations/change-plan-dialog.component.ts | 1 -
 .../product-switcher/product-switcher-content.component.html  | 4 ++--
 apps/web/src/app/settings/domain-rules.component.html         | 2 +-
 .../providers/clients/create-client-dialog.component.html     | 2 +-
 .../providers/clients/create-client-dialog.component.ts       | 2 +-
 libs/components/src/layout/layout.component.html              | 2 +-
 libs/components/src/table/sortable.component.ts               | 1 -
 7 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
index c58db11502..572b797951 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
@@ -350,7 +350,6 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
     switch (cardState) {
       case PlanCardState.Selected: {
         return [
-          "tw-group",
           "tw-cursor-pointer",
           "tw-block",
           "tw-rounded",
diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
index 41346675bb..204737eee2 100644
--- a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
@@ -17,12 +17,12 @@
             ? 'tw-bg-primary-600 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
             : ''
         "
-        class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-600 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
+        class="tw-group/product-link tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-600 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
         ariaCurrentWhenActive="page"
       >
         <i class="bwi {{ product.icon }} tw-text-4xl !tw-m-0 !tw-mb-1"></i>
         <span
-          class="tw-max-w-24 tw-text-center tw-text-sm tw-leading-snug group-hover:tw-underline"
+          class="tw-max-w-24 tw-text-center tw-text-sm tw-leading-snug group-hover/product-link:tw-underline"
           >{{ product.name }}</span
         >
       </a>
diff --git a/apps/web/src/app/settings/domain-rules.component.html b/apps/web/src/app/settings/domain-rules.component.html
index 1c8e5e435e..a3bea63fb8 100644
--- a/apps/web/src/app/settings/domain-rules.component.html
+++ b/apps/web/src/app/settings/domain-rules.component.html
@@ -54,7 +54,7 @@
     </p>
     <bit-table *ngIf="!loading && global.length > 0">
       <ng-template body>
-        <tr bitRow *ngFor="let d of global" class="tw-group">
+        <tr bitRow *ngFor="let d of global">
           <td bitCell [ngClass]="{ 'table-list-strike': d.excluded }">{{ d.domains }}</td>
           <td bitCell>
             <button
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html
index e72b9ed661..a08f5710f1 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html
@@ -22,7 +22,7 @@
             <div class="tw-relative">
               <div
                 *ngIf="planCard.selected"
-                class="tw-bg-primary-600 tw-text-center !tw-text-contrast tw-text-sm tw-font-bold tw-py-1 group-hover:tw-bg-primary-700"
+                class="tw-bg-primary-600 tw-text-center !tw-text-contrast tw-text-sm tw-font-bold tw-py-1 group-hover/plan-card-container:tw-bg-primary-700"
               >
                 {{ "selected" | i18n }}
               </div>
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
index d63ed9882b..18910491a0 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
@@ -69,7 +69,7 @@ export class CreateClientDialogComponent implements OnInit {
     switch (selected) {
       case true: {
         return [
-          "tw-group",
+          "tw-group/plan-card-container",
           "tw-cursor-pointer",
           "tw-block",
           "tw-rounded",
diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index 56c0af8f0d..ccbb40c2b5 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -13,7 +13,7 @@
     >
   </nav>
 </div>
-<div class="tw-group tw-flex tw-w-full">
+<div class="tw-flex tw-w-full">
   <ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
   <main
     [id]="mainContentId"
diff --git a/libs/components/src/table/sortable.component.ts b/libs/components/src/table/sortable.component.ts
index d86f26f43e..dc3d8dc14f 100644
--- a/libs/components/src/table/sortable.component.ts
+++ b/libs/components/src/table/sortable.component.ts
@@ -99,7 +99,6 @@ export class SortableComponent implements OnInit {
 
   get classList() {
     return [
-      "tw-group",
       "tw-min-w-max",
 
       // Offset to border and padding