feat(ui5-bar): initial implementation (#2533)

Introduces a new component within the "fiori' package, called Bar (ui5-bar).
It serves as a container for buttons and similar components and it is mainly used for header or footer in application pages.

FIXES #2434

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";

packages/fiori/src/Bar.hbs

@@ -0,0 +1,12 @@
+<div class="ui5-bar-root"
+	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>

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 "Header", "Subheader", "Footer", "FloatingFooter".
+		 *
+		 * @type {BarDesign}
+		 * @defaultvalue "Header"
+		 * @public
+		 */
+		design: {
+			type: BarDesign,
+			defaultValue: BarDesign.Header,
+		},
+	},
+	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 component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components 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 like a Header, Subheader, Footer and FloatingFooter.
+ *
+ * Note: Do not place a Bar inside another Bar or inside any bar-like component. 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;

packages/fiori/src/themes/Bar.css

@@ -0,0 +1,62 @@
+: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;
+}
+
+.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(*){
+	display: flex;
+	align-items: center;
+	margin: 0 0.25rem;
+}

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;
+}

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";

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";

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";

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";

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";

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";

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";

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 {Header}
+	 */
+	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;

packages/fiori/test/pages/Bar.html

@@ -0,0 +1,50 @@
+<!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">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="Subheader">
+			<ui5-button slot="startContent">Left Button</ui5-button>
+			<ui5-label slot="endContent" id="basic-label">Basic Label</ui5-label>
+			<ui5-button slot="middleContent">Middle Button</ui5-button>
+			<ui5-button slot="middleContent">Middle2 Button</ui5-button>
+			<ui5-button slot="startContent">Middle3 Button</ui5-button>
+			<ui5-button slot="endContent">Right Button</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<ui5-bar design="Header">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label" slot="middleContent">Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</section>
+	<style>
+		ui5-bar {
+			margin: 0.25rem 0;
+		}
+	</style>
+</body>
+</html>