all styles; fix margin

Author: Fil

src/legends/swatches.js

@@ -93,18 +93,24 @@ function legendItems(scale, {
         --swatchHeight: ${+swatchHeight}px;
       `);
 
-  const palette = label
-      ? swatches.call(div => div.append("p")
-          .text(label)
-          .style("font-weight", "bold")
-          .style("width", "100%"))
+  const hasTitle = label != null && label !== "";
+  const palette = hasTitle
+      ? swatches.call(div => div.append("div")
+          .attr("class", `${className}-title`)
+          .text(label))
         .append("div")
       : swatches;
+  palette.classed(`${className}-palette`, true);
 
-  let extraStyle;
+  let extraStyle = hasTitle ? `
+      .${className}-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }` : "";
 
   if (columns != null) {
-    extraStyle = `
+    extraStyle += `
       .${className}-swatch {
         display: flex;
         align-items: center;
@@ -134,10 +140,10 @@ function legendItems(scale, {
             .attr("title", tickFormat)
             .text(tickFormat));
   } else {
-    extraStyle = `
-      .${className} {
+    extraStyle += `
+      .${className}-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }

test/output/caltrain.html

@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -19,9 +19,9 @@
         background: var(--color);
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }

test/output/colorLegendCategorical.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendCategoricalColumns.html

@@ -18,6 +18,12 @@
       background: var(--color);
     }
 
+    .plot-title {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 0.4em;
+    }
+
     .plot-swatch {
       display: flex;
       align-items: center;
@@ -35,8 +41,8 @@
       text-overflow: ellipsis;
     }
   </style>
-  <p style="font-weight: bold; width: 100%;">Industry</p>
-  <div style="columns: 180px;">
+  <div class="plot-title">Industry</div>
+  <div class="plot-palette" style="columns: 180px;">
     <div class="plot-swatch" style="--color: #4e79a7;">
       <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
     </div>

test/output/colorLegendCategoricalReverse.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendCategoricalScheme.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendOrdinal.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendOrdinalScheme.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendOrdinalTickFormat.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }

test/output/colorLegendOrdinalTickFormatFunction.html

@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -18,9 +18,9 @@
       background: var(--color);
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }