feat(core/blind): add icon and actions slot

packages/angular-test-app/src/preview-examples/blind-header-actions.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ix-blind label="Example" icon="info">
+      <ix-icon-button
+        id="context-menu"
+        slot="header-actions"
+        icon="context-menu"
+      ></ix-icon-button>
+      <ix-dropdown trigger="context-menu">test</ix-dropdown>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-blind>
+  `,
+})
+export default class Blind {}

packages/angular/src/components.ts

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

packages/core/component-doc.json

@@ -281,8 +281,14 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependencies": [
+        "ix-icon"
+      ],
+      "dependencyGraph": {
+        "ix-blind": [
+          "ix-icon"
+        ]
+      },
       "props": [
         {
           "name": "collapsed",
@@ -301,6 +307,27 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "icon",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "Optional icon to be displayed next to the header label",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "1.5.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -3909,6 +3936,7 @@
       "encapsulation": "scoped",
       "dependents": [
         "ix-animated-tabs",
+        "ix-blind",
         "ix-breadcrumb",
         "ix-category-filter",
         "ix-chip",
@@ -3937,6 +3965,9 @@
         "ix-animated-tabs": [
           "ix-icon"
         ],
+        "ix-blind": [
+          "ix-icon"
+        ],
         "ix-breadcrumb": [
           "ix-icon"
         ],

packages/core/src/components.d.ts

@@ -92,6 +92,11 @@ export namespace Components {
           * Collapsed state
          */
         "collapsed": boolean;
+        /**
+          * Optional icon to be displayed next to the header label
+          * @since 1.5.0
+         */
+        "icon": string;
         /**
           * Label of blind
          */
@@ -2398,6 +2403,11 @@ declare namespace LocalJSX {
           * Collapsed state
          */
         "collapsed"?: boolean;
+        /**
+          * Optional icon to be displayed next to the header label
+          * @since 1.5.0
+         */
+        "icon"?: string;
         /**
           * Label of blind
          */

packages/core/src/components/blind/blind.scss

@@ -45,14 +45,23 @@
       padding: $tiny-space $small-space;
     }
 
-    .blind-header-title {
+    .blind-header-title,
+    .blind-header-title-basic {
       @include ellipsis;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
 
       .blind-header-title-default {
         @include text-l-title;
+        flex-grow: 1;
       }
     }
 
+    .blind-header-title-basic ix-icon {
+      margin-inline-end: $small-space;
+    }
+
     @include hover {
       background-color: var(--theme-blind-header-open--background--hover);
 
@@ -94,11 +103,6 @@
     }
   }
 
-  .blind-custom-header {
-    display: flex;
-    align-items: center;
-  }
-
   .blind-content {
     display: block;
     padding: 1rem;

packages/core/src/components/blind/blind.tsx

@@ -35,6 +35,12 @@ export class Blind {
    */
   @Prop() label: string;
 
+  /**
+   * Optional icon to be displayed next to the header label
+   * @since 1.5.0
+   */
+  @Prop() icon: string;
+
   /**
    * Collapsed state changed
    */
@@ -47,6 +53,10 @@ export class Blind {
   constructor() {}
 
   private onHeaderClick(e: Event) {
+    if ((e.target as Element).closest('.header-actions')) {
+      return;
+    }
+
     e.preventDefault();
     e.stopImmediatePropagation();
 
@@ -124,7 +134,17 @@ export class Blind {
           ></span>
           <div class="blind-header-title">
             {this.label !== undefined ? (
-              <span class="blind-header-title-default">{this.label}</span>
+              <span class="blind-header-title-basic">
+                {this.icon !== undefined ? (
+                  <ix-icon name={this.icon}></ix-icon>
+                ) : (
+                  ''
+                )}
+                <span class="blind-header-title-default">{this.label}</span>
+                <span class="header-actions">
+                  <slot name="header-actions"></slot>
+                </span>
+              </span>
             ) : (
               <slot name="custom-header"></slot>
             )}

packages/core/src/tests/blind/blind.e2e.ts

@@ -25,4 +25,11 @@ regressionTest.describe('blind', () => {
     const blind = await page.waitForSelector('ix-blind');
     expect(await blind.screenshot()).toMatchSnapshot();
   });
+
+  regressionTest('header-actions', async ({ page }) => {
+    await page.goto('blind/header-actions');
+    await page.locator('#context-menu').click();
+    await page.waitForSelector('ix-dropdown.show');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/core/src/tests/blind/header-actions/index.html

@@ -0,0 +1,32 @@
+<!--
+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" icon="info">
+      <ix-icon-button
+        id="context-menu"
+        icon="context-menu"
+        slot="header-actions"
+      ></ix-icon-button>
+      <div>Content!</div>
+    </ix-blind>
+    <ix-dropdown trigger="context-menu">
+      <ix-dropdown-item label="Rename..." icon="rename"></ix-dropdown-item>
+      <ix-dropdown-item label="Delete" icon="trashcan"></ix-dropdown-item>
+    </ix-dropdown>
+
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/documentation/docs/controls/_blind_code.md

@@ -1,3 +1,5 @@
+import { ApiTableSinceTag } from '@site/src/components/ApiTableTag';
+
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 import Props from './../auto-generated/ix-blind/props.md';
@@ -9,6 +11,11 @@ import SourceVue from './../auto-generated/previews/vue/blind.md'
 import SourceAngularTs from './../auto-generated/previews/angular/blind.ts.md'
 import SourceAngularHtml from './../auto-generated/previews/angular/blind.html.md'
 
+import WebComponentHeaderActions from './../auto-generated/previews/web-component/blind-header-actions.md'
+import SourceReactHeaderActions from './../auto-generated/previews/react/blind-header-actions.md'
+import SourceVueHeaderActions from './../auto-generated/previews/vue/blind-header-actions.md'
+import SourceAngularHeaderActions from './../auto-generated/previews/angular/blind-header-actions.ts.md'
+
 import Playground from '@site/src/components/Playground'
 
 <Playground
@@ -25,6 +32,21 @@ frameworks={{
 }}>
 </Playground>
 
+### Header actions
+
+<ApiTableSinceTag message="1.5.0" />
+
+<Playground
+name="blind-header-actions"
+height="16rem"
+frameworks={{
+    react: SourceReactHeaderActions,
+    angular: SourceAngularHeaderActions,
+    javascript: WebComponentHeaderActions,
+    vue: SourceVueHeaderActions
+}}>
+</Playground>
+
 ### Properties
 
 #### Props
@@ -33,4 +55,4 @@ frameworks={{
 
 #### Events
 
-<Events / >
+<Events />

packages/html-test-app/src/preview-examples/blind-header-actions.html

@@ -0,0 +1,38 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Blind example</title>
+  </head>
+  <body class="theme-brand-dark">
+    <!-- Preview code -->
+    <ix-blind label="Example" icon="info">
+      <ix-icon-button
+        id="context-menu"
+        slot="header-actions"
+        icon="context-menu"
+      ></ix-icon-button>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </ix-blind>
+    <ix-dropdown trigger="context-menu">
+      <ix-dropdown-item label="Rename..." icon="rename"></ix-dropdown-item>
+      <ix-dropdown-item label="Delete" icon="trashcan"></ix-dropdown-item>
+    </ix-dropdown>
+
+    <!-- Preview code -->
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>

packages/react-test-app/src/preview-examples/blind-header-actions.tsx

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  IxBlind,
+  IxDropdown,
+  IxDropdownItem,
+  IxIconButton,
+} from '@siemens/ix-react';
+import React from 'react';
+
+export default () => {
+  return (
+    <>
+      <IxBlind label="Example">
+        <IxIconButton icon="info" id="context-menu"></IxIconButton>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet.
+      </IxBlind>
+      <IxDropdown trigger={'context-menu'}>
+        <IxDropdownItem icon="rename">Rename...</IxDropdownItem>
+        <IxDropdownItem icon="trashcan">Delete</IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};