refactor(ui5-card-header): rename status to additionalText (#8507)

Renames the `status` property to `additionalText` and its shadow part.

BREAKING CHANGE: The `status` property and its shadow part have been renamed. If you previously used them:
```html
<style>
    .cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>
```
Now use `additionalText` instead:
```html
<style>
       .cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>
```

Related to #8461

Author: dimovpetar

packages/main/src/CardHeader.hbs

@@ -33,9 +33,9 @@
 					>{{titleText}}</div>
 				{{/if}}
 
-				{{#if status}}
-					<div class="ui5-card-header-status">
-						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+				{{#if additionalText}}
+					<div class="ui5-card-header-additionalText">
+						<span id="{{_id}}-additionalText" part="additional-text" dir="auto">{{additionalText}}</span>
 					</div>
 				{{/if}}
 

packages/main/src/CardHeader.ts

@@ -25,7 +25,7 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js";
  * ### Overview
  *
  * The `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.
- * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `status`
+ * It displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`
  * and two slots: `avatar` and `action`.
  *
  * ### Keyboard handling
@@ -41,7 +41,7 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js";
  * @csspart root - Used to style the root DOM element of the CardHeader
  * @csspart title - Used to style the title of the CardHeader
  * @csspart subtitle - Used to style the subtitle of the CardHeader
- * @csspart status - Used to style the status of the CardHeader
+ * @csspart additional-text - Used to style the additional text of the CardHeader
  */
 @customElement({
 	tag: "ui5-card-header",
@@ -75,12 +75,12 @@ class CardHeader extends UI5Element {
 	subtitleText!: string;
 
 	/**
-	 * Defines the status text.
+	 * Defines the additional text.
 	 * @default ""
 	 * @public
 	*/
 	@property()
-	status!: string;
+	additionalText!: string;
 
 	/**
 	 * Defines if the component would be interactive,
@@ -158,8 +158,8 @@ class CardHeader extends UI5Element {
 			labels.push(`${this._id}-subtitle`);
 		}
 
-		if (this.status) {
-			labels.push(`${this._id}-status`);
+		if (this.additionalText) {
+			labels.push(`${this._id}-additionalText`);
 		}
 
 		if (this.hasAvatar) {

packages/main/src/themes/CardHeader.css

@@ -78,7 +78,7 @@
 	justify-content: space-between;
 }
 
-.ui5-card-header-status {
+.ui5-card-header-additionalText {
 	flex: none;
 }
 
@@ -105,7 +105,7 @@
 	border-radius: 50%;
 }
 
-.ui5-card-header .ui5-card-header-status {
+.ui5-card-header .ui5-card-header-additionalText {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);

packages/main/test/pages/Card.html

@@ -16,7 +16,7 @@
 		<ui5-card-header
 			id="cardHeader"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Quick Links"
 			subtitle-text="Quick links sub title"
 			interactive>
@@ -35,7 +35,7 @@
 		<ui5-card-header
 			id="cardHeader2"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Quick Links"
 			subtitle-text="Quick Links">
 			<ui5-icon name="group" slot="avatar"></ui5-icon>
@@ -99,7 +99,7 @@
 		<ui5-card-header
 			id="cardHeader2d"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Quick Links">
 			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
 		</ui5-card-header>
@@ -114,7 +114,7 @@
 		<ui5-card-header
 			id="cardHeader2e"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Long Long Long Long Long Long Title">
 			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
 		</ui5-card-header>
@@ -129,7 +129,7 @@
 		<ui5-card-header
 			id="cardHeader2f"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Title"
 			subtitle-text="Long long long long long long long long long long long long long subtitle">
 			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
@@ -145,7 +145,7 @@
 		<ui5-card-header
 			id="cardHeader2g"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Quick Links">
 		</ui5-card-header>
 		<div class="myTextContent">
@@ -159,7 +159,7 @@
 		<ui5-card-header
 			id="cardHeader2h"
 			slot="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Quick Links"
 			subtitle-text="Subtitle">
 			<ui5-button slot="action" design="Transparent" icon="overflow"></ui5-button>
@@ -192,7 +192,7 @@
 			id="actionCardHeader"
 			slot="header"
 			title-text="Linked Activities (5)"
-			status="4 of 10">
+			additional-text="4 of 10">
 			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
 		</ui5-card-header>
 
@@ -235,7 +235,7 @@
 			id="actionCardHeader2"
 			slot="header"
 			title-text="Linked Activities (5)"
-			status="4 of 10">
+			additional-text="4 of 10">
 			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
 		</ui5-card-header>
 
@@ -277,7 +277,7 @@
 		<ui5-card-header
 			slot="header"
 			id="header"
-			status="4 of 10"
+			additional-text="4 of 10"
 			title-text="Linked Activities (5)"
 			subtitle-text="Quick Links">
 		</ui5-card-header>

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

@@ -11,10 +11,10 @@ describe("Card general interaction", () => {
 		assert.ok(await card.isExisting(), "The component has shadow root.");
 	});
 
-	it("tests status is rendered, when action is set", async () => {
-		const status = await browser.$("#actionCardHeader").shadow$(".ui5-card-header-status");
+	it("tests additionalText is rendered, when action is set", async () => {
+		const additionalText = await browser.$("#actionCardHeader").shadow$(".ui5-card-header-additionalText");
 
-		assert.ok(await status.isExisting(), "The status DOM is rendered.");
+		assert.ok(await additionalText.isExisting(), "The element is rendered.");
 	});
 
 	it("tests interactive header results in interactive class on the card", async () => {
@@ -108,7 +108,7 @@ describe("CardHeader", () => {
 		const header2 = await browser.$("#header2").shadow$(".ui5-card-header .ui5-card-header-focusable-element");
 		const headerId = await browser.$("#header").getProperty("_id");
 		const headerId2 = await browser.$("#header2").getProperty("_id");
-		const EXPECTED_ARIA_LABELLEDBY_HEADER = `${headerId}-title ${headerId}-subtitle ${headerId}-status`;
+		const EXPECTED_ARIA_LABELLEDBY_HEADER = `${headerId}-title ${headerId}-subtitle ${headerId}-additionalText`;
 		const EXPECTED_ARIA_LABELLEDBY_HEADER2 = `${headerId2}-title ${headerId2}-subtitle`;
 
 		assert.strictEqual(await header.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER,
@@ -117,6 +117,7 @@ describe("CardHeader", () => {
 			"The aria-labelledby is correctly set.");
 	});
 });
+
 describe("Card Accessibility", () => {
 	before(async () => {
 		await browser.url(`test/pages/Card.html`);

packages/playground/_stories/main/Card/Card.stories.ts

@@ -33,12 +33,12 @@ const Template: UI5StoryArgs<Card, StoryArgsSlots> = (args) => {
 	`;
 };
 
-const header = (titleText: string, subtitleText: string, status?: string, actions?: string[], avatar?: string, interactive?: boolean) => {
+const header = (titleText: string, subtitleText: string, additionalText?: string, actions?: string[], avatar?: string, interactive?: boolean) => {
 	return `<ui5-card-header
 	slot="header"
 	title-text="${titleText}"
 	subtitle-text="${subtitleText}"
-	${status ? `status="${status}"` : ""}
+	${additionalText ? `additional-text="${additionalText}"` : ""}
 	${interactive ? "interactive" : ""}
 >
 	${avatar ? avatar : ""}

packages/playground/_stories/main/Card/CardHeader/CardHeader.stories.ts

@@ -20,7 +20,7 @@ const Template: UI5StoryArgs<CardHeader, StoryArgsSlots> = (args) => {
 	slot="header"
 	title-text="${ifDefined(args.titleText)}"
 	subtitle-text="${ifDefined(args.subtitleText)}"
-	status="${ifDefined(args.status)}"
+	additional-text="${ifDefined(args.additionalText)}"
 	?interactive="${ifDefined(args.interactive)}"
 	>
 	${unsafeHTML(args.avatar)}
@@ -40,7 +40,7 @@ Basic.tags = ["_hidden_"]
 Basic.args = {
 	titleText: "Team Space",
 	subtitleText: "Direct Reports",
-	status: "3 of 10",
+	additionalText: "3 of 10",
 	action: `<ui5-button design="Transparent" slot="action">View All</ui5-button>`,
 	avatar: `<ui5-icon name="group" slot="avatar"></ui5-icon>`,
 	interactive: true,

packages/website/docs/_samples/main/Card/Basic/sample.html

@@ -14,7 +14,7 @@
 
     <ui5-card>
         <ui5-card-header slot="header" title-text="This header is interactive"
-            subtitle-text="Click, press Enter or Space" status="3 of 6" interactive>
+            subtitle-text="Click, press Enter or Space" additional-text="3 of 6" interactive>
             <ui5-icon name="group" slot="avatar"></ui5-icon>
         </ui5-card-header>
         <ui5-list separators="None" style="margin-block-end: 0.75rem;">

packages/website/docs/_samples/main/Card/WithList/sample.html

@@ -13,7 +13,7 @@
     <!-- playground-fold-end -->
 
     <ui5-card>
-        <ui5-card-header slot="header" title-text="Team Space" subtitle-text="Direct Reports" status="3 of 10">
+        <ui5-card-header slot="header" title-text="Team Space" subtitle-text="Direct Reports" additional-text="3 of 10">
             <ui5-icon name="group" slot="avatar"></ui5-icon>
             <ui5-button design="Transparent" slot="action">View All</ui5-button>
         </ui5-card-header>

packages/website/docs/_samples/main/Card/WithTable/sample.html

@@ -13,7 +13,7 @@
     <!-- playground-fold-end -->
 
     <ui5-card>
-        <ui5-card-header slot="header" title-text="New Purchase Orders" subtitle-text="Today" status="3 of 15">
+        <ui5-card-header slot="header" title-text="New Purchase Orders" subtitle-text="Today" additional-text="3 of 15">
         </ui5-card-header>
 
         <ui5-table style="margin-block-end: 0.75rem;">