fix(react): fix Select label margin issues

wso2 · Nov 19, 2024 · d603954 · d603954
1 parent e10a6e1
commit d603954
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 30 deletions.
diff --git a/packages/react/src/components/Select/Select.stories.mdx b/packages/react/src/components/Select/Select.stories.mdx
@@ -1,10 +1,11 @@
 import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
 import {useArgs} from '@storybook/client-api';
 import dedent from 'ts-dedent';
-import StoryConfig from '../../../.storybook/story-config.ts';
 import Select from './Select.tsx';
-import MenuItem from '../MenuItem';
+import StoryConfig from '../../../.storybook/story-config.ts';
 import FormControl from '../FormControl/FormControl.tsx';
+import MenuItem from '../MenuItem/MenuItem.tsx';
+import Stack from '../Stack/Stack.tsx';
 
 export const meta = {
   component: Select,
@@ -14,18 +15,34 @@ export const meta = {
 <Meta title={meta.title} component={meta.component} />
 
 export const Template = args => {
-  const [{open, anchor, onChange, label}, updateArgs] = useArgs();
+  const [{anchor}, updateArgs] = useArgs();
   return (
-    <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>
-  )
+    <Stack gap={2}>
+      <FormControl fullWidth variant="standard">
+        <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>
+      <FormControl fullWidth variant="standard">
+        <Select label="Select Version" defaultValue="v0.1.0" onChange={() => updateArgs({value: anchor})} {...args}>
+          {['v0.1.0', 'v1.0.0', 'v2.0.0'].map(_anchor => (
+            <MenuItem key={_anchor} value={_anchor}>
+              {_anchor}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Stack>
+  );
 };
 
 # Select
@@ -39,11 +56,7 @@ export const Template = args => {
 The `Select` component is used to create a select input.
 
 <Canvas>
-  <Story
-    name="Overview"
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="Overview">{Template.bind({})}</Story>
 </Canvas>
 
 ## Props

diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
@@ -61,23 +61,23 @@ const Select: ForwardRefExoticComponent<SelectProps> = forwardRef(
       InputLabelProps = {
         disableAnimation: true,
         focused: false,
-        shrink: false,
+        shrink: true,
       },
       label,
       name,
       required,
+      size = 'small',
+      variant = 'outlined',
       ...rest
     }: SelectProps,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => {
-    const classes: string = clsx('oxygen-select', className);
-
     const labelProps: MuiInputLabelProps = {
       ...{
         disableAnimation: true,
         focused: false,
         required,
-        shrink: false,
+        shrink: true,
       },
       ...InputLabelProps,
     };
@@ -89,12 +89,37 @@ const Select: ForwardRefExoticComponent<SelectProps> = forwardRef(
             id={name}
             htmlFor={name}
             {...labelProps}
-            className={clsx('oxygen-select-static-label', InputLabelProps?.className)}
+            className={clsx(
+              /**
+               * @deprecated Use the `OxygenSelectLabel-root` class instead.
+               * This will be removed in the next major release (v3.0.0).
+               * Tracker: https://github.com/wso2/oxygen-ui/issues/274
+               */
+              'oxygen-select-static-label',
+              'OxygenSelectLabel-root',
+              InputLabelProps?.className,
+            )}
           >
             {label}
           </InputLabel>
         )}
-        <MuiSelect ref={ref} labelId={name} className={classes} {...rest} />
+        <MuiSelect
+          ref={ref}
+          className={clsx(
+            /**
+             * @deprecated Use the `OxygenSelect-root` class instead.
+             * This will be removed in the next major release (v3.0.0).
+             * Tracker: https://github.com/wso2/oxygen-ui/issues/274
+             */
+            'oxygen-select',
+            'OxygenSelect-root',
+            className,
+          )}
+          labelId={name}
+          size={size}
+          variant={variant}
+          {...rest}
+        />
       </>
     );
   },

diff --git a/packages/react/src/components/Select/select.scss b/packages/react/src/components/Select/select.scss
@@ -1,7 +1,3 @@
-// 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;
+.OxygenSelect-root {
+  margin-top: 24px;
 }