fix(table): regression fixes (#2356)

- add support for actions that aren't overflow menus
- add support for inital v10 style search

Author: cal-smith

packages/components/src/components/data-table/_data-table-action.scss

@@ -35,6 +35,16 @@
       visibility $duration--fast-02 motion(standard, productive);
   }
 
+  //-------------------------------------------------
+  //DEPRECATED v10/v9 search behaviour
+  //-------------------------------------------------
+  .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container {
+    opacity: 1;
+    transition: opacity 110ms;
+    display: flex;
+    align-items: center;
+  }
+
   //-------------------------------------------------
   //HIDDEN SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -166,7 +176,9 @@
   //-------------------------------------------------
   //TOOLBAR BUTTONS
   //-------------------------------------------------
-  .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+  .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action,
+  // DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead
+  .#{$prefix}--toolbar-action {
     @include button-reset;
     display: flex;
     cursor: pointer;

packages/components/src/components/data-table/data-table.config.js

@@ -486,5 +486,34 @@ module.exports = {
         sort: true,
       },
     },
+    {
+      name: 'compat',
+      label: 'Data Table (with deprecated toolbar search and actions)',
+      notes: `
+        Data Tables are used to represent a collection of resources, displaying a
+        subset of their fields in columns, or headers.
+      `,
+      context: {
+        state: 'compat',
+        title: 'Table title',
+        optionalHelper: 'Optional Helper Text',
+        batchActions,
+        toolbarActions,
+        columns,
+        rows,
+        selectedItemsCounterLabel: `
+          <span data-items-selected>3</span> items selected
+        `,
+        searchInputId: 'search__input-2',
+        searchLabelId: 'search-input-label-1',
+        searchLabel: 'Search',
+        clearSearchLabel: 'Clear search input',
+        addNewLabel: 'Add new',
+        cancelLabel: 'Cancel',
+        sortLabel: 'Sort rows by this header in descending order',
+        hasToolbar: true,
+        sort: true,
+      },
+    },
   ],
 };

packages/components/src/components/data-table/data-table.hbs

@@ -37,6 +37,23 @@
       </div>
       {{/if}}
 
+      {{#is state "compat"}}
+      <div class="{{@root.prefix}}--toolbar-search-container">
+        <div data-search class="{{@root.prefix}}--search {{@root.prefix}}--search--sm" role="search">
+          <div class="{{@root.prefix}}--search-magnifier" tabindex="0">
+            {{ carbon-icon 'Search16' class=(add @root.prefix '--toolbar-action__icon')}}
+          </div>
+          <label id="{{searchLabelId}}" class="{{@root.prefix}}--label" for="{{searchInputId}}">{{searchLabel}}</label>
+          <input class="{{@root.prefix}}--search-input" type="text" id="{{searchInputId}}" role="search"
+            placeholder="{{searchLabel}}" aria-labelledby="{{searchLabelId}}">
+          <button class="{{@root.prefix}}--search-close {{@root.prefix}}--search-close--hidden" title="{{clearSearchLabel}}"
+            aria-label="{{clearSearchLabel}}">
+            {{ carbon-icon 'Close16'}}
+          </button>
+        </div>
+      </div>
+      {{/is}}
+
       {{#if toolbarActions}}
      <div class="{{@root.prefix}}--toolbar-content">
           <!--  Default hidden search -->
@@ -90,6 +107,16 @@
             </div>
             {{/each}}
 
+            <!-- Legacy toolbar actions-->
+            {{#is state "compat"}}
+              {{#each toolbarActions as |toolbar|}}
+              <div class="{{@root.prefix}}--toolbar-action" role="button"
+                tabindex="0" aria-label="Overflow" aria-haspopup="true" aria-expanded="false">
+                {{{ toolbar.icon }}}
+              </div>
+              {{/each}}
+            {{/is}}
+
           <!--  Toolbar primary button -->
           <button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--primary">
             {{#if small }} Primary {{else}} Primary Button {{/if}}