fix(core/event-list-item): replace generic hover values with event-li…

…st hover values
siemens · Oct 21, 2022 · 385f12f · 385f12f
1 parent fc00042
commit 385f12f
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 32 deletions.
diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss
@@ -24,6 +24,14 @@ $height-single-line: 2.5rem;
   overflow: hidden;
   cursor: pointer;
 
+  @include hover {
+    background-color: var(--theme-event-item--background--hover);
+  }
+
+  @include active {
+    background-color: var(--theme-event-item--background--active);
+  }
+
   .indicator {
     height: 100%;
     width: $small-space;
@@ -38,7 +46,7 @@ $height-single-line: 2.5rem;
     border-right: none;
   }
 
-  .cui-event-list-item-content-container {
+  .event-list-item-container {
     @include ellipsis;
 
     display: flex;
@@ -53,6 +61,31 @@ $height-single-line: 2.5rem;
     border-bottom-right-radius: $default-border-radius;
     border-left: none;
     padding-left: $default-space;
+
+    @include hover {
+      border-color: var(--theme-event-item--border--hover);
+    }
+
+    @include active {
+      border-color: var(--theme-event-item--border--active);
+    }
+  }
+
+  &.selected:not(:active, .active) {
+    .event-list-item-container {
+      background-color: var(--theme-event-item--background--selected);
+      border-color: var(--theme-event-item--border--selected);
+    }
+  }
+
+  &[disabled],
+  &.disabled {
+    pointer-events: none;
+
+    .event-list-item-container {
+      background-color: var(--theme-event-item--background--disabled);
+      border-color: var(--theme-event-item--border--disabled);
+    }
   }
 
   .chevron-icon {
@@ -71,22 +104,5 @@ $height-single-line: 2.5rem;
     overflow: hidden;
   }
 
-  @include hover {
-    background-color: var(--theme-event-list-item-hover);
-  }
-
-  @include active {
-    background-color: var(--theme-event-list-item-pressed);
-  }
-
-  &.selected {
-    background-color: var(--theme-event-item--background--selected);
-  }
-
-  &[disabled],
-  &.disabled {
-    pointer-events: none;
-  }
-
   margin-bottom: $small-space;
 }
diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx
@@ -8,13 +8,13 @@
  */
 
 import {
-    Component,
-    Element,
-    Event,
-    EventEmitter,
-    h,
-    Listen,
-    Prop
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Listen,
+  Prop,
 } from '@stencil/core';
 
 @Component({
@@ -83,7 +83,7 @@ export class EventListItem {
           }}
         ></div>
 
-        <div class="cui-event-list-item-content-container">
+        <div class="event-list-item-container">
           <div class="event-content">
             <slot></slot>
           </div>

diff --git a/packages/core/src/components/event-list/event-list.scss b/packages/core/src/components/event-list/event-list.scss
@@ -54,7 +54,7 @@ ul {
       border-bottom-left-radius: 0px;
     }
 
-    .cui-event-list-item-content-container {
+    .event-list-item-container {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-left-radius: 0;
@@ -67,7 +67,7 @@ ul {
   }
 
   .compact:not(:last-child) {
-    .cui-event-list-item-content-container {
+    .event-list-item-container {
       border-bottom: none;
     }
   }

diff --git a/packages/core/src/components/event-list/test/basic/index.html b/packages/core/src/components/event-list/test/basic/index.html
@@ -15,9 +15,13 @@
   </head>
   <body>
     <ix-event-list>
-      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary" disabled
+        >Text 1</ix-event-list-item
+      >
       <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary" selected
+        >Text 3</ix-event-list-item
+      >
       <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
     </ix-event-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>

diff --git a/packages/core/src/components/event-list/test/compact/index.html b/packages/core/src/components/event-list/test/compact/index.html
@@ -15,9 +15,13 @@
   </head>
   <body>
     <ix-event-list compact>
-      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary" disabled
+        >Text 1</ix-event-list-item
+      >
       <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
-      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary" selected
+        >Text 3</ix-event-list-item
+      >
       <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
     </ix-event-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>

diff --git a/...ist.e2e.ts-snapshots/event-list-basic-1-chromium---theme-classic-dark-linux.png b/...ist.e2e.ts-snapshots/event-list-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...st.e2e.ts-snapshots/event-list-basic-1-chromium---theme-classic-light-linux.png b/...st.e2e.ts-snapshots/event-list-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...t.e2e.ts-snapshots/event-list-compact-1-chromium---theme-classic-dark-linux.png b/...t.e2e.ts-snapshots/event-list-compact-1-chromium---theme-classic-dark-linux.png
diff --git a/....e2e.ts-snapshots/event-list-compact-1-chromium---theme-classic-light-linux.png b/....e2e.ts-snapshots/event-list-compact-1-chromium---theme-classic-light-linux.png