From 5ca4b92e9a99b75148915365f6f69c368a9baa1c Mon Sep 17 00:00:00 2001
From: savindi7 <savindi@wso2.com>
Date: Tue, 9 Jan 2024 10:50:04 +0530
Subject: [PATCH 1/2] chore(react): update input label asterisk styles

---
 .../react/src/components/InputLabel/InputLabel.tsx    | 11 ++++++++---
 .../react/src/components/InputLabel/input-label.scss  |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx
index 12b89268..c1248e65 100644
--- a/packages/react/src/components/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/InputLabel/InputLabel.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import MuiInputLabel, {InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
+import MuiInputLabel, {inputLabelClasses, InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
 import clsx from 'clsx';
 import {FC, ReactElement} from 'react';
 import {WithWrapperProps} from '../../models';
@@ -24,15 +24,20 @@ import {composeComponentDisplayName} from '../../utils';
 import './input-label.scss';
 
 export type InputLabelProps = MuiInputLabelProps;
+export type InputLabelClasses = typeof inputLabelClasses;
 
 const COMPONENT_NAME: string = 'InputLabel';
 
 const InputLabel: FC<InputLabelProps> & WithWrapperProps = (props: InputLabelProps): ReactElement => {
-  const {className, ...rest} = props;
+  const {className, classes: labelClasses, ...rest} = props;
 
   const classes: string = clsx('oxygen-input-label', className);
+  const mergedClasses: Partial<InputLabelClasses> = {
+    ...labelClasses,
+    asterisk: clsx(labelClasses?.asterisk, 'oxygen-input-label-asterisk'),
+  };
 
-  return <MuiInputLabel className={classes} {...rest} />;
+  return <MuiInputLabel className={classes} classes={mergedClasses} {...rest} />;
 };
 
 InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
diff --git a/packages/react/src/components/InputLabel/input-label.scss b/packages/react/src/components/InputLabel/input-label.scss
index 94134704..df0b1575 100644
--- a/packages/react/src/components/InputLabel/input-label.scss
+++ b/packages/react/src/components/InputLabel/input-label.scss
@@ -17,5 +17,7 @@
  */
 
 .oxygen-input-label {
-  /* Add Styles */
+  &-asterisk {
+    color: var(--oxygen-palette-error-main);
+  }
 }

From 27778b089f23b2751031b00300c6a38e5a2b01a7 Mon Sep 17 00:00:00 2001
From: savindi7 <savindi@wso2.com>
Date: Tue, 9 Jan 2024 11:53:20 +0530
Subject: [PATCH 2/2] fix(react): update color of required input labels'
 asterisk

---
 .../react/src/components/InputLabel/InputLabel.tsx    | 11 +++--------
 .../react/src/components/InputLabel/input-label.scss  |  4 +---
 packages/react/src/theme/default-theme.ts             |  7 +++++++
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx
index c1248e65..12b89268 100644
--- a/packages/react/src/components/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/InputLabel/InputLabel.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import MuiInputLabel, {inputLabelClasses, InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
+import MuiInputLabel, {InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
 import clsx from 'clsx';
 import {FC, ReactElement} from 'react';
 import {WithWrapperProps} from '../../models';
@@ -24,20 +24,15 @@ import {composeComponentDisplayName} from '../../utils';
 import './input-label.scss';
 
 export type InputLabelProps = MuiInputLabelProps;
-export type InputLabelClasses = typeof inputLabelClasses;
 
 const COMPONENT_NAME: string = 'InputLabel';
 
 const InputLabel: FC<InputLabelProps> & WithWrapperProps = (props: InputLabelProps): ReactElement => {
-  const {className, classes: labelClasses, ...rest} = props;
+  const {className, ...rest} = props;
 
   const classes: string = clsx('oxygen-input-label', className);
-  const mergedClasses: Partial<InputLabelClasses> = {
-    ...labelClasses,
-    asterisk: clsx(labelClasses?.asterisk, 'oxygen-input-label-asterisk'),
-  };
 
-  return <MuiInputLabel className={classes} classes={mergedClasses} {...rest} />;
+  return <MuiInputLabel className={classes} {...rest} />;
 };
 
 InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
diff --git a/packages/react/src/components/InputLabel/input-label.scss b/packages/react/src/components/InputLabel/input-label.scss
index df0b1575..94134704 100644
--- a/packages/react/src/components/InputLabel/input-label.scss
+++ b/packages/react/src/components/InputLabel/input-label.scss
@@ -17,7 +17,5 @@
  */
 
 .oxygen-input-label {
-  &-asterisk {
-    color: var(--oxygen-palette-error-main);
-  }
+  /* Add Styles */
 }
diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
index 7baa5857..649ccef9 100644
--- a/packages/react/src/theme/default-theme.ts
+++ b/packages/react/src/theme/default-theme.ts
@@ -145,6 +145,13 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
         },
       },
     },
+    MuiFormLabel: {
+      styleOverrides: {
+        asterisk: {
+          color: 'var(--oxygen-palette-error-main)',
+        },
+      },
+    },
     MuiTypography: {
       defaultProps: {
         variantMapping: {