Remove unused search props, add missing search translations

Author: jordanarldt

.changeset/wide-olives-deny.md

@@ -0,0 +1,32 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Remove unused search props, add missing search translations
+
+## Migration
+
+### `core/components/header/index.tsx`
+
+Ensure the following props are passed to the `HeaderSection` navigation prop:
+```tsx
+        searchInputPlaceholder: t('Search.inputPlaceholder'),
+        searchSubmitLabel: t('Search.submitLabel'),
+```
+
+### `core/messages/en.json`
+
+Add the following keys to the `Components.Header.Search` translations:
+```json
+        "somethingWentWrong": "Something went wrong. Please try again.",
+        "inputPlaceholder": "Search products, categories, brands...",
+        "submitLabel": "Search"
+```
+
+### `core/vibes/soul/primitives/navigation/index.tsx`
+
+Copy all changes from this file:
+1. Create `searchSubmitLabel?: string;` property, ensure it is passed into `SearchForm`
+2. On the `SearchForm`, remove the `searchCtaLabel = 'View more',` property, as it is unused, and rename `submitLabel` to `searchSubmitLabel`
+3. Ensure that `SearchForm` passes `searchSubmitLabel` to the `SearchButton`: `<SubmitButton loading={isPending} submitLabel={searchSubmitLabel} />`
+4. Remove the `searchCtaLabel` property from the `SearchResults` component

core/components/header/index.tsx

@@ -147,6 +147,8 @@ export const Header = async () => {
         searchHref: '/search',
         searchParamName: 'term',
         searchAction: search,
+        searchInputPlaceholder: t('Search.inputPlaceholder'),
+        searchSubmitLabel: t('Search.submitLabel'),
         links: streamableLinks,
         logo,
         mobileMenuTriggerLabel: t('toggleNavigation'),

core/messages/en.json

@@ -445,7 +445,9 @@
         "brands": "Brands",
         "noSearchResultsTitle": "Sorry, no results for \"{term}\".",
         "noSearchResultsSubtitle": "Please try another search.",
-        "somethingWentWrong": "Something went wrong. Please try again."
+        "somethingWentWrong": "Something went wrong. Please try again.",
+        "inputPlaceholder": "Search products, categories, brands...",
+        "submitLabel": "Search"
       }
     },
     "Footer": {

core/vibes/soul/primitives/navigation/index.tsx

@@ -111,8 +111,8 @@ interface Props<S extends SearchResult> {
   searchHref: string;
   searchParamName?: string;
   searchAction?: SearchAction<S>;
-  searchCtaLabel?: string;
   searchInputPlaceholder?: string;
+  searchSubmitLabel?: string;
   cartLabel?: string;
   accountLabel?: string;
   openSearchPopupLabel?: string;
@@ -277,8 +277,8 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
     searchHref,
     searchParamName = 'query',
     searchAction,
-    searchCtaLabel,
     searchInputPlaceholder,
+    searchSubmitLabel,
     cartLabel = 'Cart',
     accountLabel = 'Profile',
     openSearchPopupLabel = 'Open search popup',
@@ -524,10 +524,10 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
                   <div className="flex max-h-[inherit] flex-col rounded-2xl bg-[var(--nav-search-background,hsl(var(--background)))] shadow-xl ring-1 ring-[var(--nav-search-border,hsl(var(--foreground)/5%))] transition-all duration-200 ease-in-out @4xl:inset-x-0">
                     <SearchForm
                       searchAction={searchAction}
-                      searchCtaLabel={searchCtaLabel}
                       searchHref={searchHref}
                       searchInputPlaceholder={searchInputPlaceholder}
                       searchParamName={searchParamName}
+                      searchSubmitLabel={searchSubmitLabel}
                     />
                   </div>
                 </Popover.Content>
@@ -603,15 +603,13 @@ function SearchForm<S extends SearchResult>({
   searchParamName = 'query',
   searchHref = '/search',
   searchInputPlaceholder = 'Search Products',
-  searchCtaLabel = 'View more',
-  submitLabel = 'Submit',
+  searchSubmitLabel = 'Submit',
 }: {
   searchAction: SearchAction<S>;
   searchParamName?: string;
   searchHref?: string;
-  searchCtaLabel?: string;
   searchInputPlaceholder?: string;
-  submitLabel?: string;
+  searchSubmitLabel?: string;
 }) {
   const [query, setQuery] = useState('');
   const [isSearching, startSearching] = useTransition();
@@ -672,15 +670,14 @@ function SearchForm<S extends SearchResult>({
           type="text"
           value={query}
         />
-        <SubmitButton loading={isPending} submitLabel={submitLabel} />
+        <SubmitButton loading={isPending} submitLabel={searchSubmitLabel} />
       </form>
 
       <SearchResults
         emptySearchSubtitle={emptyStateSubtitle}
         emptySearchTitle={emptyStateTitle}
         errors={form.errors}
         query={query}
-        searchCtaLabel={searchCtaLabel}
         searchParamName={searchParamName}
         searchResults={searchResults}
         stale={isPending}
@@ -715,7 +712,6 @@ function SearchResults({
 }: {
   query: string;
   searchParamName: string;
-  searchCtaLabel?: string;
   emptySearchTitle?: string;
   emptySearchSubtitle?: string;
   searchResults: SearchResult[] | null;