Removed the action prop of pf-drawer-group and added an #actions slot so that any number of actions can be applied.

Author: mtorromeo

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 ### Added
 - `pf-dropdown` components can now inject the dropdown menu inside any element, with the `append-to` prop, to circumvent issues with clipped containers (e.g. `overflow:hidden`).
+- Addeed `pf-drawer-group-action` functional component to use inside the new `pf-drawer-group` `#actions` slot.
+
+### Changed
+- **BACKWARD INCOMPATIBLE CHANGE**: Removed the `action` prop of `pf-drawer-group` and added an `#actions` slot so that any number of actions can be applied.
 
 ### Fixed
 - Added missing `type="button"` attribute to the buttons in `pf-toolbar` and `pf-sort` so that they won't trigger a submit event when inside a form.

src/components/DrawerGroup.vue

@@ -26,12 +26,8 @@
         </div>
       </div>
 
-      <div v-if="action" class="drawer-pf-action">
-        <div class="drawer-pf-action-link">
-          <button type="button" class="btn btn-link" @click="$emit('action')">
-            {{action}}
-          </button>
-        </div>
+      <div v-if="withSlot.actions" class="drawer-pf-action">
+        <slot name="actions" />
       </div>
     </div>
   </transition>
@@ -49,7 +45,6 @@ export default {
   props: {
     title: String,
     counter: String,
-    action: String,
     loading: Boolean,
   },
 

src/components/DrawerGroupAction.vue

@@ -0,0 +1,13 @@
+<template functional>
+<div class="drawer-pf-action-link">
+  <button v-bind="data.attrs" v-on="listeners" type="button" class="btn btn-link">
+    <slot />
+  </button>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'pf-drawer-group-action',
+};
+</script>

src/components/index.js

@@ -17,6 +17,7 @@ import Notification from './Notification.vue';
 import NotificationBell from './NotificationBell.vue';
 import Drawer from './Drawer.vue';
 import DrawerGroup from './DrawerGroup.vue';
+import DrawerGroupAction from './DrawerGroupAction.vue';
 import DrawerNotification from './DrawerNotification.vue';
 import ExpandCollapse from './ExpandCollapse.vue';
 import Layout from './Layout.vue';
@@ -55,6 +56,7 @@ export {
   NotificationBell,
   Drawer,
   DrawerGroup,
+  DrawerGroupAction,
   DrawerNotification,
   ExpandCollapse,
   Layout,