feat(core/expanding-search): update styling for brand and classic themes

siemens · Aug 12, 2022 · 13d74f2 · 13d74f2
1 parent e195c81
commit 13d74f2
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 81 deletions.
diff --git a/packages/core/src/components/expanding-search/expanding-search.scss b/packages/core/src/components/expanding-search/expanding-search.scss
@@ -2,32 +2,37 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import 'variables';
+@import '../../../scss/v7/common-variables';
+@import '../../../scss/v7/mixins/hover';
+@import '../../../scss/v7/mixins/text-truncation';
 
 $container-width: 11.5625rem;
 
 :host {
-  .exp-container {
-    display: flex;
-    width: $container-width;
-    height: $x-large-space;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  width: $container-width;
+  height: $x-large-space;
+  align-items: center;
+  justify-content: space-between;
+
+  .input-container {
     transition: all 0.3s ease-in-out;
   }
 
   .disable-pointer {
     pointer-events: none;
   }
 
+  input {
+    box-shadow: var(--theme-input--box-shadow);
+  }
+
   .expanded {
     width: $container-width;
-    transition: all 0.3s ease-in-out;
   }
 
   .collapsed {
-    width: 0px;
-    transition: all 0.3s ease-in-out;
+    width: $large-space;
     border: none;
   }
 
@@ -42,25 +47,37 @@ $container-width: 11.5625rem;
     display: flex;
     max-width: $x-large-space;
     max-height: $x-large-space;
-    border-radius: $default-border-radius;
+    border-radius: var(--theme-input--border-radius);
     transition: all 0.15s ease-in-out;
     z-index: 1;
     align-items: center;
     position: relative;
-  }
+    border: none;
+
+    @include hover {
+      border-color: transparent;
+    }
+
+    @include active {
+      border-color: transparent;
+    }
 
-  .btn-search:hover:not(:active) {
-    transition: 0.15s;
-    background-color: var(--theme-ghost-hover);
+    @include focus {
+      outline: none;
+    }
+
+    @include focus-visible {
+      outline: var(--focus--border-color);
+      outline-width: 1px;
+      outline-style: solid;
+    }
   }
 
   .btn-search:active {
-    background-color: var(--theme-color-1) !important;
     width: $x-large-space;
     height: $x-large-space;
-    border-radius: $default-border-radius;
+    border-radius: var(--theme-input--border-radius);
     border: var(--theme-std-bdr-1) !important;
-    transition: 0.15s ease-in-out;
   }
 
   /*expanded view*/
@@ -73,23 +90,20 @@ $container-width: 11.5625rem;
 
   .btn-clear {
     position: absolute;
-    border-radius: $default-border-radius;
+    border-radius: var(--theme-input--border-radius);
     right: 0px;
   }
 
   .input {
     padding-left: $x-large-space !important;
     padding-right: 2.5rem !important;
-    transition: all 0.3s ease-in-out;
   }
 
-  .opacityBefore {
+  .opacity-before {
     opacity: 0;
-    transition: all 0.3s ease-in-out;
   }
 
-  .opacityAfter {
-    opacity: 100;
-    transition: all 0.3s ease-in-out;
+  .opacity-after {
+    opacity: 1;
   }
 }
diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx
@@ -2,7 +2,15 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
 
 @Component({
   tag: 'cw-expanding-search',
@@ -27,9 +35,7 @@ export class ExpandingSearch {
 
   @State() isFieldChanged = false;
 
-  @State() size: '32' | '24' | '16' = '24';
-
-  @State() toggle = false;
+  @State() expanded = false;
 
   @State() hasFocus = false;
 
@@ -39,35 +45,21 @@ export class ExpandingSearch {
   @Event() valueChange: EventEmitter<string>;
 
   private expandInput() {
-    window.removeEventListener('click', this.callback);
     setTimeout(this.focusTextInput, 300);
-    this.toggle = true;
-    this.size = '16';
+    this.expanded = true;
   }
 
   private collapseInput() {
-    if (!this.isFieldChanged && this.toggle) {
-      this.toggle = false;
-      this.size = '24';
+    if (!this.isFieldChanged && this.expanded) {
+      this.expanded = false;
     }
   }
 
-  private mouseDown() {
-    window.addEventListener('click', this.callback);
-    this.size = '16';
-  }
-
   private clearInput() {
     this.value = '';
     this.isFieldChanged = false;
   }
 
-  private readonly callback = this.clickEvent.bind(this);
-
-  private clickEvent() {
-    this.size = '24';
-  }
-
   private onChange(e: InputEvent) {
     this.value = (e.target as HTMLInputElement).value;
     if (this.isFieldChanged && this.value === '') {
@@ -97,42 +89,74 @@ export class ExpandingSearch {
 
   render() {
     return (
-      <Host>
-        <div class="exp-container">
-          <button
-            class={{ 'btn': true, 'btn-invisible-secondary': true, 'btn-icon': true, 'btn-search': true, 'disable-pointer': this.toggle }}
-            data-testid="button"
-            onClick={() => this.expandInput()}
-            onMouseDown={() => this.mouseDown()}
-          >
-            <cw-icon
-              class={{
-                ['btn-search-icon']: true,
-              }}
-              name={this.icon}
-              size={this.size}
-              color={this.hasFocus ? 'input-search-icon--color' : undefined}
-            ></cw-icon>
-          </button>
-
-          <div class={{ 'expanded': this.toggle, 'collapsed': !this.toggle, 'disable-pointer': !this.toggle, 'input-container': true }} data-testid="input-wrapper">
-            <input
-              class={{ 'form-control': true, 'input': this.toggle, 'disable-pointer': !this.toggle, 'opacityBefore': !this.toggle, 'opacityAfter': this.toggle }}
-              ref={el => (this.textInput = el)}
-              data-testid="input"
-              placeholder={this.placeholder}
-              type="text"
-              value={this.value}
-              onBlur={() => {
-                this.collapseInput();
-                this.hasFocus = false;
-              }}
-              onFocus={() => (this.hasFocus = true)}
-              onInput={(e: InputEvent) => this.onChange(e)}
+      <Host
+        class={{
+          expanded: this.expanded,
+        }}
+      >
+        <button
+          class={{
+            btn: true,
+            'btn-invisible-primary': true,
+            'btn-icon': true,
+            'btn-search': true,
+            'disable-pointer': this.expanded,
+          }}
+          data-testid="button"
+          onClick={() => this.expandInput()}
+          tabindex={this.expanded ? -1 : 0}
+        >
+          <cw-icon
+            class="btn-search-icon"
+            name={this.icon}
+            size={this.expanded ? '16' : '24'}
+            color={
+              this.hasFocus ? 'input-search-icon--color--focus' : undefined
+            }
+          ></cw-icon>
+        </button>
+
+        <div
+          class={{
+            expanded: this.expanded,
+            collapsed: !this.expanded,
+            'disable-pointer': !this.expanded,
+            'input-container': true,
+          }}
+          data-testid="input-wrapper"
+        >
+          <input
+            class={{
+              'form-control': true,
+              input: this.expanded,
+              'disable-pointer': !this.expanded,
+              'opacity-before': !this.expanded,
+              'opacity-after': this.expanded,
+            }}
+            ref={(el) => (this.textInput = el)}
+            data-testid="input"
+            placeholder={this.placeholder}
+            type="text"
+            value={this.value}
+            onBlur={() => {
+              this.collapseInput();
+              this.hasFocus = false;
+            }}
+            onFocus={() => (this.hasFocus = true)}
+            onInput={(e: InputEvent) => this.onChange(e)}
+            tabindex={this.expanded ? 0 : -1}
+          />
+
+          {this.isFieldChanged ? (
+            <cw-icon-button
+              class="btn-clear"
+              icon="clear"
+              ghost={true}
+              size="24"
+              data-testid="clear-button"
+              onClick={() => this.clearClicked()}
             />
-
-            {this.isFieldChanged ? <cw-icon-button class="btn-clear" icon="clear" ghost={true} size="24" data-testid="clear-button" onClick={() => this.clearClicked()} /> : null}
-          </div>
+          ) : null}
         </div>
       </Host>
     );