@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/Panel.hbs

@@ -2,6 +2,7 @@
 	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
+	aria-label="{{effectiveAccessibleName}}"
 >
 	<!-- header: either header or h1 with header text -->
 	<div
@@ -13,21 +14,25 @@
 		role="{{accInfo.role}}"
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
-		aria-label="{{accInfo.ariaLabel}}"
 		aria-labelledby="{{accInfo.ariaLabelledby}}"
 	>
 		{{#unless fixed}}
 			<div class="ui5-panel-header-button-root">
-				<ui5-button
-					design="Transparent"
-					class="ui5-panel-header-button {{classes.headerBtn}}"
-					icon="navigation-right-arrow"
-					?non-focusable="{{nonFocusableButton}}"
-					@click="{{_toggleButtonClick}}"
-					._buttonAccInfo="{{accInfo.button}}"
-					aria-label="{{accInfo.ariaLabelButton}}"
-					aria-labelledby="{{accInfo.ariaLabelledbyButton}}"
-				></ui5-button>
+				{{#if _hasHeader}}
+					<ui5-button
+						design="Transparent"
+						class="ui5-panel-header-button {{classes.headerBtn}}"
+						icon="slim-arrow-right"
+						@click="{{_toggleButtonClick}}"
+						._buttonAccInfo="{{accInfo.button}}"
+						accessible-name="{{accInfo.button.ariaLabelButton}}"
+					></ui5-button>
+				{{else}}
+					<ui5-icon
+						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+						name="slim-arrow-right"
+					></ui5-icon>
+				{{/if}}
 			</div>
 		{{/unless}}
 
@@ -46,7 +51,13 @@
 	</div>
 
 	<!-- content area -->
-	<div class="ui5-panel-content" id="{{_id}}-content" tabindex="-1" style="{{styles.content}}">
+	<div
+		class="ui5-panel-content"
+		id="{{_id}}-content"
+		tabindex="-1"
+		style="{{styles.content}}"
+		part="content"
+	>
 		<slot></slot>
 	</div>
 </div>

package/src/Panel.js

@@ -4,10 +4,9 @@ import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Button from "./Button.js";
 import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
@@ -28,7 +27,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-panel</code> header area.
+		 * Defines the component header area.
 		 * <br><br>
 		 * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
 		 *
@@ -41,8 +40,8 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the content of the <code>ui5-panel</code>.
-		 * The content is visible only when the <code>ui5-panel</code> is expanded.
+		 * Determines the content of the component.
+		 * The content is visible only when the component is expanded.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -55,7 +54,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * This property is used to set the header text of the <code>ui5-panel</code>.
+		 * This property is used to set the header text of the component.
 		 * The text is visible in both expanded and collapsed states.
 		 * <br><br>
 		 * <b>Note:</b> This property is overridden by the <code>header</code> slot.
@@ -69,7 +68,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-panel</code> is in a fixed state that is not
+		 * Determines whether the component is in a fixed state that is not
 		 * expandable/collapsible by user interaction.
 		 *
 		 * @type {boolean}
@@ -81,7 +80,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates whether the <code>ui5-panel</code> is collapsed and only the header is displayed.
+		 * Indicates whether the component is collapsed and only the header is displayed.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -92,7 +91,19 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the <code>ui5-panel</code>.
+		 * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		 noAnimation: {
+			type: Boolean,
+		},
+
+		/**
+		 * Sets the accessible aria role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -106,7 +117,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the "aria-level" of <code>ui5-panel</code> heading,
+		 * Defines the "aria-level" of component heading,
 		 * set by the <code>headerText</code>.
 		 * <br><br>
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
@@ -118,52 +129,60 @@ const metadata = {
 			type: TitleLevel,
 			defaultValue: TitleLevel.H2,
 		},
+
 		/**
-		 * @type {String}
+		 * Sets the accessible aria name of the component.
+		 *
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
+
 		/**
-		 * Receives id(or many ids) of the elements that label the panel
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
+		 * When set to <code>true</code>, the <code>accessibleName</code> property will be
+		 * applied not only on the panel root itself, but on its toggle button too.
+		 * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
+ 		 */
+		useAccessibleNameForToggleButton: {
+			type: Boolean,
 		},
+
 		/**
 		 * @private
 		 */
 		_hasHeader: {
 			type: Boolean,
 		},
+
 		_header: {
 			type: Object,
 		},
+
 		_contentExpanded: {
 			type: Boolean,
 			noAttribute: true,
 		},
+
 		_animationRunning: {
 			type: Boolean,
 			noAttribute: true,
 		},
+
 		_buttonAccInfo: {
 			type: Object,
 		},
 	},
-	events: {
+	events: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * Fired when the ui5-panel is expanded/collapsed by user interaction.
+		 * Fired when the component is expanded/collapsed by user interaction.
 		 *
 		 * @event
 		 * @public
@@ -188,14 +207,14 @@ const metadata = {
  * </ul>
  *
  * <h3>Structure</h3>
- * A panel consists of a title bar with a header text or custom header.
+ * The panel's header area 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 is clickable and can be used to toggle between the expanded and collapsed state.
- * It includes an icon which rotates depending on the state.
+ * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
  * <br>
  * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
- * <br><b>Note:</b> the custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+ * <br>
+ * The content area can contain an arbitrary set of controls.
+ * <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
  *
  * <h3>Responsive Behavior</h3>
  * <ul>
@@ -212,6 +231,15 @@ const metadata = {
  * clockwise/counter-clockwise.</li>
  * </ul>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the wrapper of the content</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Panel";</code>
@@ -244,7 +272,6 @@ class Panel extends UI5Element {
 		super();
 
 		this._header = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -264,8 +291,8 @@ class Panel extends UI5Element {
 		return true;
 	}
 
-	shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
+	shouldNotAnimate() {
+		return this.noAnimation || getAnimationMode() === AnimationMode.None;
 	}
 
 	_headerClick(event) {
@@ -287,7 +314,6 @@ class Panel extends UI5Element {
 			return;
 		}
 
-
 		if (isEnter(event)) {
 			this._toggleOpen();
 		}
@@ -314,7 +340,7 @@ class Panel extends UI5Element {
 
 		this.collapsed = !this.collapsed;
 
-		if (!this.shouldAnimate()) {
+		if (this.shouldNotAnimate()) {
 			this.fireEvent("toggle");
 			return;
 		}
@@ -350,13 +376,13 @@ class Panel extends UI5Element {
 	get classes() {
 		return {
 			headerBtn: {
-				"ui5-panel-header-button-animated": this.shouldAnimate(),
+				"ui5-panel-header-button-animated": !this.shouldNotAnimate(),
 			},
 		};
 	}
 
 	get toggleButtonTitle() {
-		return this.i18nBundle.getText(PANEL_ICON);
+		return Panel.i18nBundle.getText(PANEL_ICON);
 	}
 
 	get expanded() {
@@ -367,33 +393,31 @@ class Panel extends UI5Element {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get effectiveAccessibleName() {
+		return typeof this.accessibleName === "string" && this.accessibleName.length ? this.accessibleName : undefined;
+	}
+
 	get accInfo() {
 		return {
 			"button": {
-				"ariaExpanded": this._hasHeader ? this.expanded : undefined,
-				"ariaControls": this._hasHeader ? `${this._id}-content` : undefined,
+				"ariaExpanded": this.expanded,
+				"ariaControls": `${this._id}-content`,
 				"title": this.toggleButtonTitle,
+				"ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
 			},
 			"ariaExpanded": this.nonFixedInternalHeader ? this.expanded : undefined,
 			"ariaControls": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,
 			"ariaLabelledby": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,
-			"ariaLabel": this.nonFocusableButton ? this.ariaLabelTxt : undefined,
-			"ariaLabelledbyButton": this.nonFocusableButton ? undefined : this.ariaLabelledbyReference,
-			"ariaLabelButton": this.nonFocusableButton ? undefined : this.ariaLabelTxt,
 			"role": this.nonFixedInternalHeader ? "button" : undefined,
 		};
 	}
 
 	get ariaLabelledbyReference() {
-		if (this.ariaLabelledby || this.ariaLabel) {
-			return undefined;
-		}
-
 		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
 	}
 
-	get ariaLabelTxt() {
-		return getEffectiveAriaLabelText(this);
+	get header() {
+		return this.getDomRef().querySelector(`#${this._id}-header-title`);
 	}
 
 	get headerAriaLevel() {
@@ -424,11 +448,12 @@ class Panel extends UI5Element {
 		};
 	}
 
+	static get dependencies() {
+		return [Button];
+	}
+
 	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents"),
-			Button.define(),
-		]);
+		Panel.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }