From 6eaceacda58328d19a47278626021551f917d499 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 29 Jan 2021 10:12:25 -0800
Subject: [PATCH] fix(TableToolbarSearch): ensure search cannot be expanded
 when disabled (#7612)

* fix(TableToolbarSearch): ensure search cannot be expanded when disabled

* fix(TableToolbarSearch): remove disbaled from SVG

* style(TableToolbarSearch): only unset specific transition when disabled
---
 .../data-table/_data-table-action.scss        | 24 +++++++++++++++++
 .../__snapshots__/PublicAPI-test.js.snap      |  6 +++++
 .../DataTable/TableToolbarSearch.js           | 26 +++++++++++++------
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index e6ca1b01d5f2..2bc60927df1e 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -84,6 +84,14 @@
     pointer-events: all;
   }
 
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search--disabled
+    .#{$prefix}--search-magnifier {
+    background: $disabled-01;
+    cursor: not-allowed;
+    transition: background-color none;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
     .#{$prefix}--search-magnifier:focus {
@@ -96,6 +104,18 @@
     background: $hover-field;
   }
 
+  .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search--disabled
+    .#{$prefix}--search-magnifier:hover {
+    background: $disabled-01;
+    cursor: not-allowed;
+    transition: background-color none;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
     .#{$prefix}--label {
@@ -579,6 +599,10 @@
     }
   }
 
+  .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
+    background: transparent;
+  }
+
   //-------------------------------------------------
   // SMALL BATCH ACTIONS
   //-------------------------------------------------
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 82e3df3d8df7..464e03b48ca8 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1374,6 +1374,9 @@ Map {
         "defaultValue": Object {
           "type": "string",
         },
+        "disabled": Object {
+          "type": "bool",
+        },
         "expanded": Object {
           "type": "bool",
         },
@@ -1962,6 +1965,9 @@ Map {
       "defaultValue": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "expanded": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
index 74921cb6d565..c9f5b9c311e1 100644
--- a/packages/react/src/components/DataTable/TableToolbarSearch.js
+++ b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -32,6 +32,7 @@ const TableToolbarSearch = ({
   expanded: expandedProp,
   defaultExpanded,
   defaultValue,
+  disabled,
   onExpand,
   persistent,
   persistant,
@@ -71,6 +72,7 @@ const TableToolbarSearch = ({
     [searchContainerClass]: searchContainerClass,
     [`${prefix}--toolbar-action`]: true,
     [`${prefix}--toolbar-search-container-active`]: expanded,
+    [`${prefix}--toolbar-search-container-disabled`]: disabled,
     [`${prefix}--toolbar-search-container-expandable`]:
       !persistent || (!persistent && !persistant),
     [`${prefix}--toolbar-search-container-persistent`]:
@@ -78,14 +80,16 @@ const TableToolbarSearch = ({
   });
 
   const handleExpand = (event, value = !expanded) => {
-    if (!controlled && (!persistent || (!persistent && !persistant))) {
-      setExpandedState(value);
-      if (value && !expanded) {
-        setFocusTarget(searchRef);
+    if (!disabled) {
+      if (!controlled && (!persistent || (!persistent && !persistant))) {
+        setExpandedState(value);
+        if (value && !expanded) {
+          setFocusTarget(searchRef);
+        }
+      }
+      if (onExpand) {
+        onExpand(event, value);
       }
-    }
-    if (onExpand) {
-      onExpand(event, value);
     }
   };
 
@@ -105,7 +109,7 @@ const TableToolbarSearch = ({
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
-      tabIndex={searchExpanded ? '-1' : tabIndex}
+      tabIndex={searchExpanded || disabled ? '-1' : tabIndex}
       ref={searchRef}
       onKeyDown={(event) => onClick(event)}
       onClick={(event) => onClick(event)}
@@ -113,6 +117,7 @@ const TableToolbarSearch = ({
       onBlur={(event) => !value && handleExpand(event, false)}
       className={searchContainerClasses}>
       <Search
+        disabled={disabled}
         size="sm"
         tabIndex={searchExpanded ? tabIndex : '-1'}
         className={className}
@@ -147,6 +152,11 @@ TableToolbarSearch.propTypes = {
    */
   defaultValue: PropTypes.string,
 
+  /**
+   * Specifies if the search should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * Specifies if the search should expand
    */