No static locale infra (#2684)

Author: M-i-k-e-l

src/components/colorPicker/colorPicker.api.json

@@ -26,10 +26,10 @@
       "description": "Callback for the picker's color palette change"
     },
     {
-      "name": "accessibilityLabels",
-      "type": "{\n addButton: string,\n dismissButton: string,\n doneButton: string,\n input: string}",
-      "description": "Accessibility labels as an object of strings",
-      "default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
+      "name": "getAccessibilityLabels",
+      "type": "() => {\n addButton: string,\n dismissButton: string,\n doneButton: string,\n input: string}",
+      "description": "A function that returns the accessibility labels as an object of strings",
+      "default": "() => {\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
     },
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
     {"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}

src/components/colorPicker/index.tsx

@@ -8,6 +8,13 @@ import ColorPalette, {ColorPaletteProps} from '../colorPalette';
 import {SWATCH_MARGIN, SWATCH_SIZE} from '../colorSwatch';
 import ColorPickerDialog, {ColorPickerDialogProps} from './ColorPickerDialog';
 
+interface AccessibilityLabels {
+  addButton?: string;
+  dismissButton?: string;
+  doneButton?: string;
+  input?: string;
+}
+
 interface Props extends ColorPickerDialogProps, Pick<ColorPaletteProps, 'onValueChange'> {
   /**
    * Array of colors for the picker's color palette (hex values)
@@ -29,13 +36,19 @@ interface Props extends ColorPickerDialogProps, Pick<ColorPaletteProps, 'onValue
    *  doneButton: 'done',
    *  input: 'custom hex color code'
    * }
+   * @deprecated
    */
-  accessibilityLabels?: {
-    addButton?: string;
-    dismissButton?: string;
-    doneButton?: string;
-    input?: string;
-  };
+  accessibilityLabels?: AccessibilityLabels;
+  /**
+   * A function that returns the accessibility labels as an object of strings, ex.
+   * {
+   *  addButton: 'add custom color using hex code',
+   *  dismissButton: 'dismiss',
+   *  doneButton: 'done',
+   *  input: 'custom hex color code'
+   * }
+   */
+  getAccessibilityLabels?: () => AccessibilityLabels;
   testID?: string;
   /**
    * The ColorPicker's background color
@@ -61,7 +74,7 @@ class ColorPicker extends PureComponent<Props> {
   static displayName = 'ColorPicker';
 
   static defaultProps = {
-    accessibilityLabels: ACCESSIBILITY_LABELS,
+    getAccessibilityLabels: () => ACCESSIBILITY_LABELS,
     backgroundColor: Colors.$backgroundDefault
   };
 
@@ -86,7 +99,17 @@ class ColorPicker extends PureComponent<Props> {
   };
 
   render() {
-    const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor, onValueChange} = this.props;
+    const {
+      initialColor,
+      colors,
+      value,
+      testID,
+      accessibilityLabels: deprecatedAccessibilityLabels,
+      getAccessibilityLabels,
+      backgroundColor,
+      onValueChange
+    } = this.props;
+    const accessibilityLabels = deprecatedAccessibilityLabels ?? getAccessibilityLabels?.();
     const {show} = this.state;
     return (
       <View row testID={testID} style={{backgroundColor}}>

src/components/slider/ColorSliderGroup.tsx

@@ -8,6 +8,8 @@ import Text from '../text';
 
 type SliderOnValueChange = (value: string) => void;
 
+type Labels = {[key in GradientSliderTypes]: string};
+
 export type ColorSliderGroupProps = {
   /**
    * The gradient color
@@ -29,11 +31,17 @@ export type ColorSliderGroupProps = {
    * Show the sliders labels (defaults are: Hue, Lightness, Saturation)
    */
   showLabels?: boolean;
+  /**
+   * In case you would like to change the default labels (translations etc.), you can provide
+   * this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
+   * @deprecated
+   */
+  labels?: Labels;
   /**
    * In case you would like to change the default labels (translations etc.), you can provide
    * this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
    */
-  labels?: {[key in GradientSliderTypes]: string};
+  getLabels?: () => Labels;
   /**
    * The labels style
    */
@@ -42,7 +50,7 @@ export type ColorSliderGroupProps = {
    * If true the component will have accessibility features enabled
    */
   accessible?: boolean;
-  /** 
+  /**
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
@@ -61,7 +69,7 @@ class ColorSliderGroup extends PureComponent<ColorSliderGroupProps, ColorSliderG
   static displayName = 'ColorSliderGroup';
 
   static defaultProps = {
-    labels: {hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation'}
+    getLabels: () => ({hue: 'Hue', lightness: 'Lightness', saturation: 'Saturation'})
   };
 
   state = {
@@ -83,7 +91,16 @@ class ColorSliderGroup extends PureComponent<ColorSliderGroupProps, ColorSliderG
   };
 
   renderSlider = (type: GradientSliderTypes) => {
-    const {sliderContainerStyle, showLabels, labelsStyle, accessible, labels, migrate} = this.props;
+    const {
+      sliderContainerStyle,
+      showLabels,
+      labelsStyle,
+      accessible,
+      labels: deprecatedLabels,
+      getLabels,
+      migrate
+    } = this.props;
+    const labels = deprecatedLabels ?? getLabels?.();
 
     return (
       <>