fix(search): prevent overflow content from going behind clear button

adobe · Sep 16, 2022 · 956f947 · 956f947
1 parent a03dd85
commit 956f947
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/search/src/search.css b/packages/search/src/search.css
@@ -12,6 +12,18 @@ governing permissions and limitations under the License.
 
 @import './spectrum-search.css';
 
+:host([dir='ltr']) {
+    --spectrum-textfield-texticon-padding-right: var(
+        --spectrum-alias-infieldbutton-full-height-m
+    );
+}
+
+:host([dir='rtl']) {
+    --spectrum-textfield-texticon-padding-left: var(
+        --spectrum-alias-infieldbutton-full-height-m
+    );
+}
+
 input::-webkit-search-cancel-button {
     display: none;
 }
diff --git a/packages/search/stories/search.stories.ts b/packages/search/stories/search.stories.ts
@@ -26,6 +26,12 @@ export const autofocus = (): TemplateResult => html`
     <sp-search autofocus></sp-search>
 `;
 
+export const focusedOverflowing = (): TemplateResult => html`
+    <sp-search
+        value="this is a really long search term that overflows the available space"
+    ></sp-search>
+`;
+
 export const Quiet = (): TemplateResult => html`
     <sp-search quiet></sp-search>
     <sp-search quiet disabled></sp-search>