Refactor #5437 - Removed shared classes

primefaces · Mar 22, 2024 · 4d640c4 · 4d640c4
1 parent 6e22800
commit 4d640c4
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 37 deletions.
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
@@ -482,8 +482,12 @@
                         </div>
                     </div>
                     <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
-                        <button type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button" />
-                        <button type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button" />
+                        <button type="button" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button">
+                            {{ todayLabel }}
+                        </button>
+                        <button type="button" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button">
+                            {{ clearLabel }}
+                        </button>
                     </div>
                     <slot name="footer"></slot>
                 </div>

diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
@@ -66,8 +66,8 @@ const classes = {
     secondPicker: 'p-second-picker',
     ampmPicker: 'p-ampm-picker',
     buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-button-text',
-    clearButton: 'p-button-text'
+    todayButton: 'p-buttonbar-button',
+    clearButton: 'p-buttonbar-button'
 };
 
 export default BaseStyle.extend({

diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -18,7 +18,7 @@ const classes = {
         }
     ],
     label: ({ instance, props }) => [
-        'p-cascadeselect-label p-inputtext',
+        'p-cascadeselect-label',
         {
             'p-placeholder': instance.label === props.placeholder,
             'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)

diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js
@@ -12,7 +12,7 @@ const classes = {
         }
     ],
     container: ({ props, instance }) => [
-        'p-inputtext p-chips-multiple-container',
+        'p-chips-multiple-container',
         {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }

diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
-    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
+    input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
     panel: ({ instance, props }) => [
         'p-colorpicker-panel',
         {

diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -28,7 +28,7 @@
             <component v-else :is="$slots.message" :message="confirmation"></component>
         </template>
         <template v-if="!$slots.container" #footer>
-            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
+            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :text="!confirmation.rejectClass" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">
                         <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />

diff --git a/components/lib/confirmdialog/style/ConfirmDialogStyle.js b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
@@ -4,7 +4,7 @@ const classes = {
     root: 'p-confirm-dialog',
     icon: 'p-confirm-dialog-icon',
     message: 'p-confirm-dialog-message',
-    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
+    rejectButton: 'p-confirm-dialog-reject',
     acceptButton: 'p-confirm-dialog-accept'
 };
 

diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -15,14 +15,33 @@
                     </template>
                     <component v-else :is="$slots.message" :message="confirmation"></component>
                     <div :class="cx('footer')" v-bind="ptm('footer')">
-                        <CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="[cx('rejectButton'), confirmation.rejectClass]" :unstyled="unstyled" :pt="ptm('rejectButton')">
+                        <CPButton
+                            :label="rejectLabel"
+                            @click="reject()"
+                            @keydown="onRejectKeydown"
+                            :autofocus="autoFocusReject"
+                            :class="[cx('rejectButton'), confirmation.rejectClass]"
+                            :size="{ small: !confirmation.rejectClass }"
+                            :text="!confirmation.rejectClass"
+                            :unstyled="unstyled"
+                            :pt="ptm('rejectButton')"
+                        >
                             <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                 <slot name="rejecticon">
                                     <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                                 </slot>
                             </template>
                         </CPButton>
-                        <CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="[cx('acceptButton'), confirmation.acceptClass]" :unstyled="unstyled" :pt="ptm('acceptButton')">
+                        <CPButton
+                            :label="acceptLabel"
+                            @click="accept()"
+                            @keydown="onAcceptKeydown"
+                            :autofocus="autoFocusAccept"
+                            :class="[cx('acceptButton'), confirmation.acceptClass]"
+                            :size="{ small: !confirmation.acceptClass }"
+                            :unstyled="unstyled"
+                            :pt="ptm('acceptButton')"
+                        >
                             <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                 <slot name="accepticon">
                                     <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />

diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@@ -11,8 +11,8 @@ const classes = {
     icon: 'p-confirm-popup-icon',
     message: 'p-confirm-popup-message',
     footer: 'p-confirm-popup-footer',
-    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null],
-    acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null]
+    rejectButton: 'p-confirm-popup-reject',
+    acceptButton: 'p-confirm-popup-accept'
 };
 
 export default BaseStyle.extend({

diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
@@ -100,12 +100,12 @@ const classes = {
     filterConstraints: 'p-column-filter-constraints',
     filterConstraint: 'p-column-filter-constraint',
     filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
-    filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
+    filterRemoveButton: 'p-column-filter-remove-button',
     filterAddRule: 'p-column-filter-add-rule',
-    filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
+    filterAddRuleButton: 'p-column-filter-add-button',
     filterButtonbar: 'p-column-filter-buttonbar',
-    filterClearButton: 'p-button-outlined p-button-sm',
-    filterApplyButton: 'p-button-sm',
+    filterClearButton: 'p-column-filter-clear-button',
+    filterApplyButton: 'p-column-filter-apply-button',
     //tablebody
     tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
     rowgroupHeader: 'p-rowgroup-header',

diff --git a/components/lib/fileupload/style/FileUploadStyle.js b/components/lib/fileupload/style/FileUploadStyle.js
@@ -4,19 +4,19 @@ const classes = {
     root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
     buttonbar: 'p-fileupload-buttonbar',
     chooseButton: ({ instance, props }) => [
-        'p-button p-component p-fileupload-choose',
+        'p-component p-fileupload-choose',
         {
             'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
             'p-disabled': props.disabled,
             'p-focus': instance.focused
         }
     ],
-    chooseIcon: 'p-button-icon p-button-icon-left',
-    chooseButtonLabel: 'p-button-label',
+    chooseIcon: 'p-fileupload-choose-icon',
+    chooseButtonLabel: 'p-fileupload-choosebutton-label',
     content: 'p-fileupload-content',
     empty: 'p-fileupload-empty',
-    uploadIcon: 'p-button-icon p-button-icon-left',
-    label: 'p-button-label',
+    uploadIcon: 'p-fileupload-upload-icon',
+    label: 'p-fileupload-button-label',
     file: 'p-fileupload-file',
     thumbnail: 'p-fileupload-file-thumbnail',
     details: 'p-fileupload-file-details',

diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
@@ -10,7 +10,7 @@ const classes = {
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-icon-field p-icon-field-right': props.toggleMask
+            'p-password-icon-field': props.toggleMask
         }
     ],
     input: ({ props }) => [

diff --git a/components/lib/speeddial/style/SpeedDialStyle.js b/components/lib/speeddial/style/SpeedDialStyle.js
@@ -22,7 +22,7 @@ const classes = {
         }
     ],
     button: ({ props }) => [
-        'p-speeddial-button p-button-rounded',
+        'p-speeddial-button',
         {
             'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
         }

diff --git a/components/lib/splitbutton/style/SplitButtonStyle.js b/components/lib/splitbutton/style/SplitButtonStyle.js
@@ -1,17 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => [
-        'p-splitbutton p-component',
-        {
-            'p-button-raised': props.raised,
-            'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
-            'p-button-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large'
-        }
-    ],
+    root: 'p-splitbutton p-component',
     button: 'p-splitbutton-defaultbutton',
     menuButton: 'p-splitbutton-menubutton'
 };

diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ instance, props }) => [
-        'p-inputtextarea p-inputtext p-component',
+        'p-inputtextarea p-component',
         {
             'p-filled': instance.filled,
             'p-inputtextarea-resizable ': props.autoResize,

diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
@@ -12,7 +12,7 @@ const classes = {
     loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
-    input: 'p-tree-filter p-inputtext p-component',
+    input: 'p-tree-filter p-component',
     searchIcon: 'p-tree-filter-icon',
     wrapper: 'p-tree-wrapper',
     container: 'p-tree-container',