feat(core/blind): add sublabel property (#748)

siemens · Sep 6, 2023 · 6c8c665 · 6c8c665
1 parent 2e048fd
commit 6c8c665
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 9 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/blind-header-actions.ts b/packages/angular-test-app/src/preview-examples/blind-header-actions.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-blind label="Example" icon="info">
+    <ix-blind label="Example" icon="info" sublabel="Sublabel">
       <ix-icon-button
         id="context-menu"
         slot="header-actions"

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -96,14 +96,14 @@ export declare interface IxBasicNavigation extends Components.IxBasicNavigation
 
 
 @ProxyCmp({
-  inputs: ['collapsed', 'icon', 'label']
+  inputs: ['collapsed', 'icon', 'label', 'sublabel']
 })
 @Component({
   selector: 'ix-blind',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['collapsed', 'icon', 'label'],
+  inputs: ['collapsed', 'icon', 'label', 'sublabel'],
 })
 export class IxBlind {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -427,11 +427,13 @@
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
-        "ix-icon"
+        "ix-icon",
+        "ix-typography"
       ],
       "dependencyGraph": {
         "ix-blind": [
-          "ix-icon"
+          "ix-icon",
+          "ix-typography"
         ]
       },
       "props": [
@@ -488,6 +490,27 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "sublabel",
+          "type": "string",
+          "mutable": false,
+          "attr": "sublabel",
+          "reflectToAttr": false,
+          "docs": "Secondary label inside blind header",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -11412,6 +11435,7 @@
       "encapsulation": "shadow",
       "dependents": [
         "ix-action-card",
+        "ix-blind",
         "ix-card-list",
         "ix-content-header",
         "ix-dropdown-header",
@@ -11429,6 +11453,9 @@
         "ix-action-card": [
           "ix-typography"
         ],
+        "ix-blind": [
+          "ix-typography"
+        ],
         "ix-card-list": [
           "ix-typography"
         ],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -170,6 +170,11 @@ export namespace Components {
           * Label of blind
          */
         "label": string;
+        /**
+          * Secondary label inside blind header
+          * @since 2.0.0
+         */
+        "sublabel": string;
     }
     interface IxBreadcrumb {
         /**
@@ -3144,6 +3149,11 @@ declare namespace LocalJSX {
           * Collapsed state changed
          */
         "onCollapsedChange"?: (event: IxBlindCustomEvent<boolean>) => void;
+        /**
+          * Secondary label inside blind header
+          * @since 2.0.0
+         */
+        "sublabel"?: string;
     }
     interface IxBreadcrumb {
         /**

diff --git a/packages/core/src/components/blind/blind.scss b/packages/core/src/components/blind/blind.scss
@@ -46,6 +46,21 @@
       padding: $tiny-space $small-space;
     }
 
+    ix-typography,
+    .blind-header-title-label,
+    .blind-header-title-sublabel {
+      @include ellipsis;
+      flex-grow: 1;
+    }
+
+    .blind-header-title-label {
+      padding-inline-end: 0.5rem;
+    }
+
+    .blind-header-title-sublabel {
+      padding-inline: 0.5rem;
+    }
+
     .blind-header-title,
     .blind-header-title-basic {
       @include ellipsis;

diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx
@@ -37,6 +37,12 @@ export class Blind {
    */
   @Prop() label: string;
 
+  /**
+   * Secondary label inside blind header
+   * @since 2.0.0
+   */
+  @Prop() sublabel: string;
+
   /**
    * Optional icon to be displayed next to the header label
    * @since 1.5.0
@@ -148,7 +154,23 @@ export class Blind {
                 ) : (
                   ''
                 )}
-                <span class="blind-header-title-default">{this.label}</span>
+                <ix-typography format="label-lg" bold>
+                  <div class="blind-header-title-label" title={this.label}>
+                    {this.label}
+                  </div>
+                </ix-typography>
+                {this.sublabel !== undefined ? (
+                  <ix-typography color="soft">
+                    <div
+                      class="blind-header-title-sublabel"
+                      title={this.sublabel}
+                    >
+                      {this.sublabel}
+                    </div>
+                  </ix-typography>
+                ) : (
+                  ''
+                )}
                 <span
                   class="header-actions"
                   onClick={(e) => e.stopImmediatePropagation()}

diff --git a/packages/core/src/tests/blind/blind.e2e.ts b/packages/core/src/tests/blind/blind.e2e.ts
@@ -17,6 +17,12 @@ regressionTest.describe('blind', () => {
     expect(await blind.screenshot()).toMatchSnapshot();
   });
 
+  regressionTest('sublabel', async ({ page }) => {
+    await page.goto('blind/sublabel');
+    const blind = await page.waitForSelector('ix-blind');
+    expect(await blind.screenshot()).toMatchSnapshot();
+  });
+
   regressionTest('collapsed', async ({ page }) => {
     await page.goto('blind/basic');
     await page.locator('.blind-header').click();

diff --git a/...blind.e2e.ts-snapshots/blind-sublabel-1-chromium---theme-classic-dark-linux.png b/...blind.e2e.ts-snapshots/blind-sublabel-1-chromium---theme-classic-dark-linux.png
diff --git a/...lind.e2e.ts-snapshots/blind-sublabel-1-chromium---theme-classic-light-linux.png b/...lind.e2e.ts-snapshots/blind-sublabel-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/blind/sublabel/index.html b/packages/core/src/tests/blind/sublabel/index.html
@@ -0,0 +1,22 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-blind label="Some label" sublabel="Some sublabel">
+      <div>Content!</div>
+    </ix-blind>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/blind-header-actions.html b/packages/html-test-app/src/preview-examples/blind-header-actions.html
@@ -11,7 +11,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <ix-blind label="Example" icon="info">
+    <ix-blind label="Example" icon="info" sublabel="Sublabel">
       <ix-icon-button
         id="context-menu"
         slot="header-actions"

diff --git a/packages/react-test-app/src/preview-examples/blind-header-actions.tsx b/packages/react-test-app/src/preview-examples/blind-header-actions.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 export default () => {
   return (
     <>
-      <IxBlind label="Example">
+      <IxBlind label="Example" sublabel="Sublabel">
         <IxIconButton
           id="context-menu"
           slot="header-actions"

diff --git a/packages/vue-test-app/src/preview-examples/blind-header-actions.vue b/packages/vue-test-app/src/preview-examples/blind-header-actions.vue
@@ -12,7 +12,7 @@ import { IxBlind, IxDropdown, IxIconButton } from '@siemens/ix-vue';
 </script>
 
 <template>
-  <IxBlind label="Example">
+  <IxBlind label="Example" sublabel="Sublabel">
     <IxIconButton
       slot="header-actions"
       id="context-menu"

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -40,6 +40,7 @@ export const IxBasicNavigation = /*@__PURE__*/ defineContainer<JSX.IxBasicNaviga
 export const IxBlind = /*@__PURE__*/ defineContainer<JSX.IxBlind>('ix-blind', undefined, [
   'collapsed',
   'label',
+  'sublabel',
   'icon',
   'collapsedChange'
 ]);