Skip to content

Commit 5c601cd

Browse files
tsanislavgatevtsanislavgatev
authored
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
1 parent c2baf6b commit 5c601cd

File tree

17 files changed

+386
-0
lines changed

17 files changed

+386
-0
lines changed

‎packages/fiori/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import "./dist/Assets.js";
77
import "./dist/features/CoPilotAnimation.js";
88

99
// FIORI components
10+
import Bar from "./dist/Bar.js";
1011
import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
1112
import ProductSwitch from "./dist/ProductSwitch.js";
1213
import ProductSwitchItem from "./dist/ProductSwitchItem.js";

‎packages/fiori/src/Bar.hbs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="ui5-bar-root"
2+
role="toolbar">
3+
<div class="ui5-bar-content-container ui5-bar-startcontent-container">
4+
<slot name="startContent"></slot>
5+
</div>
6+
<div class="ui5-bar-content-container ui5-bar-midcontent-container">
7+
<slot name="middleContent"></slot>
8+
</div>
9+
<div class="ui5-bar-content-container ui5-bar-endcontent-container">
10+
<slot name="endContent"></slot>
11+
</div>
12+
</div>

‎packages/fiori/src/Bar.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import BarTemplate from "./generated/templates/BarTemplate.lit.js";
4+
import BarDesign from "./types/BarDesign.js";
5+
6+
// Styles
7+
import BarCss from "./generated/themes/Bar.css.js";
8+
9+
/**
10+
* @public
11+
*/
12+
const metadata = {
13+
tag: "ui5-bar",
14+
managedSlots: true,
15+
properties: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
16+
/**
17+
* Defines the <code>ui5-bar</code> design.
18+
* <br><br>
19+
* <b>Note:</b> Available options are "Header", "Subheader", "Footer", "FloatingFooter".
20+
*
21+
* @type {BarDesign}
22+
* @defaultvalue "Header"
23+
* @public
24+
*/
25+
design: {
26+
type: BarDesign,
27+
defaultValue: BarDesign.Header,
28+
},
29+
},
30+
slots: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
31+
/**
32+
* @type {HTMLElement[]}
33+
* @slot
34+
* @public
35+
*/
36+
startContent: {
37+
type: HTMLElement,
38+
},
39+
/**
40+
* @type {HTMLElement[]}
41+
* @slot
42+
* @public
43+
*/
44+
middleContent: {
45+
type: HTMLElement,
46+
},
47+
/**
48+
* @type {HTMLElement[]}
49+
* @slot
50+
* @public
51+
*/
52+
endContent: {
53+
type: HTMLElement,
54+
},
55+
},
56+
events: /** @lends sap.ui.webcomponents.main.Bar.prototype */ {
57+
//
58+
},
59+
};
60+
61+
/**
62+
* @class
63+
*
64+
* <h3 class="comment-api-title">Overview</h3>
65+
* 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.
66+
*
67+
* <h3>Usage</h3>
68+
* 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.
69+
*
70+
* Note: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.
71+
*
72+
* For the <code>ui5-bar</code>
73+
* <h3>ES6 Module Import</h3>
74+
*
75+
* <code>import @ui5/webcomponents/dist/Bar.js";</code>
76+
*
77+
* @constructor
78+
* @author SAP SE
79+
* @alias sap.ui.webcomponents.main.Bar
80+
* @extends UI5Element
81+
* @tagname ui5-bar
82+
* @public
83+
* @since 1.0.0-rc.11
84+
*/
85+
class Bar extends UI5Element {
86+
static get metadata() {
87+
return metadata;
88+
}
89+
90+
static get render() {
91+
return litRender;
92+
}
93+
94+
static get styles() {
95+
return BarCss;
96+
}
97+
98+
static get template() {
99+
return BarTemplate;
100+
}
101+
}
102+
103+
Bar.define();
104+
105+
export default Bar;

‎packages/fiori/src/themes/Bar.css

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:host {
2+
background-color: var(--sapPageHeader_Background);
3+
height: var(--_ui5_bar_base_height);
4+
width: 100%;
5+
box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
6+
display: block;
7+
}
8+
9+
.ui5-bar-root {
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-between;
13+
height: inherit;
14+
width: inherit;
15+
background-color: inherit;
16+
box-shadow: inherit;
17+
border-radius: inherit;
18+
}
19+
20+
.ui5-bar-root .ui5-bar-startcontent-container {
21+
padding-left: 0.5rem;
22+
display: flex;
23+
flex-direction: row;
24+
align-items: center;
25+
}
26+
27+
.ui5-bar-root .ui5-bar-endcontent-container {
28+
padding-right: 0.5rem;
29+
display: flex;
30+
flex-direction: row;
31+
align-items: center;
32+
}
33+
.ui5-bar-root .ui5-bar-midcontent-container {
34+
padding-left: 0.5rem;
35+
padding-right: 0.5rem;
36+
display: flex;
37+
flex-direction: row;
38+
align-items: center;
39+
}
40+
41+
:host([design="Footer"]){
42+
background-color: var(--sapPageFooter_Background);
43+
border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
44+
box-shadow: none;
45+
}
46+
47+
:host([design="Subheader"]){
48+
height: var(--_ui5_bar_subheader_height);
49+
}
50+
51+
:host([design="FloatingFooter"]){
52+
border-radius: var(--sapElement_BorderCornerRadius);
53+
background-color: var(--sapPageFooter_Background);
54+
box-shadow: var(--sapContent_Shadow1);
55+
border: none;
56+
}
57+
58+
::slotted(*){
59+
display: flex;
60+
align-items: center;
61+
margin: 0 0.25rem;
62+
}

