From 1d01e254282a9cc3b8352f0b362ae3e2d35ad6f0 Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Wed, 7 Aug 2024 08:58:34 -0400
Subject: [PATCH] lax className (#2126)

---
 src/mark.js                      | 6 +++---
 test/output/classNameOnMarks.svg | 2 +-
 test/plots/class-name.ts         | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/mark.js b/src/mark.js
index 21f86d805c..080e9a3f03 100644
--- a/src/mark.js
+++ b/src/mark.js
@@ -2,9 +2,9 @@ import {channelDomain, createChannels, valueObject} from "./channel.js";
 import {defined} from "./defined.js";
 import {maybeFacetAnchor} from "./facet.js";
 import {maybeClip, maybeNamed, maybeValue} from "./options.js";
-import {dataify, isDomainSort, isObject, isOptions, keyword, range, singleton} from "./options.js";
+import {dataify, isDomainSort, isObject, isOptions, keyword, range, singleton, string} from "./options.js";
 import {project} from "./projection.js";
-import {maybeClassName, styles} from "./style.js";
+import {styles} from "./style.js";
 import {basic, initializer} from "./transforms/basic.js";
 
 export class Mark {
@@ -72,7 +72,7 @@ export class Mark {
     this.marginLeft = +marginLeft;
     this.clip = maybeClip(clip);
     this.tip = maybeTip(tip);
-    this.className = className ? maybeClassName(className) : null;
+    this.className = string(className);
     // Super-faceting currently disallow position channels; in the future, we
     // could allow position to be specified in fx and fy in addition to (or
     // instead of) x and y.
diff --git a/test/output/classNameOnMarks.svg b/test/output/classNameOnMarks.svg
index d06c154f19..3225c3a636 100644
--- a/test/output/classNameOnMarks.svg
+++ b/test/output/classNameOnMarks.svg
@@ -54,7 +54,7 @@
   <g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,27.5)">
     <text transform="translate(620,110)">units →</text>
   </g>
-  <g aria-label="bar" class="fruitbars">
+  <g aria-label="bar" class="fruit units">
     <rect x="50" width="570" y="87" height="19"></rect>
     <rect x="50" width="256.5" y="45" height="19"></rect>
     <rect x="50" width="285" y="66" height="19"></rect>
diff --git a/test/plots/class-name.ts b/test/plots/class-name.ts
index df37884502..f7dffc85c4 100644
--- a/test/plots/class-name.ts
+++ b/test/plots/class-name.ts
@@ -12,7 +12,7 @@ export async function classNameOnMarks() {
     marks: [
       Plot.barX(
         sales,
-        Plot.groupY({x: "sum"}, {x: "units", y: "fruit", sort: {y: "x", reverse: true}, className: "fruitbars"})
+        Plot.groupY({x: "sum"}, {x: "units", y: "fruit", sort: {y: "x", reverse: true}, className: "fruit units"})
       ),
       Plot.ruleX([0])
     ]