fix(atomic): added part to access ::after (#3151)

* fix(atomic): added part to access ::after * Add generated files * Add generated files * Add generated files * Add generated files * fix(atomic): changed part name and added focus target fallback * fix(atomic): added generated file * fix(atomic): css selector --------- Co-authored-by: GitHub Actions Bot <> Co-authored-by: Olivier Lamothe <[email protected]>
coveo · Sep 7, 2023 · 9b960e5 · 9b960e5
1 parent 11c216d
commit 9b960e5
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -1656,7 +1656,7 @@ export namespace Components {
          */
         "suggestionTimeout": number;
         /**
-          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea-expander)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
          */
         "textarea": boolean;
     }
@@ -4588,7 +4588,7 @@ declare namespace LocalJSX {
          */
         "suggestionTimeout"?: number;
         /**
-          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
+          * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element. The resulting component will expand to support multi-line queries. When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part. The buttons within the search box are likely to need adjusting as well.  Example: ```css <style>   atomic-search-box::part(textarea),   atomic-search-box::part(textarea-expander)::after,   atomic-search-box::part(textarea-spacer) {     font-size: x-large;   }    atomic-search-box::part(submit-button-wrapper),   atomic-search-box::part(clear-button-wrapper) {     padding-top: 0.75rem;   } </style> ```
          */
         "textarea"?: boolean;
     }

diff --git a/packages/atomic/src/components/common/search-box/search-box.pcss b/packages/atomic/src/components/common/search-box/search-box.pcss
@@ -9,7 +9,7 @@
   @apply absolute w-5/6 h-5/6 bg-background rounded-full;
 }
 
-.grow-wrap {
+[part='textarea-expander'] {
   &::after {
     /* Space needed to prevent jumpy behavior */
     content: attr(data-replicated-value) ' ';

diff --git a/packages/atomic/src/components/common/search-box/search-text-area.tsx b/packages/atomic/src/components/common/search-box/search-text-area.tsx
@@ -81,7 +81,7 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
   ...defaultInputProps
 }) => (
   <div class="grow flex overflow-hidden">
-    <div class="grow-wrap grow grid overflow-hidden">
+    <div part="textarea-expander" class="grow grid overflow-hidden">
       <textarea
         part="textarea"
         aria-label={ariaLabel}
@@ -119,8 +119,9 @@ export const SearchTextArea: FunctionalComponent<Props> = ({
         }}
         onFocus={(e) => {
           onFocus?.(e);
-          syncTextWithReplica(textAreaRef);
-          expandTextArea(textAreaRef);
+          const target = e.target as HTMLTextAreaElement;
+          syncTextWithReplica(textAreaRef ?? target);
+          expandTextArea(textAreaRef ?? target);
         }}
         autocomplete="off"
         {...(popup && getPopupAttributes(popup))}

diff --git a/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx b/packages/atomic/src/components/search/atomic-search-box/atomic-search-box.tsx
@@ -189,14 +189,14 @@ export class AtomicSearchBox {
   /**
    * Whether to render the search box using a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element.
    * The resulting component will expand to support multi-line queries.
-   * When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its ::after pseudo-element as well as the `"textarea-spacer"` part.
+   * When customizing the dimensions of the textarea element using the `"textarea"` CSS part, it is important to also apply the styling to its container's ::after pseudo-element as well as the `"textarea-spacer"` part.
    * The buttons within the search box are likely to need adjusting as well.
    *
    * Example:
    * ```css
    * <style>
    *   atomic-search-box::part(textarea),
-   *   atomic-search-box::part(textarea)::after,
+   *   atomic-search-box::part(textarea-expander)::after,
    *   atomic-search-box::part(textarea-spacer) {
    *     font-size: x-large;
    *   }