New Component: ButtonGroup #61

primefaces · Mar 21, 2024 · 9f38cbd · 9f38cbd
1 parent 4cee111
commit 9f38cbd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/theme-base/components/button/_button.scss b/theme-base/components/button/_button.scss
@@ -198,7 +198,7 @@
         width: $buttonIconOnlyWidth;
     }
 
-    .p-buttonset {
+    .p-button-group {
         display: flex;
 
         .p-button {
@@ -207,7 +207,7 @@
     }
 }
 
-.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     color: $secondaryButtonTextColor;
     background: $secondaryButtonBg;
     border: $secondaryButtonBorder;
@@ -265,7 +265,7 @@
     }
 }
 
-.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     color: $infoButtonTextColor;
     background: $infoButtonBg;
     border: $infoButtonBorder;
@@ -323,7 +323,7 @@
     }
 }
 
-.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     color: $successButtonTextColor;
     background: $successButtonBg;
     border: $successButtonBorder;
@@ -381,7 +381,7 @@
     }
 }
 
-.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     color: $warningButtonTextColor;
     background: $warningButtonBg;
     border: $warningButtonBorder;
@@ -439,7 +439,7 @@
     }
 }
 
-.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     color: $helpButtonTextColor;
     background: $helpButtonBg;
     border: $helpButtonBorder;
@@ -497,7 +497,7 @@
     }
 }
 
-.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     color: $dangerButtonTextColor;
     background: $dangerButtonBg;
     border: $dangerButtonBorder;
@@ -556,7 +556,7 @@
 }
 
 @if variable-exists(contrastButtonTextColor) {
-    .p-button.p-button-contrast, .p-buttonset.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
         color: $contrastButtonTextColor;
         background: $contrastButtonBg;
         border: $contrastButtonBorder;

diff --git a/themes/material/extensions/_button.scss b/themes/material/extensions/_button.scss
@@ -69,7 +69,7 @@
     }
 }
 
-.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
     &:not(:disabled):focus {
         background: rgba($secondaryButtonBg, .76);
     }
@@ -94,7 +94,7 @@
     }
 }
 
-.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
     &:not(:disabled):focus {
         background: rgba($infoButtonBg, .76);
     }
@@ -119,7 +119,7 @@
     }
 }
 
-.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
     &:not(:disabled):focus {
         background: rgba($successButtonBg, .76);
     }
@@ -144,7 +144,7 @@
     }
 }
 
-.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
     &:not(:disabled):focus {
         background: rgba($warningButtonBg, .76);
     }
@@ -169,7 +169,7 @@
     }
 }
 
-.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
     &:not(:disabled):focus {
         background: rgba($helpButtonBg, .76);
     }
@@ -194,7 +194,7 @@
     }
 }
 
-.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
     &:not(:disabled):focus {
         background: rgba($dangerButtonBg, .76);
     }
@@ -220,7 +220,7 @@
 }
 
 .p-button.p-button-contrast,
-.p-buttonset.p-button-contrast > .p-button,
+.p-button-group.p-button-contrast > .p-button,
 .p-splitbutton.p-button-contrast > .p-button {
     &:enabled:focus {
         background: rgba($contrastButtonBg, 0.76);

diff --git a/themes/viva/_extensions.scss b/themes/viva/_extensions.scss
@@ -7,7 +7,7 @@
         }
     }
 
-    .p-buttonset,
+    .p-button-group,
     .p-togglebutton {
         .p-button-label {
             font-weight: 400;