Merge branch 'develop' into checkbox-switch

.github/workflows/test-branches.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - develop
+      - v4
 
 jobs:
   test:

packages/blockTools/src/HtmlComponent.js

@@ -16,8 +16,9 @@
 
 import React from 'react';
 import DOMPurify from 'dompurify';
+import { type } from '@lowdefy/helpers';
 
-class RenderHtml extends React.Component {
+class HtmlComponent extends React.Component {
   constructor(props) {
     super(props);
     this.div = {
@@ -26,18 +27,17 @@ class RenderHtml extends React.Component {
   }
 
   componentDidMount() {
-    this.div.innerHTML = DOMPurify.sanitize(this.props.html);
+    const htmlString = type.isNone(this.props.html) ? '' : this.props.html.toString();
+    this.div.innerHTML = DOMPurify.sanitize(htmlString);
   }
 
   componentDidUpdate() {
-    this.div.innerHTML = DOMPurify.sanitize(this.props.html);
+    const htmlString = type.isNone(this.props.html) ? '' : this.props.html.toString();
+    this.div.innerHTML = DOMPurify.sanitize(htmlString);
   }
 
   render() {
-    const { div, html, id, methods, style } = this.props;
-    if (!html) {
-      return '';
-    }
+    const { div, id, methods, style } = this.props;
     if (div === true) {
       return (
         <div
@@ -67,4 +67,4 @@ class RenderHtml extends React.Component {
   }
 }
 
-export default RenderHtml;
+export default HtmlComponent;

packages/blockTools/src/HtmlComponent.test.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { RenderHtml } from '../src';
+import { HtmlComponent } from '../src';
 
 import { configure, mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -33,53 +33,69 @@ beforeEach(() => {
 });
 
 test('Render default', async () => {
-  const wrapper = await mount(<RenderHtml methods={methods} />);
+  const wrapper = await mount(<HtmlComponent methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span></span>"`);
   await wrapper.instance().componentDidUpdate();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span></span>"`);
 });
 
 test('Render default and id', async () => {
-  const wrapper = await mount(<RenderHtml id="test-id" methods={methods} />);
+  const wrapper = await mount(<HtmlComponent id="test-id" methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
+  expect(wrapper.html()).toMatchInlineSnapshot(
+    `"<span id=\\"test-id\\" data-testid=\\"test-id\\"></span>"`
+  );
 });
 
 test('Render string', async () => {
-  const wrapper = await mount(<RenderHtml html="A string value" methods={methods} />);
+  const wrapper = await mount(<HtmlComponent html="A string value" methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
   expect(wrapper.html()).toMatchInlineSnapshot(`"<span>A string value</span>"`);
 });
 
 test('Render number', async () => {
-  const wrapper = await mount(<RenderHtml html={123} methods={methods} />);
+  const wrapper = await mount(<HtmlComponent html={123} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
   expect(wrapper.html()).toMatchInlineSnapshot(`"<span>123</span>"`);
 });
 
-test('Render boolean', async () => {
-  const wrapper = await mount(<RenderHtml html={false} methods={methods} />);
+test('Render number 0', async () => {
+  const wrapper = await mount(<HtmlComponent html={0} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span>0</span>"`);
+});
+
+test('Render boolean true', async () => {
+  const wrapper = await mount(<HtmlComponent html={true} methods={methods} />);
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span>true</span>"`);
+});
+
+test('Render boolean false', async () => {
+  const wrapper = await mount(<HtmlComponent html={false} methods={methods} />);
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span>false</span>"`);
 });
 
 test('Render null', async () => {
-  const wrapper = await mount(<RenderHtml html={null} methods={methods} />);
+  const wrapper = await mount(<HtmlComponent html={null} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span></span>"`);
 });
 
 test('Render html', async () => {
   const wrapper = await mount(
-    <RenderHtml
+    <HtmlComponent
       html={'<div style="background: green; padding: 10px;">Content green background</div>'}
       methods={methods}
     />
@@ -93,7 +109,7 @@ test('Render html', async () => {
 
 test('Render html div', async () => {
   const wrapper = await mount(
-    <RenderHtml
+    <HtmlComponent
       html={'<div style="background: green; padding: 10px;">Content green background</div>'}
       methods={methods}
       div={true}
@@ -108,7 +124,7 @@ test('Render html div', async () => {
 
 test('Render html and style', async () => {
   const wrapper = await mount(
-    <RenderHtml
+    <HtmlComponent
       html={'<div style="background: green; padding: 10px;">Content green background</div>'}
       methods={methods}
       style={{ color: 'red' }}
@@ -123,7 +139,7 @@ test('Render html and style', async () => {
 
 test('Render html iframe', async () => {
   const wrapper = await mount(
-    <RenderHtml
+    <HtmlComponent
       html={
         '<iframe width="560" height="315" src="https://www.youtube.com/embed/7N7GWdlQJlU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
       }
@@ -137,7 +153,7 @@ test('Render html iframe', async () => {
 
 test('Render bad html', async () => {
   const wrapper = await mount(
-    <RenderHtml
+    <HtmlComponent
       html={`
       <h1>Link<h1>
       <a href="https://lowdefy.com">Lowdefy link</a>

packages/blockTools/src/index.js

@@ -17,14 +17,15 @@
 import blockDefaultProps from './blockDefaultProps';
 import BlockSchemaErrors from './BlockSchemaErrors';
 import ErrorBoundary from './ErrorBoundary';
+import HtmlComponent from './HtmlComponent';
 import IconSpinner from './Spinner/IconSpinner';
 import Loading from './Loading';
 import loadWebpackFederatedModule from './loadWebpackFederatedModule';
 import makeCssClass from './makeCssClass.js';
 import mediaToCssObject from './mediaToCssObject.js';
 import mockBlock from './mockBlock';
+import renderHtml from './renderHtml';
 import runBlockSchemaTests from './runBlockSchemaTests';
-import RenderHtml from './RenderHtml';
 import runMockMethodTests from './runMockMethodTests';
 import runMockRenderTests from './runMockRenderTests';
 import runRenderTests from './runRenderTests';
@@ -42,13 +43,14 @@ export {
   blockDefaultProps,
   BlockSchemaErrors,
   ErrorBoundary,
+  HtmlComponent,
   IconSpinner,
   Loading,
   loadWebpackFederatedModule,
   makeCssClass,
   mediaToCssObject,
   mockBlock,
-  RenderHtml,
+  renderHtml,
   runBlockSchemaTests,
   runMockMethodTests,
   runMockRenderTests,

packages/blockTools/src/renderHtml.js

@@ -0,0 +1,27 @@
+/*
+  Copyright 2020-2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { type } from '@lowdefy/helpers';
+
+import HtmlComponent from './HtmlComponent';
+
+const renderHtml = ({ div, html, id, methods, style }) =>
+  type.isNone(html) ? undefined : (
+    <HtmlComponent div={div} html={html} id={id} methods={methods} style={style} />
+  );
+
+export default renderHtml;

packages/blockTools/src/renderHtml.test.js

@@ -0,0 +1,68 @@
+/*
+  Copyright 2020-2021 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { renderHtml } from '../src';
+
+import { configure, mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+configure({ adapter: new Adapter() });
+
+const mockCMakeCssClass = jest.fn(() => 'test-class');
+const methods = {
+  makeCssClass: mockCMakeCssClass,
+};
+
+test('renderHtml html is undefined', () => {
+  expect(renderHtml({ methods })).toBe(undefined);
+  expect(renderHtml({ html: undefined, methods })).toBe(undefined);
+});
+
+test('renderHtml html string', async () => {
+  const wrapper = await mount(renderHtml({ html: '<p>Hello</p>', methods }));
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(
+    `"<span class=\\"test-class\\"><p>Hello</p></span>"`
+  );
+});
+
+test('renderHtml html number 0', async () => {
+  const wrapper = await mount(renderHtml({ html: 0, methods }));
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span class=\\"test-class\\">0</span>"`);
+});
+
+test('renderHtml html number 123', async () => {
+  const wrapper = await mount(renderHtml({ html: 123, methods }));
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span class=\\"test-class\\">123</span>"`);
+});
+
+test('renderHtml html boolean false', async () => {
+  const wrapper = await mount(renderHtml({ html: false, methods }));
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span class=\\"test-class\\">false</span>"`);
+});
+
+test('renderHtml html boolean true', async () => {
+  const wrapper = await mount(renderHtml({ html: true, methods }));
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span class=\\"test-class\\">true</span>"`);
+});

packages/blocks/blocksAntd/demo/examples/Descriptions.yaml

@@ -164,12 +164,24 @@
         value: 2
       - label: label 4
         value: <a>value three</a>
-# - id: 'properties.title html value'
-#   type: Descriptions
-#   properties:
-#     title: '<div style="color: blue;">hello</div>'
-#     items:
-#       field_one: value one
-#       field_two: 2
-#       field_three: value three
-#       field_four: [value 4, value 5]
+- id: 'properties.title html value'
+  type: Descriptions
+  properties:
+    title: '<div style="color: blue;">hello</div>'
+    items:
+      field_one: value one
+      field_two: 2
+      field_three: value three
+      field_four: [value 4, value 5]
+
+- id: properties.items-falseish-values
+  type: Descriptions
+  properties:
+    title: Title
+    items:
+      'Null': null
+      Zero: 0
+      One: 1
+      'False': false
+      'True': true
+      Empty: ''

packages/blocks/blocksAntd/src/blocks/Alert/Alert.js

@@ -16,7 +16,8 @@
 
 import React from 'react';
 import { Alert } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
+import { type } from '@lowdefy/helpers';
 
 import Icon from '../Icon/Icon';
 
@@ -33,13 +34,11 @@ const AlertBlock = ({ blockId, events, methods, properties }) => {
       banner={properties.banner}
       closable={properties.closable}
       closeText={properties.closeText}
-      description={
-        properties.description && <RenderHtml html={properties.description} methods={methods} />
-      }
+      description={renderHtml({ html: properties.description, methods })}
       id={blockId}
       message={
-        (properties.message && <RenderHtml html={properties.message} methods={methods} />) ||
-        (!properties.description && <div style={{ height: '1.5175em' }}></div>)
+        renderHtml({ html: properties.message, methods }) ||
+        (type.isNone(properties.description) && <div style={{ height: '1.5175em' }}></div>)
       }
       onClose={() => methods.triggerEvent({ name: 'onClose' })}
       showIcon={properties.showIcon === false ? false : true}

packages/blocks/blocksAntd/src/blocks/AutoComplete/AutoComplete.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { AutoComplete } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 
 import Label from '../Label/Label';
@@ -80,7 +80,7 @@ const AutoCompleteInput = ({
                   key={i}
                   value={i}
                 >
-                  <RenderHtml html={`${opt}`} methods={methods} />
+                  {`${opt}`}
                 </Option>
               ) : (
                 <Option
@@ -91,10 +91,9 @@ const AutoCompleteInput = ({
                   key={i}
                   value={i}
                 >
-                  <RenderHtml
-                    html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                    methods={methods}
-                  />
+                  {type.isNone(opt.label)
+                    ? `${opt.value}`
+                    : renderHtml({ html: opt.label, methods })}
                 </Option>
               )
             )}

packages/blocks/blocksAntd/src/blocks/Button/Button.js

@@ -18,7 +18,7 @@ import React from 'react';
 import { Button } from 'antd';
 import color from '@lowdefy/color';
 import { get, type } from '@lowdefy/helpers';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import Icon from '../Icon/Icon';
 
 const ButtonBlock = ({ blockId, events, loading, methods, onClick, properties, rename }) => {
@@ -57,12 +57,11 @@ const ButtonBlock = ({ blockId, events, loading, methods, onClick, properties, r
       }
       onClick={onClick || (() => methods.triggerEvent({ name: onClickActionName }))}
     >
-      {!properties.hideTitle && (
-        <RenderHtml
-          html={type.isNone(properties.title) ? blockId : properties.title}
-          methods={methods}
-        />
-      )}
+      {!properties.hideTitle &&
+        renderHtml({
+          html: type.isNone(properties.title) ? blockId : properties.title,
+          methods,
+        })}
     </Button>
   );
 };

packages/blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Radio } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 
 import Label from '../Label/Label';
@@ -72,7 +72,7 @@ const ButtonSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Radio.Button id={`${blockId}_${i}`} key={i} value={i}>
-                  <RenderHtml html={`${opt}`} methods={methods} />
+                  {`${opt}`}
                 </Radio.Button>
               ) : (
                 <Radio.Button
@@ -82,10 +82,9 @@ const ButtonSelector = ({
                   disabled={opt.disabled}
                   className={methods.makeCssClass(opt.style)}
                 >
-                  <RenderHtml
-                    html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                    methods={methods}
-                  />
+                  {type.isNone(opt.label)
+                    ? `${opt.value}`
+                    : renderHtml({ html: opt.label, methods })}
                 </Radio.Button>
               )
             )}

packages/blocks/blocksAntd/src/blocks/Card/Card.js

@@ -16,18 +16,12 @@
 
 import React from 'react';
 import { Card } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 const CardBlock = ({ blockId, content, properties, methods, events }) => (
   <Card
     id={blockId}
-    title={
-      content.title ? (
-        content.title()
-      ) : properties.title ? (
-        <RenderHtml html={properties.title} methods={methods} />
-      ) : undefined
-    }
+    title={content.title ? content.title() : renderHtml({ html: properties.title, methods })}
     headStyle={methods.makeCssClass(properties.headerStyle, { styleObjectOnly: true })}
     bodyStyle={methods.makeCssClass(properties.bodyStyle, { styleObjectOnly: true })}
     bordered={properties.bordered}

packages/blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Checkbox } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 import Label from '../Label/Label';
 import getValueIndex from '../../getValueIndex';
@@ -73,7 +73,7 @@ const CheckboxSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Checkbox id={`${blockId}_${i}`} key={i} value={i}>
-                  <RenderHtml html={`${opt}`} methods={methods} />
+                  {`${opt}`}
                 </Checkbox>
               ) : (
                 <Checkbox
@@ -83,10 +83,9 @@ const CheckboxSelector = ({
                   disabled={opt.disabled}
                   className={methods.makeCssClass(opt.style)}
                 >
-                  <RenderHtml
-                    html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                    methods={methods}
-                  />
+                  {type.isNone(opt.label)
+                    ? `${opt.value}`
+                    : renderHtml({ html: opt.label, methods })}
                 </Checkbox>
               )
             )}

packages/blocks/blocksAntd/src/blocks/Collapse/Collapse.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Collapse } from 'antd';
 import { type, serializer } from '@lowdefy/helpers';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 import Icon from '../Icon/Icon';
 
@@ -62,7 +62,7 @@ const CollapseBlock = ({ blockId, events, content, methods, properties }) => {
           extra={content[panel.extraKey] && content[panel.extraKey]()}
           disabled={panel.disabled}
           forceRender={properties.forceRender}
-          header={<RenderHtml html={panel.title} methods={methods} />}
+          header={renderHtml({ html: panel.title, methods })}
           key={panel.key}
           showArrow={properties.showArrow}
         >

packages/blocks/blocksAntd/src/blocks/ConfirmModal/ConfirmModal.js

@@ -16,7 +16,7 @@
 
 import React, { useEffect } from 'react';
 import { Modal } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import Icon from '../Icon/Icon';
 
 const ConfirmModal = ({ blockId, events, content, methods, properties }) => {
@@ -31,10 +31,10 @@ const ConfirmModal = ({ blockId, events, content, methods, properties }) => {
       methods.triggerEvent({ name: 'onOpen' });
       Modal[args.status || properties.status || 'confirm']({
         id: `${blockId}_confirm_modal`,
-        title: <RenderHtml html={properties.title} methods={methods} />,
-        content: (content.content && content.content()) || (
-          <RenderHtml html={properties.content} methods={methods} />
-        ),
+        title: renderHtml({ html: properties.title, methods }),
+        content:
+          (content.content && content.content()) ||
+          renderHtml({ html: properties.content, methods }),
         className: methods.makeCssClass(properties.modalStyle),
         okText: properties.okText || 'Ok',
         okButtonProps: properties.okButton,

packages/blocks/blocksAntd/src/blocks/Descriptions/Descriptions.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { Descriptions } from 'antd';
 import { type } from '@lowdefy/helpers';
 
@@ -29,7 +29,7 @@ const DescriptionsBlock = ({ blockId, properties, methods }) => {
   return (
     <Descriptions
       id={blockId}
-      title={<RenderHtml html={properties.title} methods={methods} />}
+      title={renderHtml({ html: properties.title, methods })}
       bordered={properties.bordered}
       column={properties.column}
       size={properties.size}
@@ -52,7 +52,7 @@ const DescriptionsBlock = ({ blockId, properties, methods }) => {
         return (
           <Descriptions.Item
             key={i}
-            label={<RenderHtml html={label} methods={methods} />}
+            label={renderHtml({ html: label, methods })}
             span={
               row.span ||
               (type.isFunction(itemOption.span) ? itemOption.span(row, i) : itemOption.span)
@@ -63,7 +63,7 @@ const DescriptionsBlock = ({ blockId, properties, methods }) => {
               row.style,
             ])}`}
           >
-            <RenderHtml html={value} methods={methods} />
+            {renderHtml({ html: value, methods })}
           </Descriptions.Item>
         );
       })}

packages/blocks/blocksAntd/src/blocks/Divider/Divider.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Divider } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 const DividerBlock = ({ blockId, properties, methods }) => (
   <Divider
@@ -27,7 +27,7 @@ const DividerBlock = ({ blockId, properties, methods }) => (
     type={properties.type}
     plain={properties.plain}
   >
-    {properties.title && <RenderHtml html={properties.title} methods={methods} />}
+    {renderHtml({ html: properties.title, methods })}
   </Divider>
 );
 

packages/blocks/blocksAntd/src/blocks/Label/Label.js

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { Col, Row } from 'antd';
 import CSSMotion from 'rc-animate/lib/CSSMotion';
 import {
@@ -70,7 +70,7 @@ const Label = ({ blockId, content, methods, properties, required, validation })
       {label && (
         <Col {...labelCol} className={labelColClassName}>
           <label htmlFor={`${blockId}_input`} className={labelClassName} title={label}>
-            <RenderHtml html={label} methods={methods} />
+            {renderHtml({ html: label, methods })}
           </label>
         </Col>
       )}
@@ -91,9 +91,7 @@ const Label = ({ blockId, content, methods, properties, required, validation })
           )}
         </CSSMotion>
         {showExtra && (
-          <div className={extraClassName}>
-            <RenderHtml html={properties.extra} methods={methods} />
-          </div>
+          <div className={extraClassName}>{renderHtml({ html: properties.extra, methods })}</div>
         )}
       </Col>
     </Row>

packages/blocks/blocksAntd/src/blocks/Message/Message.js

@@ -17,7 +17,7 @@
 import React, { useEffect } from 'react';
 import { message } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 import Icon from '../Icon/Icon';
 
@@ -26,9 +26,7 @@ const MessageBlock = ({ blockId, events, properties, methods }) => {
     methods.registerMethod('open', (args = {}) => {
       return message[args.status || properties.status || 'success']({
         id: `${blockId}_message`,
-        content: (
-          <RenderHtml html={args.content || properties.content || blockId} methods={methods} />
-        ),
+        content: renderHtml({ html: args.content || properties.content || blockId, methods }),
         duration: type.isNone(args.duration) ? properties.duration : args.duration,
         onClose: () => methods.triggerEvent({ name: 'onClose' }),
         icon: (args.icon || properties.icon) && (

packages/blocks/blocksAntd/src/blocks/MobileMenu/MobileMenu.js

@@ -40,7 +40,7 @@ const MobileMenu = ({ basePath, blockId, events, methods, menus, pageId, propert
         blockId={`${blockId}_button`}
         events={events}
         properties={{
-          title: '',
+          hideTitle: true,
           type: 'primary',
           icon: {
             name: openState ? 'MenuUnfoldOutlined' : 'MenuFoldOutlined',

packages/blocks/blocksAntd/src/blocks/Modal/Modal.js

@@ -15,7 +15,7 @@
 */
 
 import React, { useState, useEffect } from 'react';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { get } from '@lowdefy/helpers';
 import { Modal } from 'antd';
 
@@ -50,7 +50,7 @@ const ModalBlock = ({ blockId, content, properties, events, methods }) => {
     <div id={blockId}>
       <Modal
         id={`${blockId}_modal`}
-        title={<RenderHtml html={properties.title} methods={methods} />}
+        title={renderHtml({ html: properties.title, methods })}
         bodyStyle={methods.makeCssClass(properties.bodyStyle, { styleObjectOnly: true })}
         visible={openState}
         onOk={async () => {

packages/blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Select } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { get, type } from '@lowdefy/helpers';
 import Label from '../Label/Label';
 import Icon from '../Icon/Icon';
@@ -113,7 +113,7 @@ const MultipleSelector = ({
                     key={i}
                     value={i}
                   >
-                    <RenderHtml html={`${opt}`} methods={methods} />
+                    {`${opt}`}
                   </Option>
                 ) : (
                   <Option
@@ -124,10 +124,9 @@ const MultipleSelector = ({
                     key={i}
                     value={i}
                   >
-                    <RenderHtml
-                      html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                      methods={methods}
-                    />
+                    {type.isNone(opt.label)
+                      ? `${opt.value}`
+                      : renderHtml({ html: opt.label, methods })}
                   </Option>
                 )
               )}

packages/blocks/blocksAntd/src/blocks/Notification/Notification.js

@@ -16,7 +16,7 @@
 
 import React, { useEffect } from 'react';
 import { notification } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
@@ -36,9 +36,7 @@ const NotificationBlock = ({ blockId, events, properties, methods }) => {
           />
         ),
         className: methods.makeCssClass(properties.notificationStyle),
-        description: (
-          <RenderHtml html={args.description || properties.description} methods={methods} />
-        ),
+        description: renderHtml({ html: args.description || properties.description, methods }),
         duration: type.isNone(args.duration) ? properties.duration : args.duration,
         icon: properties.icon && (
           <Icon blockId={`${blockId}_icon`} events={events} properties={properties.icon} />
@@ -50,9 +48,7 @@ const NotificationBlock = ({ blockId, events, properties, methods }) => {
             properties={properties.closeIcon}
           />
         ),
-        message: (
-          <RenderHtml html={args.message || properties.message || blockId} methods={methods} />
-        ),
+        message: renderHtml({ html: args.message || properties.message || blockId, methods }),
         onClose: () => methods.triggerEvent({ name: 'onClose' }),
         onClick: () => methods.triggerEvent({ name: 'onClick' }),
         placement: properties.placement,

packages/blocks/blocksAntd/src/blocks/PageSiderMenu/PageSiderMenu.js

@@ -287,7 +287,7 @@ const PageSiderMenu = ({
                                         blockId={`${blockId}_toggle_sider`}
                                         events={events}
                                         properties={{
-                                          title: '',
+                                          hideTitle: true,
                                           type: 'link',
                                           block: true,
                                           icon: {

packages/blocks/blocksAntd/src/blocks/Paragraph/Paragraph.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Typography } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 
 import Icon from '../Icon/Icon';
@@ -102,7 +102,7 @@ const ParagraphBlock = ({ blockId, events, properties, methods }) => (
     type={properties.type}
     underline={properties.underline}
   >
-    <RenderHtml html={properties.content} methods={methods} />
+    {renderHtml({ html: properties.content, methods })}
   </Paragraph>
 );
 

packages/blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Radio } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 
 import Label from '../Label/Label';
@@ -73,7 +73,7 @@ const RadioSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Radio id={`${blockId}_${opt}`} key={i} value={i}>
-                  <RenderHtml html={`${opt}`} methods={methods} />
+                  {`${opt}`}
                 </Radio>
               ) : (
                 <Radio
@@ -83,10 +83,9 @@ const RadioSelector = ({
                   disabled={opt.disabled}
                   className={methods.makeCssClass(opt.style)}
                 >
-                  <RenderHtml
-                    html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                    methods={methods}
-                  />
+                  {type.isNone(opt.label)
+                    ? `${opt.value}`
+                    : renderHtml({ html: opt.label, methods })}
                 </Radio>
               )
             )}

packages/blocks/blocksAntd/src/blocks/Result/Result.js

@@ -16,15 +16,15 @@
 
 import React from 'react';
 import { Result } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 import Icon from '../Icon/Icon';
 
 const ResultBlock = ({ blockId, events, content, methods, properties }) => (
   <Result
     id={blockId}
-    title={<RenderHtml html={properties.title} methods={methods} />}
-    subTitle={<RenderHtml html={properties.subTitle} methods={methods} />}
+    title={renderHtml({ html: properties.title, methods })}
+    subTitle={renderHtml({ html: properties.subTitle, methods })}
     status={properties.status}
     icon={
       properties.icon && (

packages/blocks/blocksAntd/src/blocks/Selector/Selector.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Select } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { get, type } from '@lowdefy/helpers';
 import Label from '../Label/Label';
 import Icon from '../Icon/Icon';
@@ -102,7 +102,7 @@ const Selector = ({
                     key={i}
                     value={i}
                   >
-                    <RenderHtml html={`${opt}`} methods={methods} />
+                    {`${opt}`}
                   </Option>
                 ) : (
                   <Option
@@ -113,10 +113,9 @@ const Selector = ({
                     key={i}
                     value={i}
                   >
-                    <RenderHtml
-                      html={type.isNone(opt.label) ? `${opt.value}` : opt.label}
-                      methods={methods}
-                    />
+                    {type.isNone(opt.label)
+                      ? `${opt.value}`
+                      : renderHtml({ html: opt.label, methods })}
                   </Option>
                 )
               )}

packages/blocks/blocksAntd/src/blocks/Statistic/Statistic.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Statistic } from 'antd';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 import Icon from '../Icon/Icon';
 
@@ -28,7 +28,7 @@ const StatisticBlock = ({ blockId, events, properties, methods }) => (
     groupSeparator={properties.groupSeparator}
     id={blockId}
     precision={properties.precision}
-    title={<RenderHtml html={properties.title} methods={methods} />}
+    title={renderHtml({ html: properties.title, methods })}
     value={type.isNone(properties.value) ? '' : properties.value}
     valueStyle={properties.valueStyle}
     prefix={

packages/blocks/blocksAntd/src/blocks/Title/Title.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { Typography } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 import { type } from '@lowdefy/helpers';
 
 import Icon from '../Icon/Icon';
@@ -106,7 +106,7 @@ const TitleBlock = ({ blockId, events, properties, methods }) => {
       type={properties.type}
       underline={properties.underline}
     >
-      <RenderHtml html={properties.content} methods={methods} />
+      {renderHtml({ html: properties.content, methods })}
     </Title>
   );
 };

packages/blocks/blocksAntd/src/blocks/Tooltip/Tooltip.js

@@ -16,12 +16,12 @@
 
 import React from 'react';
 import { Tooltip } from 'antd';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, renderHtml } from '@lowdefy/block-tools';
 
 const TooltipBlock = ({ blockId, content, properties, methods }) => (
   <Tooltip
     id={blockId}
-    title={properties.title && <RenderHtml html={properties.title} methods={methods} />}
+    title={renderHtml({ html: properties.title, methods })}
     overlayStyle={methods.makeCssClass(properties.overlayStyle, { styleObjectOnly: true })}
     arrowPointAtCenter={properties.arrowPointAtCenter}
     autoAdjustOverflow={properties.autoAdjustOverflow}

packages/blocks/blocksAntd/tests/__snapshots__/Alert.mock.test.js.snap

@@ -36,7 +36,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.closable: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message closable true"
         methods={
           Object {
@@ -66,7 +66,7 @@ Array [
       "closeText": "Close Text",
       "description": undefined,
       "id": "properties.closeText: Close Text",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message closable true"
         methods={
           Object {
@@ -128,7 +128,7 @@ Array [
         }
       />,
       "id": "properties.icon object",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message with Icon!"
         methods={
           Object {
@@ -184,7 +184,7 @@ Array [
         }
       />,
       "id": "properties.icon string",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message with Icon!"
         methods={
           Object {
@@ -214,7 +214,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.message",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - Completed!"
         methods={
           Object {
@@ -244,7 +244,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: error",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -274,7 +274,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: error banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -304,7 +304,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: error showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -334,7 +334,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: info",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -364,7 +364,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: info banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -394,7 +394,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: info showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -424,7 +424,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: success",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -454,7 +454,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: success banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -484,7 +484,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: success showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -514,7 +514,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: warning",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -544,7 +544,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: warning banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -574,7 +574,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "properties.type: warning showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -602,7 +602,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -632,7 +632,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -662,7 +662,7 @@ Array [
       "banner": undefined,
       "closable": true,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -674,7 +674,7 @@ Array [
         }
       />,
       "id": "with description properties.closable: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message closable true"
         methods={
           Object {
@@ -702,7 +702,7 @@ Array [
       "banner": undefined,
       "closable": true,
       "closeText": "Close Text",
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -714,7 +714,7 @@ Array [
         }
       />,
       "id": "with description properties.closeText: Close Text",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message closable true"
         methods={
           Object {
@@ -742,7 +742,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -786,7 +786,7 @@ Array [
         }
       />,
       "id": "with description properties.icon object",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message with Icon!"
         methods={
           Object {
@@ -814,7 +814,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -852,7 +852,7 @@ Array [
         }
       />,
       "id": "with description properties.icon string",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Message with Icon!"
         methods={
           Object {
@@ -880,7 +880,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -892,7 +892,7 @@ Array [
         }
       />,
       "id": "with description properties.message",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - Completed!"
         methods={
           Object {
@@ -920,7 +920,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -932,7 +932,7 @@ Array [
         }
       />,
       "id": "with description properties.type: error",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -960,7 +960,7 @@ Array [
       "banner": true,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -972,7 +972,7 @@ Array [
         }
       />,
       "id": "with description properties.type: error banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -1000,7 +1000,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1012,7 +1012,7 @@ Array [
         }
       />,
       "id": "with description properties.type: error showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - error!"
         methods={
           Object {
@@ -1040,7 +1040,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1052,7 +1052,7 @@ Array [
         }
       />,
       "id": "with description properties.type: info",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -1080,7 +1080,7 @@ Array [
       "banner": true,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1092,7 +1092,7 @@ Array [
         }
       />,
       "id": "with description properties.type: info banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -1120,7 +1120,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1132,7 +1132,7 @@ Array [
         }
       />,
       "id": "with description properties.type: info showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - info!"
         methods={
           Object {
@@ -1160,7 +1160,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1172,7 +1172,7 @@ Array [
         }
       />,
       "id": "with description properties.type: success",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -1200,7 +1200,7 @@ Array [
       "banner": true,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1212,7 +1212,7 @@ Array [
         }
       />,
       "id": "with description properties.type: success banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -1240,7 +1240,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1252,7 +1252,7 @@ Array [
         }
       />,
       "id": "with description properties.type: success showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - success!"
         methods={
           Object {
@@ -1280,7 +1280,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1292,7 +1292,7 @@ Array [
         }
       />,
       "id": "with description properties.type: warning",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -1320,7 +1320,7 @@ Array [
       "banner": true,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1332,7 +1332,7 @@ Array [
         }
       />,
       "id": "with description properties.type: warning banner: true",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -1360,7 +1360,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html="This is a description for the block."
         methods={
           Object {
@@ -1372,7 +1372,7 @@ Array [
         }
       />,
       "id": "with description properties.type: warning showIcon: false",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html="Alert message - warning!"
         methods={
           Object {
@@ -1400,7 +1400,7 @@ Array [
       "banner": undefined,
       "closable": undefined,
       "closeText": undefined,
-      "description": <RenderHtml
+      "description": <HtmlComponent
         html=<div style="background:red;">
   Alert Description
 </div>
@@ -1434,7 +1434,7 @@ Array [
       "closeText": undefined,
       "description": undefined,
       "id": "with message uses html",
-      "message": <RenderHtml
+      "message": <HtmlComponent
         html=<div style="background:green;">
   Alert Message
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/AutoComplete.mock.test.js.snap

@@ -36,88 +36,14 @@ Array [
           id="properties.allowClear: false_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.allowClear: false_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -148,88 +74,14 @@ Array [
           id="properties.autoFocus: true_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.autoFocus: true_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -260,88 +112,14 @@ Array [
           id="properties.backfill: true_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.backfill: true_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -372,92 +150,14 @@ Array [
           id="properties.inputStyle: CSS style applied_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      Object {
-                        "border": "1px solid red",
-                      },
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.inputStyle: CSS style applied_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      Object {
-                        "border": "1px solid red",
-                      },
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
@@ -626,7 +326,7 @@ Array [
           id="properties.options.label: html_0"
           value={0}
         >
-          <RenderHtml
+          <HtmlComponent
             html=<div>
   Some main text
 </div>
@@ -691,7 +391,7 @@ Array [
           id="properties.options.label: html_1"
           value={1}
         >
-          <RenderHtml
+          <HtmlComponent
             html=<div style="color: green;">
   Option green
 </div>
@@ -753,7 +453,7 @@ Array [
           id="properties.options.label: html_2"
           value={2}
         >
-          <RenderHtml
+          <HtmlComponent
             html="Option 3"
             methods={
               Object {
@@ -838,7 +538,7 @@ Array [
           id="properties.options.label: html and properties.options.filterString_0"
           value={0}
         >
-          <RenderHtml
+          <HtmlComponent
             html=<div>
   Some main text
 </div>
@@ -904,7 +604,7 @@ Array [
           id="properties.options.label: html and properties.options.filterString_1"
           value={1}
         >
-          <RenderHtml
+          <HtmlComponent
             html=<div style="color: green;">
   Option green
 </div>
@@ -966,7 +666,7 @@ Array [
           id="properties.options.label: html and properties.options.filterString_2"
           value={2}
         >
-          <RenderHtml
+          <HtmlComponent
             html="Option 3"
             methods={
               Object {
@@ -1050,160 +750,21 @@ Array [
           id="properties.options: html_0"
           value={0}
         >
-          <RenderHtml
-            html=<div>
-  Some main text
-</div>
-<div style="font-size: 6px;">
-  Some small subtext
-</div>
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_1"
           value={1}
         >
-          <RenderHtml
-            html=<div style="color: green;">
-  Option green
-</div>
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_2"
           value={2}
         >
-          <RenderHtml
-            html="Option 3"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 3
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1234,7 +795,7 @@ Array [
           id="properties.options-object_0"
           value={0}
         >
-          <RenderHtml
+          <HtmlComponent
             html="one"
             methods={
               Object {
@@ -1284,7 +845,7 @@ Array [
           id="properties.options-object_1"
           value={1}
         >
-          <RenderHtml
+          <HtmlComponent
             html="two"
             methods={
               Object {
@@ -1358,88 +919,14 @@ Array [
           id="properties.options-string_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-string_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1470,7 +957,7 @@ Array [
           id="properties.options-style_0"
           value={0}
         >
-          <RenderHtml
+          <HtmlComponent
             html="one"
             methods={
               Object {
@@ -1522,7 +1009,7 @@ Array [
           id="properties.options-style_1"
           value={1}
         >
-          <RenderHtml
+          <HtmlComponent
             html="two"
             methods={
               Object {
@@ -1598,96 +1085,14 @@ Array [
           id="properties.optionsStyle: CSS style applied_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      Object {
-                        "color": "blue",
-                      },
-                    ],
-                    Array [
-                      Object {
-                        "color": "blue",
-                      },
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{\\"style\\":{\\"color\\":\\"blue\\"}}"
           id="properties.optionsStyle: CSS style applied_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      Object {
-                        "color": "blue",
-                      },
-                    ],
-                    Array [
-                      Object {
-                        "color": "blue",
-                      },
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1741,88 +1146,14 @@ Array [
           id="properties.size: large_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.size: large_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1853,88 +1184,14 @@ Array [
           id="properties.size: small_0"
           value={0}
         >
-          <RenderHtml
-            html="Option 1"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 1
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.size: small_1"
           value={1}
         >
-          <RenderHtml
-            html="Option 2"
-            methods={
-              Object {
-                "makeCssClass": [MockFunction] {
-                  "calls": Array [
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                    Array [
-                      undefined,
-                    ],
-                  ],
-                  "results": Array [
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                    Object {
-                      "type": "return",
-                      "value": "{}",
-                    },
-                  ],
-                },
-                "registerEvent": [Function],
-                "registerMethod": [Function],
-                "setValue": [Function],
-                "triggerEvent": [Function],
-              }
-            }
-          />
+          Option 2
         </mockConstructor>,
       ],
       "className": "{}",

packages/blocks/blocksAntd/tests/__snapshots__/Button.mock.test.js.snap

@@ -5,7 +5,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="default"
         methods={
           Object {
@@ -59,7 +59,7 @@ Array [
   Array [
     Object {
       "block": true,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.block: true"
         methods={
           Object {
@@ -113,7 +113,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.color: #9c27b0"
         methods={
           Object {
@@ -173,7 +173,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.danger: true"
         methods={
           Object {
@@ -227,7 +227,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.disabled: true"
         methods={
           Object {
@@ -281,7 +281,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.ghost: true"
         methods={
           Object {
@@ -384,7 +384,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.href: www.lowdefy.com"
         methods={
           Object {
@@ -438,7 +438,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.icon object"
         methods={
           Object {
@@ -522,7 +522,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.icon string"
         methods={
           Object {
@@ -601,7 +601,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.shape: circle"
         methods={
           Object {
@@ -655,7 +655,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.shape: round"
         methods={
           Object {
@@ -709,7 +709,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.size: large"
         methods={
           Object {
@@ -763,7 +763,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.size: small"
         methods={
           Object {
@@ -817,7 +817,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Button title"
         methods={
           Object {
@@ -871,7 +871,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.type: danger"
         methods={
           Object {
@@ -925,7 +925,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.type: dashed"
         methods={
           Object {
@@ -979,7 +979,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.type: default"
         methods={
           Object {
@@ -1033,7 +1033,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.type: link"
         methods={
           Object {
@@ -1087,7 +1087,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="properties.type: text"
         methods={
           Object {
@@ -1141,7 +1141,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html=<div style="color: orange;">
   Title
 </div>
@@ -1197,7 +1197,7 @@ Array [
   Array [
     Object {
       "block": undefined,
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html=<div style="color: red;">
   Title
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap

@@ -32,7 +32,7 @@ Array [
       "id": "areas.extra:",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -142,7 +142,7 @@ Array [
       "id": "properties.bodyStyle: border: 5px solid blue",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -223,7 +223,7 @@ Array [
       "id": "properties.bordered: false",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -302,7 +302,7 @@ Array [
       "id": "properties.headerStyle: border: 5px solid blue",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -383,7 +383,7 @@ Array [
       "id": "properties.hoverable: true",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -462,7 +462,7 @@ Array [
       "id": "properties.inner: true",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -541,7 +541,7 @@ Array [
       "id": "properties.size: small",
       "onClick": [Function],
       "size": "small",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block small"
         methods={
           Object {
@@ -620,7 +620,7 @@ Array [
       "id": "properties.title",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {
@@ -699,7 +699,7 @@ Array [
       "id": "with html in title",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html=<div style="color:green">
   Card Title
 </div>
@@ -780,7 +780,7 @@ Array [
       "id": "with onClick event",
       "onClick": [Function],
       "size": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Card block"
         methods={
           Object {

packages/blocks/blocksAntd/tests/__snapshots__/Collapse.mock.test.js.snap

@@ -9,7 +9,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="content"
               methods={
                 Object {
@@ -55,7 +55,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -81,7 +81,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -128,7 +128,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -154,7 +154,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -200,7 +200,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -226,7 +226,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -272,7 +272,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -298,7 +298,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -344,7 +344,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -370,7 +370,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -416,7 +416,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -442,7 +442,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -488,7 +488,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -514,7 +514,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -561,7 +561,7 @@ Array [
         <mockConstructor
           forceRender={true}
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -588,7 +588,7 @@ Array [
         <mockConstructor
           forceRender={true}
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -632,20 +632,7 @@ Array [
       "accordion": undefined,
       "bordered": undefined,
       "children": Array [
-        <mockConstructor
-          header={
-            <RenderHtml
-              methods={
-                Object {
-                  "makeCssClass": [MockFunction],
-                  "registerEvent": [Function],
-                  "registerMethod": [Function],
-                  "triggerEvent": [Function],
-                }
-              }
-            />
-          }
-        >
+        <mockConstructor>
           <div
             style={
               Object {
@@ -657,20 +644,7 @@ Array [
             content_one
           </div>
         </mockConstructor>,
-        <mockConstructor
-          header={
-            <RenderHtml
-              methods={
-                Object {
-                  "makeCssClass": [MockFunction],
-                  "registerEvent": [Function],
-                  "registerMethod": [Function],
-                  "triggerEvent": [Function],
-                }
-              }
-            />
-          }
-        >
+        <mockConstructor>
           <div
             style={
               Object {
@@ -705,7 +679,7 @@ Array [
         <mockConstructor
           disabled={true}
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -732,7 +706,7 @@ Array [
         <mockConstructor
           disabled={true}
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -790,7 +764,7 @@ Array [
             </div>
           }
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -828,7 +802,7 @@ Array [
             </div>
           }
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -874,7 +848,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -900,7 +874,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -946,7 +920,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title One"
               methods={
                 Object {
@@ -973,7 +947,7 @@ Array [
         </mockConstructor>,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html="Title Two"
               methods={
                 Object {
@@ -1020,7 +994,7 @@ Array [
       "children": Array [
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html=<div style="color:blue">
   Panel 1 Title
 </div>
@@ -1037,7 +1011,7 @@ Array [
         />,
         <mockConstructor
           header={
-            <RenderHtml
+            <HtmlComponent
               html=<div style="color:green">
   Panel 2 Title
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/Collapse.test.js.snap

@@ -958,7 +958,6 @@ exports[`Render properties.panels - value[0] 1`] = `
           />
         </svg>
       </span>
-      
     </div>
     <div
       className="ant-collapse-content ant-collapse-content-active"
@@ -1010,7 +1009,6 @@ exports[`Render properties.panels - value[0] 1`] = `
           />
         </svg>
       </span>
-      
     </div>
   </div>
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/Descriptions.test.js.snap

@@ -4,11 +4,6 @@ exports[`Render default - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -44,11 +39,6 @@ exports[`Render properties.bordered: true - value[0] 1`] = `
 <div
   className="ant-descriptions ant-descriptions-bordered"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -116,11 +106,6 @@ exports[`Render properties.colon: false - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -197,11 +182,6 @@ exports[`Render properties.column: 2 - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -282,11 +262,6 @@ exports[`Render properties.itemOptions.span - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -386,11 +361,6 @@ exports[`Render properties.itemOptions.style - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -490,11 +460,6 @@ exports[`Render properties.items html values - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -590,6 +555,143 @@ exports[`Render properties.items html values - value[0] 1`] = `
 </div>
 `;
 
+exports[`Render properties.items-falseish-values - value[0] 1`] = `
+<div
+  className="ant-descriptions"
+>
+  <div
+    className="ant-descriptions-title"
+  >
+    <span
+      className="{}"
+    />
+  </div>
+  <div
+    className="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          className="ant-descriptions-row"
+        >
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+        </tr>
+        <tr
+          className="ant-descriptions-row"
+        >
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
 exports[`Render properties.items-list - value[0] 1`] = `
 <div
   className="ant-descriptions"
@@ -975,11 +1077,6 @@ exports[`Render properties.layout: vertical - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -1075,11 +1172,6 @@ exports[`Render properties.size: default - value[0] 1`] = `
 <div
   className="ant-descriptions"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -1156,11 +1248,6 @@ exports[`Render properties.size: small - value[0] 1`] = `
 <div
   className="ant-descriptions ant-descriptions-small"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -1237,11 +1324,6 @@ exports[`Render properties.size: small, properties.bordered: true - value[0] 1`]
 <div
   className="ant-descriptions ant-descriptions-small ant-descriptions-bordered"
 >
-  <div
-    className="ant-descriptions-title"
-  >
-    
-  </div>
   <div
     className="ant-descriptions-view"
   >
@@ -1357,6 +1439,112 @@ exports[`Render properties.size: small, properties.bordered: true - value[0] 1`]
 </div>
 `;
 
+exports[`Render properties.title html value - value[0] 1`] = `
+<div
+  className="ant-descriptions"
+>
+  <div
+    className="ant-descriptions-title"
+  >
+    <span
+      className="{}"
+    />
+  </div>
+  <div
+    className="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          className="ant-descriptions-row"
+        >
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={1}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+        </tr>
+        <tr
+          className="ant-descriptions-row"
+        >
+          <td
+            className="ant-descriptions-item {\\"style\\":[{\\"whiteSpace\\":\\"pre-wrap\\"},null,null]}"
+            colSpan={3}
+          >
+            <span
+              className="ant-descriptions-item-label"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+            <span
+              className="ant-descriptions-item-content"
+            >
+              <span
+                className="{}"
+              />
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
 exports[`Test Schema default 1`] = `true`;
 
 exports[`Test Schema default 2`] = `null`;
@@ -1389,6 +1577,10 @@ exports[`Test Schema properties.items html values 1`] = `true`;
 
 exports[`Test Schema properties.items html values 2`] = `null`;
 
+exports[`Test Schema properties.items-falseish-values 1`] = `true`;
+
+exports[`Test Schema properties.items-falseish-values 2`] = `null`;
+
 exports[`Test Schema properties.items-list 1`] = `true`;
 
 exports[`Test Schema properties.items-list 2`] = `null`;
@@ -1424,3 +1616,7 @@ exports[`Test Schema properties.size: small 2`] = `null`;
 exports[`Test Schema properties.size: small, properties.bordered: true 1`] = `true`;
 
 exports[`Test Schema properties.size: small, properties.bordered: true 2`] = `null`;
+
+exports[`Test Schema properties.title html value 1`] = `true`;
+
+exports[`Test Schema properties.title html value 2`] = `null`;

packages/blocks/blocksAntd/tests/__snapshots__/Divider.mock.test.js.snap

@@ -38,7 +38,7 @@ exports[`Mock render - properties.orientation: center - value[0] - default 1`] =
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -65,7 +65,7 @@ exports[`Mock render - properties.orientation: left - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -92,7 +92,7 @@ exports[`Mock render - properties.orientation: right - value[0] - default 1`] =
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -119,7 +119,7 @@ exports[`Mock render - properties.title - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -146,7 +146,7 @@ exports[`Mock render - properties.type: horizontal - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -173,7 +173,7 @@ exports[`Mock render - properties.type: true - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -200,7 +200,7 @@ exports[`Mock render - properties.type: vertical - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html="Divider title"
         methods={
           Object {
@@ -227,7 +227,7 @@ exports[`Mock render - with html in title - value[0] - default 1`] = `
 Array [
   Array [
     Object {
-      "children": <RenderHtml
+      "children": <HtmlComponent
         html=<div style="background-color:yellow">
   Html Title
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/Label.mock.test.js.snap

@@ -25,7 +25,7 @@ Array [
             htmlFor="default_input"
             title="default"
           >
-            <RenderHtml
+            <HtmlComponent
               html="default"
               methods={
                 Object {
@@ -167,7 +167,7 @@ Array [
             title="Lorem ipsum dolor sit amet
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet
 "
               methods={
@@ -277,7 +277,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -380,7 +380,7 @@ Array [
             title="Lorem ipsum dolor sit amet
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet
 "
               methods={
@@ -490,7 +490,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -593,7 +593,7 @@ Array [
             title="Lorem ipsum dolor sit amet
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet
 "
               methods={
@@ -703,7 +703,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":-4},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -814,7 +814,7 @@ Array [
             htmlFor="properties.align: left_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -964,7 +964,7 @@ Array [
             htmlFor="properties.align: right_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -1114,7 +1114,7 @@ Array [
             htmlFor="properties.colon: false_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -1264,7 +1264,7 @@ Array [
             htmlFor="properties.colon: true_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -1471,7 +1471,7 @@ Array [
             htmlFor="properties.extra: Extra long_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -1589,7 +1589,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -1691,7 +1691,7 @@ Array [
             htmlFor="properties.extra: Extra long with inline = true_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -1800,7 +1800,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -1902,7 +1902,7 @@ Array [
             htmlFor="properties.extra: Extra long with inline = true, size = large_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -2011,7 +2011,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -2113,7 +2113,7 @@ Array [
             htmlFor="properties.extra: Extra long with inline = true, size = small_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -2222,7 +2222,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":-4},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -2325,7 +2325,7 @@ Array [
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -2467,7 +2467,7 @@ Array [
             htmlFor="properties.extra: Extra text_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -2585,7 +2585,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Extra text"
               methods={
                 Object {
@@ -2695,7 +2695,7 @@ Array [
             htmlFor="properties.extra: html in extra_input"
             title="label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="label title"
               methods={
                 Object {
@@ -2813,7 +2813,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html=<span style="background:yellow;">
   html in extra
 </span>
@@ -2925,7 +2925,7 @@ Array [
             htmlFor="properties.extraStyle: border 1px purple_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -3045,7 +3045,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},{\\"border\\":\\"1px solid purple\\"}]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Extra text"
               methods={
                 Object {
@@ -3157,7 +3157,7 @@ Array [
             htmlFor="properties.feedbackStyle: border 1px blue_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -3277,7 +3277,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="The extra content"
               methods={
                 Object {
@@ -3380,7 +3380,7 @@ Array [
             htmlFor="properties.inline: true_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -3526,7 +3526,7 @@ Array [
             htmlFor="properties.span: 2_input"
             title="This is the long label title wrapped by short span"
           >
-            <RenderHtml
+            <HtmlComponent
               html="This is the long label title wrapped by short span"
               methods={
                 Object {
@@ -3686,7 +3686,7 @@ Array [
             htmlFor="properties.span: 2 with long work title_input"
             title="Thisisthelonglabeltitlea"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Thisisthelonglabeltitlea"
               methods={
                 Object {
@@ -3841,7 +3841,7 @@ Array [
             htmlFor="properties.title_input"
             title="Label title"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Label title"
               methods={
                 Object {
@@ -3992,7 +3992,7 @@ Array [
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -4145,7 +4145,7 @@ Array [
   html in title
 </span>
           >
-            <RenderHtml
+            <HtmlComponent
               html=<span style="background:yellow;">
   html in title
 </span>
@@ -4303,7 +4303,7 @@ Array [
             title="Lorem
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem
 "
               methods={
@@ -4427,7 +4427,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -4544,7 +4544,7 @@ Array [
             title="Lorem
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem
 "
               methods={
@@ -4668,7 +4668,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -4785,7 +4785,7 @@ Array [
             title="Lorem
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem
 "
               methods={
@@ -4909,7 +4909,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":-4},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5026,7 +5026,7 @@ Array [
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5150,7 +5150,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5267,7 +5267,7 @@ Array [
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5391,7 +5391,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":0},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5508,7 +5508,7 @@ Array [
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={
@@ -5632,7 +5632,7 @@ Array [
           <div
             className="ant-form-item-explain ant-form-item-extra {\\"style\\":[{\\"marginTop\\":-4},null]}"
           >
-            <RenderHtml
+            <HtmlComponent
               html="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod
 "
               methods={

packages/blocks/blocksAntd/tests/__snapshots__/Message.test.js.snap

@@ -11,7 +11,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -63,7 +63,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -115,7 +115,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -167,7 +167,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -238,7 +238,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -292,7 +292,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -346,7 +346,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -402,7 +402,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -452,7 +452,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Args message content"
         methods={
           Object {
@@ -504,7 +504,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="default"
         methods={
           Object {
@@ -556,7 +556,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -608,7 +608,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -660,7 +660,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -731,7 +731,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -785,7 +785,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -839,7 +839,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -895,7 +895,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -945,7 +945,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html=<div style="color:pink;">
   <strong>
     Message Content Html
@@ -1003,7 +1003,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="default"
         methods={
           Object {
@@ -1055,7 +1055,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1107,7 +1107,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1159,7 +1159,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1236,7 +1236,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1288,7 +1288,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1340,7 +1340,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1392,7 +1392,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1444,7 +1444,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html=<div style="color:pink;">
   <strong>
     Message Content Html
@@ -1498,7 +1498,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="default"
         methods={
           Object {
@@ -1550,7 +1550,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1602,7 +1602,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1654,7 +1654,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1725,7 +1725,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1779,7 +1779,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1833,7 +1833,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1889,7 +1889,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html="Message content"
         methods={
           Object {
@@ -1939,7 +1939,7 @@ Array [
   Array [
     Object {
       "className": "{}",
-      "content": <RenderHtml
+      "content": <HtmlComponent
         html=<div style="color:pink;">
   <strong>
     Message Content Html

packages/blocks/blocksAntd/tests/__snapshots__/MobileMenu.test.js.snap

@@ -5,7 +5,7 @@ exports[`Render backgroundColor: #016e1e - value[0] 1`] = `
   id="backgroundColor: #016e1e"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="backgroundColor: #016e1e_button"
     onClick={[Function]}
     type="button"
@@ -32,7 +32,6 @@ exports[`Render backgroundColor: #016e1e - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -42,7 +41,7 @@ exports[`Render default - value[0] 1`] = `
   id="default"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="default_button"
     onClick={[Function]}
     type="button"
@@ -69,7 +68,6 @@ exports[`Render default - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -79,7 +77,7 @@ exports[`Render menus: default - value[0] 1`] = `
   id="menus: default"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menus: default_button"
     onClick={[Function]}
     type="button"
@@ -106,7 +104,6 @@ exports[`Render menus: default - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -116,7 +113,7 @@ exports[`Render menus: links[0] - value[0] 1`] = `
   id="menus: links[0]"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menus: links[0]_button"
     onClick={[Function]}
     type="button"
@@ -143,7 +140,6 @@ exports[`Render menus: links[0] - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -153,7 +149,7 @@ exports[`Render menus: properties.menuId: menu_one - value[0] 1`] = `
   id="menus: properties.menuId: menu_one"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menus: properties.menuId: menu_one_button"
     onClick={[Function]}
     type="button"
@@ -180,7 +176,6 @@ exports[`Render menus: properties.menuId: menu_one - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -190,7 +185,7 @@ exports[`Render menusTitle pageId - value[0] 1`] = `
   id="menusTitle pageId"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menusTitle pageId_button"
     onClick={[Function]}
     type="button"
@@ -217,7 +212,6 @@ exports[`Render menusTitle pageId - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -227,7 +221,7 @@ exports[`Render menusTitle properties.title - value[0] 1`] = `
   id="menusTitle properties.title"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menusTitle properties.title_button"
     onClick={[Function]}
     type="button"
@@ -254,7 +248,6 @@ exports[`Render menusTitle properties.title - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -264,7 +257,7 @@ exports[`Render menusTitle url - value[0] 1`] = `
   id="menusTitle url"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="menusTitle url_button"
     onClick={[Function]}
     type="button"
@@ -291,7 +284,6 @@ exports[`Render menusTitle url - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -301,7 +293,7 @@ exports[`Render properties.MenuGroup with MenuLInks - value[0] 1`] = `
   id="properties.MenuGroup with MenuLInks"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.MenuGroup with MenuLInks_button"
     onClick={[Function]}
     type="button"
@@ -328,7 +320,6 @@ exports[`Render properties.MenuGroup with MenuLInks - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -338,7 +329,7 @@ exports[`Render properties.danger: true - value[0] 1`] = `
   id="properties.danger: true"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.danger: true_button"
     onClick={[Function]}
     type="button"
@@ -365,7 +356,6 @@ exports[`Render properties.danger: true - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -375,7 +365,7 @@ exports[`Render properties.icon - value[0] 1`] = `
   id="properties.icon"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.icon_button"
     onClick={[Function]}
     type="button"
@@ -402,7 +392,6 @@ exports[`Render properties.icon - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -412,7 +401,7 @@ exports[`Render properties.links - value[0] 1`] = `
   id="properties.links"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.links_button"
     onClick={[Function]}
     type="button"
@@ -439,7 +428,6 @@ exports[`Render properties.links - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -449,7 +437,7 @@ exports[`Render properties.subMenuCloseDelay: 3 - value[0] 1`] = `
   id="properties.subMenuCloseDelay: 3"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.subMenuCloseDelay: 3_button"
     onClick={[Function]}
     type="button"
@@ -476,7 +464,6 @@ exports[`Render properties.subMenuCloseDelay: 3 - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -486,7 +473,7 @@ exports[`Render properties.subMenuOpenDelay: 3 - value[0] 1`] = `
   id="properties.subMenuOpenDelay: 3"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.subMenuOpenDelay: 3_button"
     onClick={[Function]}
     type="button"
@@ -513,7 +500,6 @@ exports[`Render properties.subMenuOpenDelay: 3 - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -523,7 +509,7 @@ exports[`Render properties.title - value[0] 1`] = `
   id="properties.title"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="properties.title_button"
     onClick={[Function]}
     type="button"
@@ -550,7 +536,6 @@ exports[`Render properties.title - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -560,7 +545,7 @@ exports[`Render selectedColor: #f16e1e - value[0] 1`] = `
   id="selectedColor: #f16e1e"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="selectedColor: #f16e1e_button"
     onClick={[Function]}
     type="button"
@@ -587,7 +572,6 @@ exports[`Render selectedColor: #f16e1e - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -597,7 +581,7 @@ exports[`Render selectedColor: #f16e1e, backgroundColor: #016e1e - value[0] 1`]
   id="selectedColor: #f16e1e, backgroundColor: #016e1e"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="selectedColor: #f16e1e, backgroundColor: #016e1e_button"
     onClick={[Function]}
     type="button"
@@ -624,7 +608,6 @@ exports[`Render selectedColor: #f16e1e, backgroundColor: #016e1e - value[0] 1`]
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -634,7 +617,7 @@ exports[`Render theme: light - value[0] 1`] = `
   id="theme: light"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="theme: light_button"
     onClick={[Function]}
     type="button"
@@ -661,7 +644,6 @@ exports[`Render theme: light - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -671,7 +653,7 @@ exports[`Render theme: light, selectedColor: #6C2ACB - value[0] 1`] = `
   id="theme: light, selectedColor: #6C2ACB"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="theme: light, selectedColor: #6C2ACB_button"
     onClick={[Function]}
     type="button"
@@ -698,7 +680,6 @@ exports[`Render theme: light, selectedColor: #6C2ACB - value[0] 1`] = `
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;
@@ -708,7 +689,7 @@ exports[`Render theme: light, selectedColor: #f16e1e, backgroundColor: #016e1e -
   id="theme: light, selectedColor: #f16e1e, backgroundColor: #016e1e"
 >
   <button
-    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+    className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
     id="theme: light, selectedColor: #f16e1e, backgroundColor: #016e1e_button"
     onClick={[Function]}
     type="button"
@@ -735,7 +716,6 @@ exports[`Render theme: light, selectedColor: #f16e1e, backgroundColor: #016e1e -
         />
       </svg>
     </span>
-    
   </button>
 </div>
 `;

packages/blocks/blocksAntd/tests/__snapshots__/Modal.mock.test.js.snap

@@ -30,48 +30,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -112,7 +71,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Modal title"
         methods={
           Object {
@@ -195,50 +154,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  Object {
-                    "border": "10px solid blue",
-                  },
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"style\\":{\\"border\\":\\"10px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -279,48 +195,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -361,48 +236,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -443,48 +277,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -526,48 +319,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -608,48 +360,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -690,48 +401,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -772,50 +442,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  Object {
-                    "border": "10px solid blue",
-                  },
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"style\\":{\\"border\\":\\"10px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -856,48 +483,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -938,48 +524,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": 350,
       "wrapClassName": "{}",
@@ -1020,50 +565,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  Object {
-                    "border": "10px solid blue",
-                  },
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"style\\":{\\"border\\":\\"10px solid blue\\"}}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{\\"style\\":{\\"border\\":\\"10px solid blue\\"}}",
@@ -1104,48 +606,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                  Object {
-                    "styleObjectOnly": true,
-                  },
-                ],
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-                },
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "visible": false,
       "width": undefined,
       "wrapClassName": "{}",
@@ -1186,7 +647,7 @@ Array [
       "okType": "primary",
       "onCancel": [Function],
       "onOk": [Function],
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html=<div style="color:green;">
   Modal Html Title
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/PageSiderMenu.test.js.snap

@@ -19,7 +19,7 @@ exports[`Render default - value[0] 1`] = `
           id="default_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="default_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -46,7 +46,6 @@ exports[`Render default - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -122,7 +121,7 @@ exports[`Render default - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="default_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -149,7 +148,6 @@ exports[`Render default - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -198,7 +196,7 @@ exports[`Render properties.breadcrumb.list - value[0] 1`] = `
           id="properties.breadcrumb.list_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.breadcrumb.list_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -225,7 +223,6 @@ exports[`Render properties.breadcrumb.list - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -301,7 +298,7 @@ exports[`Render properties.breadcrumb.list - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.breadcrumb.list_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -328,7 +325,6 @@ exports[`Render properties.breadcrumb.list - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -411,7 +407,7 @@ exports[`Render properties.content.style - value[0] 1`] = `
           id="properties.content.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.content.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -438,7 +434,6 @@ exports[`Render properties.content.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -514,7 +509,7 @@ exports[`Render properties.content.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.content.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -541,7 +536,6 @@ exports[`Render properties.content.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -590,7 +584,7 @@ exports[`Render properties.footer.style - value[0] 1`] = `
           id="properties.footer.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.footer.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -617,7 +611,6 @@ exports[`Render properties.footer.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -693,7 +686,7 @@ exports[`Render properties.footer.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.footer.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -720,7 +713,6 @@ exports[`Render properties.footer.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -784,7 +776,7 @@ exports[`Render properties.header.color - value[0] 1`] = `
           id="properties.header.color_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.header.color_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -811,7 +803,6 @@ exports[`Render properties.header.color - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -976,7 +967,7 @@ exports[`Render properties.header.color - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.header.color_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -1003,7 +994,6 @@ exports[`Render properties.header.color - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -1062,7 +1052,7 @@ exports[`Render properties.header.style - value[0] 1`] = `
           id="properties.header.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.header.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -1089,7 +1079,6 @@ exports[`Render properties.header.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -1165,7 +1154,7 @@ exports[`Render properties.header.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.header.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -1192,7 +1181,6 @@ exports[`Render properties.header.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -1241,7 +1229,7 @@ exports[`Render properties.header.theme: light - value[0] 1`] = `
           id="properties.header.theme: light_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.header.theme: light_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -1268,7 +1256,6 @@ exports[`Render properties.header.theme: light - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -1433,7 +1420,7 @@ exports[`Render properties.header.theme: light - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.header.theme: light_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -1460,7 +1447,6 @@ exports[`Render properties.header.theme: light - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -1509,7 +1495,7 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
           id="properties.logo.alt_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.logo.alt_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -1536,7 +1522,6 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -1701,7 +1686,7 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.logo.alt_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -1728,7 +1713,6 @@ exports[`Render properties.logo.alt - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -1777,7 +1761,7 @@ exports[`Render properties.logo.size - value[0] 1`] = `
           id="properties.logo.size_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.logo.size_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -1804,7 +1788,6 @@ exports[`Render properties.logo.size - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -1969,7 +1952,7 @@ exports[`Render properties.logo.size - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.logo.size_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -1996,7 +1979,6 @@ exports[`Render properties.logo.size - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -2045,7 +2027,7 @@ exports[`Render properties.logo.src - value[0] 1`] = `
           id="properties.logo.src_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.logo.src_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -2072,7 +2054,6 @@ exports[`Render properties.logo.src - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -2237,7 +2218,7 @@ exports[`Render properties.logo.src - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.logo.src_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -2264,7 +2245,6 @@ exports[`Render properties.logo.src - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -2313,7 +2293,7 @@ exports[`Render properties.logo.srcSet - value[0] 1`] = `
           id="properties.logo.srcSet_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.logo.srcSet_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -2340,7 +2320,6 @@ exports[`Render properties.logo.srcSet - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -2505,7 +2484,7 @@ exports[`Render properties.logo.srcSet - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.logo.srcSet_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -2532,7 +2511,6 @@ exports[`Render properties.logo.srcSet - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -2581,7 +2559,7 @@ exports[`Render properties.logo.style - value[0] 1`] = `
           id="properties.logo.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.logo.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -2608,7 +2586,6 @@ exports[`Render properties.logo.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -2684,7 +2661,7 @@ exports[`Render properties.logo.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.logo.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -2711,7 +2688,6 @@ exports[`Render properties.logo.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -2760,7 +2736,7 @@ exports[`Render properties.menu - value[0] 1`] = `
           id="properties.menu_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.menu_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -2787,7 +2763,6 @@ exports[`Render properties.menu - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -2952,7 +2927,7 @@ exports[`Render properties.menu - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.menu_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -2979,7 +2954,6 @@ exports[`Render properties.menu - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -3028,7 +3002,7 @@ exports[`Render properties.menu.selectedColor - value[0] 1`] = `
           id="properties.menu.selectedColor_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.menu.selectedColor_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -3055,7 +3029,6 @@ exports[`Render properties.menu.selectedColor - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -3220,7 +3193,7 @@ exports[`Render properties.menu.selectedColor - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.menu.selectedColor_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -3247,7 +3220,6 @@ exports[`Render properties.menu.selectedColor - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -3296,7 +3268,7 @@ exports[`Render properties.sider.color - value[0] 1`] = `
           id="properties.sider.color_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.sider.color_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -3323,7 +3295,6 @@ exports[`Render properties.sider.color - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -3488,7 +3459,7 @@ exports[`Render properties.sider.color - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.sider.color_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -3515,7 +3486,6 @@ exports[`Render properties.sider.color - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -3564,7 +3534,7 @@ exports[`Render properties.sider.initialCollapsed - value[0] 1`] = `
           id="properties.sider.initialCollapsed_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.sider.initialCollapsed_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -3591,7 +3561,6 @@ exports[`Render properties.sider.initialCollapsed - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -3678,7 +3647,7 @@ exports[`Render properties.sider.initialCollapsed - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.sider.initialCollapsed_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -3705,7 +3674,6 @@ exports[`Render properties.sider.initialCollapsed - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -3754,7 +3722,7 @@ exports[`Render properties.sider.style - value[0] 1`] = `
           id="properties.sider.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.sider.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -3781,7 +3749,6 @@ exports[`Render properties.sider.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -3868,7 +3835,7 @@ exports[`Render properties.sider.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.sider.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -3895,7 +3862,6 @@ exports[`Render properties.sider.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -3944,7 +3910,7 @@ exports[`Render properties.sider.theme: dark - value[0] 1`] = `
           id="properties.sider.theme: dark_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.sider.theme: dark_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -3971,7 +3937,6 @@ exports[`Render properties.sider.theme: dark - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -4047,7 +4012,7 @@ exports[`Render properties.sider.theme: dark - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.sider.theme: dark_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -4074,7 +4039,6 @@ exports[`Render properties.sider.theme: dark - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -4123,7 +4087,7 @@ exports[`Render properties.style - value[0] 1`] = `
           id="properties.style_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.style_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -4150,7 +4114,6 @@ exports[`Render properties.style - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -4226,7 +4189,7 @@ exports[`Render properties.style - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.style_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -4253,7 +4216,6 @@ exports[`Render properties.style - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -4302,7 +4264,7 @@ exports[`Render properties.toggleSiderButton.hide - value[0] 1`] = `
           id="properties.toggleSiderButton.hide_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.toggleSiderButton.hide_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -4329,7 +4291,6 @@ exports[`Render properties.toggleSiderButton.hide - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -4416,7 +4377,7 @@ exports[`Render properties.toggleSiderButton.hide - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-link ant-btn-icon-only ant-btn-block"
                   id="properties.toggleSiderButton.hide_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -4443,7 +4404,6 @@ exports[`Render properties.toggleSiderButton.hide - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>
@@ -4492,7 +4452,7 @@ exports[`Render properties.toggleSiderButton.type - value[0] 1`] = `
           id="properties.toggleSiderButton.type_mobile_menu"
         >
           <button
-            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary"
+            className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only"
             id="properties.toggleSiderButton.type_mobile_menu_button"
             onClick={[Function]}
             type="button"
@@ -4519,7 +4479,6 @@ exports[`Render properties.toggleSiderButton.type - value[0] 1`] = `
                 />
               </svg>
             </span>
-            
           </button>
         </div>
       </div>
@@ -4606,7 +4565,7 @@ exports[`Render properties.toggleSiderButton.type - value[0] 1`] = `
                 }
               >
                 <button
-                  className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-block"
+                  className="ant-btn {\\"style\\":[{},null]} ant-btn-primary ant-btn-icon-only ant-btn-block"
                   id="properties.toggleSiderButton.type_toggle_sider"
                   onClick={[Function]}
                   type="button"
@@ -4633,7 +4592,6 @@ exports[`Render properties.toggleSiderButton.type - value[0] 1`] = `
                       />
                     </svg>
                   </span>
-                  
                 </button>
               </div>
             </div>

packages/blocks/blocksAntd/tests/__snapshots__/Result.mock.test.js.snap

@@ -27,26 +27,8 @@ Array [
       "icon": undefined,
       "id": "areas.extra",
       "status": undefined,
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -71,26 +53,8 @@ Array [
       "icon": undefined,
       "id": "default",
       "status": undefined,
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -140,26 +104,8 @@ Array [
       />,
       "id": "properties. icon: ApiFilled",
       "status": undefined,
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -184,26 +130,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: 403",
       "status": "403",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -228,26 +156,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: 404",
       "status": "404",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -272,26 +182,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: 500",
       "status": "500",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -316,26 +208,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: error",
       "status": "error",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -360,26 +234,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: info",
       "status": "info",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -404,26 +260,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: success  default is info",
       "status": "success",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -448,26 +286,8 @@ Array [
       "icon": undefined,
       "id": "properties. status: warning",
       "status": "warning",
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "subTitle": undefined,
+      "title": undefined,
     },
     Object {},
   ],
@@ -492,7 +312,7 @@ Array [
       "icon": undefined,
       "id": "properties.subTitle: subTitle text",
       "status": undefined,
-      "subTitle": <RenderHtml
+      "subTitle": <HtmlComponent
         html="subTitle text"
         methods={
           Object {
@@ -503,16 +323,7 @@ Array [
           }
         }
       />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
     },
     Object {},
   ],
@@ -537,17 +348,8 @@ Array [
       "icon": undefined,
       "id": "properties.title",
       "status": undefined,
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
+      "subTitle": undefined,
+      "title": <HtmlComponent
         html="Result title"
         methods={
           Object {
@@ -582,7 +384,7 @@ Array [
       "icon": undefined,
       "id": "with properties.subTitle in html",
       "status": undefined,
-      "subTitle": <RenderHtml
+      "subTitle": <HtmlComponent
         html=<div style="color:green;">
   Html Subtitle
 </div>
@@ -595,16 +397,7 @@ Array [
           }
         }
       />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
     },
     Object {},
   ],
@@ -629,17 +422,8 @@ Array [
       "icon": undefined,
       "id": "with properties.title in html",
       "status": undefined,
-      "subTitle": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction],
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
-      "title": <RenderHtml
+      "subTitle": undefined,
+      "title": <HtmlComponent
         html=<div style="color:red;">
   Html Title
 </div>

packages/blocks/blocksAntd/tests/__snapshots__/Result.test.js.snap

@@ -29,14 +29,7 @@ exports[`Render areas.extra - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-extra"
   >
@@ -97,14 +90,7 @@ exports[`Render default - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -154,14 +140,7 @@ exports[`Render properties. icon: ApiFilled - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -469,14 +448,7 @@ exports[`Render properties. status: 403 - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -802,14 +774,7 @@ exports[`Render properties. status: 404 - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1182,14 +1147,7 @@ exports[`Render properties. status: 500 - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1236,14 +1194,7 @@ exports[`Render properties. status: error - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1290,14 +1241,7 @@ exports[`Render properties. status: info - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1344,14 +1288,7 @@ exports[`Render properties. status: success  default is info - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1398,14 +1335,7 @@ exports[`Render properties. status: warning - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-content"
   >
@@ -1452,9 +1382,7 @@ exports[`Render properties.subTitle: subTitle text - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-subtitle"
   >
@@ -1512,11 +1440,6 @@ exports[`Render properties.title - value[0] 1`] = `
     <span
       className="{}"
     />
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
   </div>
   <div
     className="ant-result-content"
@@ -1564,9 +1487,7 @@ exports[`Render with properties.subTitle in html - value[0] 1`] = `
   </div>
   <div
     className="ant-result-title"
-  >
-    
-  </div>
+  />
   <div
     className="ant-result-subtitle"
   >
@@ -1624,11 +1545,6 @@ exports[`Render with properties.title in html - value[0] 1`] = `
     <span
       className="{}"
     />
-  </div>
-  <div
-    className="ant-result-subtitle"
-  >
-    
   </div>
   <div
     className="ant-result-content"

packages/blocks/blocksAntd/tests/__snapshots__/Statistic.mock.test.js.snap

@@ -11,28 +11,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": "",
       "valueStyle": undefined,
     },
@@ -52,28 +31,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },
@@ -93,28 +51,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3565542.45,
       "valueStyle": undefined,
     },
@@ -134,28 +71,7 @@ Array [
       "precision": 2,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.456,
       "valueStyle": undefined,
     },
@@ -175,28 +91,7 @@ Array [
       "precision": undefined,
       "prefix": "R",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },
@@ -241,28 +136,7 @@ Array [
         }
       />,
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },
@@ -282,28 +156,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "Rand",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },
@@ -348,28 +201,7 @@ Array [
           }
         }
       />,
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },
@@ -389,7 +221,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Statistic title"
         methods={
           Object {
@@ -431,7 +263,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "%",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html=<div style="color:blue;">
   Very Html
 </div>
@@ -475,28 +307,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": "3.45",
       "valueStyle": undefined,
     },
@@ -516,28 +327,7 @@ Array [
       "precision": undefined,
       "prefix": "",
       "suffix": "",
-      "title": <RenderHtml
-        methods={
-          Object {
-            "makeCssClass": [MockFunction] {
-              "calls": Array [
-                Array [
-                  undefined,
-                ],
-              ],
-              "results": Array [
-                Object {
-                  "type": "return",
-                  "value": "{}",
-                },
-              ],
-            },
-            "registerEvent": [Function],
-            "registerMethod": [Function],
-            "triggerEvent": [Function],
-          }
-        }
-      />,
+      "title": undefined,
       "value": 3.45,
       "valueStyle": undefined,
     },

packages/blocks/blocksAntd/tests/__snapshots__/Statistic.test.js.snap

@@ -4,11 +4,6 @@ exports[`Render default - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -33,11 +28,6 @@ exports[`Render properties.decimalSeparator: ',' - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -66,11 +56,6 @@ exports[`Render properties.groupSeparator: ',' - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -99,11 +84,6 @@ exports[`Render properties.precision: 2 - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -132,11 +112,6 @@ exports[`Render properties.prefix: R - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -169,11 +144,6 @@ exports[`Render properties.prefixIcon: AccountBookFilled - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -227,11 +197,6 @@ exports[`Render properties.suffix: Rand - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -264,11 +229,6 @@ exports[`Render properties.suffixIcon: AccountBookFilled - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -388,11 +348,6 @@ exports[`Render properties.value: '3.45' as string - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >
@@ -421,11 +376,6 @@ exports[`Render properties.value: 3.45 as number - value[0] 1`] = `
 <div
   className="ant-statistic {}"
 >
-  <div
-    className="ant-statistic-title"
-  >
-    
-  </div>
   <div
     className="ant-statistic-content"
   >

packages/blocks/blocksAntd/tests/__snapshots__/Tooltip.mock.test.js.snap

@@ -28,7 +28,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Tooltip block"
         methods={
           Object {
@@ -127,7 +127,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": "topLeft",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="arrowPointAtCenter true"
         methods={
           Object {
@@ -189,7 +189,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": "right",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="autoAdjustOverflow false"
         methods={
           Object {
@@ -251,7 +251,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": "right",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="autoAdjustOverflow true"
         methods={
           Object {
@@ -313,7 +313,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="color blue"
         methods={
           Object {
@@ -375,7 +375,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="defaultVisible true"
         methods={
           Object {
@@ -437,7 +437,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="mouseEnterDelay 1"
         methods={
           Object {
@@ -499,7 +499,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="mouseLeaveDelay 1"
         methods={
           Object {
@@ -561,7 +561,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"style\\":{\\"border\\":\\"5px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Tooltip block"
         methods={
           Object {
@@ -625,7 +625,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": "topLeft",
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="placement topLeft"
         methods={
           Object {
@@ -687,7 +687,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="Tooltip block"
         methods={
           Object {
@@ -749,7 +749,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html=<div style="background-color:orange;">
   Tooltip Html
 </div>
@@ -813,7 +813,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="trigger click"
         methods={
           Object {
@@ -875,7 +875,7 @@ Array [
       "onVisibleChange": [Function],
       "overlayStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "placement": undefined,
-      "title": <RenderHtml
+      "title": <HtmlComponent
         html="zIndex 1000"
         methods={
           Object {

packages/blocks/blocksBasic/demo/examples/DangerousHtml.yaml

@@ -8,7 +8,7 @@
 - id: properties.style
   type: DangerousHtml
   properties:
-    style: 
+    style:
       background: yellow
       padding: 10
     html: |
@@ -16,7 +16,7 @@
 - id: properties.html-styled
   type: DangerousHtml
   properties:
-    style: 
+    style:
       background: yellow
       padding: 10
     html: |
@@ -30,8 +30,8 @@
 - id: properties.html-DOMPurifyOptions.ADD_TAGS-iframe
   type: DangerousHtml
   properties:
-    DOMPurifyOptions: 
-      ADD_TAGS: 
+    DOMPurifyOptions:
+      ADD_TAGS:
         - iframe
     html: |
       With iframe ADD_TAGS:
@@ -58,4 +58,12 @@
       </div>
       <script>
         alert('script tag');
-      </script>
+      </script>
+- id: properties.html is number 0
+  type: DangerousHtml
+  properties:
+    html: 0
+- id: properties.html is boolean false
+  type: DangerousHtml
+  properties:
+    html: false

packages/blocks/blocksBasic/demo/examples/Html.yaml

@@ -50,3 +50,12 @@
       <script>
         alert('script tag');
       </script>
+
+- id: properties.html is number 0
+  type: Html
+  properties:
+    html: 0
+- id: properties.html is boolean false
+  type: Html
+  properties:
+    html: false

packages/blocks/blocksBasic/src/blocks/DangerousHtml/DangerousHtml.js

@@ -17,6 +17,7 @@
 import React from 'react';
 import DOMPurify from 'dompurify';
 import { blockDefaultProps } from '@lowdefy/block-tools';
+import { type } from '@lowdefy/helpers';
 
 class DangerousHtml extends React.Component {
   constructor(props) {
@@ -29,13 +30,17 @@ class DangerousHtml extends React.Component {
   }
 
   componentDidMount() {
-    // this.div.innerHTML = this.props.properties.html;
-    this.div.innerHTML = DOMPurify.sanitize(this.props.properties.html, this.DOMPurifyOptions);
+    const htmlString = type.isNone(this.props.properties.html)
+      ? ''
+      : this.props.properties.html.toString();
+    this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
   }
 
   componentDidUpdate() {
-    // this.div.innerHTML = this.props.properties.html;
-    this.div.innerHTML = DOMPurify.sanitize(this.props.properties.html, this.DOMPurifyOptions);
+    const htmlString = type.isNone(this.props.properties.html)
+      ? ''
+      : this.props.properties.html.toString();
+    this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
   }
 
   render() {

packages/blocks/blocksBasic/src/blocks/Html/Html.js

@@ -15,10 +15,10 @@
 */
 
 import React from 'react';
-import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
+import { blockDefaultProps, HtmlComponent } from '@lowdefy/block-tools';
 
 const HtmlBlock = ({ blockId, properties, methods }) => (
-  <RenderHtml
+  <HtmlComponent
     div={true}
     html={properties.html}
     id={blockId}

packages/blocks/blocksBasic/tests/__snapshots__/DangerousHtml.test.js.snap

@@ -16,6 +16,22 @@ exports[`Render properties.html - value[0] 1`] = `
 />
 `;
 
+exports[`Render properties.html is boolean false - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html is boolean false"
+  id="properties.html is boolean false"
+/>
+`;
+
+exports[`Render properties.html is number 0 - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html is number 0"
+  id="properties.html is number 0"
+/>
+`;
+
 exports[`Render properties.html-bad-code - value[0] 1`] = `
 <div
   className="{}"
@@ -56,6 +72,38 @@ exports[`Test Schema properties.html 1`] = `true`;
 
 exports[`Test Schema properties.html 2`] = `null`;
 
+exports[`Test Schema properties.html is boolean false 1`] = `false`;
+
+exports[`Test Schema properties.html is boolean false 2`] = `
+Array [
+  Object {
+    "dataPath": "/properties/html",
+    "keyword": "type",
+    "message": "should be string",
+    "params": Object {
+      "type": "string",
+    },
+    "schemaPath": "#/properties/properties/properties/html/type",
+  },
+]
+`;
+
+exports[`Test Schema properties.html is number 0 1`] = `false`;
+
+exports[`Test Schema properties.html is number 0 2`] = `
+Array [
+  Object {
+    "dataPath": "/properties/html",
+    "keyword": "type",
+    "message": "should be string",
+    "params": Object {
+      "type": "string",
+    },
+    "schemaPath": "#/properties/properties/properties/html/type",
+  },
+]
+`;
+
 exports[`Test Schema properties.html-bad-code 1`] = `true`;
 
 exports[`Test Schema properties.html-bad-code 2`] = `null`;

packages/blocks/blocksBasic/tests/__snapshots__/Html.test.js.snap

@@ -1,6 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render default - value[0] 1`] = `""`;
+exports[`Render default - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="default"
+  id="default"
+/>
+`;
 
 exports[`Render properties.html - value[0] 1`] = `
 <div
@@ -10,6 +16,22 @@ exports[`Render properties.html - value[0] 1`] = `
 />
 `;
 
+exports[`Render properties.html is boolean false - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html is boolean false"
+  id="properties.html is boolean false"
+/>
+`;
+
+exports[`Render properties.html is number 0 - value[0] 1`] = `
+<div
+  className="{}"
+  data-testid="properties.html is number 0"
+  id="properties.html is number 0"
+/>
+`;
+
 exports[`Render properties.html-bad-code - value[0] 1`] = `
 <div
   className="{}"
@@ -50,6 +72,38 @@ exports[`Test Schema properties.html 1`] = `true`;
 
 exports[`Test Schema properties.html 2`] = `null`;
 
+exports[`Test Schema properties.html is boolean false 1`] = `false`;
+
+exports[`Test Schema properties.html is boolean false 2`] = `
+Array [
+  Object {
+    "dataPath": "/properties/html",
+    "keyword": "type",
+    "message": "should be string",
+    "params": Object {
+      "type": "string",
+    },
+    "schemaPath": "#/properties/properties/properties/html/type",
+  },
+]
+`;
+
+exports[`Test Schema properties.html is number 0 1`] = `false`;
+
+exports[`Test Schema properties.html is number 0 2`] = `
+Array [
+  Object {
+    "dataPath": "/properties/html",
+    "keyword": "type",
+    "message": "should be string",
+    "params": Object {
+      "type": "string",
+    },
+    "schemaPath": "#/properties/properties/properties/html/type",
+  },
+]
+`;
+
 exports[`Test Schema properties.html-bad-code 1`] = `true`;
 
 exports[`Test Schema properties.html-bad-code 2`] = `null`;

packages/cli/README.md

@@ -0,0 +1,138 @@
+# Lowdefy CLI
+
+The Lowdefy CLI is used to develop a Lowdefy app locally, and to build Lowdefy apps for deployment.
+
+We recommend running the CLI using `npx`, to always use the latest version:
+
+```
+npx lowdefy@latest <command>
+```
+
+or, to use a specific version:
+
+```
+npx lowdefy@version <command>
+```
+
+Alternative, you can install the CLI globally or to a npm project (with a `package.json` file) via npm or yarn.
+
+To install the CLI globally run:
+
+```
+npm install lowdefy -g
+```
+
+The CLI can then be run using `lowdefy` as the executable name:
+
+```
+lowdefy <command>
+```
+
+# CLI commands
+
+## build
+
+The `build` command runs a Lowdefy build. The options are:
+
+- `--base-directory <base-directory>`: Change base directory. The default is the current working directory.
+- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served.
+- `--disable-telemetry`: Disable telemetry.
+- `--output-directory <output-directory>`: Change the directory to which build artifacts are saved. The default is `<base-directory>/.lowdefy/build`.
+- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
+
+## build-netlify
+
+The `build-netlify` command creates a production build for the [Netlify](https://www.netlify.com) web hosting service. It is designed to run as the Netlify build command.
+
+We recommend setting the build command to `npx lowdefy@latest build-netlify`. The Netlify publish directory should be set to `.lowdefy/publish`, and the functions directory set to `.lowdefy/functions`.
+
+- `--base-directory <base-directory>`: Change base directory. The default is the current working directory (The base directory should rather be configured in the Netlify build settings).
+- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served.
+- `--disable-telemetry`: Disable telemetry.
+- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
+
+## clean-cache
+
+The Lowdefy CLI caches block metadata, and build and server scripts in the `.lowdefy/cache` directory. These cached files can be removed using the `clean-cache` command.
+
+- `--base-directory <base-directory>`: Change base directory. The default is the current working directory.
+- `--disable-telemetry`: Disable telemetry.
+
+## dev
+
+The `dev` command starts a Lowdefy development server, running locally. It can be accessed in a browser at [http://localhost:3000](http://localhost:3000). The CLI watches the file system, and rebuilds the app and reloads served pages every time a change is made to any of the files in the project directory.
+
+- `--base-directory <base-directory>`: Change base directory. The default is the current working directory.
+- `--blocks-server-url <blocks-server-url>`: The URL from where Lowdefy blocks will be served.
+- `--disable-telemetry`: Disable telemetry.
+- `--port <port>`: Change the port the server is hosted at. The default is `3000`.
+- `--ref-resolver <ref-resolver-function-path>`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
+- `--watch <paths...>`: A list of paths to files or directories that should be watched for changes.
+- `--watch-ignore <patterns...>`: A list of paths to files or directories that should be ignored by the file watcher. Globs are supported.
+
+#### Examples
+
+Run the dev server, watching a relative directory for file changes:
+
+```txt
+npx lowdefy@latest dev --watch ../other-project
+```
+
+Run the dev server, ignoring the public directory:
+
+```txt
+npx lowdefy@latest dev --watch-ignore public/**
+```
+
+# Configuration
+
+All the CLI options can either be set as command line options, or the `cli` config object in your `lowdefy.yaml` file. Options set as command line options take precedence over options set in the `lowdefy.yaml` file. The config in the `lowdefy.yaml` cannot be referenced using the `_ref` operator, but need to be set in the file itself.
+
+Options set in the `lowdefy.yaml` should be defined in camelCase. The options that can be set are:
+
+- `blocksServerUrl: string`: The URL from where Lowdefy blocks will be served.
+- `disableTelemetry: boolean`: Disable telemetry.
+- `outputDirectory: string`: Change the directory to which build artifacts are saved. The default is `<base-directory>/.lowdefy/build`.
+- `refResolver: string`: Path to a JavaScript file containing a `_ref` resolver function to be used as the app default `_ref` resolver.
+- `port: number`: Change the port the server is hosted at. The default is `3000`.
+- `watch: string[]`: A list of paths to files or directories that should be watched for changes.
+- `watchIgnore: string[]`: A list of paths to files or directories that should be ignored by the file watcher. Globs are supported.
+
+The `--base-directory` option cannot be set from the `lowdefy.yaml` file.
+
+# Telemetry
+
+The CLI collects usage and error information to help us fix bugs, prioritize features, and understand how Lowdefy is being used.
+
+All telemetry can be disabled by setting the `disableTelemetry` flag in `cli` config object in your `lowdefy.yaml` file (this cannot be a reference to another file), or by using the `--disable-telemetry` command line flag.:
+
+###### `lowdefy.yaml`
+
+```yaml
+lowdefy: LOWDEFY_VERSION
+
+cli:
+  disableTelemetry: true
+```
+
+We collect the following information:
+
+- The CLI version.
+- The Lowdefy version of your app.
+- A random local app id (stored locally in your project folder at `.lowdefy/cli.json`).
+- The CLI command used.
+- If the CLI is being used in the Netlify CI environment (when using the `build-netlify` command).
+- Your IP address.
+- Error messages and stack traces for any errors.
+
+## More Lowdefy resources
+
+- Getting started with Lowdefy - https://docs.lowdefy.com/tutorial-start
+- Lowdefy docs - https://docs.lowdefy.com
+- Lowdefy website - https://lowdefy.com
+- Community forum - https://github.com/lowdefy/lowdefy/discussions
+- Bug reports and feature requests - https://github.com/lowdefy/lowdefy/issues
+
+## Licence
+
+[Apache-2.0](https://github.com/lowdefy/lowdefy/blob/main/LICENSE)

packages/docs/concepts/cli.yaml

@@ -38,7 +38,15 @@ _ref:
             npx lowdefy@version <command>
             ```
 
-            Alternative, you can install the CLI globally or to a npm project (with a `package.json` file) via npm. The CLI can then be used using `lowdefy` as the executable name:
+            Alternative, you can install the CLI globally or to a npm project (with a `package.json` file) via npm or yarn.
+
+            To install the CLI globally run:
+
+            ```
+            npm install lowdefy -g
+            ```
+
+            The CLI can then be run using `lowdefy` as the executable name:
 
             ```
             lowdefy <command>
@@ -90,12 +98,12 @@ _ref:
 
             Run the dev server, watching a relative directory for file changes:
             ```txt
-            lowdefy dev --watch ../other-project
+            npx lowdefy@latest dev --watch ../other-project
             ```
 
             Run the dev server, ignoring the public directory:
             ```txt
-            lowdefy dev --watch-ignore public/**
+            npx lowdefy@latest dev --watch-ignore public/**
             ```
 
             # Configuration

packages/docs/deployment/aws-lambda.yaml

@@ -55,7 +55,7 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@latest build
+            RUN npx lowdefy@3.21.2 build
 
             # Use the correct Lowdefy base image
             FROM lowdefy/lowdefy-aws-lambda:3.21.2

packages/docs/deployment/docker.yaml

@@ -65,7 +65,7 @@ _ref:
             COPY  --chown=node:node  . .
 
             # Build the Lowdefy config using the Lowdefy CLI
-            RUN npx lowdefy@latest build
+            RUN npx lowdefy@3.21.2 build
 
             # Use the correct Lowdefy base image
             FROM lowdefy/lowdefy:3.21.2

packages/docs/deployment/netlify.yaml

@@ -46,7 +46,7 @@ _ref:
 
             Configure your Netlify deployment.
 
-            - Set your build command to `npx lowdefy@latest build-netlify`.
+            - Set your build command to `npx lowdefy@3 build-netlify`.
             - Set your publish directory to `.lowdefy/publish`.
 
             #### Step 4

packages/servers/serverDocker/README.md

@@ -32,10 +32,10 @@ USER node
 COPY  --chown=node:node  . .
 
 # Build the Lowdefy config using the Lowdefy CLI
-RUN npx lowdefy@latest build
+RUN npx lowdefy@3.21.2 build
 
 # Use the correct Lowdefy base image
-FROM lowdefy/lowdefy:3.19.0
+FROM lowdefy/lowdefy:3.21.2
 
 # Copy build output from build stage
 COPY --from=build --chown=node:node /home/node/lowdefy/.lowdefy/build ./build

packages/servers/serverNetlify/README.md

@@ -22,7 +22,7 @@ Link your Github project to Netlify.
 
 Configure your Netlify deployment.
 
-- Set your build command to `npx lowdefy@latest build-netlify`.
+- Set your build command to `npx lowdefy@3 build-netlify`.
 - Set your publish directory to `.lowdefy/publish`.
 - Review the other settings, and deploy your site.