Fixed #5198 - Contrast variant for SplitButton

pull/5206/head
Cagatay Civici 2024-02-03 11:04:10 +03:00
parent 30c20d4e8a
commit d5ebbe6529
7 changed files with 20 additions and 4 deletions

View File

@ -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',

View File

@ -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

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>