Fix/Widget css leading space (#9427)

* fix: trim tc-reveal class

* test: " tc-reveal" -> "tc-reveal"

* Create #9427.tid

* fix: more widgets

* Update #9427.tid

core/modules/widgets/droppable.js

@@ -177,7 +177,7 @@ DroppableWidget.prototype.execute = function() {
 DroppableWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-droppable");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

core/modules/widgets/eventcatcher.js

@@ -130,7 +130,7 @@ EventWidget.prototype.execute = function() {
 EventWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-eventcatcher");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

core/modules/widgets/keyboard.js

@@ -110,7 +110,7 @@ KeyboardWidget.prototype.execute = function() {
 KeyboardWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-keyboard");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

core/modules/widgets/reveal.js

@@ -203,7 +203,7 @@ RevealWidget.prototype.readPopupState = function(state) {
 RevealWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-reveal");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

editions/test/tiddlers/tests/data/genesis-widget/Block.tid

@@ -27,4 +27,4 @@ Block forced inline
 +
 title: ExpectedResult
 
-<div class=" tc-reveal"><p>Block</p></div><div class=" tc-reveal"><p>Block forced block</p></div><span class=" tc-reveal"><p>Block forced inline</p></span><p><span class=" tc-reveal">Inline</span><div class=" tc-reveal">Inline forced block</div><span class=" tc-reveal">Inline forced inline</span></p>
+<div class="tc-reveal"><p>Block</p></div><div class="tc-reveal"><p>Block forced block</p></div><span class="tc-reveal"><p>Block forced inline</p></span><p><span class="tc-reveal">Inline</span><div class="tc-reveal">Inline forced block</div><span class="tc-reveal">Inline forced inline</span></p>

editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-a.tid

@@ -2,4 +2,4 @@ title: expected-test-tabs-horizontal-a
 type: text/html
 description: Horizontal tabs test - This is the expected HTML output from a test in test-wikitext-tabs-macro.js
 
-<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><p>Text tab 2</p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-horizontal-all.tid

@@ -2,4 +2,4 @@ title: expected-test-tabs-horizontal-all
 type: text/html
 description: Horizontal tabs with all parameters active. This is the expected HTML output from a test in test-wikitext-tabs-macro.js
 
-<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">desc</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><h2 class="">TabTwo</h2><p><p>Text tab 2</p></p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set "><div class="tc-tab-buttons "><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">desc</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider "></div><div class="tc-tab-content "><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><h2 class="">TabTwo</h2><p><p>Text tab 2</p></p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

editions/test/tiddlers/tests/data/tabs-macro/expected-test-tabs-vertical.tid

@@ -2,4 +2,4 @@ title: expected-test-tabs-vertical
 type: text/html
 description: Vertical tabs test -- This is the expected HTML output from the test in test-wikitext-tabs-macro.js
 
-<p><div class="tc-tab-set tc-vertical"><div class="tc-tab-buttons tc-vertical"><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider tc-vertical"></div><div class="tc-tab-content tc-vertical"><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><p>Text tab 2</p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div></div></div></p>
+<p><div class="tc-tab-set tc-vertical"><div class="tc-tab-buttons tc-vertical"><button class="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">TabFour</button></div><div class="tc-tab-divider tc-vertical"></div><div class="tc-tab-content tc-vertical"><div class="tc-reveal" hidden="true"></div><div class="tc-reveal"><p>Text tab 2</p></div><div class="tc-reveal" hidden="true"></div><div class="tc-reveal" hidden="true"></div></div></div></p>

editions/tw5.com/tiddlers/releasenotes/5.4.0/#9427.tid

@@ -0,0 +1,11 @@
+title: $:/changenotes/5.4.0/#9427
+description: Fix widgets generating leading space in class attribute when additional class is empty
+release: 5.4.0
+tags: $:/tags/ChangeNote
+change-type: bugfix
+change-category: widget
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/issues/9427
+github-contributors: linonetwo
+
+Fixed a bug in the RevealWidget, DroppableWidget, EventcatcherWidget, and KeyboardWidget where an empty class attribute would generate a leading space in the rendered HTML. By trimming the resulting class string, we shorten the HTML and avoid potential confusion.
+

editions/tw5.com/tiddlers/testcases/RevealWidget/AccordionSlider.tid

@@ -27,4 +27,4 @@ And this is some text
 +
 title: ExpectedResult
 
-<div class=" tc-reveal"><p><button class="">Show me</button></p></div><div class=" tc-reveal" hidden="true"></div>
+<div class="tc-reveal"><p><button class="">Show me</button></p></div><div class="tc-reveal" hidden="true"></div>

editions/tw5.com/tiddlers/testcases/RevealWidget/Popup.tid

@@ -24,4 +24,4 @@ And this is some text
 +
 title: ExpectedResult
 
-<p><button aria-expanded="false" class="">Pop me up!</button></p><p><span class=" tc-reveal" hidden="true"></span></p>
+<p><button aria-expanded="false" class="">Pop me up!</button></p><p><span class="tc-reveal" hidden="true"></span></p>

editions/tw5.com/tiddlers/testcases/RevealWidget/SimpleReveal.tid

@@ -24,4 +24,4 @@ And this is some text
 title: ExpectedResult
 
 <p><button class="">Show me</button>
-<button class="">Hide me</button></p><div class=" tc-reveal" hidden="true"></div>
+<button class="">Hide me</button></p><div class="tc-reveal" hidden="true"></div>

editions/tw5.com/tiddlers/testcases/RevealWidget/TextReference.tid

@@ -18,6 +18,6 @@ jeremy: tiddlywiki
 +
 title: ExpectedResult
 
-<p><span class=" tc-reveal">
+<p><span class="tc-reveal">
 TiddlyWiki!
 </span></p>