refactor: remove ui5-toolbar (#198)

Remove the ui5-toolbar and all affected files and replace it with div element everywhere it is used, including panel and list samples. BREAKING CHANGE: the ui5-toolbar component is removed, we recommend using div or similar HTML tag in combination with flex instead.
SAP · Mar 18, 2019 · 2e14428 · 2e14428
1 parent 15eb051
commit 2e14428
Show file tree

Hide file tree

Showing 38 changed files with 140 additions and 884 deletions.
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -43,8 +43,6 @@ import Timeline from "./dist/Timeline";
 import TimelineItem from "./dist/TimelineItem";
 import Title from "./dist/Title";
 import ToggleButton from "./dist/ToggleButton";
-import Toolbar from "./dist/Toolbar";
-import ToolbarSpacer from "./dist/ToolbarSpacer";
 
 import List from "./dist/List";
 import StandardListItem from "./dist/StandardListItem";

diff --git a/packages/main/entries-less.esm.js b/packages/main/entries-less.esm.js
@@ -118,14 +118,6 @@ import "./src/themes/sap_belize/ToggleButton.less";
 import "./src/themes/sap_belize_hcb/ToggleButton.less";
 import "./src/themes/sap_fiori_3/ToggleButton.less";
 
-import "./src/themes/sap_belize/Toolbar.less";
-import "./src/themes/sap_belize_hcb/Toolbar.less";
-import "./src/themes/sap_fiori_3/Toolbar.less";
-
-import "./src/themes/sap_belize/ToolbarSpacer.less";
-import "./src/themes/sap_belize_hcb/ToolbarSpacer.less";
-import "./src/themes/sap_fiori_3/ToolbarSpacer.less";
-
 import "./src/themes/sap_belize/List.less";
 import "./src/themes/sap_belize_hcb/List.less";
 import "./src/themes/sap_fiori_3/List.less";

diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -34,9 +34,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
-		 * Defines the header area.
-		 * For example, you can use <code>ui5-toolbar</code> or any other HTML element.
-		 * <br><br>
+		 * Defines the <code>ui5-li</code> header.
 		 * <b>Note:</b> When <code>header</code> is set, the
 		 * <code>headerText</code> property is ignored.
 		 *

diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js
@@ -32,8 +32,6 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-panel</code> header area.
-		 * For example, you can use <code>ui5-toolbar</code> and add extra
-		 * components for user interactions.
 		 * <br><br>
 		 * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
 		 *
@@ -158,7 +156,7 @@ const metadata = {
  * </ul>
  *
  * <h3>Structure</h3>
- * A panel consists of a title bar with a header text or header toolbar and a content area.
+ * A panel consists of a title bar with a header text or custom header.
  * <br>
  * The content area can contain an arbitrary set of controls.
  * The header can contain a title with text and icons, buttons, and a

diff --git a/packages/main/src/Toolbar.hbs b/packages/main/src/Toolbar.hbs
diff --git a/packages/main/src/Toolbar.js b/packages/main/src/Toolbar.js
diff --git a/packages/main/src/ToolbarSpacer.js b/packages/main/src/ToolbarSpacer.js
diff --git a/packages/main/src/ToolbarTemplateContext.js b/packages/main/src/ToolbarTemplateContext.js
diff --git a/packages/main/src/themes/base/Panel.less b/packages/main/src/themes/base/Panel.less
@@ -97,17 +97,15 @@ ui5-panel {
 	position: relative;
 }
 
-/* if Panel is expandable, we do not wish toolbar to come with own border */
-.sapMPanelWrappingDivTb > .sapMTB {
-	border-width: 0;
+.sapMPanelWrappingDivTb .sapMPanelHdrToolbar {
+	width: 100%;
 }
 
 .sapMPanelWrappingDiv.sapMPanelWrappingDivExpanded {
 	border-bottom-width: 0;
 }
 
-.sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
-.sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
+.sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr {
 	padding-left: 0;
 
 	>:first-child {