MAGETWO-89168: Develop UI component

Author: irenelagno

app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_form.xml

@@ -83,7 +83,7 @@
                 </checkbox>
             </formElements>
         </field>
-        <field name="title" sortOrder="20" formElement="input">
+        <urlInput name="title" sortOrder="20">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="source" xsi:type="string">page</item>
@@ -93,11 +93,24 @@
                 <validation>
                     <rule name="required-entry" xsi:type="boolean">true</rule>
                 </validation>
+                <isDisplayAdditionalSettings>true</isDisplayAdditionalSettings>
+                <settingLabel translate="true">Label bla bla</settingLabel>
                 <dataType>text</dataType>
                 <label translate="true">Page Title</label>
                 <dataScope>title</dataScope>
+                <urlTypes class="Magento\Ui\Model\UrlInput\LinksProvider"/>
             </settings>
-        </field>
+            <!--<formElements>-->
+                <!--<select>-->
+                    <!--<settings>-->
+                        <!--<options>-->
+                            <!--<option name="url" xsi:type="string">Url</option>-->
+                        <!--</options>-->
+                        <!--<caption translate="true">&#45;&#45; Please Select &#45;&#45;</caption>-->
+                    <!--</settings>-->
+                <!--</select>-->
+            <!--</formElements>-->
+        </urlInput>
     </fieldset>
     <fieldset name="content" sortOrder="10">
         <settings>

app/code/Magento/Ui/view/base/web/templates/form/element/url-input.html

@@ -5,25 +5,28 @@
  */
 -->
 <!--render select with link types-->
-<div class="admin__field"
+<div class="admin__field url-input-container"
      visible="visible"
      attr="'data-index': index">
     <label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
         <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
     </label>
     <div class="admin__field-control url-input-element"
          css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
-        <!--render link types select-->
-        <render args="typeSelectorTemplate"/>
 
-        <!--display field to insert link value based on link type-->
-        <div ko-scope="getLinkedElementName()" class="url-input-element-linked-element">
-            <render/>
-            <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
+        <div>
+            <!--render link types select-->
+            <render args="typeSelectorTemplate"/>
+
+            <!--display field to insert link value based on link type-->
+            <div ko-scope="getLinkedElementName()" class="url-input-element-linked-element">
+                <render/>
+                <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
+            </div>
         </div>
 
         <!--display container to specify url options(Example: open in new tab)-->
         <render if="isDisplayAdditionalSettings" args="settingTemplate"/>
-
+        <div/>
     </div>
 </div>

app/design/adminhtml/Magento/backend/web/css/source/components/_url_input.less

@@ -6,17 +6,28 @@
 //
 //  Components -> Url Input
 //  _____________________________________________
+.url-input-container .url-input-element {
+    & > div:after {
+        clear: both;
+    }
 
-.url-input-element {
     .url-input-select {
-        display: inline-block;
+        float: left;
+        margin-right: 20px;
     }
 
-    .url-input-element-linked-element {
-        display: inline-block;
-        + label {
-            display: inline-block;
+    .url-input-setting {
+        clear: both;
+        display: block;
+        &:before {
+            content: "";
+            clear: both;
         }
     }
+
+    .url-input-element-linked-element {
+        float: left;
+    }
 }
 
+