Fixed #5198 - Contrast variant for SplitButton

api-generator/components/splitbutton.js

@@ -63,7 +63,7 @@ const SplitButtonProps = [
         name: 'severity',
         type: 'string',
         default: 'null',
-        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger".'
+        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger", "contrast".'
     },
     {
         name: 'raised',

components/lib/splitbutton/SplitButton.d.ts

@@ -171,7 +171,7 @@ export interface SplitButtonProps {
     /**
      * Defines the style of the button.
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast' | string | undefined;
     /**
      * Add a shadow to indicate elevation.
      * @defaultValue false

doc/button/SeverityDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Severity defines the type of button.</p>
+        <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />

doc/splitbutton/OutlinedDoc.vue

@@ -10,6 +10,7 @@
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -51,6 +52,7 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
@@ -63,6 +65,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -115,6 +118,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="contrast"></SplitButton>
     </div>
 </template>
 

doc/splitbutton/RaisedDoc.vue

@@ -10,6 +10,7 @@
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -51,6 +52,7 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
@@ -63,6 +65,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -115,6 +118,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="contrast"></SplitButton>
     </div>
 </template>
 

doc/splitbutton/RoundedDoc.vue

@@ -10,6 +10,7 @@
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -51,6 +52,7 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
@@ -63,6 +65,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -115,6 +118,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="contrast"></SplitButton>
     </div>
 </template>
 

doc/splitbutton/SeverityDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>severity</i> option specifies the type of the message.</p>
+        <p>The <i>severity</i> property defines the variant of a button.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
@@ -10,6 +10,7 @@
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -51,6 +52,7 @@ export default {
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
 `,
                 options: `
 <template>
@@ -63,6 +65,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
     </div>
 </template>
 
@@ -115,6 +118,7 @@ export default {
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="contrast"></SplitButton>
     </div>
 </template>