From 36337ddb67d009f6ca5980a83869bbb5c4a14c73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Wed, 3 Feb 2021 18:07:16 +0100
Subject: [PATCH 1/2] Ability to translate search label

---
 packages/docsearch-react/src/DocSearchButton.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index a4387fd41..28dddd64b 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -3,10 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
-export type DocSearchButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
->;
+export type DocSearchButtonProps = React.ComponentProps<'button'> & {placeholderLabel?: string}
 
 const ACTION_KEY_DEFAULT = 'Ctrl' as const;
 const ACTION_KEY_APPLE = '⌘' as const;
@@ -18,7 +15,7 @@ function isAppleDevice() {
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
   DocSearchButtonProps
->((props, ref) => {
+>(({placeholderLabel = "Search", ...props}, ref) => {
   const [key, setKey] = useState<
     typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
   >(null);
@@ -39,7 +36,7 @@ export const DocSearchButton = React.forwardRef<
     >
       <span className="DocSearch-Button-Container">
         <SearchIcon />
-        <span className="DocSearch-Button-Placeholder">Search</span>
+        <span className="DocSearch-Button-Placeholder">{placeholderLabel}</span>
       </span>
 
       {key !== null ? (

From 3a040314aac65071b8d4ead7684cf918714b0311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Thu, 4 Feb 2021 17:26:49 +0100
Subject: [PATCH 2/2] Update DocSearchButton.tsx

---
 .../docsearch-react/src/DocSearchButton.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index 28dddd64b..31bb5d6e8 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -3,7 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
-export type DocSearchButtonProps = React.ComponentProps<'button'> & {placeholderLabel?: string}
+type Translations = Partial<{
+  buttonText: string;
+  buttonAriaLabel: string;
+}>
+
+export type DocSearchButtonProps = React.ComponentProps<'button'> & {translations?: Translations}
 
 const ACTION_KEY_DEFAULT = 'Ctrl' as const;
 const ACTION_KEY_APPLE = '⌘' as const;
@@ -15,7 +20,12 @@ function isAppleDevice() {
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
   DocSearchButtonProps
->(({placeholderLabel = "Search", ...props}, ref) => {
+>(({translations = {}, ...props}, ref) => {
+  const {
+    buttonText = "Search",
+    buttonAriaLabel = "Search"
+  } = translations;
+  
   const [key, setKey] = useState<
     typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
   >(null);
@@ -30,13 +40,13 @@ export const DocSearchButton = React.forwardRef<
     <button
       type="button"
       className="DocSearch DocSearch-Button"
-      aria-label="Search"
+      aria-label={buttonAriaLabel}
       {...props}
       ref={ref}
     >
       <span className="DocSearch-Button-Container">
         <SearchIcon />
-        <span className="DocSearch-Button-Placeholder">{placeholderLabel}</span>
+        <span className="DocSearch-Button-Placeholder">{buttonText}</span>
       </span>
 
       {key !== null ? (