Merge pull request #5974 from nitrogenous/split-button-contrast

Contrast variant for SplitButton
primefaces · Mar 11, 2024 · ffe44df · ffe44df
2 parents 24d5fe9 + 22fc144
commit ffe44df
Show file tree

Hide file tree

Showing 52 changed files with 5,028 additions and 348 deletions.
diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
@@ -53,6 +53,7 @@ export function OutlinedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function OutlinedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function OutlinedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function OutlinedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
@@ -53,6 +53,7 @@ export function RaisedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function RaisedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function RaisedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function RaisedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/roundeddoc.js b/components/doc/splitbutton/roundeddoc.js
@@ -53,6 +53,7 @@ export function RoundedDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function RoundedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function RoundedDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function RoundedDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/severitydoc.js b/components/doc/splitbutton/severitydoc.js
@@ -53,6 +53,7 @@ export function SeverityDoc(props) {
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -108,6 +109,7 @@ export default function SeverityDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         </div>
     )
 }
@@ -167,6 +169,7 @@ export default function SeverityDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
         </div>
     )
 }
@@ -187,6 +190,7 @@ export default function SeverityDemo() {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/templatedoc.js b/components/doc/splitbutton/templatedoc.js
@@ -42,7 +42,7 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -87,7 +87,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         </div>
     )
 }
@@ -136,7 +136,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
         </div>
     )
 }
@@ -152,7 +152,7 @@ export default function TemplateDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Toast ref={toast}></Toast>
-                <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} />
+                <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/theming/tailwinddoc.js b/components/doc/splitbutton/theming/tailwinddoc.js
@@ -95,6 +95,7 @@ export default function UnstyledDemo() {
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" className="mb-2" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" className="mb-2" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" className="mb-2" />
         </div>
     )
 }

diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
@@ -127,9 +127,9 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      */
     outlined?: boolean | undefined;
     /**
-     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger".
+     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "contrast".
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
     /**
      * Defines the size of the button, valid values are "small" and "large".
      */

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #2396f2;
   }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #64b5f6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #64b5f6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;

diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
@@ -1725,9 +1725,26 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #54b358;
   }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1740,7 +1757,7 @@
   .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
     color: #f48fb1;
   }
-  .p-rating .p-rating-item:focus {
+  .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
@@ -6214,6 +6231,64 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81c784;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #81c784;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
   .p-progressbar {
     border: 0 none;
     height: 1.5rem;