Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(react): fix Select label margin issues
Browse files Browse the repository at this point in the history
brionmario committed Nov 19, 2024
1 parent 9ab8b75 commit 63ebbfd
Showing 3 changed files with 64 additions and 30 deletions.
49 changes: 31 additions & 18 deletions packages/react/src/components/Select/Select.stories.mdx
Original file line number Diff line number Diff line change
@@ -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
37 changes: 31 additions & 6 deletions packages/react/src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
</>
);
},
8 changes: 2 additions & 6 deletions packages/react/src/components/Select/select.scss
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 63ebbfd

Please sign in to comment.