Merge pull request #172 from brionmario/feat-add-components

fix(react): fix static label issues in `Select`
wso2 · Oct 24, 2023 · f76d865 · f76d865
2 parents 4caac77 + 582ad31
commit f76d865
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/packages/react/src/components/Select/Select.stories.mdx b/packages/react/src/components/Select/Select.stories.mdx
@@ -4,6 +4,7 @@ import dedent from 'ts-dedent';
 import StoryConfig from '../../../.storybook/story-config.ts';
 import Select from './Select.tsx';
 import MenuItem from '../MenuItem';
+import FormControl from '../FormControl/FormControl.tsx';
 
 export const meta = {
   component: Select,
@@ -15,13 +16,15 @@ export const meta = {
 export const Template = args => {
   const [{open, anchor, onChange, label}, updateArgs] = useArgs();
   return (
-    <Select label="Select WSO2 Product" defaultValue='Asgardeo' onChange={() => updateArgs({value: anchor})} {...args}>
-      {['Asgardeo', 'Identity Server', 'Choreo', 'APIM'].map(anchor => (
-        <MenuItem key={anchor} value={anchor}>
-          {anchor}
-        </MenuItem>
-      ))}
-    </Select>
+    <FormControl fullWidth margin="dense">
+      <Select label="Select WSO2 Product" defaultValue='Asgardeo' onChange={() => updateArgs({value: anchor})} {...args}>
+        {['Asgardeo', 'Identity Server', 'Choreo', 'APIM'].map(anchor => (
+          <MenuItem key={anchor} value={anchor}>
+            {anchor}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   )
 };
 
@@ -62,7 +65,7 @@ function Demo() {
     <Select>
       <MenuItem value={10}>Ten</MenuItem>
       <MenuItem value={20}>Twenty</MenuItem>
-      <MenuItem value={30}>Thirty</MenuItem> 
+      <MenuItem value={30}>Thirty</MenuItem>
     </Select>
   );
 }`}

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -22,6 +22,7 @@ import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} f
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
 import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
+import './select.scss';
 
 export interface SelectProps extends MuiSelectProps {
   /**
@@ -41,6 +42,7 @@ const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwar
     const labelProps: MuiInputLabelProps = {
       ...{
         disableAnimation: true,
+        focused: false,
         required,
         shrink: false,
       },
@@ -50,7 +52,12 @@ const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwar
     return (
       <>
         {label && (
-          <InputLabel id={name} htmlFor={name} {...labelProps}>
+          <InputLabel
+            id={name}
+            htmlFor={name}
+            {...labelProps}
+            className={clsx('oxygen-select-static-label', InputLabelProps?.className)}
+          >
             {label}
           </InputLabel>
         )}
@@ -65,6 +72,7 @@ Select.muiName = COMPONENT_NAME;
 Select.defaultProps = {
   InputLabelProps: {
     disableAnimation: true,
+    focused: false,
     shrink: false,
   },
 };

diff --git a/packages/react/src/components/Select/select.scss b/packages/react/src/components/Select/select.scss
@@ -0,0 +1,7 @@
+// TODO: Remove this when we have a better solution.
+// This seems like a bug from the MUI side.
+// Tracker: https://github.com/wso2/oxygen-ui/issues/171
+.oxygen-select-static-label {
+  margin-top: -40px;
+  margin-left: -14px;
+}