Feat: ActionsGeneric block

Author: dchyun

packages/components/src/components/hds/filter-bar/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <div class="hds-filter-bar" ...attributes>
-  <div class="hds-filter-bar__actions">
+  <Hds::Layout::Flex @align="end" @gap="8" class="hds-filter-bar__actions">
     {{yield
       (hash
         FiltersDropdown=(component
@@ -23,7 +23,8 @@
         {{on "change" this.onSearch}}
       />
     {{/if}}
-    <div class="hds-filter-bar__actions__right">
+    <Hds::Layout::Flex @gap="8" @align="center" class="hds-filter-bar__actions__right">
+      {{yield (hash ActionsGeneric=(component "hds/yield"))}}
       {{yield (hash ActionsDropdown=(component "hds/dropdown"))}}
       <Hds::Button
         @text={{if
@@ -37,8 +38,8 @@
         @isIconOnly={{true}}
         {{on "click" this.toggleExpand}}
       />
-    </div>
-  </div>
+    </Hds::Layout::Flex>
+  </Hds::Layout::Flex>
   {{#if this._isExpanded}}
     <div class="hds-filter-bar__filters">
       {{#if this.hasActiveFilters}}

packages/components/src/components/hds/filter-bar/index.ts

@@ -19,6 +19,7 @@ import type {
   HdsFilterBarGenericFilterData,
 } from './types.ts';
 import HdsDropdown from '../dropdown/index.ts';
+import HdsYield from '../yield/index.ts';
 import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
 import { isArray } from '@ember/array';
 
@@ -36,6 +37,7 @@ export interface HdsFilterBarSignature {
     default?: [
       {
         ActionsDropdown?: WithBoundArgs<typeof HdsDropdown, never>;
+        ActionsGeneric?: WithBoundArgs<typeof HdsYield, never>;
         FiltersDropdown?: WithBoundArgs<
           typeof HdsFilterBarFiltersDropdown,
           'filters' | 'isLiveFilter' | 'onFilter'

packages/components/src/styles/components/filter-bar.scss

@@ -27,19 +27,9 @@
       width: auto;
     }
   }
-
-  .hds-filter-bar__actions {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: end;
-  }
 }
 
 .hds-filter-bar__actions__right {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
   margin-left: auto;
 }
 

showcase/app/components/mock/app/main/generic-advanced-table.gts

@@ -10,6 +10,8 @@ import { get } from '@ember/helper';
 import { on } from '@ember/modifier';
 import style from 'ember-style-modifier/modifiers/style';
 
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+
 // HDS components
 import {
   HdsAdvancedTable,
@@ -810,6 +812,9 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
         {{style marginBottom="24px"}}
         as |F|
       >
+        <F.ActionsGeneric>
+          <ShwPlaceholder @text="generic content" @height="24" />
+        </F.ActionsGeneric>
         <F.ActionsDropdown as |D|>
           <D.ToggleButton @text="Actions" @color="secondary" @size="small" />
           <D.Checkbox>access</D.Checkbox>
@@ -899,6 +904,9 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             @onFilter={{this.onFilter}}
             as |F|
           >
+            <F.ActionsGeneric>
+              <ShwPlaceholder @text="generic content" @height="24" />
+            </F.ActionsGeneric>
             <F.ActionsDropdown as |D|>
               <D.ToggleButton
                 @text="Actions"