fix(tabletoolbarsearch): update default size to be lg (#11621)

* fix(tabletoolbarsearch): update default size to be lg * chore: update snaps
carbon-design-system · Jun 22, 2022 · 9ca13ee · 9ca13ee
1 parent 8a9c11e
commit 9ca13ee
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1961,6 +1961,16 @@ Map {
         "searchContainerClass": Object {
           "type": "string",
         },
+        "size": Object {
+          "args": Array [
+            Array [
+              "sm",
+              "md",
+              "lg",
+            ],
+          ],
+          "type": "oneOf",
+        },
         "tabIndex": Object {
           "args": Array [
             Array [
@@ -7062,6 +7072,16 @@ Map {
       "searchContainerClass": Object {
         "type": "string",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "tabIndex": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -39,6 +39,7 @@ const TableToolbarSearch = ({
   id,
   onBlur,
   onFocus,
+  size = 'lg',
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -111,6 +112,7 @@ const TableToolbarSearch = ({
         onFocus ? (event) => onFocus(event, handleExpand) : handleOnFocus
       }
       onBlur={onBlur ? (event) => onBlur(event, handleExpand) : handleOnBlur}
+      size={size}
       {...rest}
     />
   );
@@ -198,6 +200,11 @@ TableToolbarSearch.propTypes = {
    */
   searchContainerClass: PropTypes.string,
 
+  /**
+   * Specify the size of the Search
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
   /**
    * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
    */

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2317,13 +2317,14 @@ exports[`DataTable should render 1`] = `
                   onClear={[Function]}
                   onFocus={[Function]}
                   placeholder="Filter table"
+                  size="lg"
                   tabIndex="0"
                   type="text"
                   value=""
                 >
                   <div
                     aria-labelledby="custom-id-search"
-                    className="cds--search cds--search--xl cds--toolbar-search-container-persistent"
+                    className="cds--search cds--search--lg cds--toolbar-search-container-persistent"
                     role="search"
                   >
                     <div
@@ -3335,13 +3336,14 @@ exports[`DataTable sticky header should render 1`] = `
                   onClear={[Function]}
                   onFocus={[Function]}
                   placeholder="Filter table"
+                  size="lg"
                   tabIndex="0"
                   type="text"
                   value=""
                 >
                   <div
                     aria-labelledby="custom-id-search"
-                    className="cds--search cds--search--xl cds--toolbar-search-container-persistent"
+                    className="cds--search cds--search--lg cds--toolbar-search-container-persistent"
                     role="search"
                   >
                     <div

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -20,13 +20,14 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     onClear={[Function]}
     onFocus={[Function]}
     placeholder="Filter table"
+    size="lg"
     tabIndex="0"
     type="text"
     value=""
   >
     <div
       aria-labelledby="custom-id-search"
-      className="cds--search cds--search--xl custom-class cds--toolbar-search-container-expandable"
+      className="cds--search cds--search--lg custom-class cds--toolbar-search-container-expandable"
       role="search"
     >
       <div