PB-379: Full height Slider

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml

@@ -25,7 +25,7 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
                         <attribute name="name" source="data-content-type"/>
                         <attribute name="slide_name" source="data-slide-name"/>
@@ -55,7 +55,7 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                         <style name="text_align" source="text_align"/>
                         <attribute name="background_images" source="data-background-images"/>
@@ -119,7 +119,7 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <style name="text_align" source="text_align"/>
                         <attribute name="background_images" source="data-background-images"/>
@@ -183,7 +183,7 @@
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                         <style name="text_align" source="text_align"/>
                         <attribute name="background_images" source="data-background-images"/>
@@ -235,7 +235,7 @@
                     </element>
                     <element name="empty_link"/>
                     <element name="overlay">
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
                         <attribute name="overlay_color_attribute" storage_key="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color"/>
@@ -251,7 +251,7 @@
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="text_align" source="text_align"/>
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <attribute name="background_images" source="data-background-images"/>
                     </element>
                     <element name="content">

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slider.xml

@@ -28,7 +28,7 @@
                 <elements>
                     <element name="main">
                         <style name="text_align" source="text_align"/>
-                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
                         <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
                         <style name="border_color" source="border_color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml

@@ -79,19 +79,17 @@
         <field name="min_height" sortOrder="30" formElement="input">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">300</item>
+                    <item name="default" xsi:type="string">300px</item>
                 </item>
             </argument>
             <settings>
                 <label translate="true">Minimum Height</label>
+                <notice translate="true">Minimum height can be a single number with any valid CSS unit (50px, 50%, 50em, 50vh) or a calculation (50% + 50px).</notice>
                 <additionalClasses>
-                    <class name="admin__field-small">true</class>
+                    <class name="admin__field-medium">true</class>
                 </additionalClasses>
-                <addAfter translate="true">px</addAfter>
-                <dataType>text</dataType>
-                <dataScope>min_height</dataScope>
                 <validation>
-                    <rule name="validate-number" xsi:type="boolean">true</rule>
+                    <rule name="validate-calc" xsi:type="boolean">true</rule>
                 </validation>
             </settings>
         </field>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slider_form.xml

@@ -71,17 +71,17 @@
         <field name="min_height" sortOrder="20" formElement="input">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="default" xsi:type="number">300</item>
+                    <item name="default" xsi:type="string">300px</item>
                 </item>
             </argument>
             <settings>
                 <label translate="true">Minimum Height</label>
+                <notice translate="true">Minimum height can be a single number with any valid CSS unit (50px, 50%, 50em, 50vh) or a calculation (50% + 50px).</notice>
                 <additionalClasses>
-                    <class name="admin__field-small">true</class>
+                    <class name="admin__field-medium">true</class>
                 </additionalClasses>
-                <addAfter translate="true">px</addAfter>
                 <validation>
-                    <rule name="validate-number" xsi:type="boolean">true</rule>
+                    <rule name="validate-calc" xsi:type="boolean">true</rule>
                 </validation>
             </settings>
         </field>