From 39dd92df97a3c3f9886ffcc675bc43a17828eadb Mon Sep 17 00:00:00 2001
From: Humberto Morera <humberto.morera@dotcms.com>
Date: Wed, 21 Aug 2024 09:42:01 -0500
Subject: [PATCH] support splitbutton outlined

---
 .../src/stories/primeng/button/templates.ts   | 67 ++++++++++++-------
 .../components/buttons/_splitbutton.scss      |  2 +
 .../dot-workflow-actions.component.html       |  3 +-
 3 files changed, 47 insertions(+), 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
index 7c2dfadc12df..3538f96657f2 100644
--- 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
index 1fed8e73fd86..53a2dcbba897 100644
--- 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
index 47cd903af970..7c0ab44e8241 100644
--- 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