implementation(PrimeNG-17): #29662 Fix Outline SplitButton issues (#2…

…9686) ### Proposed Changes * changes to support outline SplitButton styles. ### Screenshots Before <img width="621" alt="image" src="https://github.com/user-attachments/assets/b2a72f86-5a0f-490a-adbd-f7ae147362c0"> <img width="572" alt="image" src="https://github.com/user-attachments/assets/5cf27ab0-d3ce-40a4-af04-f05a8d806b97"> After <img width="595" alt="image" src="https://github.com/user-attachments/assets/b6e975c5-0cb7-49e3-b1ff-3f2f80f82dd6"> <img width="562" alt="image" src="https://github.com/user-attachments/assets/8b970e93-7970-4517-8afe-045f8491bdf5">
dotCMS · Aug 21, 2024 · 8048adc · 8048adc
1 parent 6810af6
commit 8048adc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 25 deletions.
diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/button/templates.ts b/core-web/apps/dotcms-ui/src/stories/primeng/button/templates.ts
@@ -848,145 +848,164 @@ export const BasicSplitButtonTemplate = `<div style="display: flex; gap: 24px; f
 
 export const OutlinedSplitButtonTemplate = `<div style="display: flex; gap: 24px; flex-direction: column; align-items: center">
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
-    <p-splitButton label="Save" [model]="items" styleClass="p-button-lg p-button-outlined"></p-splitButton>
+    <p-splitButton label="Save" [model]="items" styleClass="p-button-lg" outlined></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-lg p-button-outlined"
+        styleClass="p-button-lg"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-lg p-button-outlined"
+        styleClass="p-button-lg"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-lg p-button-outlined"
+        styleClass="p-button-lg"
+        outlined
     ></p-splitButton>
 </div>
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
-    <p-splitButton label="Save" [model]="items" styleClass="p-button-outlined"></p-splitButton>
+    <p-splitButton label="Save" [model]="items" outlined></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-outlined"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-outlined"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-outlined"
+        outlined
     ></p-splitButton>
 </div>
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
     <p-splitButton
         label="Save"
         [model]="items"
-        styleClass="p-button-sm p-button-outlined"
+        styleClass="p-button-sm"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-sm p-button-outlined"
+        styleClass="p-button-sm"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-sm p-button-outlined"
+        styleClass="p-button-sm"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-sm p-button-outlined"
+        styleClass="p-button-sm"
+        outlined
     ></p-splitButton>
 </div>
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
     <p-splitButton
         label="Save"
         [model]="items"
-        styleClass="p-button-lg p-button-secondary p-button-outlined"
+        styleClass="p-button-lg p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-lg p-button-secondary p-button-outlined"
+        styleClass="p-button-lg p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-lg p-button-secondary p-button-outlined"
+        styleClass="p-button-lg p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-lg p-button-secondary p-button-outlined"
+        styleClass="p-button-lg p-button-secondary"
+        outlined
     ></p-splitButton>
 </div>
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
     <p-splitButton
         label="Save"
         [model]="items"
-        styleClass="p-button-secondary p-button-outlined"
+        styleClass="p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-secondary p-button-outlined"
+        styleClass="p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-secondary p-button-outlined"
+        styleClass="p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-secondary p-button-outlined"
+        styleClass="p-button-secondary"
+        outlined
     ></p-splitButton>
 </div>
 <div style="display: flex; gap: 8px; justify-content: center; width: fit-content">
     <p-splitButton
         label="Save"
         [model]="items"
-        styleClass="p-button-sm p-button-secondary p-button-outlined"
+        styleClass="p-button-sm p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         [model]="items"
-        styleClass="p-button-sm p-button-secondary p-button-outlined"
+        styleClass="p-button-sm p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Save"
         icon="pi pi-save"
         iconPos="right"
         [model]="items"
-        styleClass="p-button-sm p-button-secondary p-button-outlined"
+        styleClass="p-button-sm p-button-secondary"
+        outlined
     ></p-splitButton>
     <p-splitButton
         label="Disabled"
         disabled="true"
-        styleClass="p-button-sm p-button-secondary p-button-outlined"
+        styleClass="p-button-sm p-button-secondary"
+        outlined
     ></p-splitButton>
 </div>
 </div>

diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_splitbutton.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_splitbutton.scss
@@ -67,6 +67,7 @@
     .p-splitbutton-defaultbutton:enabled,
     .p-splitbutton-menubutton:enabled {
         @extend #outlined-primary-severity;
+        color: $color-palette-primary;
     }
 
     &.p-button-sm {
@@ -84,6 +85,7 @@
         .p-splitbutton-defaultbutton:enabled,
         .p-splitbutton-menubutton:enabled {
             @extend #outlined-secondary-severity;
+            color: $color-palette-secondary;
         }
 
         &.p-button-sm {

diff --git a/core-web/libs/ui/src/lib/components/dot-workflow-actions/dot-workflow-actions.component.html b/core-web/libs/ui/src/lib/components/dot-workflow-actions/dot-workflow-actions.component.html
@@ -3,8 +3,9 @@
         <p-splitButton
             (onClick)="action[0].command()"
             [disabled]="loading"
-            [styleClass]="sizeClass + (!first ? ' p-button-outlined' : '')"
+            [styleClass]="sizeClass"
             [model]="action | slice: 1"
+            [outlined]="!first"
             [label]="action[0].label" />
     } @else {
         <p-button