@openui5/sap.ui.documentation 1.118.0 → 1.119.1

package/src/sap/ui/documentation/themes/base/Documentation.less

@@ -832,4 +832,365 @@ html.sapUiMedia-Std-Tablet {
 
 .fig .fig-codeblock {
     position: relative;
+}
+
+/*!********************************************* DemoKit Header Redesign *********************************************!*/
+.sapUiDemokit {
+	// Adjust borders and spacing in the overall layout
+	&.sapTntToolPage {
+		padding: 0;
+	}
+
+	.sapTntToolPageMain,
+	.sapTntToolHeader.sapMTB,
+	.sapTntSideNavigation,
+	.sapTntToolPageHeaderWrapper.sapTntToolPageHeaderWithSubHeaderWrapper {
+		border-radius: 0;
+	}
+
+	.sapTntToolHeader.sapMTB {
+		border: none;
+	}
+
+	.sapTntToolPageMain,
+	.sapTntToolPageAside {
+		margin: 0;
+	}
+
+	.sapUiDemokitMainHeader {
+		&.sapTntToolHeader.sapMTB {
+			padding: 0 0.75rem;
+		}
+
+		.sapUiDemokitMainHeaderGrid {
+			align-items: center;
+		}
+
+		.sapUiDemoKitHeaderOTB {
+			justify-content: end;
+		}
+
+		&.sapTntToolHeader .sapMBarChild.sapMMenuBtn .sapMBtn:focus .sapMBtnDefault.sapMFocusable::before {
+			outline: @sapContent_FocusStyle @sapContent_FocusWidth @sapContent_FocusColor;
+			border: none !important;
+		}
+
+		// Apply more polished box-shadow effect
+		.sapUiDocumentationSearch {
+			.sapMSF .sapMSFF:hover,
+			.sapMSFVal.sapMFocus .sapMSFF {
+				box-shadow:
+					0 0 0.1875rem 0 rgba(85, 107, 130, 0.1),
+					0 0.1875rem 0.3125rem 0 rgba(85, 107, 130, 0.3);
+			}
+		}
+
+		// Apply some spacing between the logo and the search field
+		.sapUiDemokitMainHeaderLogo {
+			display: block;
+			margin-left: 1rem;
+
+			@media screen and (max-width: 37.4375em) { // 599px
+				margin-right: 1rem;
+			}
+		}
+
+		// Align the styles of the MenuButton with the styles of other buttons
+		.sapMIBar .sapMMenuBtn {
+			.sapMBtn:not(.sapMSBArrow) .sapMBtnInner {
+				align-items: center;
+				top: -0.1875rem;
+				height: 2rem;
+				padding-right: 0.125rem;
+
+				&:after {
+					content: none;
+				}
+			}
+
+			.sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive) {
+				box-shadow: none;
+			}
+
+			.sapMBtn .sapMBtnInner.sapMBtnDefault .sapUiIcon {
+				color: @sapContent_IconColor;
+			}
+
+			&.sapMMenuBtnRegular .sapMBtnInner::after {
+				color: @sapContent_IconColor;
+				height: 2rem;
+				line-height: 2rem;
+			}
+
+			// Button states
+			&:focus .sapMBtnDefault.sapMFocusable {
+				&::before {
+					outline: @sapContent_FocusStyle @sapContent_FocusWidth @sapContent_FocusColor;
+					border: none !important;
+				}
+			}
+
+			&:hover:not(.sapMBtnDisabled) .sapMBtnDefault {
+				background: @sapButton_Lite_Hover_Background;
+			}
+
+			&:active:not(.sapMBtnDisabled) .sapMBtnDefault {
+				background: @sapActiveColor;
+			}
+		}
+
+		// Adjust the style of the version switch button to match the design specifiaction
+		.sapUiDemoKitHeaderActionsVersionSwitch .sapMBtnInner {
+			display: flex;
+			align-items: center;
+
+			&:after {
+				content: "\e287";
+				font-family: "SAP-icons";
+				margin-left: 0.5rem;
+				margin-right: 0.25rem;
+			}
+		}
+	}
+
+	.sapUiDemokitSubHeader {
+		.sapMITBTextOnly .sapMITBHead .sapMITBItem:not(.sapUiDnDDragging):is([id*="toolsTab"]) {
+			.sapMITBFilterExpandBtnSeparator {
+				display: none;
+			}
+
+			&:focus .sapMITBText::after {
+				right: -2.25rem;
+			}
+
+			[id*="toolsTab-expandButton"] {
+				.sapMBtnInner {
+					width: 1.25rem;
+					height: 1.25rem;
+					left: 0.5rem;
+
+					.sapMBtnIcon {
+						width: 1.25rem;
+						height: 1.25rem;
+						line-height: 1.25rem;
+					}
+				}
+
+				&:hover {
+					.sapMBtnInner {
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Align the icons of the menu buttons in overflow popover
+.sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	.sapUiDemoKitHeaderActionsVersionSwitch {
+		.sapMBtnInner.sapMBtnTransparent.sapMBtnHoverable {
+			background-color: @sapUiButtonBackground;
+			border: 0.0625rem solid @sapUiButtonBorderColor;
+			color: @sapUiButtonTextColor;
+
+			bdi,
+			.sapMBtnIcon {
+				color:	@sapUiButtonTextColor;
+			}
+
+			&:hover:not(.sapMBtnActive) {
+				background-color: @sapUiButtonHoverBackground;
+				color: sapUiButtonHoverTextColor;
+				box-shadow: @sapContent_Interaction_Shadow;
+
+				.sapMBtnIcon {
+					color: sapUiButtonHoverTextColor;
+				}
+			}
+
+			&.sapMBtnActive {
+				bdi,
+				.sapMBtnIcon {
+					color: @sapUiButtonActiveTextColor;
+				}
+			}
+		}
+	}
+
+	.sapUiDemoKitHeaderActionsMenuButton.sapMMenuBtn {
+		.sapMBtnIcon {
+			margin-left: -0.0625rem;
+		}
+	}
+}
+
+.sapUiSizeCompact  .sapUiDemokit .sapUiDemokitMainHeader {
+	.sapMBtn.newsButton .sapMBadgeTopRight.sapMBadge.sapMBtnIconFirst:not(.sapMBtnText) {
+		padding: 0;
+	}
+}
+
+// Media queries
+html.sap-desktop {
+	.sapUiDemokit {
+		&.sapTntToolPage {
+			.sapUiDemokitMainHeader.sapMIBar.sapMTB .sapMBarChild:first-child[style*="width: 100%"] {
+				padding-left: 0;
+			}
+		}
+	}
+
+	&:not(html.sap-combi) .sapUiDemokit.sapTntToolPage {
+		.sapUiDemoKitHeaderOTB {
+			height: 2.25rem;
+		}
+	}
+
+	// Adjust the style of the version switch button to match the design specifiaction
+	&:is(.sapUiMedia-Std-Phone, .sapUiMedia-Std-Tablet) {
+		.sapUiDemokit {
+			.sapUiDemoKitHeaderActionsVersionSwitch .sapMBtnInner {
+				padding: 0;
+
+				&:after {
+					content: none;
+				}
+
+				.sapMBtnIcon {
+					padding: 0;
+				}
+			}
+
+			.sapUiDemoKitHeaderActionsVersionSwitchTextContent {
+				display: none;
+			}
+		}
+	}
+
+	// Align the menu button with the side menu button
+	&:is(.sapUiMedia-Std-Phone) {
+		.sapUiDemokit {
+			.sapUiDocumentationMasterToggleButton {
+				margin-left: 0;
+			}
+		}
+	}
+
+	// Align the menu button with the side menu button
+	&:is(.sapUiMedia-Std-Tablet, .sapUiMedia-Std-Desktop) {
+		.sapUiDemokit {
+			.sapUiDocumentationMasterToggleButton {
+				margin-left: 1rem;
+			}
+		}
+	}
+}
+
+html.sap-tablet {
+	&:not(html.sap-combi) .sapUiDemokit.sapTntToolPage {
+		padding: 0;
+	}
+
+	.sapUiDemokit {
+		&.sapTntToolPage {
+			padding: 0;
+		}
+
+		.sapTntToolPageMain {
+			margin: 0;
+			border-radius: 0;
+		}
+
+		.sapUiDemokitMainHeader {
+			.sapMIBar .sapMMenuBtn {
+				.sapMBtn:not(.sapMSBArrow) .sapMBtnInner {
+					height: 2.5rem;
+					width: 2.5rem;
+					top: -0.125rem;
+
+					.sapUiIcon {
+						margin-left: 0.125rem;
+					}
+				}
+			}
+
+			// Align the menu button with the side menu button
+			.sapUiDocumentationMasterToggleButton {
+				margin-left: 1rem;
+			}
+
+			// Adjust the style of the version switch button to match the design specifiaction
+			.sapUiDemoKitHeaderActionsVersionSwitch .sapMBtnInner {
+				padding: 0;
+
+				&:after {
+					content: none;
+				}
+
+				.sapMBtnIcon {
+					padding: 0;
+				}
+			}
+
+			.sapUiDemoKitHeaderActionsVersionSwitchTextContent {
+				display: none;
+			}
+		}
+	}
+}
+
+html.sap-phone {
+	.sapUiDemokit {
+		&.sapTntToolPage {
+			padding: 0;
+		}
+
+		.sapTntToolPageAside {
+			z-index: 10;
+		}
+
+		.sapTntToolPageMain {
+			margin: 0;
+			border-radius: 0;
+		}
+
+		.sapUiDemokitMainHeader {
+			.sapMIBar .sapMMenuBtn {
+				.sapMBtn:not(.sapMSBArrow) .sapMBtnInner {
+					height: 2.5rem;
+					width: 2.5rem;
+					top: -0.125rem;
+
+					.sapUiIcon {
+						margin-left: 0.125rem;
+					}
+				}
+			}
+		}
+	}
+
+	// Align the menu button with the side menu button
+	&:is(.sapUiMedia-Std-Phone) {
+		.sapUiDemokit .sapUiDocumentationMasterToggleButton {
+			margin-left: 0.75rem;
+		}
+	}
+
+	// Adjust the style of the version switch button to match the design specifiaction
+	&:not(.sapUiMedia-Std-Desktop) {
+		.sapUiDemokit .sapUiDemoKitHeaderActionsVersionSwitch .sapMBtnInner:after {
+			content: none;
+		}
+	}
+}
+
+html.sap-phone,
+html.sap-tablet {
+	.sapUiDemokit.sapTntToolPage {
+		.sapTntToolPageMain,
+		.sapTntSideNavigation {
+			border-radius: 0;
+		}
+	}
 }

package/src/sap/ui/documentation/themes/base/Search.less

@@ -1,15 +1,19 @@
 .sapUiDocumentationSearch {
 	display: flex;
-	justify-content: flex-end;
-	gap: 5px;
-}
+	align-items: center;
+	gap: 0.5rem;
 
-.sapUiDocumentationSearch .sapMSF {
-	width: auto;
-	flex-grow: 1;
-	max-width: 10%;
-	transition-delay: 0s;
-	transition-duration: 0.4s;
-	transition-property: max-width;
-	transition-timing-function: linear;
-}
+	.sapMSF {
+		width: auto;
+		flex-grow: 1;
+		max-width: 10%;
+		transition-delay: 0s;
+		transition-duration: 0.4s;
+		transition-property: max-width;
+		transition-timing-function: linear;
+	}
+
+	.sapUiDemokitSearchOpeningButton {
+		margin-right: -0.35rem;
+	}
+}

package/src/sap/ui/documentation/themes/sap_horizon/library.source.less

@@ -10,5 +10,4 @@
 @import "global.less";
 
 @import "./Link.less";
-@import "./Panel.less";
-@import "./Search.less";
+@import "./Panel.less";

package/src/sap/ui/documentation/themes/sap_horizon_dark/library.source.less

@@ -10,5 +10,4 @@
 
 @import "./Documentation.less";
 @import "./Link.less";
-@import "./Panel.less";
-@import "./Search.less";
+@import "./Panel.less";

package/src/sap/ui/documentation/sdk/view/FeedbackDialog.fragment.xml

@@ -1,87 +0,0 @@
-<core:FragmentDefinition
-		xmlns="sap.m"
-		xmlns:core="sap.ui.core"
-		xmlns:html="http://www.w3.org/1999/xhtml">
-	<Dialog
-		title="{i18n>FEEDBACK_DIALOG_TITLE}"
-		class="sapUiContentPadding"
-		id="feedbackDialog"
-		resizable="true"
-		draggable="true"
-		contentHeight="35rem"
-		contentWidth="32rem"
-		stretch="{appView>/bPhoneSize}"
-		showHeader="true">
-		<content>
-		<VBox>
-			<HBox justifyContent="SpaceBetween">
-				<items>
-					<Label text="{i18n>FEEDBACK_DIALOG_OVERALL}" design="Bold" class="sapMFontMediumSize" required="true"/>
-					<ObjectStatus id="ratingStatus" text="" state="None" class="sapMFontMediumSize"/>
-				</items>
-			</HBox>
-			<HBox id="feedbackButtons" >
-				<items>
-					<ToggleButton id="excellent" width="100%" press="onPressRatingButton" icon="sap-icon://FeedbackRatingFaces/icon-face-very-happy" class="rateButton">
-						<layoutData>
-							<FlexItemData growFactor="1" />
-						</layoutData>
-					</ToggleButton>
-					<ToggleButton id="good" width="100%" press="onPressRatingButton" icon="sap-icon://FeedbackRatingFaces/icon-face-happy" class="rateButton">
-						<layoutData>
-							<FlexItemData growFactor="1" />
-						</layoutData>
-					</ToggleButton>
-					<ToggleButton id="average" width="100%" press="onPressRatingButton" icon="sap-icon://FeedbackRatingFaces/icon-face-neutral" class="rateButton">
-						<layoutData>
-							<FlexItemData growFactor="1" />
-						</layoutData>
-					</ToggleButton>
-					<ToggleButton id="poor" width="100%" press="onPressRatingButton" icon="sap-icon://FeedbackRatingFaces/icon-face-bad" class="rateButton">
-						<layoutData>
-							<FlexItemData growFactor="1" />
-						</layoutData>
-					</ToggleButton>
-					<ToggleButton id="veryPoor" width="100%" press="onPressRatingButton" icon="sap-icon://FeedbackRatingFaces/icon-face-very-bad" class="rateButton">
-						<layoutData>
-							<FlexItemData growFactor="1" />
-						</layoutData>
-					</ToggleButton>
-				</items>
-			</HBox>
-
-			<Label text="{i18n>FEEDBACK_DIALOG_MESSAGE}" design="Bold" class="sapUiTinyMarginTop"/>
-
-			<TextArea id="feedbackInput" width="100%" placeholder="{i18n>FEEDBACK_DIALOG_MESSAGE_PLACEHOLDER}"
-						rows="7" class="sapMFontMediumSize sapUiFeedbackDialogTextArea"/>
-
-			<CheckBox id="pageContext" text="{i18n>FEEDBACK_DIALOG_RELATED}" selected="true" class="sapMFontMediumSize contextCheckBoxAlign" select="onContextSelect"/>
-
-			<FormattedText class="sapMLabel sapUiFeedbackDialogNoteLabel sapUiTinyMarginBottom"
-						   htmlText="&lt;strong&gt;Note:&lt;/strong&gt; If you want to report a bug,
-			{= ${versionData>/isOpenUI5} ?
-			' you can open a GitHub issue &lt;a href=&quot;https://github.com/SAP/openui5/issues/new&quot;&gt;here.&lt;/a&gt;' :
-			${versionData>/isSnapshotVersion} ?
-			' please open a BCP ticket on CA-UI5-CTR component.' :
-			' you can report an Incident &lt;a href=&quot;https://launchpad.support.sap.com/#incident/solution&quot;&gt;here.&lt;/a&gt;'
-			}
-			This way we will be able to get back to you in case we have follow-up questions."/>
-
-			<FormattedText class="sapMLabel sapUiFeedbackDialogNoteLabel sapUiTinyMarginBottom" visible="{= ${versionData>/isOpenUI5}}"
-						   htmlText="You can contribute directly to the &lt;a href=&quot;https://github.com/SAP/openui5-docs&quot; target=&quot;_blank&quot;&gt;OpenUI5 Documentation&lt;/a&gt; on GitHub."/>
-
-			<Link text="{i18n>FEEDBACK_DIALOG_SHOW_DATA}" class="sapMFontMediumSize sapUiTinyMarginBottom" press="onShowHideContextData"/>
-
-			<TextArea id="contextData" width="100%" value="Details/ descriptive text..." visible="false" editable="false" rows="3" class="sapUiBaseText sapMFontMediumSize sapUiTinyMarginBottom sapUiNoMarginTop"/>
-
-			<MessageStrip text="{i18n>FEEDBACK_DIALOG_DISCLAIMER}" type="Information" showIcon="true"/>
-		</VBox>
-		</content>
-		<beginButton>
-			<Button id="sendButton" text="{i18n>FEEDBACK_DIALOG_BTN_SEND}" press="onFeedbackDialogSendPress" enabled="false" type="Emphasized"/>
-		</beginButton>
-		<endButton>
-			<Button id="cancelButton" text="{i18n>FEEDBACK_DIALOG_BTN_CANCEL}" press="onFeedbackDialogCancel"/>
-		</endButton>
-	</Dialog>
-</core:FragmentDefinition>

package/src/sap/ui/documentation/themes/sap_horizon/Search.less

@@ -1,3 +0,0 @@
-.sapUiDocumentationSearch .sapMSFF {
-	border: 1px solid @sapUiFieldFocusBorderColor;
-}

package/src/sap/ui/documentation/themes/sap_horizon_dark/Search.less

@@ -1,3 +0,0 @@
-.sapUiDocumentationSearch .sapMSFF {
-	border: 1px solid @sapUiFieldFocusBorderColor;
-}