vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6657 - Deprecate plain button in favor of Contrast

pull/6674/head
Cagatay Civici 2024-10-28 14:36:27 +03:00
parent 3840fa3599
commit 1a2f6cceb1
7 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/button/RaisedTextDoc.vue
View File

@ -10,7 +10,7 @@
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />
<Button label="Contrast" severity="contrast" text raised />
</div>
<DocSectionCode :code="code" />
</template>
@ -28,7 +28,7 @@ export default {
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />
<Button label="Contrast" severity="contrast" text raised />
`,
options: `
<template>
@ -40,7 +40,7 @@ export default {
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />
<Button label="Contrast" severity="contrast" text raised />
</div>
</template>
@ -57,7 +57,7 @@ export default {
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />
<Button label="Contrast" severity="contrast" text raised />
</div>
</template>

8
apps/showcase/doc/button/TextDoc.vue
View File

@ -10,7 +10,7 @@
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />
<Button label="Contrast" severity="contrast" text />
</div>
<DocSectionCode :code="code" />
</template>
@ -28,7 +28,7 @@ export default {
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />
<Button label="Contrast" severity="contrast" text />
`,
options: `
<template>
@ -40,7 +40,7 @@ export default {
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />
<Button label="Contrast" severity="contrast" text />
</div>
</template>
@ -57,7 +57,7 @@ export default {
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />
<Button label="Contrast" severity="contrast" text />
</div>
</template>

18
packages/primevue/src/button/style/ButtonStyle.js
View File

@ -559,6 +559,24 @@ const theme = ({ dt }) => `
color: ${dt('button.text.danger.color')};
}
.p-button-text.p-button-contrast {
background: transparent;
border-color: transparent;
color: ${dt('button.text.contrast.color')};
}
.p-button-text.p-button-contrast:not(:disabled):hover {
background: ${dt('button.text.contrast.hover.background')};
border-color: transparent;
color: ${dt('button.text.contrast.color')};
}
.p-button-text.p-button-contrast:not(:disabled):active {
background: ${dt('button.text.contrast.active.background')};
border-color: transparent;
color: ${dt('button.text.contrast.color')};
}
.p-button-text.p-button-plain {
background: transparent;
border-color: transparent;

10
packages/themes/src/presets/aura/button/index.js
View File

@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
contrast: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.950}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
contrast: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.0}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',

10
packages/themes/src/presets/lara/button/index.js
View File

@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
contrast: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.950}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
contrast: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.0}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',

10
packages/themes/src/presets/material/button/index.js
View File

@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.500}'
},
contrast: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.950}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
contrast: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.0}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',

10
packages/themes/src/presets/nora/button/index.js
View File

@ -244,6 +244,11 @@ export default {
activeBackground: '{red.100}',
color: '{red.600}'
},
contrast: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.950}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
@ -471,6 +476,11 @@ export default {
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.500}'
},
contrast: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.0}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',