Component API for the React Format Panel

{
    "tagName": "BorderAndColorFillConfig",
    "keyIDs": {
        "fillColor": "containerFill",
        "fillOpacity": "container_bo",
        "borderStyle": "container_borderStyle",
        "borderColor": "container_borderColor"
    },
    "borderOnSameLine": true,
    "title": "Style",
    "showWeight": true
}

{
    "tagName": "Button",
    "text": "Regular"
}

{
    tagName: 'ButtonList',
    title: 'Button List Icons',
    buttonType: 'icon',
    options: [
        { name: 'option1', ariaLabel: 'aria-label-option1' },
        { name: 'option2', ariaLabel: 'aria-label-option2' },
    ],
    ariaLabel: 'button-list-icon',
    className: 'button-list-icon',
};

{
    "tagName": "Checkbox",
    "checked": true,
    "text": "Regular checkbox"
}

{
    "tagName": "ColorFillButton",
    "colorHexValues": ["#d5e2dd", "#94c4bc", "#3db3b9", "#2293a9", "#1a6e8c"],
    "ariaLabel": "Edit threshold"
}

{
    "tagName": "ColorPalette",
    "key": "basic"
}

{
    "tagName": "ColorPicker"
}

{
    tagName: 'EditableText',
    text: 'original'
};

{
    "tagName": "FontConfig",
    "keyIDs": {
        "fontName": "fontName",
        "fontStyle": "fontStyle",
        "fontSize": "fontSize",
        "fontColor": "fontColor",
        "textAlignment": "textAlignment",
        "verticalAlign" : "verticalAlign",
        "rotation": "rotation"
    },
    "displayOptions": [
        "title",
        "nameSelect",
        "style",
        "sizeAndColor",
        "horizontalAlign",
        "verticalAlign",
        "rotation"
    ]
}

{
    tagName: 'FontSizer',
    key: KPI_PROP.FONT_UNIFY_STEPS,
    stepSize: 1,
    defaultValue: 0,
    minValue: -34,
    showResetIcon: true
},

{
    tagName: 'HideableLayout',
    title: 'Basic Hideable Layout',
    className: 'hideable-layout',
    children: [
        {
            tagName: 'Text',
            key: 'content1',
            text: 'Grid'
        },
        {
            tagName: 'Text',
            key: 'content2',
            text: 'Content for button 2'
        },
        {
            tagName: 'Text',
            key: 'content3',
            text: 'Content for button 3'
        }
    ]
};

{
    "tagName": "HorizontalLayout",
    "children": [
        {
            "tagName": "Button",
            "text": "button 1"
        },
        {
            "tagName": "Button",
            "text": "button 2"
        }
    ]
}

{
    tagName: 'IconButton',
    icon: 'revert-to-default',
    tooltipTitle: { desc: 12061, name: 'Restore to Original Size' },
}

{
    tagName: 'InfoIcon',
    tooltip: {
        tagName: 'VerticalLayout',
        className: 'min-size-tooltip-container',
        children: [
            {
                tagName: 'Text',
                className: 'header-text',
                text: { desc: 11990, name: 'Proportional' }
            },
            {
                tagName: 'Text',
                className: 'subcontent-text',
                text: {
                    desc: 13743,
                    name: 'The smallest element\'s size is proportional to its data element'
                }
            },
            {
                tagName: 'Text',
                className: 'header-text',
                text: { desc: 13741, name: 'Full Range' }
            },
            {
                tagName: 'Text',
                className: 'subcontent-text',
                text: {
                    desc: 13744,
                    name: 'The smallest element\'s size is fixed, independent of its data value'
                }
            },
            {
                tagName: 'Text',
                className: 'header-text',
                text: { desc: 14118, name: 'Adjusted Range' }
            },
            {
                tagName: 'Text',
                className: 'subcontent-text bottom-subcontent',
                text: {
                    desc: null, // TODO: Add string
                    name: 'The smallest element\'s size is the percentage of the largest element\'s size as you defined'
                }
            },
        ]
    },
}

{
    tagName: 'VerticalLayout',
    children: [
        {
            tagName: 'Text',
            text: 'Regular Input'
        },
        {
            "tagName": "Input",
            "placeholder": "Default Text"
        }
        {
            tagName: 'Text',
            text: 'Regular Text Area'
        },
        {
            tagName: 'Input',
            isTextArea: true,
        },
        {
            tagName: 'Text',
            text: 'Specify Height'
        },
        {
            tagName: 'Input',
            isTextArea: true,
            rows: 4
        },
    ]
};

{
    tagName: 'InputNumber',
    step: 0.01,
    precision: 2,
    applyChangeOnFocusOut: true,
    min: 0,
    max: 1,
    format: 'px'
}

{
    tagName: 'MultiSelect',
    placeholder: 'Select multiple options',
    options: [
        { name: 'A', value: 1 },
        { name: 'B', value: 2 },
        { name: 'C', value: 3 },
    ],
};

{
    tagName: 'MultiSelectBar',
    checked: [false, false, false, false],
    innerClassName: 'property-panel-icons',
    useTooltips: true,
    ariaLabels: ['Bold', 'Italic', 'Underline', 'Underscore'],
    options: ['bold', 'italic', 'underline', 'underscore'],
};

