From e7d79de87393d62f69720859427b12b42c4c8433 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Thu, 5 Oct 2023 18:36:13 +0530
Subject: [PATCH 01/11] feat(react): add Autocomplete component

---
 packages/react/.storybook/story-config.ts     |  4 +
 .../Autocomplete/Autocomplete.stories.mdx     | 98 +++++++++++++++++++
 .../components/Autocomplete/Autocomplete.tsx  | 49 ++++++++++
 .../__tests__/Autocomplete.test.tsx           | 63 ++++++++++++
 .../__snapshots__/Autocomplete.test.tsx.snap  | 85 ++++++++++++++++
 .../src/components/Autocomplete/index.ts      | 20 ++++
 packages/react/src/components/index.ts        |  3 +
 7 files changed, 322 insertions(+)
 create mode 100644 packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
 create mode 100644 packages/react/src/components/Autocomplete/Autocomplete.tsx
 create mode 100644 packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx
 create mode 100644 packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
 create mode 100644 packages/react/src/components/Autocomplete/index.ts

diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index 27b57e6f..8ef27387 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/packages/react/.storybook/story-config.ts
@@ -43,6 +43,7 @@ export type Stories =
   | 'AlertTitle'
   | 'AppBar'
   | 'AppShell'
+  | 'Autocomplete'
   | 'Avatar'
   | 'Backdrop'
   | 'Badge'
