fix(TableToolbarSearch): ensure search cannot be expanded when disabl…

…ed (#7612) * fix(TableToolbarSearch): ensure search cannot be expanded when disabled * fix(TableToolbarSearch): remove disbaled from SVG * style(TableToolbarSearch): only unset specific transition when disabled
carbon-design-system · Jan 29, 2021 · 6eaceac · 6eaceac
1 parent 2d6c22d
commit 6eaceac
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 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
@@ -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
@@ -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
@@ -32,6 +32,7 @@ const TableToolbarSearch = ({
   expanded: expandedProp,
   defaultExpanded,
   defaultValue,
+  disabled,
   onExpand,
   persistent,
   persistant,
@@ -71,21 +72,24 @@ 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`]:
       persistent || persistant,
   });
 
   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,14 +109,15 @@ 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)}
       onFocus={(event) => handleExpand(event, true)}
       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
    */