@openui5/sap.ui.rta 1.111.1 → 1.112.0

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialog.fragment.xml

@@ -21,52 +21,77 @@
 					id="sapUiRtaAddIFrameDialog_VL"
 					width="100%"
 					class="sapUiRtaAddIFrameDialogVlWrapper">
-				<Label id="sapUiRtaAddIFrameDialog_SizeTitle" text="{/text/sizeTitle}" class="sapUiRtaAddIFrameDialogSizeTitle" design="Bold"/>
-				<layout:Grid
-						id="sapUiRtaAddIFrameDialog_SizeGrid"
-						containerQuery="true" position="Center"
-						class="sapUiRtaAddIFrameDialogSizeGrid"
-						defaultSpan="XL6 L6 M6 S12">
-					<form:SimpleForm
-							id="sapUiRtaAddIFrameDialog_WidthForm" editable="true" layout="ResponsiveGridLayout" class="sapUiRtaAddIFrameDialogWidthForm"
-							adjustLabelSpan="false" singleContainerFullSize="false" ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthLabel"
-							labelSpanXL="2" labelSpanL="2" labelSpanM="2" labelSpanS="4"
-							emptySpanXL="2" emptySpanL="2" emptySpanM="2" emptySpanS="0"
-					>
-						<form:content>
-							<Label id="sapUiRtaAddIFrameDialog_WidthLabel" class="sapUiRtaAddIFrameDialogWidthLabel" labelFor="sapUiRtaAddIFrameDialog_WidthInput"
-								   text="{/text/widthLabel}">
-							</Label>
-							<Input id="sapUiRtaAddIFrameDialog_WidthInput" class="sapUiRtaAddIFrameDialogWidthInput"
-								   value="{path: '/frameWidth/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
-								   valueState="{/frameWidth/valueState}"/>
-							<Select id="sapUiRtaAddIFrameDialog_WidthUnit" class="sapUiRtaAddIFrameDialogWidthUnit"
-									ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthUnitLabel" change="onSizeUnitChange"
-									selectedKey="{/frameWidthUnit/value}" items="{/unitsOfMeasure}">
-								<core:Item key="{name}" text="{name}" />
-							</Select>
-						</form:content>
-					</form:SimpleForm>
-					<form:SimpleForm
-							id="sapUiRtaAddIFrameDialog_HeightForm" editable="true" layout="ResponsiveGridLayout" class="sapUiRtaAddIFrameDialogHeightForm"
-							adjustLabelSpan="false" singleContainerFullSize="false" ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightLabel"
-							labelSpanXL="2" labelSpanL="2" labelSpanM="2" labelSpanS="4"
-							emptySpanXL="2" emptySpanL="2" emptySpanM="2" emptySpanS="0"
-					>
-						<form:content>
-							<Label id="sapUiRtaAddIFrameDialog_HeightLabel" class="sapUiRtaAddIFrameDialogHeightLabel" labelFor="sapUiRtaAddIFrameDialog_HeightInput"
-								   text="{/text/heightLabel}"/>
-							<Input id="sapUiRtaAddIFrameDialog_HeightInput" class="sapUiRtaAddIFrameDialogHeightInput"
-								   value="{path: '/frameHeight/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
-								   valueState="{/frameHeight/valueState}"/>
-							<Select id="sapUiRtaAddIFrameDialog_HeightUnit" class="sapUiRtaAddIFrameDialogHeightUnit"
-									ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightUnitLabel" change="onSizeUnitChange"
-									selectedKey="{/frameHeightUnit/value}" items="{/unitsOfMeasure}">
-								<core:Item key="{name}" text="{name}" />
-							</Select>
-						</form:content>
-					</form:SimpleForm>
-				</layout:Grid>
+				<VBox visible="{/asContainer/value}" class="sapUiRtaAddIFrameDialogContainerTitleVBox" renderType="Bare">
+					<items>
+						<Label
+							id="sapUiRtaAddIFrameDialog_ContainerTitleLabel"
+							text="{/text/containerTitleLabel}"
+							class="sapUiRtaAddIFrameDialogContainerTitleLabel"
+							design="Bold"
+						/>
+						<Input
+							id="sapUiRtaAddIFrameDialog_ContainerTitle_TitleInput"
+							class="sapUiRtaAddIFrameDialogContainerTitleInput"
+							value="{
+								path : '/title/value',
+								type : 'sap.ui.model.type.String'
+							}"
+							liveChange=".onContainerTitleChange"
+							valueLiveUpdate="true"
+							valueState="{/title/valueState}"
+						/>
+					</items>
+				</VBox>
+				<VBox>
+					<items>
+						<Label id="sapUiRtaAddIFrameDialog_SizeTitle" text="{/text/sizeTitle}" class="sapUiRtaAddIFrameDialogSizeTitle" design="Bold"/>
+						<layout:Grid
+								id="sapUiRtaAddIFrameDialog_SizeGrid"
+								containerQuery="true" position="Center"
+								class="sapUiRtaAddIFrameDialogSizeGrid"
+								defaultSpan="XL6 L6 M6 S12">
+							<form:SimpleForm
+									id="sapUiRtaAddIFrameDialog_WidthForm" editable="true" layout="ResponsiveGridLayout" class="sapUiRtaAddIFrameDialogWidthForm"
+									adjustLabelSpan="false" singleContainerFullSize="false" ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthLabel"
+									labelSpanXL="2" labelSpanL="2" labelSpanM="2" labelSpanS="4"
+									emptySpanXL="2" emptySpanL="2" emptySpanM="2" emptySpanS="0"
+							>
+								<form:content>
+									<Label id="sapUiRtaAddIFrameDialog_WidthLabel" class="sapUiRtaAddIFrameDialogWidthLabel" labelFor="sapUiRtaAddIFrameDialog_WidthInput"
+										text="{/text/widthLabel}">
+									</Label>
+									<Input id="sapUiRtaAddIFrameDialog_WidthInput" class="sapUiRtaAddIFrameDialogWidthInput"
+										value="{path: '/frameWidth/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
+										valueState="{/frameWidth/valueState}"/>
+									<Select id="sapUiRtaAddIFrameDialog_WidthUnit" class="sapUiRtaAddIFrameDialogWidthUnit"
+											ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthUnitLabel" change="onSizeUnitChange"
+											selectedKey="{/frameWidthUnit/value}" items="{/unitsOfMeasure}">
+										<core:Item key="{name}" text="{name}" />
+									</Select>
+								</form:content>
+							</form:SimpleForm>
+							<form:SimpleForm
+									id="sapUiRtaAddIFrameDialog_HeightForm" editable="true" layout="ResponsiveGridLayout" class="sapUiRtaAddIFrameDialogHeightForm"
+									adjustLabelSpan="false" singleContainerFullSize="false" ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightLabel"
+									labelSpanXL="2" labelSpanL="2" labelSpanM="2" labelSpanS="4"
+									emptySpanXL="2" emptySpanL="2" emptySpanM="2" emptySpanS="0"
+							>
+								<form:content>
+									<Label id="sapUiRtaAddIFrameDialog_HeightLabel" class="sapUiRtaAddIFrameDialogHeightLabel" labelFor="sapUiRtaAddIFrameDialog_HeightInput"
+										text="{/text/heightLabel}"/>
+									<Input id="sapUiRtaAddIFrameDialog_HeightInput" class="sapUiRtaAddIFrameDialogHeightInput"
+										value="{path: '/frameHeight/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
+										valueState="{/frameHeight/valueState}"/>
+									<Select id="sapUiRtaAddIFrameDialog_HeightUnit" class="sapUiRtaAddIFrameDialogHeightUnit"
+											ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightUnitLabel" change="onSizeUnitChange"
+											selectedKey="{/frameHeightUnit/value}" items="{/unitsOfMeasure}">
+										<core:Item key="{name}" text="{name}" />
+									</Select>
+								</form:content>
+							</form:SimpleForm>
+						</layout:Grid>
+					</items>
+				</VBox>
 				<layout:Grid
 						id="sapUiRtaAddIFrameDialog_PercentGrid"
 						class="sapUiRtaAddIFrameDialogPercentGrid"