@@ -161,6 +162,9 @@ const StoryConfig: StorybookConfig = {
   AppShell: {
     hierarchy: `${StorybookCategories.Layout}/App Shell`,
   },
+  Autocomplete: {
+    hierarchy: `${StorybookCategories.Inputs}/Autocomplete`,
+  },
   Avatar: {
     hierarchy: `${StorybookCategories.DataDisplay}/Avatar`,
   },
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
new file mode 100644
index 00000000..1b5a8f39
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
@@ -0,0 +1,98 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Autocomplete from './Autocomplete.tsx';
+import TextField from '../TextField';
+
+export const meta = {
+  component: Autocomplete,
+  title: StoryConfig.Autocomplete.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Autocomplete {...args} />;
+
+# Autocomplete
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Autocomplete is a conventional text input field that is improved with a panel displaying suggested choices.
+
+### Combination box
+
+The textbox's value needs to be chosen from a predefined set of allowed values.
+<Canvas>
+  <Story
+    name="Combination box"
+    args={
+        {
+            options: [
+                { label: 'The Shawshank Redemption', year: 1994 },
+                { label: 'The Godfather', year: 1972 },
+                { label: 'The Godfather: Part II', year: 1974 },
+                { label: 'The Dark Knight', year: 2008 },
+                { label: '12 Angry Men', year: 1957 },
+                { label: "Schindler's List", year: 1993 },
+                { label: 'Pulp Fiction', year: 1994 }
+            ],
+            renderInput: params  => <TextField {...params} label="Movie" />
+        }
+    }
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+#### Props
+
+<ArgsTable story="Combination box" />
+
+### Multiple values
+
+This is also known as tags, this allows the user to enter more than one value.
+<Canvas>
+  <Story
+    name="Multiple values"
+    args={
+        {
+            options: [
+                { label: 'The Shawshank Redemption', year: 1994 },
+                { label: 'The Godfather', year: 1972 },
+                { label: 'The Godfather: Part II', year: 1974 },
+                { label: 'The Dark Knight', year: 2008 },
+                { label: '12 Angry Men', year: 1957 },
+                { label: "Schindler's List", year: 1993 },
+                { label: 'Pulp Fiction', year: 1994 }
+            ],
+            renderInput: params  => <TextField {...params} label="Movie" />,
+            multiple: true,
+            defaultValue: [
+                { label: 'The Shawshank Redemption', year: 1994 },
+                { label: 'The Godfather', year: 1972 }
+            ]
+        }
+    }
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+#### Props
+
+<ArgsTable story="Multiple values" />
+
+## Usage
+
+Import and use the `Autocomplete` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Autocomplete from '@oxygen-ui/react/Autocomplete';\n`}
+/>
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
new file mode 100644
index 00000000..54072ec7
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiAutocomplete, {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type AutocompleteProps<T> = MuiAutocompleteProps<
+  T,
+  boolean | undefined,
+  boolean | undefined,
+  boolean | undefined
+>;
+
+const COMPONENT_NAME: string = 'AutoComplete';
+type T = object;
+
+const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<T>> & WithWrapperProps = forwardRef(
+  (props: AutocompleteProps<T>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx('oxygen-autocomplete', className);
+
+    return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
+  },
+) as ForwardRefExoticComponent<AutocompleteProps<T>> & WithWrapperProps;
+
+Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Autocomplete.muiName = COMPONENT_NAME;
+Autocomplete.defaultProps = {};
+
+export default Autocomplete;
diff --git a/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx b/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx
new file mode 100644
index 00000000..63e586f4
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {AutocompleteRenderInputParams} from '@mui/material/Autocomplete/Autocomplete';
+import {render} from '@unit-testing';
+import {ReactNode} from 'react';
+import TextField from '../../TextField';
+import Autocomplete from '../Autocomplete';
+
+describe('Alert', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Autocomplete
+        disablePortal
+        options={[
+          {label: 'The Shawshank Redemption', year: 1994},
+          {label: 'The Godfather', year: 1972},
+          {label: 'The Godfather: Part II', year: 1974},
+          {label: 'The Dark Knight', year: 2008},
+          {label: '12 Angry Men', year: 1957},
+          {label: "Schindler's List", year: 1993},
+          {label: 'Pulp Fiction', year: 1994},
+        ]}
+        renderInput={(params: AutocompleteRenderInputParams): ReactNode => <TextField {...params} label="Movie" />}
+      />,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Autocomplete
+        disablePortal
+        options={[
+          {label: 'The Shawshank Redemption', year: 1994},
+          {label: 'The Godfather', year: 1972},
+          {label: 'The Godfather: Part II', year: 1974},
+          {label: 'The Dark Knight', year: 2008},
+          {label: '12 Angry Men', year: 1957},
+          {label: "Schindler's List", year: 1993},
+          {label: 'Pulp Fiction', year: 1994},
+        ]}
+        renderInput={(params: AutocompleteRenderInputParams): ReactNode => <TextField {...params} label="Movie" />}
+      />,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
new file mode 100644
index 00000000..838729e4
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon oxygen-autocomplete css-l3ln04-MuiAutocomplete-root"
+    >
+      <div
+        class="oxygen-text-field"
+      >
+        <label
+          aria-describedby=":r2:"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated oxygen-input-label css-f3834g-MuiFormLabel-root-MuiInputLabel-root"
+          for=":r2:"
+          id=":r2:-label"
+        >
+          Movie
+        </label>
+        <div
+          class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+        >
+          <div
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-expanded="false"
+              aria-invalid="false"
+              autocapitalize="none"
+              autocomplete="off"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-11fn00k-MuiInputBase-input-MuiOutlinedInput-input"
+              id=":r2:"
+              role="combobox"
+              spellcheck="false"
+              type="text"
+              value=""
+            />
+            <div
+              class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+            >
+              <button
+                aria-label="Open"
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-1n4oo3i-MuiButtonBase-root-MuiIconButton-root-MuiAutocomplete-popupIndicator"
+                tabindex="-1"
+                title="Open"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                  data-testid="ArrowDropDownIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </div>
+            <fieldset
+              aria-hidden="true"
+              class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+            >
+              <legend
+                class="css-ihdtdm"
+              >
+                <span
+                  class="notranslate"
+                >
+                  ​
+                </span>
+              </legend>
+            </fieldset>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Autocomplete/index.ts b/packages/react/src/components/Autocomplete/index.ts
new file mode 100644
index 00000000..67d7bc98
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Autocomplete';
+export type {AutocompleteProps} from './Autocomplete';
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 65525944..468294a9 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -34,6 +34,9 @@ export * from './AppBar';
 export {default as AppShell} from './AppShell';
 export * from './AppShell';
 
+export {default as Autocomplete} from './Autocomplete';
+export * from './Autocomplete';
+
 export {default as Avatar} from './Avatar';
 export * from './Avatar';
 

From 4383e78c0c82fb2b57851a0822c130e8aa2dfc32 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Fri, 6 Oct 2023 10:18:31 +0530
Subject: [PATCH 02/11] chore(react): fix PR comments

---
 .../components/Autocomplete/Autocomplete.tsx  | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index 54072ec7..13d90ea1 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -22,25 +22,20 @@ import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} f
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
 
-export type AutocompleteProps<T> = MuiAutocompleteProps<
-  T,
-  boolean | undefined,
-  boolean | undefined,
-  boolean | undefined
->;
+type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean, boolean, boolean>;
 
-const COMPONENT_NAME: string = 'AutoComplete';
-type T = object;
+const COMPONENT_NAME: string = 'Autocomplete';
 
-const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<T>> & WithWrapperProps = forwardRef(
-  (props: AutocompleteProps<T>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
+const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<Record<string, unknown>>> & WithWrapperProps =
+  forwardRef(
+    (props: AutocompleteProps<Record<string, unknown>>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+      const {className, ...rest} = props;
 
-    const classes: string = clsx('oxygen-autocomplete', className);
+      const classes: string = clsx('oxygen-autocomplete', className);
 
-    return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
-  },
-) as ForwardRefExoticComponent<AutocompleteProps<T>> & WithWrapperProps;
+      return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
+    },
+  ) as ForwardRefExoticComponent<AutocompleteProps<Record<string, unknown>>> & WithWrapperProps;
 
 Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Autocomplete.muiName = COMPONENT_NAME;

From bb00ba98bb7a79b4b89be78a7f15b1115e37aac7 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Fri, 6 Oct 2023 10:33:28 +0530
Subject: [PATCH 03/11] chore(react): fix PR builder failures

---
 packages/react/src/components/Autocomplete/Autocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index 13d90ea1..0fa3dc22 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -22,7 +22,7 @@ import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} f
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
 
-type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean, boolean, boolean>;
+export type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean, boolean, boolean>;
 
 const COMPONENT_NAME: string = 'Autocomplete';
 

From 8e8fc1ba6cd8f8e743e784e2b546064fbb5d3218 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Sun, 8 Oct 2023 21:27:01 +0530
Subject: [PATCH 04/11] chore(react): added scss file for the autocomplete
 component

---
 .../components/Autocomplete/Autocomplete.tsx  |  1 +
 .../components/Autocomplete/autocomplete.scss | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 packages/react/src/components/Autocomplete/autocomplete.scss

diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index 0fa3dc22..5191997b 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -21,6 +21,7 @@ import clsx from 'clsx';
 import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
+import './autocomplete.scss';
 
 export type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean, boolean, boolean>;
 
diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
new file mode 100644
index 00000000..1f6de559
--- /dev/null
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-autocomplete {
+    padding-top: 16px;
+    padding-bottom: 16px;
+}

From 42d30c72833b45dad34ae36768df4aba54061915 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Sun, 8 Oct 2023 21:37:50 +0530
Subject: [PATCH 05/11] chore(react): fix eslint issues

---
 packages/react/src/components/Autocomplete/autocomplete.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
index 1f6de559..402ff591 100644
--- a/packages/react/src/components/Autocomplete/autocomplete.scss
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -17,6 +17,6 @@
  */
 
 .oxygen-autocomplete {
-    padding-top: 16px;
-    padding-bottom: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }

From 9062c46dc012aed02810bee2868409c5ba806c26 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Mon, 9 Oct 2023 13:49:34 +0530
Subject: [PATCH 06/11] chore(react): fix PR comments

---
 packages/react/package.json                                   | 2 +-
 .../src/components/Autocomplete/Autocomplete.stories.mdx      | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 254ff4e3..9b044871 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -79,7 +79,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
+    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?acf69507a3f1c83401f1d4b49e4ab8813b174165",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
     "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
     "babel-jest": "^29.3.1",
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
index 1b5a8f39..734a4900 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx
@@ -9,7 +9,7 @@ export const meta = {
   title: StoryConfig.Autocomplete.hierarchy,
 };
 
-<Meta title={meta.title} component={meta.component} />
+<Meta title="Inputs/Autocomplete" component={Autocomplete} />
 
 export const Template = args => <Autocomplete {...args} />;
 
@@ -26,6 +26,7 @@ Autocomplete is a conventional text input field that is improved with a panel di
 ### Combination box
 
 The textbox's value needs to be chosen from a predefined set of allowed values.
+
 <Canvas>
   <Story
     name="Combination box"
@@ -55,6 +56,7 @@ The textbox's value needs to be chosen from a predefined set of allowed values.
 ### Multiple values
 
 This is also known as tags, this allows the user to enter more than one value.
+
 <Canvas>
   <Story
     name="Multiple values"

From 56e639e7c12e37da1002f03bd4d8b3f24e812fe8 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Mon, 9 Oct 2023 14:07:01 +0530
Subject: [PATCH 07/11] chore(react): fix PR comments

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 9b044871..254ff4e3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -79,7 +79,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?acf69507a3f1c83401f1d4b49e4ab8813b174165",
+    "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
     "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?5bf60cabe9e9a2571e8b1dd16d0c3bdc76db2c4f",
     "babel-jest": "^29.3.1",

From 6d8083e6ea371f12c6823b9ebad0f6439a1c5195 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Wed, 11 Oct 2023 11:23:42 +0530
Subject: [PATCH 08/11] chore(react): edit autocomplete scss file

---
 packages/react/src/components/Autocomplete/autocomplete.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
index 402ff591..3da6404b 100644
--- a/packages/react/src/components/Autocomplete/autocomplete.scss
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -17,6 +17,6 @@
  */
 
 .oxygen-autocomplete {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-top: 14px;
+  padding-bottom: 14px;
 }

From af0337eaef580bc5d915fb25d9f78ed9d0efcd5a Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Thu, 12 Oct 2023 11:33:23 +0530
Subject: [PATCH 09/11] chore(react): edit autocomplete scss file and change
 the chip scss

---
 .../react/src/components/Autocomplete/autocomplete.scss    | 7 +++++--
 packages/react/src/components/Chip/chip.scss               | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
index 3da6404b..743728bc 100644
--- a/packages/react/src/components/Autocomplete/autocomplete.scss
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -17,6 +17,9 @@
  */
 
 .oxygen-autocomplete {
-  padding-top: 14px;
-  padding-bottom: 14px;
+  padding-top: 14px !important;
+  padding-bottom: 14px !important;
+  .MuiButtonBase-root {
+    height: 32px !important;
+  }
 }
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
index d2120445..291e7db3 100644
--- a/packages/react/src/components/Chip/chip.scss
+++ b/packages/react/src/components/Chip/chip.scss
@@ -17,6 +17,8 @@
  */
 
 .oxygen-chip {
+  font-size: 0.85714286rem !important;
+  padding: 7px 3px !important;
   &-premium {
     background: var(--oxygen-customComponents-Chip-properties-premium-background);
     color: var(--oxygen-customComponents-Chip-properties-premium-text-color);

From be33d05c445d9aae58283ff49da9cc61675ce3d4 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Thu, 12 Oct 2023 11:42:22 +0530
Subject: [PATCH 10/11] chore(react): fix eslint issues

---
 packages/react/src/components/Autocomplete/autocomplete.scss | 1 +
 packages/react/src/components/Chip/chip.scss                 | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
index 743728bc..20c71423 100644
--- a/packages/react/src/components/Autocomplete/autocomplete.scss
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -19,6 +19,7 @@
 .oxygen-autocomplete {
   padding-top: 14px !important;
   padding-bottom: 14px !important;
+  
   .MuiButtonBase-root {
     height: 32px !important;
   }
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
index 291e7db3..dea667c4 100644
--- a/packages/react/src/components/Chip/chip.scss
+++ b/packages/react/src/components/Chip/chip.scss
@@ -17,8 +17,9 @@
  */
 
 .oxygen-chip {
-  font-size: 0.85714286rem !important;
+  font-size: 0.8571rem !important;
   padding: 7px 3px !important;
+  
   &-premium {
     background: var(--oxygen-customComponents-Chip-properties-premium-background);
     color: var(--oxygen-customComponents-Chip-properties-premium-text-color);

From aa00d4971bc673e0da2843dc5ee7e0bbd18db520 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Thu, 12 Oct 2023 12:00:55 +0530
Subject: [PATCH 11/11] chore(react): fix eslint issues

---
 packages/react/src/components/Autocomplete/autocomplete.scss | 2 +-
 packages/react/src/components/Chip/chip.scss                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss
index 20c71423..8bfddad7 100644
--- a/packages/react/src/components/Autocomplete/autocomplete.scss
+++ b/packages/react/src/components/Autocomplete/autocomplete.scss
@@ -19,7 +19,7 @@
 .oxygen-autocomplete {
   padding-top: 14px !important;
   padding-bottom: 14px !important;
-  
+
   .MuiButtonBase-root {
     height: 32px !important;
   }
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
index dea667c4..50606fe7 100644
--- a/packages/react/src/components/Chip/chip.scss
+++ b/packages/react/src/components/Chip/chip.scss
@@ -19,7 +19,7 @@
 .oxygen-chip {
   font-size: 0.8571rem !important;
   padding: 7px 3px !important;
-  
+
   &-premium {
     background: var(--oxygen-customComponents-Chip-properties-premium-background);
     color: var(--oxygen-customComponents-Chip-properties-premium-text-color);