SAP · ilhan007 · Dec 7, 2020 · Nov 30, 2020 · Dec 1, 2020 · Dec 1, 2020
diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js
@@ -7,6 +7,7 @@ import "./dist/Assets.js";
 import "./dist/features/CoPilotAnimation.js";
 
 // FIORI components
+import Bar from "./dist/Bar.js";
 import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
 import ProductSwitch from "./dist/ProductSwitch.js";
 import ProductSwitchItem from "./dist/ProductSwitchItem.js";

diff --git a/packages/fiori/src/Bar.hbs b/packages/fiori/src/Bar.hbs
@@ -0,0 +1,13 @@
+<div class="ui5-bar-root"
+	.design="{{design}}"
+	role="toolbar">
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+			<slot name="startContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+			<slot name="middleContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+			<slot name="endContent"></slot>
+	</div>
+</div>
diff --git a/packages/fiori/src/Bar.js b/packages/fiori/src/Bar.js
@@ -0,0 +1,105 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import BarTemplate from "./generated/templates/BarTemplate.lit.js";
+import BarDesign from "./types/BarDesign.js";
+
+// Styles
+import BarCss from "./generated/themes/Bar.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-bar",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		/**
+		 * Defines the <code>ui5-bar</code> design.
+		 * <br><br>
+		 * <b>Note:</b> Available options are "BottomBorder", "TopBorder", "AllBorders".
+		 *
+		 * @type {BarDesign}
+		 * @defaultvalue "BottomBorder"
+		 * @public
+		 */
+		design: {
+			type: BarDesign,
+			defaultValue: BarDesign.BottomBorder,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		startContent: {
+			type: HTMLElement,
+		},
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		middleContent: {
+			type: HTMLElement,
+		},
+		/**
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		endContent: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The Bar control consists of three areas to hold its content. It has the capability to center content, such as a title, while having other controls on the left and right side.
+ *
+ * <h3>Usage</h3>
+ * With the use of the design property, you can set the style of the Bar to appear designed with bottom border, top border and all borders.
+ *
+ * Note: Do not place a Bar inside another Bar or inside any bar-like control. Doing so causes unpredictable behavior.
+ *
+ * For the <code>ui5-bar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/Bar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Bar
+ * @extends UI5Element
+ * @tagname ui5-bar
+ * @public
+ * @since 1.0.0-rc.11
+ */
+class Bar extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return BarCss;
+	}
+
+	static get template() {
+		return BarTemplate;
+	}
+}
+
+Bar.define();
+
+export default Bar;
diff --git a/packages/fiori/src/themes/Bar.css b/packages/fiori/src/themes/Bar.css
@@ -0,0 +1,65 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
+	display: block;
+	margin-bottom: 0.5rem;
+	margin-top: 0.5rem;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: inherit;
+	width: inherit;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-left: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.ui5-bar-root .ui5-bar-midcontent-container {
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="SubHeader"]){
+	height: var(--_ui5_bar_subheader_height);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+
+::slotted([slot="middleContent"]),
+::slotted([slot="endContent"]),
+::slotted([slot="startContent"]){
+	display: flex;
+	align-items: center;
+}
diff --git a/packages/fiori/src/themes/base/Bar-parameters.css b/packages/fiori/src/themes/base/Bar-parameters.css
@@ -0,0 +1,11 @@
+:root {
+	--_ui5_bar_base_height: 2.75rem;
+	--_ui5_bar_subheader_height: 3rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_bar_base_height: 2.5rem;
+	--_ui5_bar_subheader_height: 2.25rem;
+}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/ProductSwitchItem-parameters.css";
 @import "../base/TimelineItem-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Bar-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./UploadCollection-parameters.css";

diff --git a/packages/fiori/src/types/BarDesign.js b/packages/fiori/src/types/BarDesign.js
@@ -0,0 +1,54 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.BarDesign.prototype
+ * @public
+ */
+const BarTypes = {
+	/**
+	 * Default type
+	 * @public
+	 * @type {BottomBorder}
+	 */
+	Header: "Header",
+
+	/**
+	 * Subheader type
+	 * @public
+	 * @type {SubHeader}
+	 */
+	SubHeader: "SubHeader",
+
+	/**
+	 * Footer type
+	 * @public
+	 * @type {Footer}
+	 */
+	Footer: "Footer",
+
+	/**
+	 * Floating Footer type - there is visible border on all sides
+	 * @public
+	 * @type {FloatingFooter}
+	 */
+	FloatingFooter: "FloatingFooter",
+};
+
+/**
+ * @class
+ * Different types of Bar.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.BarDesign
+ * @public
+ * @enum {string}
+ */
+class BarDesign extends DataType {
+	static isValid(value) {
+		return !!BarTypes[value];
+	}
+}
+
+BarDesign.generateTypeAcessors(BarTypes);
+
+export default BarDesign;
diff --git a/packages/fiori/test/pages/Bar.html b/packages/fiori/test/pages/Bar.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>Bar test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);">
+	<section>
+		<ui5-bar design="Footer">
+			<div slot="startContent">
+				<ui5-button>Left Button</ui5-button>
+				<ui5-label id="basic-label">Basic Label</ui5-label>
+			</div>
+			<div slot="middleContent">
+				<ui5-button>Middle Button</ui5-button>
+				<ui5-button>Middle Button</ui5-button>
+				<ui5-button>Middle Button</ui5-button>
+				</div>
+			<div slot="endContent">
+				<ui5-button>Right Button</ui5-button>
+			</div>
+		</ui5-bar>
+		<ui5-bar design="SubHeader">
+			<ui5-button slot="startContent">Left Button</ui5-button>
+			<ui5-label slot="startContent" id="basic-label">Basic Label</ui5-label>
+			<ui5-button slot="middleContent">Middle Button</ui5-button>
+			<ui5-button slot="middleContent">Middle Button</ui5-button>
+			<ui5-button slot="middleContent">Middle Button</ui5-button>
+			<ui5-button slot="endContent">Right Button</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="FloatingFooter">
+			<div slot="startContent">
+				<ui5-button>Left Button</ui5-button>
+			</div>
+			<div slot="middleContent">
+				<ui5-switch graphical text-on="On" text-off="Off"></ui5-switch>
+				<ui5-button>Middle Button</ui5-button>
+			</div>
+			<div slot="endContent">
+				<ui5-button>Right Button</ui5-button>
+			</div>
+		</ui5-bar>
+		<ui5-bar design="Header">
+			<div slot="startContent">
+				<ui5-button>Left Button</ui5-button>
+			</div>
+			<div slot="middleContent">
+				<ui5-button>Middle Button</ui5-button>
+			</div>
+			<div slot="endContent">
+				<ui5-checkbox id="cb1" text="Long long long text"></ui5-checkbox>
+				<ui5-button>Right Button</ui5-button>
+			</div>
+		</ui5-bar>
+	</section>
+</body>
+</html>