From 650189e7e806a532d8007b2de6d28914fbe0f74e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 9 Nov 2023 18:25:42 +0300
Subject: [PATCH] Update docs

---
 doc/inputgroup/BasicDoc.vue  |  2 +-
 doc/inputgroup/ImportDoc.vue | 19 +++++++++++++++++++
 pages/inputgroup/index.vue   |  8 +++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 doc/inputgroup/ImportDoc.vue

diff --git a/doc/inputgroup/BasicDoc.vue b/doc/inputgroup/BasicDoc.vue
index 8541460a4..35454b836 100644
--- a/doc/inputgroup/BasicDoc.vue
+++ b/doc/inputgroup/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class.</p>
+        <p>A group is created by wrapping the input and add-ons with the <i>InputGroup</i> component. Each add-on element is defined as a child of <i>InputGroupAddon</i> component.</p>
     </DocSectionText>
     <div class="card flex flex-column md:flex-row gap-3">
         <InputGroup>
diff --git a/doc/inputgroup/ImportDoc.vue b/doc/inputgroup/ImportDoc.vue
new file mode 100644
index 000000000..a360d0dc4
--- /dev/null
+++ b/doc/inputgroup/ImportDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputGroup from 'primevue/inputgroup';
+import InputGroupAddon from 'primevue/inputgroupaddon';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/inputgroup/index.vue b/pages/inputgroup/index.vue
index 963a0ae8a..fdbddabe8 100755
--- a/pages/inputgroup/index.vue
+++ b/pages/inputgroup/index.vue
@@ -10,17 +10,23 @@
 </template>
 
 <script>
+import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputgroup/BasicDoc.vue';
 import ButtonDoc from '@/doc/inputgroup/ButtonDoc.vue';
 import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
+import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
 import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
 import PTComponent from '@/doc/inputgroup/pt/index.vue';
-import AccessibilityDoc from '@/doc/inputgroup/AccessibilityDoc.vue';
 
 export default {
     data() {
         return {
             docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
                 {
                     id: 'basic',
                     label: 'Basic',