refactor: update new <pl-search> component to better handle the clear button's placement + logic for opting out, including an example in the HTML template

Author: sghoweri

packages/uikit-workshop/src/html/partials/header.html

@@ -4,8 +4,13 @@
 
 	<nav class="pl-c-nav pl-js-nav-target pl-js-nav-container" role="navigation">
 
-		<!-- @todo: as a next step, implement <pl-search> as a customizable slot in the new <pl-header> for customization via available props -->
-		<pl-search max-results="10" placeholder="Find a Pattern"></pl-search> 
+		<!-- 
+			@todo: as a next step, implement <pl-search> as a customizable slot in the new <pl-header> for customization via available props
+
+			Example of always hiding the search's clear button
+			<pl-search max-results="10" placeholder="Find a Pattern" hide-clear-button></pl-search>
+		-->
+		<pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
 
 		<ol class="pl-c-nav__list pl-js-pattern-nav-target">
 			<!-- pattern lab nav will be inserted here -->

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js

@@ -35,6 +35,7 @@ class Search extends BaseComponent {
     this.toggleSearch = this.toggleSearch.bind(this);
     // this.clearSearch = this.clearSearch.bind(this);
     this.closeSearch = this.closeSearch.bind(this);
+    this.renderInputComponent = this.renderInputComponent.bind(this);
     this.openSearch = this.openSearch.bind(this);
 
     this.items = [];
@@ -70,7 +71,7 @@ class Search extends BaseComponent {
   static props = {
     maxResults: props.string,
     placeholder: props.string,
-    showClearButton: props.boolean,
+    hideClearButton: props.boolean,
     clearButtonText: props.string,
   };
 
@@ -228,6 +229,50 @@ class Search extends BaseComponent {
     });
   };
 
+  renderInputComponent(inputProps) {
+    const { value } = this.state;
+
+    const shouldShowClearButton =
+      this.props.hideClearButton !== undefined &&
+      this.props.hideClearButton !== true &&
+      value !== '';
+
+    const clearButtonText = this.props.clearButtonText
+      ? this.props.clearButtonText
+      : 'Clear Search Results';
+
+    return (
+      <div
+        className={classNames('pl-c-typeahead__input-wrapper', {
+          [`pl-c-typeahead__input-wrapper--with-clear-button`]: shouldShowClearButton,
+        })}
+      >
+        <input {...inputProps} />
+        {shouldShowClearButton && (
+          <button
+            className={classNames('pl-c-typeahead__clear-button', {
+              [`pl-is-visible`]: value !== '',
+            })}
+            onClick={() => {
+              this.clearSearch();
+            }}
+          >
+            <VisuallyHidden>{clearButtonText}</VisuallyHidden>
+            <svg
+              viewBox="0 0 16 16"
+              height="16"
+              width="16"
+              className={'pl-c-typeahead__clear-button-icon'}
+            >
+              <title>{clearButtonText}</title>
+              <path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z" />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  }
+
   // Autosuggest calls this every time you need to clear suggestions.
   onSuggestionsClearRequested = () => {
     this.setState({
@@ -244,13 +289,10 @@ class Search extends BaseComponent {
   render() {
     const { value, suggestions } = this.state;
 
-    const shouldShowClearButton = this.props.showClearButton
-      ? this.props.showClearButton
-      : true;
-
-    const clearButtonText = this.props.clearButtonText
-      ? this.props.clearButtonText
-      : 'Clear Search Results';
+    const shouldShowClearButton =
+      this.props.hideClearButton !== undefined &&
+      this.props.hideClearButton !== true &&
+      value !== '';
 
     // no CSS for these Autosuggest selectors yet -- not yet needed
     const theme = {
@@ -286,38 +328,16 @@ class Search extends BaseComponent {
     };
 
     return (
-      <div className={classNames('pl-c-typeahead-wrapper')}>
-        <Autosuggest
-          theme={theme}
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          getSuggestionValue={this.getSuggestionValue}
-          renderSuggestion={this.renderSuggestion}
-          inputProps={inputProps}
-        />
-        {shouldShowClearButton && (
-          <button
-            className={classNames('pl-c-typeahead__clear-button', {
-              [`pl-is-visible`]: value !== '',
-            })}
-            onClick={() => {
-              this.clearSearch();
-            }}
-          >
-            <VisuallyHidden>{clearButtonText}</VisuallyHidden>
-            <svg
-              viewBox="0 0 16 16"
-              height="16"
-              width="16"
-              className={'pl-c-typeahead__clear-button-icon'}
-            >
-              <title>{clearButtonText}</title>
-              <path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z" />
-            </svg>
-          </button>
-        )}
-      </div>
+      <Autosuggest
+        theme={theme}
+        suggestions={suggestions}
+        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+        getSuggestionValue={this.getSuggestionValue}
+        renderSuggestion={this.renderSuggestion}
+        inputProps={inputProps}
+        renderInputComponent={this.renderInputComponent}
+      />
     );
   }
 }

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss

@@ -8,8 +8,8 @@
  * searches. https://twitter.github.io/typeahead.js/
 */
 
-$pl-clear-button-size: 1.8rem;
-$pl-clear-button-size-at-med: 1.5rem;
+$pl-clear-button-size: 1.7rem;
+$pl-clear-button-size-at-med: 1.4rem;
 
 pl-search {
   background-color: inherit;
@@ -48,6 +48,7 @@ pl-search {
   text-transform: capitalize;
   flex-direction: column;
   color: $pl-color-gray-02;
+  position: relative;
 
   .pl-c-body--theme-light & {
     color: $pl-color-gray-87;
@@ -72,7 +73,6 @@ pl-search {
 .pl-c-typeahead__hint,
 .pl-c-typeahead__input {
   text-transform: capitalize;
-  border-radius: $pl-border-radius-med;
   background-color: $pl-color-gray-87;
   color: $pl-color-white;
   border-color: darken($pl-color-gray-87, 10%);
@@ -83,13 +83,16 @@ pl-search {
   max-width: 100%;
   padding: 0.31rem 0.5rem;
   font-size: 16px; // prevent zooming in on mobile
+  width: 100%;
+  outline-offset: -3px;
+  outline-width: 2px;
 
   .pl-c-body--theme-sidebar & {
     border-radius: 0;
   }
 
   // Modify the padding defaults when the clear button UI exists
-  &--with-clear-button {
+  .pl-c-typeahead__input-wrapper--with-clear-button & {
     padding-right: $pl-clear-button-size;
 
     @media all and (min-width: $pl-bp-med) {
@@ -98,7 +101,6 @@ pl-search {
   }
 
   @media all and (min-width: $pl-bp-med) {
-    max-width: 12vw;
     font-size: inherit;
 
     .pl-c-body--theme-sidebar & {
@@ -107,7 +109,7 @@ pl-search {
   }
 
   .pl-c-body--theme-light & {
-    background-color: $pl-color-gray-07 !important;
+    background-color: $pl-color-gray-07;
     color: $pl-color-gray-70 !important;
     border-color: $pl-color-gray-13 !important;
   }
@@ -143,8 +145,6 @@ pl-search {
 .pl-c-typeahead__menu {
   @include accordionPanel;
   background-color: $pl-color-gray-87;
-  border-bottom-right-radius: $pl-border-radius-med;
-  border-bottom-left-radius: $pl-border-radius-med;
   text-transform: capitalize;
   position: absolute;
   min-width: 100%;
@@ -157,6 +157,11 @@ pl-search {
   transition: max-height 0.3s ease, opacity 0.3s ease;
   opacity: 0;
 
+  @media all and (min-width: $pl-bp-med) {
+    border-bottom-right-radius: $pl-border-radius-med;
+    border-bottom-left-radius: $pl-border-radius-med;
+  }
+
   .pl-c-body--theme-light & {
     background-color: $pl-color-gray-02;
   }
@@ -187,8 +192,12 @@ pl-search {
   border-color: transparent;
   border-width: 1px;
   border-style: solid;
-  border-bottom-right-radius: $pl-border-radius-med;
-  border-bottom-left-radius: $pl-border-radius-med;
+
+  @media all and (min-width: $pl-bp-med) {
+    border-bottom-right-radius: $pl-border-radius-med;
+    border-bottom-left-radius: $pl-border-radius-med;
+  }
+
   overflow: hidden;
   border-color: darken($pl-color-gray-87, 5%);
 
@@ -198,7 +207,7 @@ pl-search {
   }
 
   .pl-c-body--theme-light & {
-    border-color: $pl-color-gray-07;
+    border-color: $pl-color-gray-20;
   }
 
   .pl-c-body--theme-sidebar & {
@@ -213,6 +222,16 @@ pl-search {
   background-color: inherit;
   padding: 0.8em;
   cursor: pointer;
+  overflow: hidden;
+
+  &:last-child {
+    border-bottom-right-radius: $pl-border-radius-med;
+    border-bottom-left-radius: $pl-border-radius-med;
+
+    .pl-c-body--theme-sidebar & {
+      border-radius: 0;
+    }
+  }
 
   &:hover {
     background-color: rgba($pl-color-white, 0.15);
@@ -225,6 +244,10 @@ pl-search {
   &:active,
   &:focus {
     background-color: rgba(255, 255, 255, 0.18);
+
+    .pl-c-body--theme-light & {
+      background-color: $pl-color-gray-13;
+    }
   }
 }
 
@@ -238,19 +261,20 @@ pl-search {
   }
 }
 
-.pl-c-typeahead__result p {
-  margin: 0;
-}
-
-.pl-c-typeahead-wrapper {
-  position: relative;
+.pl-c-typeahead__input-wrapper {
+  position: relative; // used for positioning search clear button in relation to the <input>
 }
 
 .pl-c-typeahead__clear-button {
   @include linkStyle;
-  background-color: transparent;
   height: $pl-clear-button-size;
   width: $pl-clear-button-size;
+  background-color: transparent;
+
+  &:hover,
+  &:active {
+    background-color: transparent;
+  }
 
   @media all and (min-width: $pl-bp-med) {
     height: $pl-clear-button-size-at-med;
@@ -259,13 +283,19 @@ pl-search {
 
   .pl-c-body--theme-light & {
     background-color: transparent;
+
+    &:hover,
+    &:active {
+      background-color: transparent;
+    }
   }
 
   border-radius: 20rem;
   overflow: hidden;
   position: absolute;
   right: 0;
-  top: 0;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 100;
   cursor: pointer;
   border: 0;