Merge pull request #4638 from FlipWarthog/no-important

Fix #4637 - Component Styles: Remove use of !important now that @layer is used
primefaces · Dec 21, 2023 · 84f735e · 84f735e
2 parents 2c4bd88 + 6b6fe55
commit 84f735e
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 29 deletions.
diff --git a/components/lib/basecomponent/style/BaseComponentStyle.js b/components/lib/basecomponent/style/BaseComponentStyle.js
@@ -247,7 +247,7 @@ const css = `
 }
 
 .p-disabled, .p-disabled * {
-    cursor: default !important;
+    cursor: default;
     pointer-events: none;
     user-select: none;
 }
@@ -274,7 +274,7 @@ const css = `
     padding: 0;
     position: absolute;
     width: 1px;
-    word-wrap: normal !important;
+    word-wrap: normal;
 }
 
 .p-link {

diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
@@ -2729,14 +2729,14 @@ export default {
                         let { breakpoint, numMonths } = responsiveOptions[i];
                         let styles = `
                             .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
-                                display: inline-flex !important;
+                                display: inline-flex;
                             }
                         `;
 
                         for (let j = numMonths; j < this.numberOfMonths; j++) {
                             styles += `
                                 .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
-                                    display: none !important;
+                                    display: none;
                                 }
                             `;
                         }

diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -74,7 +74,7 @@ const css = `
     }
 
     .p-cascadeselect-item-active {
-        overflow: visible !important;
+        overflow: visible;
     }
 
     .p-cascadeselect-item-active > .p-cascadeselect-sublist {

diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -159,7 +159,7 @@ export interface ConfirmDialogBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-dialog[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */

diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
@@ -1911,12 +1911,12 @@ export default {
 @media screen and (max-width: ${this.breakpoint}) {
     ${selector} > .p-datatable-thead > tr > th,
     ${selector} > .p-datatable-tfoot > tr > td {
-        display: none !important;
+        display: none;
     }
 
     ${selector} > .p-datatable-tbody > tr > td {
         display: flex;
-        width: 100% !important;
+        width: 100%;
         align-items: center;
         justify-content: space-between;
     }

diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
@@ -98,7 +98,7 @@ const css = `
 
     .p-datatable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;
@@ -230,7 +230,7 @@ const css = `
     }
 
     .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-        transform: none !important;
+        transform: none;
         min-height: 0;
         position: sticky;
         top: 0;

diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
@@ -140,7 +140,7 @@ export interface DialogBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-dialog[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */

diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
@@ -267,7 +267,7 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-dialog[${this.attributeSelector}] {
-                                width: ${this.breakpoints[breakpoint]} !important;
+                                width: ${this.breakpoints[breakpoint]};
                             }
                         }
                     `;

diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
@@ -120,8 +120,8 @@ const css = `
         transform: none;
         width: 100vw !important;
         height: 100vh !important;
-        top: 0px !important;
-        left: 0px !important;
+        top: 0px;
+        left: 0px;
         max-height: 100%;
         height: 100%;
     }

diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js
@@ -39,7 +39,7 @@ const css = `
     .p-message.p-message-leave-to {
         max-height: 0;
         opacity: 0;
-        margin: 0 !important;
+        margin: 0;
     }
 
     .p-message-leave-active {

diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -111,7 +111,7 @@ export interface OverlayPanelBreakpoints {
      *
      * @media screen and (max-width: ${breakpoint[key]}) {
      *      .p-overlaypanel[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
+     *          width: ${breakpoint[value]};
      *      }
      * }
      */

diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
@@ -281,7 +281,7 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
                             .p-overlaypanel[${this.attributeSelector}] {
-                                width: ${this.breakpoints[breakpoint]} !important;
+                                width: ${this.breakpoints[breakpoint]};
                             }
                         }
                     `;

diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
@@ -175,22 +175,22 @@ export default {
                             @media screen ${minValue} {
                                 .paginator[${this.attributeSelector}],
                                 .p-paginator-default{
-                                    display: flex !important;
+                                    display: flex;
                                 }
                             }
                         `;
                     } else {
                         innerHTML += `
 .paginator[${this.attributeSelector}], .p-paginator-${key} {
-    display: none !important;
+    display: none;
 }
 @media screen ${minValue} and (max-width: ${key}) {
     .paginator[${this.attributeSelector}], .p-paginator-${key} {
-        display: flex !important;
+        display: flex;
     }
     .paginator[${this.attributeSelector}],
     .p-paginator-default{
-        display: none !important;
+        display: none;
     }
 }
                     `;

diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js
@@ -33,7 +33,7 @@ const css = `
 
     .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
     .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
-        transition: none !important;
+        transition: none;
     }
 }
 `;

diff --git a/components/lib/ripple/style/RippleStyle.js b/components/lib/ripple/style/RippleStyle.js
@@ -28,7 +28,7 @@ const css = `
     }
 
     .p-ripple-disabled .p-ink {
-        display: none !important;
+        display: none;
     }
 }
 `;

diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
@@ -127,7 +127,7 @@ export default {
                     let breakpointStyle = '';
 
                     for (let styleProp in this.breakpoints[breakpoint]) {
-                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
+                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + ';';
                     }
 
                     innerHTML += `

diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
@@ -71,7 +71,7 @@ const css = `
 
     .p-treetable .p-column-resizer {
         display: block;
-        position: absolute !important;
+        position: absolute;
         top: 0;
         right: 0;
         margin: 0;

diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
@@ -120,10 +120,10 @@ export default {
 @media screen and (max-width: 960px) {
     ::v-deep(.customized-timeline) {
         .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
+            flex-direction: row;
 
             .p-timeline-event-content {
-                text-align: left !important;
+                text-align: left;
             }
         }
 
@@ -181,10 +181,10 @@ const events = ref([
 @media screen and (max-width: 960px) {
     ::v-deep(.customized-timeline) {
         .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
+            flex-direction: row;
 
             .p-timeline-event-content {
-                text-align: left !important;
+                text-align: left;
             }
         }