fix(core/map-navigation): use ix-application-header for header part (#…

…169)
siemens · Nov 23, 2022 · de31afa · de31afa
1 parent ec6744a
commit de31afa
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 22 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -186,12 +186,16 @@
       "docsTags": [],
       "encapsulation": "shadow",
       "dependents": [
-        "ix-basic-navigation"
+        "ix-basic-navigation",
+        "ix-map-navigation"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "ix-basic-navigation": [
           "ix-application-header"
+        ],
+        "ix-map-navigation": [
+          "ix-application-header"
         ]
       },
       "props": [
@@ -4326,11 +4330,13 @@
       "dependents": [],
       "dependencies": [
         "ix-map-navigation-overlay",
+        "ix-application-header",
         "ix-icon-button"
       ],
       "dependencyGraph": {
         "ix-map-navigation": [
           "ix-map-navigation-overlay",
+          "ix-application-header",
           "ix-icon-button"
         ],
         "ix-map-navigation-overlay": [

diff --git a/packages/core/src/components/application-header/application-header.scss b/packages/core/src/components/application-header/application-header.scss
@@ -32,5 +32,6 @@
     position: relative;
     height: 32px;
     overflow: hidden;
+    line-height: 0rem;
   }
 }
diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
@@ -41,7 +41,7 @@ export class ApplicationHeader {
         <div class="logo">
           <slot name="logo"></slot>
         </div>
-        <span class="name">{this.name}</span>
+        <div class="name">{this.name}</div>
         <slot></slot>
       </Host>
     );

diff --git a/packages/core/src/components/application-header/test/cw-application-header.spec.tsx b/packages/core/src/components/application-header/test/cw-application-header.spec.tsx
@@ -24,9 +24,9 @@ describe('ix-application-header', () => {
         <div class="logo">
           <slot name="logo"></slot>
         </div>
-        <span class="name">
+        <div class="name">
           Test App
-        </span>
+        </div>
         <slot></slot>
       </mock:shadow-root>
       <div slot="logo">

diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -80,21 +80,11 @@
       width: 100%;
       padding: 0 $default-space;
 
+      --theme-app-header-logo--color: var(--theme-color-std-text);
+
       button {
         margin-left: $default-space;
       }
-
-      .map-nav-brand-logo {
-        min-width: 4.75rem;
-        margin-inline-end: 3.5rem;
-      }
-
-      .map-nav-brand-title {
-        @include text-l-title;
-        @include ellipsis;
-        color: var(--theme-map-navigation-header--color);
-        flex-grow: 1;
-      }
     }
   }
 

diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -205,12 +205,12 @@ export class MapNavigation {
         <div class="map-nav">
           <div class="map-nav-sidebar">
             <div class="map-nav-header">
-              <div class="map-nav-header-brand">
-                <div class="map-nav-brand-logo">
-                  <slot name="logo"></slot>
-                </div>
-                <span class="map-nav-brand-title">{this.applicationName}</span>
-              </div>
+              <ix-application-header
+                name={this.applicationName}
+                class="map-nav-header-brand"
+              >
+                <slot name="logo"></slot>
+              </ix-application-header>
             </div>
             <div class="map-nav-sidebar-content">
               <div class="map-nav-sidebar-static-content">

diff --git a/...e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/map-navigation-basic-1-chromium---theme-classic-light-linux.png