Smart component: Fix input css issue

Author: aprentout

addon/components/o-s-s/smart/immersive/select.hbs

@@ -42,6 +42,7 @@
         @loadingMore={{@loadingMore}}
         @onBottomReached={{@onBottomReached}}
         @enableKeyboard={{true}}
+        @searchEnabled={{@searchEnabled}}
         class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
         id={{this.portalId}}
         {{on "click" this.noop}}

addon/components/o-s-s/smart/immersive/select.ts

@@ -17,6 +17,7 @@ interface OSSSmartImmersiveSelectComponentSignature extends BaseDropdownArgs {
   maxItemWidth?: number;
   addressableAs?: string;
   multiple?: boolean;
+  searchEnabled?: boolean;
   onChange?: (item: string) => void;
   onSearch?: (keyword: string) => void;
   onBottomReached?: () => void;

addon/components/o-s-s/smart/input.hbs

@@ -18,8 +18,8 @@
       </div>
     {{else}}
       {{#if @loading}}
-        <div class="smart-input__animated-text fx-row fx-xalign-center upf-input wrapper">
-          <span class="rainbow rainbow_text_animated">{{@placeholder}}</span>
+        <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+          <span class="smart_text_animated">{{@placeholder}}</span>
         </div>
       {{else}}
         <Input

app/styles/atoms/smart-input.less

@@ -4,30 +4,40 @@
   .oss-input-container {
     width: 100%;
     position: relative;
-  }
-
-  .smart-input__animated-text {
-    .smart-input__animated-text--normal.text {
-      color: transparent;
-      width: 100%;
-    }
+    display: flex;
 
-    .upf-input {
+    .loading-placeholder {
+      pointer-events: none;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      width: fit-content;
       position: relative;
-      width: 100%;
-      border: 1px solid var(--color-gray-100);
     }
 
-    &.smart-input-wrapper {
-      position: relative;
-      border: none;
-      min-width: 50px;
+    .upf-input.loading-placeholder {
+      padding: 0px;
     }
 
-    .smart-input__animated-text--normal {
-      .font-weight-semibold;
-      color: var(--color-gray-400);
-      padding: 5px var(--spacing-px-6);
+    .smart_text_animated {
+      background: var(--color-gray-400);
+      background: linear-gradient(
+        130deg,
+        var(--color-gray-400) 18%,
+        var(--color-gray-300) 25%,
+        rgba(250, 198, 255, 1) 56%,
+        var(--color-primary-100) 62%,
+        var(--color-white) 66%,
+        rgba(250, 198, 255, 0.58) 68%,
+        var(--color-gray-300) 73%,
+        var(--color-gray-400) 85%
+      );
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+      background-size: 600% 100%;
+      padding: 6px 12px;
     }
   }
 }

app/styles/oss-components.less

@@ -47,6 +47,8 @@
 @import 'atoms/social-post-badge';
 @import 'atoms/pulsating-dot';
 @import 'atoms/pill';
+@import 'atoms/smart-input';
+@import 'atoms/smart-feedback';
 @import 'atoms/smart/immersive-input';
 @import 'atoms/smart/immersive-currency-input';
 @import 'atoms/smart/immersive-select';

tests/dummy/app/templates/smart.hbs

@@ -345,23 +345,20 @@
         @label="Label"
         @placeholder="Placeholder"
         @loading={{this.toggleInputLoadingValue}}
-        @generating={{this.toggleInputGeneratingValue}}
       />
 
       <OSS::Smart::Input
         @value={{null}}
         @label="Label"
         @placeholder="Placeholder"
         @loading={{this.toggleInputLoadingValue}}
-        @generating={{this.toggleInputGeneratingValue}}
       />
 
       <OSS::Smart::Input
         @value={{"value"}}
         @label="Label"
         @placeholder="Placeholder"
         @loading={{this.toggleInputLoadingValue}}
-        @generating={{this.toggleInputGeneratingValue}}
       />
     </div>
     <div

tests/integration/components/o-s-s/smart/input-test.ts

@@ -111,7 +111,7 @@ module('Integration | Component | o-s-s/smart/input', function (hooks) {
         />
       `);
 
-      assert.dom('.rainbow_text_animated').hasText('Smart...');
+      assert.dom('.smart_text_animated').hasText('Smart...');
     });
   });