feat(components/lookup): tokenize autocomplete styles (#2902)

blackbaud · Nov 13, 2024 · 1a15087 · 1a15087
1 parent 3da9930
commit 1a15087
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 38 deletions.
diff --git a/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts b/apps/e2e/lookup-storybook-e2e/src/e2e/autocomplete.component.cy.ts
@@ -93,5 +93,5 @@ describe('lookup-storybook', () => {
         );
       });
     });
-  });
+  }, true);
 });
diff --git a/libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.html b/libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.html
@@ -68,7 +68,7 @@
             }
           }
           @if (searchResults.length === 0) {
-            <div class="sky-deemphasized sky-padding-squish-default">
+            <div class="sky-font-deemphasized sky-autocomplete-no-results">
               {{
                 noResultsFoundText ||
                   ('skyux_autocomplete_no_results' | skyLibResources)

diff --git a/libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.scss b/libs/components/lookup/src/lib/modules/autocomplete/autocomplete.component.scss
@@ -1,9 +1,51 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as defaultMixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides(
+  '.sky-autocomplete-results-container'
+) {
+  --sky-override-autocomplete-results-container-background-color: #{$sky-color-white};
+  --sky-override-autocomplete-results-container-border-radius: 0;
+  --sky-override-autocomplete-results-padding: 4px;
+  --sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
+  --sky-override-autocomplete-result-margin-bottom: 4px;
+  --sky-override-autocomplete-result-padding: 3px #{$sky-padding-double};
+  --sky-override-autocomplete-result-background-color: transparent;
+  --sky-override-autocomplete-result-box-shadow: none;
+  --sky-override-autocomplete-result-focus-background-color: #{$sky-background-color-neutral-light};
+  --sky-override-autocomplete-result-focus-box-shadow: none;
+  --sky-override-autocomplete-no-results-font-size: 15px;
+  --sky-override-autocomplete-results-no-results-padding: 4px;
+}
+
+::ng-deep {
+  @include compatMixins.sky-modern-overrides(
+    '.sky-autocomplete-results-container',
+    false
+  ) {
+    --sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
+    --sky-override-autocomplete-result-margin-bottom: 0;
+    --sky-override-autocomplete-result-padding: #{$sky-theme-modern-space-sm 0
+      $sky-theme-modern-space-sm $sky-theme-modern-space-md};
+    --sky-override-autocomplete-no-results-font-size: 15px;
+    --sky-override-autocomplete-results-no-results-padding: var(
+        --sky-space-inset-vertical-top-s
+      )
+      0 var(--sky-space-inset-vertical-bottom-s);
+  }
+}
 
 .sky-autocomplete-results-container {
   position: fixed;
-  background-color: $sky-color-white;
+  background-color: var(
+    --sky-override-autocomplete-results-container-background-color,
+    var(--sky-color-background-container-menu)
+  );
+  border-radius: var(
+    --sky-override-autocomplete-results-container-border-radius,
+    var(--sky-border-radius-s)
+  );
 }
 
 .sky-autocomplete-results-waiting {
@@ -13,26 +55,61 @@
 .sky-autocomplete-results {
   display: flex;
   flex-direction: column;
-  padding: 4px;
+  padding: var(
+    --sky-override-autocomplete-results-padding,
+    var(--sky-space-inset-vertical-top-s) 0
+      var(--sky-space-inset-vertical-bottom-s)
+  );
   overflow-y: auto;
   overflow-x: hidden;
   min-height: 35px;
-  max-height: -webkit-calc(50vh - 50px);
-  max-height: -moz-calc(50vh - 50px);
   max-height: calc(50vh - 50px);
+
+  &:has(.sky-autocomplete-no-results) {
+    padding: var(--sky-override-autocomplete-results-no-results-padding, 0);
+  }
 }
 
 .sky-autocomplete-result {
-  color: $sky-text-color-default;
-  margin-bottom: 4px;
-  padding: 3px $sky-padding-double;
+  background-color: var(
+    --sky-override-autocomplete-result-background-color,
+    var(--sky-color-background-action-tertiary-base)
+  );
+  box-shadow: var(
+    --sky-override-autocomplete-result-box-shadow,
+    inset 0 0 0 var(--sky-border-width-action-base)
+      var(--sky-color-border-action-tertiary-base)
+  );
+  margin-bottom: var(
+    --sky-override-autocomplete-result-margin-bottom,
+    var(--sky-space-gap-action_group-s)
+  );
+  padding: var(
+    --sky-override-autocomplete-result-padding,
+    var(--sky-space-inset-pillarbox-1_2-top-m)
+      var(--sky-space-inset-pillarbox-1_2-right-m)
+      var(--sky-space-inset-pillarbox-1_2-bottom-m)
+      var(--sky-space-inset-pillarbox-1_2-left-m)
+  );
   cursor: pointer;
 
   &:last-child {
     margin-bottom: 0;
   }
 }
 
+.sky-autocomplete-no-results {
+  padding: var(
+    --sky-override-autocomplete-no-results-padding,
+    var(--sky-space-inset-pillarbox-1_2-top-m)
+      var(--sky-space-inset-pillarbox-1_2-right-m)
+      var(--sky-space-inset-pillarbox-1_2-bottom-m)
+      var(--sky-space-inset-pillarbox-1_2-left-m)
+  );
+  font-size: var(--sky-override-autocomplete-no-results-font-size, inherit);
+}
+
+// TODO: Tokenize when doing lookup
 .sky-autocomplete-actions {
   @include defaultMixins.sky-border(dark, top);
 
@@ -55,7 +132,10 @@
 }
 
 .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action) {
-  background-color: $sky-background-color-neutral-light;
+  background-color: var(
+    --sky-override-autocomplete-result-focus-background-color,
+    inherit
+  );
 }
 
 .sky-autocomplete-descendant-focus.sky-autocomplete-action {
@@ -65,30 +145,12 @@
   outline: -webkit-focus-ring-color auto 5px;
 }
 
-::ng-deep .sky-theme-modern {
-  .sky-autocomplete-results-container {
-    border-radius: $sky-theme-modern-box-border-radius-default;
-  }
-
-  .sky-autocomplete-results {
-    padding: $sky-theme-modern-space-sm 0;
-  }
-
-  .sky-autocomplete-result {
-    margin-bottom: 0;
-    padding: $sky-theme-modern-space-sm 0 $sky-theme-modern-space-sm
-      $sky-theme-modern-space-md;
-  }
-
-  .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action) {
-    background-color: inherit;
-  }
-
-  .sky-autocomplete-descendant-focus {
-    @include defaultMixins.sky-theme-modern-border-focus(
-      $sky-theme-modern-background-color-primary-dark,
-      $sky-theme-modern-elevation-3-shadow-size,
-      $sky-theme-modern-elevation-3-shadow-color
-    );
-  }
+.sky-autocomplete-descendant-focus {
+  border: none;
+  box-shadow: var(
+    --sky-override-autocomplete-result-focus-box-shadow,
+    inset 0 0 0 var(--sky-border-width-action-focus)
+      var(--sky-color-border-action-tertiary-focus),
+    var(--sky-elevation-focus)
+  );
 }
diff --git a/libs/components/lookup/testing/src/autocomplete/autocomplete-harness.ts b/libs/components/lookup/testing/src/autocomplete/autocomplete-harness.ts
@@ -146,8 +146,9 @@ export class SkyAutocompleteHarness extends SkyComponentHarness {
     }
 
     try {
-      const noResultFoundText =
-        await overlay.querySelector('.sky-deemphasized');
+      const noResultFoundText = await overlay.querySelector(
+        '.sky-autocomplete-no-results',
+      );
       return (await noResultFoundText?.text())?.trim();
     } catch {
       throw new Error(
-Original file line number
+Diff line change
@@ Expand Up / @@ -93,5 +93,5 @@ describe('lookup-storybook', () => { @@
             );
           });
         });
-      });
+      }, true);
     });