fix(search): ExpandableSearch: collapsed-state tooltip label is hardcoded "Search" with no way to override it

Author: jadamski02

packages/react/src/components/ExpandableSearch/ExpandableSearch-test.js

@@ -206,4 +206,29 @@ describe('ExpandableSearch', () => {
       );
     });
   });
+
+  describe('expandButtonLabelText', () => {
+    it('renders the custom label on the collapsed tooltip', () => {
+      const { container } = render(
+        <ExpandableSearch
+          labelText="test-search"
+          expandButtonLabelText="Suche"
+        />
+      );
+
+      expect(
+        container.querySelector('.cds--tooltip-content')
+      ).toHaveTextContent('Suche');
+    });
+
+    it('defaults to "Search" when expandButtonLabelText is not provided', () => {
+      const { container } = render(
+        <ExpandableSearch labelText="test-search" />
+      );
+
+      expect(
+        container.querySelector('.cds--tooltip-content')
+      ).toHaveTextContent('Search');
+    });
+  });
 });

packages/react/src/components/Search/Search-test.js

@@ -165,6 +165,35 @@ describe('Search', () => {
       expect(onExpand).toHaveBeenCalledTimes(3);
     });
 
+    it('should respect expandButtonLabelText prop', () => {
+      const { container } = render(
+        <Search
+          labelText="test-search"
+          onExpand={() => {}}
+          isExpanded={false}
+          expandButtonLabelText="Suche"
+        />
+      );
+
+      expect(
+        container.querySelector('.cds--tooltip-content')
+      ).toHaveTextContent('Suche');
+    });
+
+    it('should default expandButtonLabelText to "Search"', () => {
+      const { container } = render(
+        <Search
+          labelText="test-search"
+          onExpand={() => {}}
+          isExpanded={false}
+        />
+      );
+
+      expect(
+        container.querySelector('.cds--tooltip-content')
+      ).toHaveTextContent('Search');
+    });
+
     it('should call onKeyDown when expected', async () => {
       const onKeyDown = jest.fn();
       render(<Search labelText="test-search" onKeyDown={onKeyDown} />);

packages/react/src/components/Search/Search.stories.js

@@ -88,7 +88,7 @@ export default {
 
 const defaultParameters = {
   controls: {
-    exclude: ['isExpanded', 'renderIcon', 'role'],
+    exclude: ['isExpanded', 'renderIcon', 'role', 'expandButtonLabelText'],
   },
 };
 

packages/react/src/components/Search/Search.tsx

@@ -49,6 +49,12 @@ export interface SearchProps extends InputPropsBase {
    */
   closeButtonLabelText?: string;
 
+  /**
+   * Specify the label for the expand button in ExpandableSearch (collapsed state tooltip).
+   * Use this prop to provide a localised string in place of the default "Search" label.
+   */
+  expandButtonLabelText?: string;
+
   /**
    * Optionally provide the default value of the `<input>`
    */
@@ -132,6 +138,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       autoComplete = 'off',
       className,
       closeButtonLabelText = 'Clear search input',
+      expandButtonLabelText = 'Search',
       defaultValue,
       disabled,
       isExpanded = true,
@@ -277,7 +284,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
         <Tooltip
           className={`${prefix}--search-tooltip ${prefix}--search-magnifier-tooltip ${prefix}--icon-tooltip`}
           align="top"
-          label="Search">
+          label={expandButtonLabelText}>
           {magnifierButton}
         </Tooltip>
       ) : (
@@ -342,6 +349,12 @@ Search.propTypes = {
    */
   closeButtonLabelText: PropTypes.string,
 
+  /**
+   * Specify the label for the expand button in ExpandableSearch (collapsed state tooltip).
+   * Use this prop to provide a localised string in place of the default "Search" label.
+   */
+  expandButtonLabelText: PropTypes.string,
+
   /**
    * Optionally provide the default value of the `<input>`
    */