From c8e7368ea6d40b6e829b9782027c1be2692d4db9 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 6 Jan 2022 13:19:42 +0000
Subject: [PATCH] ColorPicker: Makes tab order left to right (#43745)

---
 .../ColorPicker/ColorPickerPopover.test.tsx       |  2 +-
 .../components/ColorPicker/ColorPickerPopover.tsx |  4 ++++
 .../components/ColorPicker/NamedColorsGroup.tsx   |  5 +++--
 packages/grafana-ui/src/utils/reverseMap.test.ts  | 15 +++++++++++++++
 packages/grafana-ui/src/utils/reverseMap.ts       |  9 +++++++++
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/reverseMap.test.ts
 create mode 100644 packages/grafana-ui/src/utils/reverseMap.ts

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx
index b27949e3e35..1c0ab924223 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx
@@ -9,7 +9,7 @@ describe('ColorPickerPopover', () => {
 
   it('should be tabbable', () => {
     render(<ColorPickerPopover color={'red'} onChange={() => {}} />);
-    const color = screen.getByRole('button', { name: 'super-light-red color' });
+    const color = screen.getByRole('button', { name: 'dark-red color' });
     const customTab = screen.getByRole('button', { name: 'Custom' });
 
     act(() => {
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 7b8132aa8fc..ff99b57c90e 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -160,6 +160,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
           outline: none;
           box-shadow: none;
         }
+
+        :focus-visible {
+          position: relative;
+        }
       }
 
       .ColorPickerPopover__tab--active {
diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
index 02967d51ae8..607eaf03f4b 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
@@ -5,6 +5,7 @@ import { ColorSwatch, ColorSwatchVariant } from './ColorSwatch';
 import { upperFirst } from 'lodash';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { css } from '@emotion/css';
+import { reverseMap } from '../../utils/reverseMap';
 
 interface NamedColorsGroupProps {
   hue: ThemeVizHue;
@@ -26,7 +27,7 @@ const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
     <div className={styles.colorRow}>
       <div className={styles.colorLabel}>{label}</div>
       <div {...otherProps} className={styles.swatchRow}>
-        {hue.shades.map((shade) => (
+        {reverseMap(hue.shades, (shade) => (
           <ColorSwatch
             key={shade.name}
             aria-label={shade.name}
@@ -65,7 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       gap: ${theme.spacing(1)};
       align-items: center;
       justify-content: space-around;
-      flex-direction: row-reverse;
+      flex-direction: row;
     `,
   };
 };
diff --git a/packages/grafana-ui/src/utils/reverseMap.test.ts b/packages/grafana-ui/src/utils/reverseMap.test.ts
new file mode 100644
index 00000000000..f3c23f547e7
--- /dev/null
+++ b/packages/grafana-ui/src/utils/reverseMap.test.ts
@@ -0,0 +1,15 @@
+import { reverseMap } from './reverseMap';
+
+describe('Reverse map', () => {
+  it('Maps elements in reverse', () => {
+    const elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    const reversedAndMapped = reverseMap(elements, (i) => i ** 2);
+    expect(reversedAndMapped).toEqual([100, 81, 64, 49, 36, 25, 16, 9, 4, 1]);
+  });
+
+  it('Maps array of objects in reverse', () => {
+    const elements = [{ title: 'this' }, { title: 'is' }, { title: 'a' }, { title: 'test' }];
+    const reversedAndMapped = reverseMap(elements, (v) => ({ title: v.title.toUpperCase() }));
+    expect(reversedAndMapped).toEqual([{ title: 'TEST' }, { title: 'A' }, { title: 'IS' }, { title: 'THIS' }]);
+  });
+});
diff --git a/packages/grafana-ui/src/utils/reverseMap.ts b/packages/grafana-ui/src/utils/reverseMap.ts
new file mode 100644
index 00000000000..f9265535323
--- /dev/null
+++ b/packages/grafana-ui/src/utils/reverseMap.ts
@@ -0,0 +1,9 @@
+export function reverseMap<T, Q>(arr: ArrayLike<T>, callbackfn: (value: T, index: number, array: ArrayLike<T>) => Q) {
+  const reversedAndMapped = new Array<Q>(arr.length);
+  for (let i = 0; i < arr.length; i++) {
+    const reverseIndex = arr.length - 1 - i;
+    reversedAndMapped[i] = callbackfn(arr[reverseIndex], reverseIndex, arr);
+  }
+
+  return reversedAndMapped;
+}