Fixed #5547 - Remove styled from speed

primefaces · Apr 8, 2024 · af56b7c · af56b7c
1 parent 704f6de
commit af56b7c
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 80 deletions.
diff --git a/components/landing/ThemeSection.vue b/components/landing/ThemeSection.vue
@@ -21,7 +21,7 @@
                     <template #header>
                         <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
                             <h5 class="m-0">Customers</h5>
-                            <IconField iconPosition="left" class="mt-3 sm:mt-0 w-full sm:w-auto">
+                            <IconField class="mt-3 sm:mt-0 w-full sm:w-auto">
                                 <InputIcon>
                                     <i class="pi pi-search" />
                                 </InputIcon>

diff --git a/components/lib/iconfield/BaseIconField.vue b/components/lib/iconfield/BaseIconField.vue
@@ -5,12 +5,6 @@ import IconFieldStyle from 'primevue/iconfield/style';
 export default {
     name: 'BaseIconField',
     extends: BaseComponent,
-    props: {
-        iconPosition: {
-            type: String,
-            default: 'right'
-        }
-    },
     style: IconFieldStyle,
     provide() {
         return {

diff --git a/components/lib/iconfield/IconField.d.ts b/components/lib/iconfield/IconField.d.ts
@@ -67,11 +67,6 @@ export interface IconFieldPassThroughAttributes {
  * Defines valid properties in IconField component.
  */
 export interface IconFieldProps {
-    /**
-     * Position of the icon
-     * @defaultValue right
-     */
-    iconPosition?: 'left' | 'right' | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

diff --git a/components/lib/iconfield/style/IconFieldStyle.js b/components/lib/iconfield/style/IconFieldStyle.js
@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: 'p-icon-field'
+    root: 'p-iconfield'
 };
 
 export default BaseStyle.extend({

diff --git a/components/lib/inputicon/style/InputIconStyle.js b/components/lib/inputicon/style/InputIconStyle.js
@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: 'p-input-icon'
+    root: 'p-inputicon'
 };
 
 export default BaseStyle.extend({

diff --git a/components/lib/themes/primeone/base/iconfield/index.js b/components/lib/themes/primeone/base/iconfield/index.js
@@ -1,29 +1,29 @@
 export default {
     css: ({ dt }) => `
-.p-icon-field {
+.p-iconfield {
     position: relative;
 }
 
-.p-input-icon {
+.p-inputicon {
     position: absolute;
     top: 50%;
     margin-top: -.5rem;
     color: ${dt('iconfield.color')};
 }
 
-.p-icon-field .p-input-icon:first-child {
+.p-iconfield .p-inputicon:first-child {
     left: 0.75rem;
 }
 
-.p-icon-field .p-input-icon:last-child {
+.p-iconfield .p-inputicon:last-child {
     right: 0.75rem;
 }
 
-.p-icon-field .p-inputtext:last-child {
+.p-iconfield .p-inputtext:last-child {
     padding-left: 2.5rem;
 }
 
-.p-icon-field .p-inputtext:first-child {
+.p-iconfield .p-inputtext:first-child {
     padding-right: 2.5rem;
 }
 `

diff --git a/components/lib/themes/primeone/base/inputtext/index.js b/components/lib/themes/primeone/base/inputtext/index.js
@@ -42,16 +42,6 @@ export default {
     color: ${dt('inputtext.disabled.color')};
 }
 
-.p-input-icon-right > svg:last-of-type,
-.p-input-icon-right > i:last-of-type {
-    right: 0.75rem;
-    color: #94a3b8;
-}
-
-.p-input-icon-right > .p-inputtext {
-    padding-right: 2.5rem;
-}
-
 .p-inputtext::placeholder {
     color: ${dt('inputtext.placeholder.color')};
 }

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
@@ -28874,14 +28874,6 @@
                     "description": "Defines valid properties in IconField component.",
                     "relatedProp": "",
                     "props": [
-                        {
-                            "name": "iconPosition",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "\"left\" | \"right\"",
-                            "default": "right",
-                            "description": "Position of the icon"
-                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -61552,4 +61544,4 @@
             }
         }
     }
-}
+}
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
@@ -23,7 +23,7 @@
                 tableStyle="min-width: 50rem"
             >
                 <template #header>
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
@@ -112,7 +112,7 @@ export default {
     stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
     selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
     <template #header>
-        <IconField iconPosition="left">
+        <IconField>
             <InputIcon>
                 <i class="pi pi-search" />
             </InputIcon>
@@ -175,7 +175,7 @@ export default {
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
                 selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
             <template #header>
-                <IconField iconPosition="left">
+                <IconField>
                     <InputIcon>
                         <i class="pi pi-search" />
                     </InputIcon>
@@ -303,7 +303,7 @@ export default {
                 stateStorage="session" stateKey="dt-state-demo-session" paginator :rows="5" filterDisplay="menu"
                 selectionMode="single" dataKey="id" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']" tableStyle="min-width: 50rem">
             <template #header>
-                <IconField iconPosition="left">
+                <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
                 </InputIcon>

diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -8,7 +8,7 @@
                 <template #header>
                     <div class="flex justify-content-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <IconField iconPosition="left">
+                        <IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>
@@ -149,7 +149,7 @@ export default {
     <template #header>
         <div class="flex justify-content-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <IconField iconPosition="left">
+            <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
                 </InputIcon>
@@ -264,7 +264,7 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
@@ -471,7 +471,7 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>

diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
@@ -11,7 +11,7 @@
             <DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
                 <template #header>
                     <div class="flex justify-content-end">
-                        <IconField iconPosition="left">
+                        <IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>
@@ -120,7 +120,7 @@ export default {
         :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
     <template #header>
         <div class="flex justify-content-end">
-            <IconField iconPosition="left">
+            <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
                 </InputIcon>
@@ -196,7 +196,7 @@ export default {
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
                 <div class="flex justify-content-end">
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
@@ -352,7 +352,7 @@ export default {
                 :globalFilterFields="['name', 'country.name', 'representative.name', 'status']">
             <template #header>
                 <div class="flex justify-content-end">
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>

diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
@@ -17,7 +17,7 @@
                 <template #header>
                     <div class="flex justify-content-between">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                        <IconField iconPosition="left">
+                        <IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>
@@ -145,7 +145,7 @@ export default {
     <template #header>
         <div class="flex justify-content-between">
             <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-            <IconField iconPosition="left">
+            <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
                 </InputIcon>
@@ -247,7 +247,7 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>
@@ -440,7 +440,7 @@ export default {
             <template #header>
                 <div class="flex justify-content-between">
                     <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <IconField iconPosition="left">
+                    <IconField>
                         <InputIcon>
                             <i class="pi pi-search" />
                         </InputIcon>

diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
@@ -31,7 +31,7 @@
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-                        <IconField iconPosition="left">
+                        <IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>
@@ -208,7 +208,7 @@ export default {
     <template #header>
         <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
             <h4 class="m-0">Manage Products</h4>
-            <IconField iconPosition="left">
+            <IconField>
                 <InputIcon>
                     <i class="pi pi-search" />
                 </InputIcon>
@@ -271,7 +271,7 @@ export default {
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-						<IconField iconPosition="left">
+						<IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>
@@ -562,7 +562,7 @@ export default {
                 <template #header>
                     <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                         <h4 class="m-0">Manage Products</h4>
-						<IconField iconPosition="left">
+						<IconField>
                             <InputIcon>
                                 <i class="pi pi-search" />
                             </InputIcon>

diff --git a/doc/iconfield/BasicDoc.vue b/doc/iconfield/BasicDoc.vue
@@ -1,19 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            A group is created by wrapping the input and icon with the <i>IconField</i> component. Each icon is defined as a child of <i>InputIcon</i> component. In addition, position of the icon can be changed using <i>iconPosition</i> property that
-            the default value is <i>right</i> and also <i>left</i> option is available.
-        </p>
+        <p><i>IconField</i> wraps the <i>InputIcon</i> and the input field component.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <IconField>
-            <InputIcon class="pi pi-search"> </InputIcon>
+            <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
         </IconField>
 
         <IconField>
             <InputText v-model="value2" />
-            <InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
+            <InputIcon class="pi pi-spin pi-spinner" />
         </IconField>
     </div>
     <DocSectionCode :code="code" />
@@ -28,27 +25,26 @@ export default {
             code: {
                 basic: `
 <IconField>
-    <InputIcon class="pi pi-search"> </InputIcon>
+    <InputIcon class="pi pi-search" />
     <InputText v-model="value1" placeholder="Search" />
 </IconField>
 
 <IconField>
-    <InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
     <InputText v-model="value2" />
+    <InputIcon class="pi pi-spin pi-spinner" />
 </IconField>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <IconField>
-            <IconField>
-            <InputIcon class="pi pi-search"> </InputIcon>
+            <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
         </IconField>
 
         <IconField>
-            <InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
             <InputText v-model="value2" />
+            <InputIcon class="pi pi-spin pi-spinner" />
         </IconField>
     </div>
 </template>
@@ -68,13 +64,13 @@ export default {
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
         <IconField>
-            <InputIcon class="pi pi-search"> </InputIcon>
+            <InputIcon class="pi pi-search" />
             <InputText v-model="value1" placeholder="Search" />
         </IconField>
 
         <IconField>
-            <InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
             <InputText v-model="value2" />
+            <InputIcon class="pi pi-spin pi-spinner" />
         </IconField>
     </div>
 </template>