From 9b2536d1267af024e9382f19fda668b539411c76 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Thu, 31 Aug 2023 17:50:03 -0700
Subject: [PATCH] Add new "middle-out" order prop option to
 `OuiPaletteColorBlind' (#856) (#1010)

* Add new "middle-out" order prop option to `OuiPaletteColorBlind'

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* update changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
(cherry picked from commit c9d0d62e63bc1c77bbaf9225fd6370d6adfcbe91)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../src/views/color_palette/color_palette.js  | 10 ++++++++++
 .../src/views/color_palette/props_info.js     |  4 ++--
 src/services/color/oui_palettes.ts            | 20 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js
index 49d07adf7a..cdbf847cfc 100644
--- a/src-docs/src/views/color_palette/color_palette.js
+++ b/src-docs/src/views/color_palette/color_palette.js
@@ -37,6 +37,16 @@ const customPalettes = [
     palette: ouiPaletteColorBlind({ rotations: 2 }),
     code: 'ouiPaletteColorBlind({rotations: 2})',
   },
+  {
+    title: 'Lots of colors, with the extremes last',
+    palette: ouiPaletteColorBlind({
+      rotations: 9,
+      direction: 'both',
+      order: 'middle-out',
+    }),
+    code:
+      "ouiPaletteColorBlind({ rotations: 9, direction: 'both', order: 'middle-out' })",
+  },
   {
     title:
       'Series may have multiple metrics and so the colors must coordinate but be distinguishable',
diff --git a/src-docs/src/views/color_palette/props_info.js b/src-docs/src/views/color_palette/props_info.js
index 456aa26415..fabd10908b 100644
--- a/src-docs/src/views/color_palette/props_info.js
+++ b/src-docs/src/views/color_palette/props_info.js
@@ -21,9 +21,9 @@ export const qualitativePropsInfo = {
         },
         order: {
           description:
-            'Order similar colors as `group`s or just `append` each variation',
+            'Order similar colors as `group`s, just `append` each variation (from dark to light), or append from the `middle-out`',
           required: false,
-          type: { name: "'append' | 'group'" },
+          type: { name: "'append' | 'group' | 'middle-out'" },
           defaultValue: { value: "'append'" },
         },
         direction: {
diff --git a/src/services/color/oui_palettes.ts b/src/services/color/oui_palettes.ts
index 10e12c3174..047df0a769 100644
--- a/src/services/color/oui_palettes.ts
+++ b/src/services/color/oui_palettes.ts
@@ -60,7 +60,7 @@ export interface OuiPaletteColorBlindProps {
   /**
    * Order similar colors as `group`s or just `append` each variation
    */
-  order?: 'append' | 'group';
+  order?: 'append' | 'group' | 'middle-out';
   /**
    * Specifies if the direction of the color variations
    */
@@ -134,6 +134,24 @@ export const ouiPaletteColorBlind = ({
         colors.push(...rotation);
       }
     }
+
+    // start with the appended order, then pick from both ends
+    if (order === 'middle-out') {
+      const shadePalettes = [];
+      while (colors.length) {
+        shadePalettes.push(colors.splice(0, base.length));
+      }
+      while (shadePalettes.length) {
+        const firstPalette = shadePalettes.shift();
+        if (firstPalette) {
+          colors.unshift(...firstPalette);
+        }
+        const lastPalette = shadePalettes.pop();
+        if (lastPalette) {
+          colors.unshift(...lastPalette);
+        }
+      }
+    }
   } else {
     colors = base;
   }