{
    tagName: 'NestedSelect',
    value: '2',
    options: [
        { value: '1', name: 'Option 1' },
        {
            value: '2',
            name: 'Option 2',
            subContent: {
                tagName: 'Button',
                text: 'Nested button'
            },
            buttonBar: {
                ok: {
                    id: 'okButton',
                    text: 'OK'
                },
                cancel: {
                    id: 'cancelButton',
                    text: 'Cancel'
                }
            }
        },
        { value: '3', name: 'Option 3' },
    ],
};

{
    tagName: 'VerticalLayout',
    children: [
        {
            tagName: 'Button',
            key: 'button',
            text: 'Show the popup',
            func: {
                type: 'hide',
                targets: ['popup'],
                payload: false
            }
        },
        {
            tagName: 'Popup',
            title: 'Title',
            key: 'popup',
            children: [
                {
                    tagName: 'Text',
                    text: 'Text'
                }
            ]
        }
    ]
};

{
    "tagName": "VerticalLayout",
    "children": [
        {
            "tagName": "PositionSizeConfig"
        }
    ]
}

{
    "tagName": "Radio",
    "options": ["Item 1", "Item 2", "Item 3"]
}

{
    tagName: 'SegmentControl',
    options: [
        {
            icon: 'grid',
            ariaLabel: 'grid-label'
        },
        {
            icon: 'text-format',
            ariaLabel: 'text-format-label'
        },
        {
            icon: 'title-container',
            ariaLabel: 'title-container-label'
        },
    ],
    ariaLabel: 'segment-control-label',
    className: 'segment-control',
    children: [
        {
            tagName: 'Text',
            key: 'content1',
            text: 'Grid'
        },
        {
            tagName: 'Text',
            key: 'content2',
            text: 'Content for button 2'
        },
        {
            tagName: 'Text',
            key: 'content3',
            text: 'Content for button 3'
        }
    ]
};

{
    tagName: 'SegmentControlDropdownMenu',
    optionDisplayNames: [
        'option 1', 'option 2',
    ],
    children: [
        {
            tagName: 'VerticalLayout',
            children: [
                {
                    tagName: 'Checkbox',
                    checked: true,
                    text: 'Click me to hide the text',
                    func: {
                        type: 'hide',
                        targets: ['textToHide', 'transferToHide', 'layoutToHide']
                    }
                },
                {
                    tagName: 'Checkbox',
                    key: 'textToHide',
                    text: 'Hide Me'
                },
                {
                    tagName: 'Transfer',
                    key: 'transferToHide',
                    sourceTitle: 'Left Axis',
                    targetTitle: 'Right Axis',
                    options: [{ n: 'Metric 1' }, { n: 'Metric 2' }, { n: 'Metric 3' }, { n: 'Metric 4' }]
                },
                {
                    tagName: 'VerticalLayout',
                    key: 'layoutToHide',
                    children: [
                        {
                            tagName: 'Text',
                            text: 'This is inside of a layout'
                        }
                    ]
                }
            ]
        },
        {
            tagName: 'VerticalLayout',
            children: [
                {
                    tagName: 'Checkbox',
                    checked: true,
                    text: 'Text next to a checkbox'
                },
                { tagName: 'ColorPicker' },
                {
                    tagName: 'Input',
                    placeholder: 'Default Text'
                },
                {
                    tagName: 'Text',
                    text: 'Aliquam ultrices, augue nec viverra tempor, erat nisl consequat tortor, vitae dictum nunc sem at justo. Cras et ullamcorper neque, ut facilisis est. Aliquam finibus mauris ultricies turpis volutpat mollis.'
                }
            ]
        }
    ]
};

{
    tagName: 'SegmentControlSelect',
    options: ['content1', 'content2', 'content3'],
    className: 'basic-class',
    children: [
        {
            tagName: 'Text',
            key: 'content1',
            text: 'Box Plot'
        },
        {
            tagName: 'Text',
            key: 'content2',
            text: 'Content for button 2'
        },
        {
            tagName: 'Text',
            key: 'content3',
            text: 'Content for button 3'
        }
    ]
};

{
    "tagName": "Select",
    "className": "selectColorScheme",
    "options": [
      "This is a loooooooooooooooooooooooooooooooooooong selection",
      "Longer one is another long long long long long long long long one",
      "short"
    ],
    "key": "regular",
    "ariaLabel": "Regular select"
}

{
    tagName: 'Slider',
    max: 100,
    min: 0,
};

{
    tagName: 'Switch',
    on: true,
};

{
    tagName: 'Text',
    text: 'This is some text'
};

{
    tagName: 'AdvancedTooltip',
    tooltipContent: {
        title:'title Testing description paragraph with some text. H',
        description:'Testing description paragraph with some text. Here is some additional text Testing description paragraph with some text. H Testing description paragraph with some text. H',
        link: {
            name: 'Learn More',
            address: '/'
        },
        animation:'testtitle',
    }
};

{
    "tagName": "Transfer",
    "key": "regular",
    "sourceTitle": "Left Axis",
    "targetTitle": "Right Axis",
    "options": [
      {
        "n": "Metric 1",
        "dssid": 0
      },
      {
        "n": "Metric 2",
        "dssid": 1
      },
      {
        "n": "Metric 3",
        "dssid": 2
      },
      {
        "n": "Metric 4",
        "dssid": 3
      }
    ]
}

{
    "tagName": "VerticalLayout",
    "children": [
        {
            "tagName": "Button",
            "text": "button 1"
        },
        {
            "tagName": "Button",
            "text": "button 2"
        }
    ]
}