@@ -85,9 +110,9 @@
 							<Label id="sapUiRtaAddIFrameDialog_ParametersLabel" text="{/text/parametersLabel}" labelFor="sapUiRtaAddIFrameDialog_ParameterTable"
 								   class="sapUiRtaAddIFrameDialogParametersLabel" design="Bold"/>
 							<SearchField
-								id="sapUiRtaAddIFrameDialog_ParametersSearch" 
+								id="sapUiRtaAddIFrameDialog_ParametersSearch"
 								ariaLabelledBy="sapUiRtaAddIFrameDialog_ParameterSearchLabel"
-								class="sapUiRtaAddIFrameDialogParametersSearch" 
+								class="sapUiRtaAddIFrameDialogParametersSearch"
 								liveChange="onLiveChange"
 								showSearchButton="false"
 							/>

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialog.js

@@ -51,10 +51,12 @@ sap.ui.define([
 		editUrlLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_EDIT_URL_LABEL"),
 		parametersLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_PARAMETERS_LABEL"),
 		columnParameterLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_TABLE_PARAMETER_LABEL"),
-		columnUiValueLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_TABLE_UI_VALUE_LABEL")
+		columnUiValueLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_TABLE_UI_VALUE_LABEL"),
+		containerTitleLabel: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_CONTAINER_TITLE_LABEL"),
+		containerTitleDefaultValue: _oTextResources.getText("IFRAME_ADDIFRAME_DIALOG_CONTAINER_TITLE_DEFAULT_VALUE_TEXT")
 	};
 
-	function createJSONModel(bSetUpdateTitle) {
+	function createJSONModel(bSetUpdateTitle, bAsContainer) {
 		if (bSetUpdateTitle) {
 			_mText.dialogTitle = _mText.dialogUpdateTitle;
 		} else {
@@ -62,15 +64,13 @@ sap.ui.define([
 		}
 		return new JSONModel({
 			text: _mText,
-			section: {
-				visible: false
+			asContainer: {
+				value: bAsContainer
 			},
-			asNewSection: {
-				value: false
-			},
-			sectionName: {
-				value: "",
-				valueState: ValueState.None
+			title: {
+				value: _mText.containerTitleDefaultValue,
+				valueState: ValueState.None,
+				id: "sapUiRtaAddIFrameDialog_ContainerTitle_TitleInput"
 			},
 			frameWidth: {
 				value: 100,
@@ -113,7 +113,7 @@ sap.ui.define([
 	 * @class Context - Dialog for IFrame settings in Runtime Authoring
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @constructor
 	 * @private
 	 * @since 1.78
@@ -150,11 +150,13 @@ sap.ui.define([
 	 */
 	AddIFrameDialog.prototype._createDialog = function(mSettings) {
 		// set the correct title
-		var bSetUpdateTitle = false;
+		var bSetUpdateTitle;
+		var bAsContainer;
 		if (mSettings) {
-			bSetUpdateTitle = mSettings.updateMode ? mSettings.updateMode : false;
+			bSetUpdateTitle = !!mSettings.updateMode;
+			bAsContainer = !!mSettings.asContainer;
 		}
-		this._oJSONModel = createJSONModel(bSetUpdateTitle);
+		this._oJSONModel = createJSONModel(bSetUpdateTitle, bAsContainer);
 		this._oController = new AddIFrameDialogController(this._oJSONModel, mSettings);
 		Fragment.load({
 			name: "sap.ui.rta.plugin.iframe.AddIFrameDialog",

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialogController.js

@@ -7,6 +7,7 @@ sap.ui.define([
 	"sap/base/Log",
 	"sap/ui/core/mvc/Controller",
 	"sap/ui/core/library",
+	"sap/ui/rta/util/validateText",
 	"sap/ui/rta/Utils",
 	"sap/ui/fl/util/IFrame",
 	"sap/ui/model/Filter",
@@ -16,6 +17,7 @@ sap.ui.define([
 	Log,
 	Controller,
 	coreLibrary,
+	validateText,
 	Utils,
 	IFrame,
 	Filter,
@@ -27,10 +29,9 @@ sap.ui.define([
 	// shortcut for sap.ui.core.ValueState
 	var ValueState = coreLibrary.ValueState;
 
-	var _aTextInputFields = ["frameUrl"];
+	var _aTextInputFields = ["frameUrl", "title"];
 	var _aNumericInputFields = ["frameWidth", "frameHeight"];
-	var _aSelectInputFields = ["asNewSection", "frameWidthUnit", "frameHeightUnit"];
-
+	var _aSelectInputFields = ["frameWidthUnit", "frameHeightUnit"];
 
 	function isValidUrl(sUrl) {
 		return IFrame.isValidUrl(encodeURI(sUrl));
@@ -203,6 +204,31 @@ sap.ui.define([
 			this._close();
 		},
 
+		onContainerTitleChange: function(oEvent) {
+			var oInput = oEvent.getSource();
+			var sValueState = "None";
+			var bValidationError = false;
+			var sValue = oInput.getValue();
+
+			if (sValue.trim() === "") {
+				sValueState = "Error";
+				oInput.setValueState(sValueState);
+				bValidationError = true;
+				return bValidationError;
+			}
+
+			try {
+				validateText(sValue);
+			} catch (oException) {
+				sValueState = "Error";
+				bValidationError = true;
+			}
+
+			oInput.setValueState(sValueState);
+
+			return bValidationError;
+		},
+
 		/**
 		 * Close AddIFrame Dialog
 		 *
@@ -234,7 +260,12 @@ sap.ui.define([
 
 		_areAllTextFieldsValid: function() {
 			var oJSONModel = this._oJSONModel;
+			var bAsContainer = this._oJSONModel.getProperty("asContainer/value");
 			return _aTextInputFields.reduce(function(bAllValid, sFieldName) {
+				// The title field is only available on add as Section
+				if (sFieldName === "title" && !bAsContainer) {
+					return true;
+				}
 				var sValuePath = "/" + sFieldName + "/value";
 				var sValueState;
 				if (oJSONModel.getProperty(sValuePath).trim() === "") {

package/src/sap/ui/rta/service/Action.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	 *

package/src/sap/ui/rta/service/ControllerExtension.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Outline.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.56
 	 * @since 1.56
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/service/Property.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Selection.js

@@ -15,7 +15,7 @@ sap.ui.define(function () {
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/SupportTools.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.106
 	 * @since 1.106
-	 * @version 1.111.1
+	 * @version 1.112.0
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/themes/base/AddIFrame.less

@@ -23,6 +23,15 @@
 		}
 
 		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogContainerTitleVBox {
+				margin-top: 1rem;
+				padding: 0 1rem 0 1rem;
+			}
+
+			.sapUiRtaAddIFrameDialogContainerTitleInput {
+				margin-top: 0.5rem;
+			}
+
 			.sapUiRtaAddIFrameDialogSizeTitle {
 				margin-top: 1rem;
 				padding-left: 1rem;

package/src/sap/ui/rta/themes/base/Toolbar.adaptation.less

@@ -269,33 +269,31 @@
 	}
 }
 
-// the default hbox width which is set via the element properties must be overruled
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarIconAndDraftSection,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarActionsSection,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarIconAndDraftSection,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarActionsSection {
-	width: ~"calc(50% - 12.5rem) !important"; //200px
-}
-
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaVersionButton,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaVersionButton {
-	max-width: ~"calc(90% - 10rem)"; //160px
+.sapUiRtaIconAndDraftToolbar {
+	// fit-content is required for the intersection observer
+	width: fit-content;
+	justify-content: flex-start;
 }
 
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaVersionButton {
-	max-width: ~"calc(100% - 6.25rem)"; //100px
+.sapUiRtaActionsToolbar {
+	// fit-content is required for the intersection observer
+	width: fit-content;
+	justify-content: flex-end;
 }
 
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarSwitcherSection,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarSwitcherSection {
-	width: 25rem !important; //400px
+// the default hbox width which is set via the element properties must be overruled
+.sapUiRtaToolbarIconAndDraftSection,
+.sapUiRtaToolbarActionsSection {
+	// display grid is required so the toolbar is positioned on the end into the section hbox
+	display: grid;
+	width: ~"calc(50% - 12.5rem) !important"; //200px
 }
 
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarIconAndDraftSection,
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarActionsSection {
-	width: ~"calc(50% - 4.375rem) !important"; //70px
+.sapUiRtaVersionButton {
+	max-width: 12.5rem; //200px
+	min-width: 3rem; //48px
 }
 
-.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarSwitcherSection {
-	width: 8.75rem !important; //140px
+.sapUiRtaToolbarSwitcherSection {
+	width: auto;
 }

package/src/sap/ui/rta/themes/base/Toolbar.base.less

@@ -31,7 +31,7 @@
 		top: 0;
 		left: 0;
 		right: 0;
-		padding: 0 1.25rem; //20px
+		padding-left: 1.25rem; //20px
 		height: 2.75rem; /* Overrider `.sapUiSizeCompact .sapMTB` */ //44px
 		background-color: @_sap_ui_rta_Toolbar_Base_BaseBG;
 	}

package/src/sap/ui/rta/toolbar/Adaptation.fragment.xml

@@ -5,7 +5,9 @@
 	<HBox
 			id="sapUiRta_toolbarIconAndDraftSection"
 			class="sapUiRtaToolbarIconAndDraftSection" >
-		<OverflowToolbar class="sapUiRta_iconAndDraftBar">
+		<OverflowToolbar
+			id="sapUiRta_iconAndDraftToolbar"
+			class="sapUiRtaIconAndDraftToolbar">
 			<content>
 				<HBox id="sapUiRta_iconBox" />
 				<ToolbarSpacer
@@ -55,11 +57,10 @@
 		</OverflowToolbar>
 	</HBox>
 	<HBox
-			id="sapUiRta_switcherSection"
+			id="sapUiRta_toolbarSwitcherSection"
 			class="sapUiRtaToolbarSwitcherSection" >
-		<OverflowToolbar>
+		<Toolbar>
 			<content>
-				<ToolbarSpacer />
 				<SegmentedButton
 						id="sapUiRta_modeSwitcher"
 						selectionChange=".modeChange"
@@ -84,15 +85,16 @@
 								key="visualization" />
 					</items>
 				</SegmentedButton>
-				<ToolbarSpacer />
 			</content>
-		</OverflowToolbar>
+		</Toolbar>
 	</HBox>
 	<HBox
 			id="sapUiRta_toolbarActionsSection"
 			class="sapUiRtaToolbarActionsSection"
 			justifyContent="End" >
-		<OverflowToolbar id="sapUiRta_actionsToolbar">
+		<OverflowToolbar
+				id="sapUiRta_actionsToolbar"
+				class="sapUiRtaActionsToolbar">
 			<content>
 				<ToolbarSpacer />
 				<Button
@@ -161,23 +163,29 @@
 						<OverflowToolbarLayoutData priority="Low" />
 					</toolbar:layoutData>
 				</toolbar:OverflowToolbarButton>
+				<toolbar:OverflowToolbarButton
+						id="sapUiRta_save"
+						type="Transparent"
+						press=".save"
+						enabled="{controls>/save/enabled}"
+						tooltip="{= ${versions>/versioningEnabled} ? ${i18n>BTN_SAVE_DRAFT} : ${i18n>BTN_SAVE} }"
+						icon="sap-icon://save" >
+					<toolbar:layoutData>
+						<OverflowToolbarLayoutData priority="High" />
+					</toolbar:layoutData>
+				</toolbar:OverflowToolbarButton>
+				<toolbar:OverflowToolbarButton
+						id="sapUiRta_exit"
+						type="Transparent"
+						press=".exit"
+						tooltip="{i18n>BTN_EXIT}"
+						icon="sap-icon://decline" >
+					<toolbar:layoutData>
+						<OverflowToolbarLayoutData priority="High" />
+					</toolbar:layoutData>
+				</toolbar:OverflowToolbarButton>
 			</content>
 		</OverflowToolbar>
-		<Button
-				id="sapUiRta_save"
-				type="Transparent"
-				press=".save"
-				enabled="{controls>/save/enabled}"
-				tooltip="{i18n>BTN_SAVE}"
-				icon="sap-icon://save" >
-		</Button>
-		<Button
-				id="sapUiRta_exit"
-				type="Transparent"
-				press=".exit"
-				tooltip="{i18n>BTN_EXIT}"
-				icon="sap-icon://decline" >
-		</Button>
 		<layoutData>
 			<FlexItemData growFactor="0" />
 		</layoutData>