‎packages/fiori/src/themes/base/Bar-parameters.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root {
2+
--_ui5_bar_base_height: 2.75rem;
3+
--_ui5_bar_subheader_height: 3rem;
4+
}
5+
6+
[data-ui5-compact-size],
7+
.ui5-content-density-compact,
8+
.sapUiSizeCompact {
9+
--_ui5_bar_base_height: 2.5rem;
10+
--_ui5_bar_subheader_height: 2.25rem;
11+
}

‎packages/fiori/src/themes/sap_belize/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "../base/FlexibleColumnLayout-parameters.css";
23
@import "../base/ProductSwitchItem-parameters.css";
34
@import "../base/TimelineItem-parameters.css";

‎packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "./FlexibleColumnLayout-parameters.css";
23
@import "./ProductSwitchItem-parameters.css";
34
@import "./TimelineItem-parameters.css";

‎packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "./FlexibleColumnLayout-parameters.css";
23
@import "./ProductSwitchItem-parameters.css";
34
@import "./TimelineItem-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "../base/FlexibleColumnLayout-parameters.css";
23
@import "../base/ProductSwitchItem-parameters.css";
34
@import "../base/TimelineItem-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "./FlexibleColumnLayout-parameters.css";
23
@import "../base/ProductSwitchItem-parameters.css";
34
@import "../base/TimelineItem-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "./ProductSwitchItem-parameters.css";
23
@import "./TimelineItem-parameters.css";
34
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../base/Bar-parameters.css";
12
@import "./ProductSwitchItem-parameters.css";
23
@import "./TimelineItem-parameters.css";
34
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/types/BarDesign.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* @lends sap.ui.webcomponents.main.types.BarDesign.prototype
5+
* @public
6+
*/
7+
const BarTypes = {
8+
/**
9+
* Default type
10+
* @public
11+
* @type {Header}
12+
*/
13+
Header: "Header",
14+
15+
/**
16+
* Subheader type
17+
* @public
18+
* @type {Subheader}
19+
*/
20+
Subheader: "Subheader",
21+
22+
/**
23+
* Footer type
24+
* @public
25+
* @type {Footer}
26+
*/
27+
Footer: "Footer",
28+
29+
/**
30+
* Floating Footer type - there is visible border on all sides
31+
* @public
32+
* @type {FloatingFooter}
33+
*/
34+
FloatingFooter: "FloatingFooter",
35+
};
36+
37+
/**
38+
* @class
39+
* Different types of Bar.
40+
* @constructor
41+
* @author SAP SE
42+
* @alias sap.ui.webcomponents.main.types.BarDesign
43+
* @public
44+
* @enum {string}
45+
*/
46+
class BarDesign extends DataType {
47+
static isValid(value) {
48+
return !!BarTypes[value];
49+
}
50+
}
51+
52+
BarDesign.generateTypeAcessors(BarTypes);
53+
54+
export default BarDesign;

‎packages/fiori/test/pages/Bar.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta charset="utf-8">
6+
7+
<title>Bar test page</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta charset="utf-8">
11+
12+
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
13+
<script src="../../resources/bundle.esm.js" type="module"></script>
14+
<script nomodule src="../../resources/bundle.es5.js"></script>
15+
16+
</head>
17+
18+
<body style="background-color: var(--sapBackgroundColor);">
19+
<section>
20+
<ui5-bar design="Footer">
21+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
22+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
23+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
24+
</ui5-bar>
25+
<ui5-bar design="Subheader">
26+
<ui5-button slot="startContent">Left Button</ui5-button>
27+
<ui5-label slot="endContent" id="basic-label">Basic Label</ui5-label>
28+
<ui5-button slot="middleContent">Middle Button</ui5-button>
29+
<ui5-button slot="middleContent">Middle2 Button</ui5-button>
30+
<ui5-button slot="startContent">Middle3 Button</ui5-button>
31+
<ui5-button slot="endContent">Right Button</ui5-button>
32+
</ui5-bar>
33+
<ui5-bar design="FloatingFooter">
34+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
35+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
36+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
37+
</ui5-bar>
38+
<ui5-bar design="Header">
39+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
40+
<ui5-label id="basic-label" slot="middleContent">Title</ui5-label>
41+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
42+
</ui5-bar>
43+
</section>
44+
<style>
45+
ui5-bar {
46+
margin: 0.25rem 0;
47+
}
48+
</style>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)