Prefer className instead of class

For portability with React JSX, and for parity with how Emmet generates JSX.
caleb531 · Aug 19, 2024 · 58670bb · 58670bb
1 parent 576daa9
commit 58670bb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git a/scripts/components/app.jsx b/scripts/components/app.jsx
@@ -31,18 +31,18 @@ class AppComponent {
   view() {
     return (
       <div id="app" onclick={(clickEvent) => this.toggleReference(clickEvent)}>
-        <span id="reference-link" class="nav-link nav-link-left">
-          <a href="#" class="reference-open-control">App Reference</a>
+        <span id="reference-link" className="nav-link nav-link-left">
+          <a href="#" className="reference-open-control">App Reference</a>
         </span>
-        <span id="personal-site-link" class="nav-link nav-link-right">
+        <span id="personal-site-link" className="nav-link nav-link-right">
           by <a href="https://calebevans.me/">Caleb Evans</a>
         </span>
         <h1>Truthy</h1>
         <ReferenceComponent app={this.app} referenceIsOpen={this.referenceIsOpen} />
         <h2>Variables</h2>
         <VariableCollectionComponent app={this.app} />
         <h2>Table</h2>
-        <div class="scrollable-container">
+        <div className="scrollable-container">
           <TableComponent app={this.app} />
         </div>
         <p>

diff --git a/scripts/components/reference.jsx b/scripts/components/reference.jsx
@@ -38,20 +38,20 @@ class ReferenceComponent {
 
   view({ attrs: { app, referenceIsOpen } }) {
     return (
-      <div id="reference" class={clsx(
+      <div id="reference" className={clsx(
         'reference-close-control',
         { 'reference-is-open': referenceIsOpen }
       )}>
-        <div id="reference-sidebar" class="scrollable-container" onclick={(clickEvent) => this.tryExample(clickEvent, app)}>
-          <img class="reference-close-control" src={closeIconUrl} alt="Close" />
+        <div id="reference-sidebar" className="scrollable-container" onclick={(clickEvent) => this.tryExample(clickEvent, app)}>
+          <img className="reference-close-control" src={closeIconUrl} alt="Close" />
           <h2>App Reference</h2>
-          <p class="cta">Click any example to try it!</p>
+          <p className="cta">Click any example to try it!</p>
           {ReferenceComponent.features.map((feature) => {
             return (
-              <div class="feature">
+              <div className="feature">
                 <h3>{feature.name}</h3>
                 {feature.examples.map((example) => {
-                  return <pre class="feature-example reference-close-control">{example}</pre>;
+                  return <pre className="feature-example reference-close-control">{example}</pre>;
                 })}
               </div>
             );

diff --git a/scripts/components/table.jsx b/scripts/components/table.jsx
@@ -73,14 +73,14 @@ class TableComponent {
         <thead>
           <tr onclick={(clickEvent) => this.handleControls(clickEvent)} oninput={(inputEvent) => this.updateExpressionString(inputEvent)}>
             {this.app.variables.map((variable) => {
-              return <th class="variable">{variable.name ? variable.name : '?'}</th>;
+              return <th className="variable">{variable.name ? variable.name : '?'}</th>;
             })}
             {this.app.expressions.map((expression, e) => {
               return (
-                <th class="expression" data-index={e}>
-                  <div class="has-controls">
-                    <div class="control control-add"></div>
-                    {this.app.expressions.length > 1 ? <div class="control control-remove"></div> : null}
+                <th className="expression" data-index={e}>
+                  <div className="has-controls">
+                    <div className="control control-add"></div>
+                    {this.app.expressions.length > 1 ? <div className="control control-remove"></div> : null}
                     <input type="text" size={Math.max(1, expression.string.length)} value={expression.string} autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" oncreate={(vnode) => this.focusNewExpression(vnode)} onupdate={(vnode) => this.focusNewExpression(vnode)} data-index={e} />
                   </div>
                 </th>
@@ -95,7 +95,7 @@ class TableComponent {
                 {this.app.variables.map((variable) => {
                   let varValue = varValues[variable.name];
                   return (
-                    <td class={clsx({
+                    <td className={clsx({
                       true: varValue === true,
                       false: varValue === false
                     })}>
@@ -106,7 +106,7 @@ class TableComponent {
                 {this.app.expressions.map((expression) => {
                   let exprValue = expression.evaluate(varValues);
                   return (
-                    <td class={clsx({
+                    <td className={clsx({
                       true: exprValue === true,
                       false: exprValue === false,
                       invalid: exprValue === null

diff --git a/scripts/components/variable-collection.jsx b/scripts/components/variable-collection.jsx
@@ -67,10 +67,10 @@ class VariableCollectionComponent {
       <div id="variables" onclick={(clickEvent) => this.handleControls(clickEvent)} oninput={(inputEvent) => this.updateVariableName(inputEvent)}>
         {this.app.variables.map((variable, v) => {
           return (
-            <div class="variable" data-index={v}>
-              <div class="has-controls">
-                <div class="control control-add"></div>
-                {this.app.variables.length > 1 ? <div class="control control-remove"></div> : null}
+            <div className="variable" data-index={v}>
+              <div className="has-controls">
+                <div className="control control-add"></div>
+                {this.app.variables.length > 1 ? <div className="control control-remove"></div> : null}
                 <input type="text" value={variable.name} maxlength={1} autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" oncreate={(vnode) => this.focusNewVariable(vnode)} onupdate={(vnode) => this.focusNewVariable(vnode)} data-index={v} />
               </div>
             </div>