Refactor #5437 - for OrderList / PickList

components/lib/orderlist/BaseOrderList.vue

@@ -46,9 +46,27 @@ export default {
             type: Boolean,
             default: false
         },
-        severity: {
+        buttonProps: {
-            type: String,
+            type: Object,
-            default: 'secondary'
+            default() {
+                return { severity: 'secondary' };
+            }
+        },
+        moveUpButtonProps: {
+            type: null,
+            default: null
+        },
+        moveTopButtonProps: {
+            type: null,
+            default: null
+        },
+        moveDownButtonProps: {
+            type: null,
+            default: null
+        },
+        moveBottomButtonProps: {
+            type: null,
+            default: null
         },
         tabindex: {
             type: Number,

components/lib/orderlist/OrderList.d.ts

@@ -9,10 +9,10 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { ListboxPassThroughOptions } from '../listbox';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
 
@@ -231,10 +231,27 @@ export interface OrderListProps {
      */
     tabindex?: number | string | undefined;
     /**
-     * Defines the style of the button.
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
-     * @defaultValue secondary
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary' }
      */
-    severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | undefined;
+    buttonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
+     */
+    moveUpButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move top button inside the component.
+     */
+    moveTopButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move down button inside the component.
+     */
+    moveDownButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move bottom button inside the component.
+     */
+    moveBottomButtonProps?: object | undefined;
     /**
      * Defines a string value that labels an interactive list element.
      */

components/lib/orderlist/OrderList.vue

@@ -2,28 +2,28 @@
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveUpButton')" :unstyled="unstyled">
+            <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('moveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveTopButton')" :unstyled="unstyled">
+            <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('moveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveDownButton')" :unstyled="unstyled">
+            <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('moveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
+            <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

components/lib/picklist/BasePickList.vue

@@ -54,9 +54,43 @@ export default {
             type: Boolean,
             default: true
         },
-        severity: {
+        buttonProps: {
-            type: String,
+            type: Object,
-            default: 'secondary'
+            default() {
+                return { severity: 'secondary' };
+            }
+        },
+        moveUpButtonProps: {
+            type: null,
+            default: null
+        },
+        moveTopButtonProps: {
+            type: null,
+            default: null
+        },
+        moveDownButtonProps: {
+            type: null,
+            default: null
+        },
+        moveBottomButtonProps: {
+            type: null,
+            default: null
+        },
+        moveToTargetProps: {
+            type: null,
+            default: null
+        },
+        moveAllToTargetProps: {
+            type: null,
+            default: null
+        },
+        moveToSourceProps: {
+            type: null,
+            default: null
+        },
+        moveAllToSourceProps: {
+            type: null,
+            default: null
         },
         tabindex: {
             type: Number,

components/lib/picklist/PickList.d.ts

@@ -11,7 +11,7 @@ import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type PickListPassThroughOptionType = PickListPassThroughAttributes | ((options: PickListPassThroughMethodOptions) => PickListPassThroughAttributes | string) | string | null | undefined;
 
@@ -365,10 +365,43 @@ export interface PickListProps {
      */
     showTargetControls?: boolean | undefined;
     /**
-     * Defines the style of the button.
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
-     * @defaultValue secondary
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary' }
      */
-    severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | undefined;
+    buttonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move up button inside the component.
+     */
+    moveUpButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move top button inside the component.
+     */
+    moveTopButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move down button inside the component.
+     */
+    moveDownButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move bottom button inside the component.
+     */
+    moveBottomButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move to target button inside the component.
+     */
+    moveToTargetProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move all to target button inside the component.
+     */
+    moveAllToTargetProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move to source button inside the component.
+     */
+    moveToSourceProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the move all to source button inside the component.
+     */
+    moveAllToSourceProps?: object | undefined;
     /**
      * Index of the list element in tabbing order.
      */

components/lib/picklist/PickList.vue

@@ -2,28 +2,28 @@
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
             <slot name="sourcecontrolsstart"></slot>
-            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" :severity="severity" @click="moveUp($event, 0)" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
+            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" :severity="severity" @click="moveTop($event, 0)" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
+            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" :severity="severity" @click="moveDown($event, 0)" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
+            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" :severity="severity" @click="moveBottom($event, 0)" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
+            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
@@ -67,28 +67,28 @@
         </div>
         <div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
             <slot name="movecontrolsstart"></slot>
-            <Button :aria-label="moveToTargetAriaLabel" :severity="severity" @click="moveToTarget" :disabled="moveDisabled(0)" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
+            <Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetotargeticon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" data-pc-section="movetotargeticon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveAllToTargetAriaLabel" :severity="severity" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" :pt="ptm('moveAllToTargetButton')" :unstyled="unstyled">
+            <Button :aria-label="moveAllToTargetAriaLabel" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="{ ...buttonProps, ...moveAllToTargetProps }" :pt="ptm('moveAllToTargetButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movealltotargeticon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" data-pc-section="movealltotargeticon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveToSourceAriaLabel" :severity="severity" @click="moveToSource" :disabled="moveDisabled(1)" :pt="ptm('moveToSourceButton')" :unstyled="unstyled">
+            <Button :aria-label="moveToSourceAriaLabel" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="{ ...buttonProps, ...moveToSourceProps }" :pt="ptm('moveToSourceButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetosourceicon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" data-pc-section="movetosourceicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveAllToSourceAriaLabel" :severity="severity" @click="moveAllToSource" :disabled="moveAllDisabled('targetList')" :pt="ptm('moveAllToSourceButton')" :unstyled="unstyled">
+            <Button :aria-label="moveAllToSourceAriaLabel" @click="moveAllToSource" :disabled="moveAllDisabled('targetList')" v-bind="{ ...buttonProps, ...moveAllToSourceProps }" :pt="ptm('moveAllToSourceButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movealltosourceicon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" data-pc-section="movealltosourceicon" />
@@ -132,28 +132,28 @@
         </div>
         <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
             <slot name="targetcontrolsstart"></slot>
-            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" :severity="severity" @click="moveUp($event, 1)" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
+            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" :severity="severity" @click="moveTop($event, 1)" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
+            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" :severity="severity" @click="moveDown($event, 1)" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
+            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" :severity="severity" @click="moveBottom($event, 1)" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
+            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />