Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][InputLabel] Changed size prop value from normal to medium #45235

Merged
merged 13 commits into from
Feb 12, 2025
Merged
13 changes: 13 additions & 0 deletions docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,16 @@ npx @mui/codemod@next v7.0.0/lab-removed-components <path/to/folder>
:::warning
The codemod doesn't cover type imports associated with the components.
:::

### InputLabel

The `size` prop for `InputLabel` now follows the standard naming convention used across other components like `Button` and `TextField`. `'normal'` has been replaced with `'medium'` for consistency.

If you were using `size="normal"`, update it to `size="medium"`:

```diff
-<InputLabel size="normal">Label</InputLabel>
+<InputLabel size="medium">Label</InputLabel>
```

The default behavior remains unchanged, so no updates are needed unless you explicitly set `size="normal"`.
4 changes: 2 additions & 2 deletions docs/pages/material-ui/api/input-label.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
"size": {
"type": {
"name": "union",
"description": "'normal'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
"description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
},
"default": "'normal'"
"default": "'medium'"
},
"sx": {
"type": {
Expand Down
19 changes: 19 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2058,6 +2058,25 @@ As well as default and named imports from component-level files:
+ import Alert, { alertClasses } from '@mui/material/Alert';
```

#### `input-label-size-normal-medium`

Updates the `InputLabel`'s `size` value from `normal` to `medium`.

```diff
-<InputLabel size="normal">Label</InputLabel>
+<InputLabel size="medium">Label</InputLabel>
```

<!-- #npm-tag-reference -->

```bash
npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path>
```

<!-- #host-reference -->

You can find more details about this breaking change in [the migration guide](https://next.mui.com/material-ui/migration/upgrade-to-v7/#inputlabel).

### v6.0.0

#### `sx-prop`
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './input-label-size-normal-medium';
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options) {
const j = api.jscodeshift;

const printOptions = options.printOptions;

const source = j(file.source)
.findJSXElements('InputLabel')
.forEach((path) => {
path.node.openingElement.attributes.forEach((node) => {
if (
node.type === 'JSXAttribute' &&
node.name.name === 'size' &&
(node.value.value === 'normal' || node.value.expression?.value === 'normal')
) {
node.value = j.literal('medium');
}
});
})
.toSource(printOptions);
return source.replace(/\.MuiInputLabel-normal/gm, '.MuiInputLabel-medium');
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import path from 'path';
import { expect } from 'chai';
import jscodeshift from 'jscodeshift';
import transform from './input-label-size-normal-medium';
import readFile from '../../util/readFile';

function read(fileName) {
return readFile(path.join(__dirname, fileName));
}

describe('@mui/codemod', () => {
describe('v7.0.0', () => {
describe('input-label-size-normal-medium', () => {
it('transforms props as needed', () => {
const actual = transform(
{
source: read('./test-cases/actual.js'),
path: require.resolve('./test-cases/actual.js'),
},
{ jscodeshift },
{},
);

const expected = read('./test-cases/expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform(
{
source: read('./test-cases/expected.js'),
path: require.resolve('./test-cases/expected.js'),
},
{ jscodeshift },
{},
);

const expected = read('./test-cases/expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div>
<InputLabel size="normal">Label</InputLabel>
<InputLabel
sx={{
'& .MuiInputLabel-normal': {
color: 'red',
},
}}
>
Label
</InputLabel>
</div>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div>
<InputLabel size="medium">Label</InputLabel>
<InputLabel
sx={{
'& .MuiInputLabel-medium': {
color: 'red',
},
}}
>
Label
</InputLabel>
</div>;
4 changes: 2 additions & 2 deletions packages/mui-material/src/InputLabel/InputLabel.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ export interface InputLabelOwnProps extends Pick<FormLabelProps, 'children'> {
shrink?: boolean;
/**
* The size of the component.
* @default 'normal'
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
size?: OverridableStringUnion<'small' | 'medium', InputLabelPropsSizeOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
Expand Down
6 changes: 3 additions & 3 deletions packages/mui-material/src/InputLabel/InputLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const useUtilityClasses = (ownerState) => {
formControl && 'formControl',
!disableAnimation && 'animated',
shrink && 'shrink',
size && size !== 'normal' && `size${capitalize(size)}`,
size && size !== 'medium' && `size${capitalize(size)}`,
variant,
],
asterisk: [required && 'asterisk'],
Expand Down Expand Up @@ -280,10 +280,10 @@ InputLabel.propTypes /* remove-proptypes */ = {
shrink: PropTypes.bool,
/**
* The size of the component.
* @default 'normal'
* @default 'medium'
*/
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
PropTypes.oneOf(['normal', 'small']),
PropTypes.oneOf(['medium', 'small']),
PropTypes.string,
]),
/**
Expand Down