ColorPicker: Makes tab order left to right (#43745)

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(() => {

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 {

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;
     `,
   };
 };

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' }]);
+  });
+});

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;
+}