From fce6e2adedcb8cec08dda4b9435fa60c33c434fd Mon Sep 17 00:00:00 2001
From: Kaelig Deloumeau-Prigent <kaelig@users.noreply.github.com>
Date: Mon, 27 Nov 2023 15:08:22 -0800
Subject: [PATCH 1/2] Render colors in the same order as provided

Object.keys/Object.values/Object.entries (see screenshot below) don't guarantee maintaining the output order. We're using `for..in` instead to ensure colors swatches are rendered.
---
 code/ui/blocks/src/components/ColorPalette.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/components/ColorPalette.tsx b/code/ui/blocks/src/components/ColorPalette.tsx
index 4bf8d3e91401..c545669654d3 100644
--- a/code/ui/blocks/src/components/ColorPalette.tsx
+++ b/code/ui/blocks/src/components/ColorPalette.tsx
@@ -164,13 +164,23 @@ function renderSwatchSpecimen(colors: Colors) {
       </SwatchSpecimen>
     );
   }
+
+  const swatchElements = [];
+  const labelElements = [];
+
+  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))}
+        {swatchElements}
       </SwatchColors>
       <SwatchLabels>
-        {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}
+        {labelElements}
       </SwatchLabels>
     </SwatchSpecimen>
   );

From b6af032b43c558546cf6b0d73b1d8209916ea8a0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 13 Dec 2023 10:26:55 +0100
Subject: [PATCH 2/2] fix linting

---
 code/ui/blocks/src/components/ColorPalette.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/code/ui/blocks/src/components/ColorPalette.tsx b/code/ui/blocks/src/components/ColorPalette.tsx
index c545669654d3..98b171d0b05f 100644
--- a/code/ui/blocks/src/components/ColorPalette.tsx
+++ b/code/ui/blocks/src/components/ColorPalette.tsx
@@ -168,6 +168,7 @@ function renderSwatchSpecimen(colors: Colors) {
   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));
@@ -176,12 +177,8 @@ function renderSwatchSpecimen(colors: Colors) {
 
   return (
     <SwatchSpecimen>
-      <SwatchColors>
-        {swatchElements}
-      </SwatchColors>
-      <SwatchLabels>
-        {labelElements}
-      </SwatchLabels>
+      <SwatchColors>{swatchElements}</SwatchColors>
+      <SwatchLabels>{labelElements}</SwatchLabels>
     </SwatchSpecimen>
   );
 }