From ae2fea484f63b97c6885a211c9920a5d75d921fa Mon Sep 17 00:00:00 2001
From: Abhinav Choudhary <abhinavchdhary@gmail.com>
Date: Tue, 16 Jul 2024 23:30:32 +0530
Subject: [PATCH] fix!: Rename `blocklyTreeRow` and `blocklyToolboxCategory`
 CSS classes (#8357)

* fix!: #8345 rename css class

This commit renames the blocklyTreeRow CSS class to blocklyToolboxCategory

* Update category.ts

* fix: css class conflicts

Rename original blocklyToolboxCategory to blocklyToolboxCategoryContainer
---
 core/toolbox/category.ts                    | 14 +++++++-------
 tests/mocha/comment_deserialization_test.js |  2 +-
 tests/mocha/toolbox_test.js                 |  4 +++-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/core/toolbox/category.ts b/core/toolbox/category.ts
index 6ff159b0b..2d0ea4aee 100644
--- a/core/toolbox/category.ts
+++ b/core/toolbox/category.ts
@@ -131,8 +131,8 @@ export class ToolboxCategory
    */
   protected makeDefaultCssConfig_(): CssConfig {
     return {
-      'container': 'blocklyToolboxCategory',
-      'row': 'blocklyTreeRow',
+      'container': 'blocklyToolboxCategoryContainer',
+      'row': 'blocklyToolboxCategory',
       'rowcontentcontainer': 'blocklyTreeRowContentContainer',
       'icon': 'blocklyTreeIcon',
       'label': 'blocklyTreeLabel',
@@ -659,19 +659,19 @@ export type CssConfig = ToolboxCategory.CssConfig;
 
 /** CSS for Toolbox.  See css.js for use. */
 Css.register(`
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
+.blocklyToolboxCategory:not(.blocklyTreeSelected):hover {
   background-color: rgba(255, 255, 255, .2);
 }
 
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
+.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategoryContainer {
   margin: 1px 5px 1px 0;
 }
 
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
+.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer {
   margin: 1px 0 1px 5px;
 }
 
-.blocklyTreeRow {
+.blocklyToolboxCategory {
   height: 22px;
   line-height: 22px;
   margin-bottom: 3px;
@@ -679,7 +679,7 @@ Css.register(`
   white-space: nowrap;
 }
 
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
+.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxCategory {
   margin-left: 8px;
   padding-right: 0;
 }
diff --git a/tests/mocha/comment_deserialization_test.js b/tests/mocha/comment_deserialization_test.js
index 2517ed779..54ee0b2ff 100644
--- a/tests/mocha/comment_deserialization_test.js
+++ b/tests/mocha/comment_deserialization_test.js
@@ -110,7 +110,7 @@ suite('Comment Deserialization', function () {
     test('Toolbox', function () {
       // Place from toolbox.
       const toolbox = this.workspace.getToolbox();
-      simulateClick(toolbox.HtmlDiv.querySelector('.blocklyTreeRow'));
+      simulateClick(toolbox.HtmlDiv.querySelector('.blocklyToolboxCategory'));
       simulateClick(
         toolbox.getFlyout().svgGroup_.querySelector('.blocklyPath'),
       );
diff --git a/tests/mocha/toolbox_test.js b/tests/mocha/toolbox_test.js
index b723e7038..b3cd45090 100644
--- a/tests/mocha/toolbox_test.js
+++ b/tests/mocha/toolbox_test.js
@@ -201,7 +201,9 @@ suite('Toolbox', function () {
       sinon.assert.calledOnce(hideChaffStub);
     });
     test('Category clicked -> Should select category', function () {
-      const categoryXml = document.getElementsByClassName('blocklyTreeRow')[0];
+      const categoryXml = document.getElementsByClassName(
+        'blocklyToolboxCategory',
+      )[0];
       const evt = {
         'target': categoryXml,
       };