react-native-ui-lib 7.38.1 → 7.39.0

package/.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1",
+  "version": "7.39.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/scripts/docs/buildDocsCommon.js

@@ -7,6 +7,7 @@ const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 const SERVICES_DOCS_DIR = './docs/services';
+const FOUNDATION_DOCS_DIR = './docs/foundation';
 
 const VALID_COMPONENTS_CATEGORIES = [
   'foundation',
@@ -92,14 +93,22 @@ function processComponents(components) {
       content += `${buildOldDocs(component)}\n`;
     }
 
-
     let dirPath;
-    if (component.category === 'services') {
-      dirPath = `${SERVICES_DOCS_DIR}`;
-    } else {
-      const componentParentDir =
-        componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
-      dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
+    switch (component.category) {
+      case 'services': {
+        dirPath = `${SERVICES_DOCS_DIR}`;
+        break;
+      }
+      case 'foundation': {
+        dirPath = `${FOUNDATION_DOCS_DIR}`;
+        break;
+      }
+      default: {
+        const componentParentDir =
+          componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
+        dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
+        break;
+      }
     }
 
     if (!fs.existsSync(dirPath)) {
@@ -184,7 +193,7 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += `<UILivePreview code={\`${component.snippet
+    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
       ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
       .join('\n')
       .toString()}\`}/>\n\n`;

package/src/components/avatar/avatar.api.json

@@ -12,7 +12,7 @@
     {
       "name": "animate",
       "type": "boolean",
-      "description": "Adds fade in animation when Avatar image loads",
+      "description": "Adds fade in animation when Avatar image loads. This prop isn't supported on web (will be set to false by default when using web).",
       "default": "false"
     },
     {"name": "backgroundColor", "type": "string", "description": "Background color for Avatar"},

package/src/components/avatar/index.d.ts

@@ -162,29 +162,30 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined; /**
-         * Listener-callback for when an image's (uri) loading
-         * fails (equiv. to Image.onError()).
-         */
+        imageId?: string | undefined;
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType; /**
-         * Hash the name (or label) to get a color, so each name will have a specific color.
-         * Default is false.
-         */
+        source: import("../image").ImageSourceType;
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props
@@ -290,29 +291,30 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
+        /**
+         * Avatar colors to be used when useAutoColors is true
+         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined;
+        supportRTL?: boolean | undefined; /**
+         * Background color for Avatar
+         */
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined;
+        overlayType?: string | undefined; /**
+         * Image props object
+         */
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
         errorSource?: import("../image").ImageSourceType;
-        imageId?: string | undefined; /**
-         * Listener-callback for when an image's (uri) loading
-         * fails (equiv. to Image.onError()).
-         */
+        imageId?: string | undefined;
         useBackgroundContainer?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        source: import("../image").ImageSourceType; /**
-         * Hash the name (or label) to get a color, so each name will have a specific color.
-         * Default is false.
-         */
+        source: import("../image").ImageSourceType;
     } & AnimatedImageProps> | undefined;
     /**
      * Image style object used to pass additional style props

package/src/components/avatar/index.js

@@ -16,6 +16,7 @@ import AnimatedImage from "../animatedImage";
 import * as AvatarHelper from "../../helpers/AvatarHelper";
 import { useThemeProps } from "../../hooks";
 import { isSvg } from "../../utils/imageUtils";
+import Constants from "../../commons/Constants";
 export let BadgePosition = /*#__PURE__*/function (BadgePosition) {
   BadgePosition["TOP_RIGHT"] = "TOP_RIGHT";
   BadgePosition["TOP_LEFT"] = "TOP_LEFT";
@@ -149,7 +150,7 @@ const Avatar = forwardRef((props, ref) => {
   const renderImage = () => {
     if (source !== undefined) {
       // Looks like reanimated does not support SVG
-      const ImageContainer = animate && !isSvg(source) ? AnimatedImage : Image;
+      const ImageContainer = animate && !isSvg(source) && !Constants.isWeb ? AnimatedImage : Image;
       return <ImageContainer style={_imageStyle} source={source} onLoadStart={onImageLoadStart} onLoadEnd={onImageLoadEnd} onError={onImageLoadError} testID={`${testID}.image`} width={size} height={size} containerStyle={_baseContainerStyle} {...imageProps} />;
     }
   };

package/src/components/badge/index.js

@@ -10,6 +10,8 @@ import Image from "../image";
 import View from "../view";
 import Text from "../text";
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4];
+const DEFAULT_PIMPLE_SIZE = 10;
+const DEFAULT_BADGE_SIZE = 20;
 /**
  * @description: Round colored badge, typically used to show a number
  * @extends: View
@@ -37,7 +39,14 @@ class Badge extends PureComponent {
     };
   }
   get size() {
-    return this.props.size || 20;
+    const {
+      size,
+      label
+    } = this.props;
+    if (size !== undefined) {
+      return size;
+    }
+    return label === undefined ? DEFAULT_PIMPLE_SIZE : DEFAULT_BADGE_SIZE;
   }
   isSmallBadge() {
     return this.size <= 16;

package/src/components/button/ButtonConstants.d.ts

@@ -17,4 +17,10 @@ export declare const MIN_WIDTH: {
     MEDIUM: number;
     LARGE: number;
 };
+export declare const SIZE_TO_VERTICAL_HITSLOP: {
+    readonly xSmall: 30;
+    readonly small: 25;
+    readonly medium: 20;
+    readonly large: 15;
+};
 export declare const DEFAULT_SIZE = ButtonSize.large;

package/src/components/button/ButtonConstants.js

@@ -17,4 +17,10 @@ export const MIN_WIDTH = {
   MEDIUM: 77,
   LARGE: 90
 };
+export const SIZE_TO_VERTICAL_HITSLOP = {
+  [ButtonSize.xSmall]: 30,
+  [ButtonSize.small]: 25,
+  [ButtonSize.medium]: 20,
+  [ButtonSize.large]: 15
+};
 export const DEFAULT_SIZE = ButtonSize.large;

package/src/components/button/index.d.ts

@@ -11,9 +11,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     static sizes: typeof ButtonSize;
     static animationDirection: typeof ButtonAnimationDirection;
     constructor(props: Props);
-    state: {
-        size: undefined;
-    };
+    state: Record<'size', undefined | number>;
     styles: {
         container: {
             backgroundColor: string;
@@ -370,7 +368,14 @@ declare class Button extends PureComponent<Props, ButtonState> {
     getLabelColor(): string | undefined;
     getIconColor(): string | undefined;
     getLabelSizeStyle(): TextStyle | undefined;
-    getContainerSizeStyle(): any;
+    getContainerSizeStyle(): Partial<{
+        height: number;
+        width: number;
+        padding: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        minWidth: number;
+    }>;
     getOutlineStyle(): {
         borderWidth: number;
         borderColor: string;
@@ -391,10 +396,18 @@ declare class Button extends PureComponent<Props, ButtonState> {
     })[] | undefined;
     getIconStyle(): [ImageStyle, StyleProp<ImageStyle>];
     getAnimationDirectionStyle(): {
-        alignSelf: string;
+        readonly alignSelf: "flex-start";
+    } | {
+        readonly alignSelf: "flex-end";
     } | undefined;
     renderIcon(): React.JSX.Element | null;
     renderLabel(): React.JSX.Element | null;
+    getAccessibleHitSlop(): {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
     render(): React.JSX.Element;
 }
 export { Button };

package/src/components/button/index.js

@@ -7,7 +7,7 @@ import TouchableOpacity from "../touchableOpacity";
 import Text from "../text";
 import Icon from "../icon";
 import { ButtonSize, ButtonAnimationDirection, ButtonProps, DEFAULT_PROPS } from "./types";
-import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE } from "./ButtonConstants";
+import { PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE, SIZE_TO_VERTICAL_HITSLOP } from "./ButtonConstants";
 export { ButtonSize, ButtonAnimationDirection, ButtonProps };
 class Button extends PureComponent {
   static displayName = 'Button';
@@ -351,6 +351,20 @@ class Button extends PureComponent {
     }
     return null;
   }
+  getAccessibleHitSlop() {
+    const containerStyle = this.getContainerSizeStyle();
+    const isWidthSet = containerStyle.width !== undefined || containerStyle.minWidth !== undefined;
+    const width = containerStyle.width || containerStyle.minWidth || 0;
+    const widthWithPadding = width + (containerStyle.paddingHorizontal || containerStyle.padding || 0) * 2;
+    const horizontalHitslop = isWidthSet ? Math.max(0, (48 - widthWithPadding) / 2) : 10;
+    const verticalHitslop = (containerStyle.height ? Math.max(0, 48 - containerStyle.height) : SIZE_TO_VERTICAL_HITSLOP[this.props.size || DEFAULT_SIZE]) / 2;
+    return {
+      top: verticalHitslop,
+      bottom: verticalHitslop,
+      left: horizontalHitslop,
+      right: horizontalHitslop
+    };
+  }
   render() {
     const {
       onPress,
@@ -360,6 +374,7 @@ class Button extends PureComponent {
       animateLayout,
       modifiers,
       forwardedRef,
+      hitSlop: hitSlopProp,
       ...others
     } = this.props;
     const shadowStyle = this.getShadowStyle();
@@ -373,7 +388,7 @@ class Button extends PureComponent {
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
-    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} {...others} ref={forwardedRef}>
+    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={hitSlopProp ?? this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/components/card/index.js

@@ -15,6 +15,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import Assets from "../../assets";
 import CardContext from "./CardContext";
 import * as CardPresenter from "./CardPresenter";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {
@@ -47,7 +48,8 @@ class Card extends PureComponent {
     };
     this.styles = createStyles(this.props);
     if (props.enableBlur && !BlurView) {
-      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   componentDidUpdate(prevProps) {

package/src/components/checkbox/index.d.ts

@@ -117,6 +117,7 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
+    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => void;

package/src/components/checkbox/index.js

@@ -144,6 +144,9 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
+  getAccessibleHitSlop(size) {
+    return Math.max(0, (48 - size) / 2);
+  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -156,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/colorPalette/ColorPalette.api.json

@@ -8,8 +8,16 @@
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
   ],
   "props": [
-    {"name": "colors", "type": "string[]", "description": "Array of colors to render in the palette"},
-    {"name": "value", "type": "string", "description": "The value of the selected swatch"},
+    {
+      "name": "colors",
+      "type": "string[]",
+      "description": "Array of colors to render in the palette"
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the selected swatch"
+    },
     {
       "name": "usePagination",
       "type": "boolean",
@@ -22,7 +30,12 @@
       "description": "Whether the colors pagination scrolls in a loop",
       "default": "true"
     },
-    {"name": "numberOfRows", "type": "number", "description": "The number of color rows from 2 to 5", "default": "3"},
+    {
+      "name": "numberOfRows",
+      "type": "number",
+      "description": "The number of color rows from 2 to 5",
+      "default": "3"
+    },
     {
       "name": "animatedIndex",
       "type": "number",
@@ -34,12 +47,36 @@
       "type": "(value: string, colorInfo: ColorInfo) => void",
       "description": "Invoked once when value changes by selecting one of the swatches in the palette"
     },
-    {"name": "swatchStyle", "type": "ViewStyle", "description": "Style to pass all the ColorSwatches in the palette"},
-    {"name": "containerWidth", "type": "number", "description": "The container margins"},
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
-    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
-    {"name": "backgroundColor", "type": "string", "description": "The ColorPalette's background color"}
+    {
+      "name": "swatchStyle",
+      "type": "ViewStyle",
+      "description": "Style to pass all the ColorSwatches in the palette"
+    },
+    {
+      "name": "containerWidth",
+      "type": "number",
+      "description": "The container margins"
+    },
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Component's container style"
+    },
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Component's style"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The test id for e2e tests"
+    },
+    {
+      "name": "backgroundColor",
+      "type": "string",
+      "description": "The ColorPalette's background color"
+    }
   ],
   "snippet": [
     "<ColorPalette",
@@ -47,5 +84,61 @@
     " value={selectedColor$2}",
     " onValueChange={() => console.log('value changed')$3}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "ColorPalette",
+      "description": "markdown:Our Color Palette is basically an arrangement of Color Swatches representing various colors and styles.  \nIn ColorPalette only a single color swatch can be selected.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Color Palette large (multiple rows):",
+                "description": "markdown:In some cases, product or flow will benefit from a bigger palette.  \nThis type of palette is navigated with pagination.  \nMinimum number of rows is 2 and maximum is 5.   \nThe palette adapts to the screen width, with a minimum spacing of S5 between colors swatches.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_large.png"
+                  }
+                ]
+              },
+              {
+                "title": "Color Palette small (single row):",
+                "description": "markdown:In screens with a limited space a smaller palette can be used.  \nIf the amount of color swatches is larger than the screen width, the Color Palette becomes scrollable.  \nTapping the “+” button will open the Color Picker dialog, allowing user to create a custom color.  \nWhen Color Palette is scrollable, “add” button will be sticky to screen left.  \nAfter the custom color is created, it’s added as a Color Swatch to the right of the “add” button, and selected as the main color.  \nIf the selected color is outside of the view port when screen is loaded, the palette will be scrolled to the primary swatch.  \nTransparent swatches are fixed to the left of other (regular) Color Swatches.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_small.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Palette Types",
+            "description": "Color Palette can be a single row of Color Swatches or have multiple rows:"
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPalette/ColorPalette_types_spec.png"
+              }
+            ],
+            "title": "Spec"
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/colorPicker/colorPicker.api.json

@@ -13,7 +13,11 @@
       "type": "string[]",
       "description": "Array of colors for the picker's color palette (hex values)"
     },
-    {"name": "value", "type": "string", "description": "The value of the selected swatch"},
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the selected swatch"
+    },
     {
       "name": "animatedIndex",
       "type": "number",
@@ -31,8 +35,16 @@
       "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": "testID", "type": "string", "description": "The test id for e2e tests"},
-    {"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The test id for e2e tests"
+    },
+    {
+      "name": "backgroundColor",
+      "type": "string",
+      "description": "The ColorPicker's background color"
+    }
   ],
   "snippet": [
     "<ColorPicker",
@@ -43,5 +55,96 @@
     " onSubmit={() => console.log('submit')$5}",
     " onValueChange={() => console.log('value changed')$6}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "ColorPicker",
+      "description": "markdown:Picking color for background, typography and other elements is possible by various means, among these are:  \nColor Swatch, Color Palette and Color Picker Dialog.  \nAll these can be implemented in the color picking flow. ",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "",
+                "description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
  \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
+                  }
+                ]
+              },
+              {
+                "title": "",
+                "description": "markdown:3. Changes are saved by tapping on ‘V’.  \n4. New color styles is saved in the Color Palette and selected as the theme color. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage2.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Usage Example",
+            "description": "In this example, user picks his own theme color."
+          },
+          {
+            "type": "section",
+            "title": "Additional entry points examples",
+            "description": "As mentioned, Color Picker dialog can be triggered by various entry points. ",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2476-69290&m=dev&embed-host=share&page-selector=false"
+              }
+            ]
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "",
+                "description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.  \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
+                  }
+                ]
+              },
+              {
+                "title": "",
+                "description": "markdown:3. ‘#’ symbol is permanent and cant be deleted.  \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Adding HEX values manually",
+            "description": "Color Picker dialog allows manual entry of the HEX values:"
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }