feat(ui5-segmentedbutton): initial implementation

packages/main/bundle.esm.js

@@ -30,6 +30,7 @@ import Link from "./dist/Link.js";
 import Popover from "./dist/Popover.js";
 import Panel from "./dist/Panel.js";
 import RadioButton from "./dist/RadioButton.js";
+import SegmentedButton from "./dist/SegmentedButton.js";
 import Select from "./dist/Select.js";
 import Option from "./dist/Option.js";
 import Switch from "./dist/Switch.js";

packages/main/src/SegmentedButton.hbs

@@ -0,0 +1,8 @@
+<div
+	@click="{{_onclick}}"
+	class="ui5-segmentedbutton-root"
+>
+	{{#each buttons}}
+		<slot name="{{this._individualSlot}}"></slot>
+	{{/each}}
+</div>

packages/main/src/SegmentedButton.js

@@ -0,0 +1,158 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+
+// Template
+import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js";
+
+// Styles
+import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-segmentedbutton",
+	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {},
+	slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+
+		/**
+		 * Defines the buttons of <code>ui5-segmentedbutton</code>.
+		 * <br><br>
+		 * <b>Note:</b> Multiple buttons are allowed.
+		 * <br><br>
+		 * <b>Note:</b> Use the <code>ui5-togglebutton</code> for the intended design.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "buttons",
+			type: HTMLElement,
+			individualSlots: true,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+
+		/**
+		 * Fired when the pressed button changes.
+		 *
+		 * @event
+		 * @param {HTMLElement} pressedButton the pressed button.
+		 * @public
+		 */
+		pressChange: {
+			detail: {
+				pressedButton: { type: HTMLElement },
+			},
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>SegmentedButton</code> shows a group of buttons. When the user clicks or taps
+ * one of the buttons, it stays in a pressed state. It automatically resizes the buttons
+ * to fit proportionally within the control. When no width is set, the control uses the available width.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/SegmentedButton";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SegmentedButton
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-segmentedbutton
+ * @public
+ */
+class SegmentedButton extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return SegmentedButtonTemplate;
+	}
+
+	static get styles() {
+		return SegmentedButtonCss;
+	}
+
+	onEnterDOM() {
+		this._handleResizeBound = this._handleResize.bind(this);
+
+		ResizeHandler.register(document.body, this._handleResizeBound);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(document.body, this._handleResizeBound);
+	}
+
+	onBeforeRendering() {
+		this.syncSelection();
+	}
+
+	async onAfterRendering() {
+		await Promise.all(this.buttons.map(button => button._waitForDomRef));
+		this.widths = this.buttons.map(button => button.offsetWidth);
+	}
+
+	syncSelection() {
+		this._pressedButton = this.buttons.filter(button => button.pressed).pop();
+
+		if (this._pressedButton) {
+			this.buttons.forEach(button => {
+				button.pressed = false;
+			});
+			this._pressedButton.pressed = true;
+		}
+	}
+
+	_onclick(event) {
+		return this.toggle(event);
+	}
+
+	toggle(event) {
+		if (event.target !== this.pressedButton) {
+			if (this._pressedButton) {
+				this._pressedButton.pressed = false;
+			}
+			this._pressedButton = event.target;
+			this.fireEvent("pressChange", {
+				pressedButton: this._pressedButton,
+			});
+		}
+		event.target.pressed = true;
+
+		return this;
+	}
+
+	get pressedButton() {
+		return this._pressedButton;
+	}
+
+	_handleResize() {
+		const documentWidth = document.body.clientWidth;
+
+		this.style.width = `${Math.max(...this.widths) * this.buttons.length}px`;
+		this.buttons.forEach(button => {
+			button.style.width = "100%";
+		});
+
+		if (documentWidth <= this.offsetWidth) {
+			this.style.width = "100%";
+		}
+	}
+}
+
+SegmentedButton.define();
+
+export default SegmentedButton;

packages/main/src/themes/Button.css

@@ -50,6 +50,9 @@
 	color: inherit;
 	text-shadow: inherit;
 	font: inherit;
+	white-space: inherit;
+	overflow: inherit;
+	text-overflow: inherit;
 }
 
 :host(:not([active]):hover) {
@@ -83,6 +86,9 @@
 .ui5-button-text {
 	outline: none;
 	position: relative;
+	white-space: inherit;
+	overflow: inherit;
+	text-overflow: inherit;
 }
 
 :host([has-icon]) .ui5-button-text {
@@ -104,9 +110,10 @@
 }
 
 bdi {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
+	display: block;
+	white-space: inherit;
+	overflow: inherit;
+	text-overflow: inherit;
 }
 
 :host([active]:not([disabled])) {

packages/main/src/themes/SegmentedButton.css

@@ -0,0 +1,34 @@
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-segmentedbutton-root {
+	display: flex;
+}
+
+::slotted(ui5-togglebutton) {
+	border-radius: 0;
+	height: 2.75rem;
+	min-width: 2.5rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+::slotted(ui5-togglebutton:nth-child(odd)) {
+	border: 1px solid var(--sapButton_Selected_BorderColor);
+	border-right: 0;
+	border-left: 0;
+}
+
+::slotted(ui5-togglebutton:last-child) {
+	border-top-right-radius: 0.375rem;
+	border-bottom-right-radius: 0.375rem;
+	border-right: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+::slotted(ui5-togglebutton:first-child) {
+	border-top-left-radius: 0.375rem;
+	border-bottom-left-radius: 0.375rem;
+	border-left: 1px solid var(--sapButton_Selected_BorderColor);
+}

packages/main/test/pages/SegmentedButton.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>ui5-segmentedbutton</title>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+	<script>delete Document.prototype.adoptedStyleSheets;</script>
+
+</head>
+
+<body>
+	<header class="header">
+		<h1 class="header-title">ui5-segmentedbutton</h1>
+	</header>
+
+	<section class="main">
+		<div class="samples">
+			<h2>Segmentedbutton example</h2>
+			<div class="sample" id="main-sample">
+				<section>
+					<ui5-segmentedbutton id="segButton1">
+						<ui5-togglebutton icon="employee" pressed></ui5-togglebutton>
+						<ui5-togglebutton>ToggleButton</ui5-togglebutton>
+						<ui5-togglebutton>Button</ui5-togglebutton>
+					</ui5-segmentedbutton>
+				</section>
+
+				<section>
+					<h1>Example with 4 buttons</h1>
+
+					<ui5-segmentedbutton>
+						<ui5-togglebutton>Button</ui5-togglebutton>
+						<ui5-togglebutton>Button</ui5-togglebutton>
+						<ui5-togglebutton>Click</ui5-togglebutton>
+						<ui5-togglebutton pressed>Pressed ToggleButton</ui5-togglebutton>
+					</ui5-segmentedbutton>
+				</section>
+
+				<section>
+					<h1>Example with 5 buttons</h1>
+
+					<ui5-segmentedbutton id="segButton2">
+						<ui5-togglebutton pressed>Word</ui5-togglebutton>
+						<ui5-togglebutton pressed>Pressed ToggleButton With Bigger Text</ui5-togglebutton>
+						<ui5-togglebutton pressed>Button</ui5-togglebutton>
+						<ui5-togglebutton pressed>Pressed ToggleButton</ui5-togglebutton>
+						<ui5-togglebutton pressed>A</ui5-togglebutton>
+					</ui5-segmentedbutton>
+				</section>
+
+				<section>
+					<h1>Example with Icons</h1>
+
+					<ui5-segmentedbutton>
+						<ui5-togglebutton icon="employee" pressed></ui5-togglebutton>
+						<ui5-togglebutton icon="menu"></ui5-togglebutton>
+						<ui5-togglebutton icon="factory"></ui5-togglebutton>
+					</ui5-segmentedbutton>
+				</section>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

packages/main/test/specs/SegmentedButton.spec.js

@@ -0,0 +1,48 @@
+const assert = require("chai").assert;
+
+describe("SegmentedButton general interaction", () => {
+	browser.url("http://localhost:8080/test-resources/pages/SegmentedButton.html");
+
+	it("tests rendering of segmentedbutton", () => {
+		const segmentedButton = browser.$("#segButton1");
+		const toggleButton1 =  browser.$("#segButton1 > ui5-togglebutton:first-child");
+		const toggleButton2 =  browser.$("#segButton1 > ui5-togglebutton:nth-child(2)");
+		const toggleButton3 =  browser.$("#segButton1 > ui5-togglebutton:last-child");
+
+		// all buttons should be rendered
+		assert.ok(segmentedButton.isExisting(), "SegmentedButton is rendered");
+		assert.ok(toggleButton1.isExisting(), "First ToggleButton is rendered");
+		assert.ok(toggleButton2.isExisting(), "Second ToggleButton is rendered");
+		assert.ok(toggleButton3.isExisting(), "Third ToggleButton is rendered");
+	});
+
+	it("tests if pressed attribute is applied", () => {
+		const toggleButton =  browser.$("#segButton1 > ui5-togglebutton:first-child");
+
+		assert.ok(toggleButton.getProperty("pressed"), "ToggleButton has property pressed");
+	});
+
+	it("tests if pressed attribute is switched to the newly pressed button", () => {
+		const firstToggleButton =  browser.$("#segButton1 > ui5-togglebutton:first-child");
+		const lastToggleButton =  browser.$("#segButton1 > ui5-togglebutton:last-child");
+
+		lastToggleButton.click();
+
+		assert.ok(lastToggleButton.getProperty("pressed"), "Last ToggleButton has property pressed");
+		assert.ok(!firstToggleButton.getProperty("pressed"), "First ToggleButton should not be pressed anymore");
+	});
+
+	it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => {
+		const toggleButton1 =  browser.$("#segButton2 > ui5-togglebutton:first-child");
+		const toggleButton2 =  browser.$("#segButton2 > ui5-togglebutton:nth-child(2)");
+		const toggleButton3 =  browser.$("#segButton2 > ui5-togglebutton:nth-child(3)");
+		const toggleButton4 =  browser.$("#segButton2 > ui5-togglebutton:last-child");
+
+		// only last button should be pressed
+		assert.ok(!toggleButton1.getProperty("pressed"), "ToggleButton should not be pressed");
+		assert.ok(!toggleButton2.getProperty("pressed"), "ToggleButton should not be pressed");
+		assert.ok(!toggleButton3.getProperty("pressed"), "ToggleButton should not be pressed");
+		assert.ok(toggleButton4.getProperty("pressed"), "ToggleButton has property pressed");
+
+	});
+});