Merge pull request #25001 from kaelig/patch-6

Blocks: Render colors in the same order as provided
storybookjs · Dec 13, 2023 · f013ffe · f013ffe
2 parents b4acf3a + b6af032
commit f013ffe
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/code/ui/blocks/src/components/ColorPalette.tsx b/code/ui/blocks/src/components/ColorPalette.tsx
@@ -164,14 +164,21 @@ function renderSwatchSpecimen(colors: Colors) {
       </SwatchSpecimen>
     );
   }
+
+  const swatchElements = [];
+  const labelElements = [];
+
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const colorKey in colors) {
+    const colorValue = colors[colorKey];
+    swatchElements.push(renderSwatch(colorValue, swatchElements.length));
+    labelElements.push(renderSwatchLabel(colorKey, labelElements.length, colorValue));
+  }
+
   return (
     <SwatchSpecimen>
-      <SwatchColors>
-        {Object.values(colors).map((color, index) => renderSwatch(color, index))}
-      </SwatchColors>
-      <SwatchLabels>
-        {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}
-      </SwatchLabels>
+      <SwatchColors>{swatchElements}</SwatchColors>
+      <SwatchLabels>{labelElements}</SwatchLabels>
     </SwatchSpecimen>
   );
 }