From 005329dca2a2a97a45ad38be8e7b134eb342e9c5 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 15:58:31 +0000 Subject: [PATCH 01/24] [Joy] Remove TextField component and its demos --- .../components/text-field/TextFieldColors.js | 42 --- .../components/text-field/TextFieldColors.tsx | 42 --- .../text-field/TextFieldComposition.js | 15 - .../text-field/TextFieldComposition.tsx | 15 - .../TextFieldComposition.tsx.preview | 5 - .../text-field/TextFieldDecorators.js | 31 -- .../text-field/TextFieldDecorators.tsx | 31 -- .../text-field/TextFieldFormProps.js | 26 -- .../text-field/TextFieldFormProps.tsx | 26 -- .../text-field/TextFieldFormProps.tsx.preview | 7 - .../text-field/TextFieldFullwidth.js | 11 - .../text-field/TextFieldFullwidth.tsx | 11 - .../text-field/TextFieldFullwidth.tsx.preview | 1 - .../components/text-field/TextFieldSizes.js | 13 - .../components/text-field/TextFieldSizes.tsx | 13 - .../text-field/TextFieldSizes.tsx.preview | 3 - .../components/text-field/TextFieldUsage.js | 51 --- .../text-field/TextFieldValidation.js | 16 - .../text-field/TextFieldValidation.tsx | 16 - .../TextFieldValidation.tsx.preview | 6 - .../text-field/TextFieldVariants.js | 22 -- .../text-field/TextFieldVariants.tsx | 22 -- .../text-field/TextFieldVariants.tsx.preview | 4 - .../components/text-field/text-field-pt.md | 72 ---- .../components/text-field/text-field-zh.md | 72 ---- .../joy/components/text-field/text-field.md | 81 ---- .../mui-joy/src/TextField/TextField.spec.tsx | 21 -- .../mui-joy/src/TextField/TextField.test.js | 174 --------- packages/mui-joy/src/TextField/TextField.tsx | 356 ------------------ .../mui-joy/src/TextField/TextFieldProps.ts | 77 ---- packages/mui-joy/src/TextField/index.ts | 4 - .../mui-joy/src/TextField/textFieldClasses.ts | 66 ---- packages/mui-joy/src/index.ts | 3 - packages/mui-joy/src/styles/components.d.ts | 5 - 34 files changed, 1360 deletions(-) delete mode 100644 docs/data/joy/components/text-field/TextFieldColors.js delete mode 100644 docs/data/joy/components/text-field/TextFieldColors.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldComposition.js delete mode 100644 docs/data/joy/components/text-field/TextFieldComposition.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldComposition.tsx.preview delete mode 100644 docs/data/joy/components/text-field/TextFieldDecorators.js delete mode 100644 docs/data/joy/components/text-field/TextFieldDecorators.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldFormProps.js delete mode 100644 docs/data/joy/components/text-field/TextFieldFormProps.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview delete mode 100644 docs/data/joy/components/text-field/TextFieldFullwidth.js delete mode 100644 docs/data/joy/components/text-field/TextFieldFullwidth.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview delete mode 100644 docs/data/joy/components/text-field/TextFieldSizes.js delete mode 100644 docs/data/joy/components/text-field/TextFieldSizes.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldSizes.tsx.preview delete mode 100644 docs/data/joy/components/text-field/TextFieldUsage.js delete mode 100644 docs/data/joy/components/text-field/TextFieldValidation.js delete mode 100644 docs/data/joy/components/text-field/TextFieldValidation.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldValidation.tsx.preview delete mode 100644 docs/data/joy/components/text-field/TextFieldVariants.js delete mode 100644 docs/data/joy/components/text-field/TextFieldVariants.tsx delete mode 100644 docs/data/joy/components/text-field/TextFieldVariants.tsx.preview delete mode 100644 docs/data/joy/components/text-field/text-field-pt.md delete mode 100644 docs/data/joy/components/text-field/text-field-zh.md delete mode 100644 docs/data/joy/components/text-field/text-field.md delete mode 100644 packages/mui-joy/src/TextField/TextField.spec.tsx delete mode 100644 packages/mui-joy/src/TextField/TextField.test.js delete mode 100644 packages/mui-joy/src/TextField/TextField.tsx delete mode 100644 packages/mui-joy/src/TextField/TextFieldProps.ts delete mode 100644 packages/mui-joy/src/TextField/index.ts delete mode 100644 packages/mui-joy/src/TextField/textFieldClasses.ts diff --git a/docs/data/joy/components/text-field/TextFieldColors.js b/docs/data/joy/components/text-field/TextFieldColors.js deleted file mode 100644 index c197ceb1828d21..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldColors.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldColors() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldColors.tsx b/docs/data/joy/components/text-field/TextFieldColors.tsx deleted file mode 100644 index c197ceb1828d21..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldColors.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldColors() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldComposition.js b/docs/data/joy/components/text-field/TextFieldComposition.js deleted file mode 100644 index 112e731c471acb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldComposition.js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/joy/FormControl'; -import FormLabel from '@mui/joy/FormLabel'; -import FormHelperText from '@mui/joy/FormHelperText'; -import Input from '@mui/joy/Input'; - -export default function TextFieldComposition() { - return ( - - Label - - This is a helper text. - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldComposition.tsx b/docs/data/joy/components/text-field/TextFieldComposition.tsx deleted file mode 100644 index 112e731c471acb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldComposition.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/joy/FormControl'; -import FormLabel from '@mui/joy/FormLabel'; -import FormHelperText from '@mui/joy/FormHelperText'; -import Input from '@mui/joy/Input'; - -export default function TextFieldComposition() { - return ( - - Label - - This is a helper text. - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldComposition.tsx.preview b/docs/data/joy/components/text-field/TextFieldComposition.tsx.preview deleted file mode 100644 index 96205c163b0132..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldComposition.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Label - - This is a helper text. - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldDecorators.js b/docs/data/joy/components/text-field/TextFieldDecorators.js deleted file mode 100644 index 039e621a93d0e1..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldDecorators.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/joy/Stack'; -import TextField from '@mui/joy/TextField'; -import Chip from '@mui/joy/Chip'; -import PersonRoundedIcon from '@mui/icons-material/PersonRounded'; -import EditIcon from '@mui/icons-material/Edit'; -import CheckIcon from '@mui/icons-material/Check'; - -export default function TextFieldDecorator() { - return ( - - } - endDecorator={ - - New stuff - - } - /> - } - endDecorator={} - /> - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldDecorators.tsx b/docs/data/joy/components/text-field/TextFieldDecorators.tsx deleted file mode 100644 index 039e621a93d0e1..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldDecorators.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/joy/Stack'; -import TextField from '@mui/joy/TextField'; -import Chip from '@mui/joy/Chip'; -import PersonRoundedIcon from '@mui/icons-material/PersonRounded'; -import EditIcon from '@mui/icons-material/Edit'; -import CheckIcon from '@mui/icons-material/Check'; - -export default function TextFieldDecorator() { - return ( - - } - endDecorator={ - - New stuff - - } - /> - } - endDecorator={} - /> - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.js b/docs/data/joy/components/text-field/TextFieldFormProps.js deleted file mode 100644 index 234fbe1c7e5b01..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFormProps() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.tsx b/docs/data/joy/components/text-field/TextFieldFormProps.tsx deleted file mode 100644 index 234fbe1c7e5b01..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFormProps() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview b/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview deleted file mode 100644 index 4d65b24104290e..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.js b/docs/data/joy/components/text-field/TextFieldFullwidth.js deleted file mode 100644 index d3b5e22a5cfbe9..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFullWidth() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx b/docs/data/joy/components/text-field/TextFieldFullwidth.tsx deleted file mode 100644 index d3b5e22a5cfbe9..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFullWidth() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview b/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview deleted file mode 100644 index d2406d8341f0f5..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldSizes.js b/docs/data/joy/components/text-field/TextFieldSizes.js deleted file mode 100644 index 4a13aeb7435182..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.js +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldSizes() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldSizes.tsx b/docs/data/joy/components/text-field/TextFieldSizes.tsx deleted file mode 100644 index 4a13aeb7435182..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldSizes() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview b/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview deleted file mode 100644 index bb1dfc9e32264c..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldUsage.js b/docs/data/joy/components/text-field/TextFieldUsage.js deleted file mode 100644 index bef0dc3ef343ac..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldUsage.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldUsage() { - return ( - ( - - - - )} - /> - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldValidation.js b/docs/data/joy/components/text-field/TextFieldValidation.js deleted file mode 100644 index bd832ed2a13d12..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldValidator() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldValidation.tsx b/docs/data/joy/components/text-field/TextFieldValidation.tsx deleted file mode 100644 index bd832ed2a13d12..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldValidator() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview b/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview deleted file mode 100644 index 449a117d4cdd9a..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldVariants.js b/docs/data/joy/components/text-field/TextFieldVariants.js deleted file mode 100644 index 0a62259e7de2fb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldVariants() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldVariants.tsx b/docs/data/joy/components/text-field/TextFieldVariants.tsx deleted file mode 100644 index 0a62259e7de2fb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldVariants() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview b/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview deleted file mode 100644 index e9a252c68f4f13..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/text-field-pt.md b/docs/data/joy/components/text-field/text-field-pt.md deleted file mode 100644 index e2fc3ed7ca2ffb..00000000000000 --- a/docs/data/joy/components/text-field/text-field-pt.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -product: joy-ui -title: React Text field component -githubLabel: 'component: text field' -unstyled: /base/react-input/ ---- - -# Text field - -

Text fields let users enter and edit text.

- -## Introduction - -Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. - -{{"demo": "TextFieldUsage.js"}} - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} -``` - -### Variants - -The text field component supports the four global variants: solid (default), soft, outlined, and plain. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} diff --git a/docs/data/joy/components/text-field/text-field-zh.md b/docs/data/joy/components/text-field/text-field-zh.md deleted file mode 100644 index e2fc3ed7ca2ffb..00000000000000 --- a/docs/data/joy/components/text-field/text-field-zh.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -product: joy-ui -title: React Text field component -githubLabel: 'component: text field' -unstyled: /base/react-input/ ---- - -# Text field - -

Text fields let users enter and edit text.

- -## Introduction - -Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. - -{{"demo": "TextFieldUsage.js"}} - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} -``` - -### Variants - -The text field component supports the four global variants: solid (default), soft, outlined, and plain. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md deleted file mode 100644 index 5f7d8c11378b70..00000000000000 --- a/docs/data/joy/components/text-field/text-field.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -product: joy-ui -title: React Text Field component -githubLabel: 'component: text field' -unstyled: /base/react-input/ ---- - -# Text Field - -

Text fields let users enter and edit text.

- -## Introduction - -Text fields allow users to enter text into a UI. -They typically appear in forms and dialogs. - -{{"demo": "TextFieldUsage.js", "hideToolbar": true, "bg": "gradient"}} - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} -``` - -### Composition - -`TextField` is composed of smallar components－`FormControl`, `FormLabel`, `FormerHelperText`, and `Input`. -You can either use each one of them separately or plainly use the `TextField` itself. - -{{"demo": "TextFieldComposition.js"}} - -### Variants - -The text field component supports the four global variants: `solid` (default), `soft`, `outlined`, and `plain`. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. -And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} diff --git a/packages/mui-joy/src/TextField/TextField.spec.tsx b/packages/mui-joy/src/TextField/TextField.spec.tsx deleted file mode 100644 index 66181e546a7782..00000000000000 --- a/packages/mui-joy/src/TextField/TextField.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/joy/TextField'; -import { expectType } from '@mui/types'; - -} - endDecorator={
} -/>; - { - expectType, typeof event>(event); - }} -/>; diff --git a/packages/mui-joy/src/TextField/TextField.test.js b/packages/mui-joy/src/TextField/TextField.test.js deleted file mode 100644 index 848c8ec5ec8c75..00000000000000 --- a/packages/mui-joy/src/TextField/TextField.test.js +++ /dev/null @@ -1,174 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { spy } from 'sinon'; -import { describeConformance, createRenderer, act, fireEvent } from 'test/utils'; -import { ThemeProvider } from '@mui/joy/styles'; -import TextField, { textFieldClasses as classes } from '@mui/joy/TextField'; -import { inputClasses } from '@mui/joy/Input'; -import { formHelperTextClasses } from '@mui/joy/FormHelperText'; - -describe('Joy ', () => { - const { render } = createRenderer(); - - describeConformance(, () => ({ - classes, - inheritComponent: 'div', - render, - ThemeProvider, - muiName: 'JoyTextField', - refInstanceof: window.HTMLDivElement, - skip: ['componentsProp', 'classesRoot', 'themeVariants'], - })); - - it('should have root className', () => { - const { container } = render(); - expect(container.firstChild).to.have.class(classes.root); - }); - - it('should accept className prop', () => { - const { container } = render(); - expect(container.firstChild).to.have.class('foo-bar'); - }); - - it('should provide proper id to elements', () => { - const { container, getByRole } = render( - , - ); - expect(getByRole('textbox')).to.have.attribute('id', 'textfield'); - expect(container.querySelector('label')).to.have.attribute('id', 'textfield-label'); - expect(container.querySelector(`.${formHelperTextClasses.root}`)).to.have.attribute( - 'id', - 'textfield-helper-text', - ); - }); - - it('should have configurable variant', () => { - const { container, rerender } = render(); - expect(container.firstChild).to.have.class(classes.variantOutlined); // default variant - - rerender(); - expect(container.firstChild).to.have.class(classes.variantSoft); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class( - inputClasses.variantSoft, - ); - }); - - it('should have configurable size', () => { - const { container, rerender } = render(); - expect(container.firstChild).to.have.class(classes.sizeMd); // default variant - - rerender(); - expect(container.firstChild).to.have.class(classes.sizeSm); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class(inputClasses.sizeSm); - }); - - it('should have configurable color', () => { - const { container } = render(); - - expect(container.firstChild).to.have.class(classes.colorPrimary); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class( - inputClasses.colorPrimary, - ); - }); - - it('should pass `type` to Input', () => { - const { getByLabelText } = render(); - - expect(getByLabelText(/password/)).to.have.attribute('type', 'password'); - }); - - it('should pass `name` to Input', () => { - const { getByRole } = render(); - - expect(getByRole('textbox')).to.have.attribute('name', 'username'); - }); - - it('should be error', () => { - const { container } = render(); - - expect(container.firstChild).to.have.class(classes.error); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class(inputClasses.error); - }); - - it('should be disabled', () => { - const { container } = render(); - - expect(container.firstChild).to.have.class(classes.disabled); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class(inputClasses.disabled); - }); - - it('should have fullWidth classes', () => { - const { container } = render(); - - expect(container.firstChild).to.have.class(classes.fullWidth); - expect(container.querySelector(`.${inputClasses.root}`)).to.have.class(inputClasses.fullWidth); - }); - - it('should show asterisk if required', () => { - const { getByRole, container } = render( - label
} />, - ); - - expect(container.querySelector(`label`)).to.have.text('label\u2009*'); - expect(getByRole('textbox')).to.have.attribute('required'); - }); - - it('should accept defaultValue', () => { - const { getByRole } = render(); - expect(getByRole('textbox')).to.have.value('foo'); - }); - - it('should pass value and handler props to Input', () => { - const handleChange = spy(); - const handleFocus = spy(); - const handleBlur = spy(); - const handleKeyUp = spy(); - const handleKeyDown = spy(); - const { getByRole } = render( - , - ); - const input = getByRole('textbox'); - - expect(input).to.have.value('bar'); - - act(() => { - input.focus(); - }); - expect(handleFocus.callCount).to.equal(1); - - fireEvent.keyDown(input, { key: 'a' }); - expect(handleKeyDown.callCount).to.equal(1); - - fireEvent.change(input, { target: { value: 'a' } }); - expect(handleChange.callCount).to.equal(1); - - fireEvent.keyUp(input, { key: 'a' }); - expect(handleKeyUp.callCount).to.equal(1); - - act(() => { - input.blur(); - }); - expect(handleBlur.callCount).to.equal(1); - }); - - it('should accept startDecorator', () => { - const { getByText } = render(); - expect(getByText('foo')).toBeVisible(); - }); - - it('should accept endDecorator', () => { - const { getByText } = render(); - expect(getByText('bar')).toBeVisible(); - }); -}); diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx deleted file mode 100644 index 4059e705590488..00000000000000 --- a/packages/mui-joy/src/TextField/TextField.tsx +++ /dev/null @@ -1,356 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { OverridableComponent } from '@mui/types'; -import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils'; -import composeClasses from '@mui/base/composeClasses'; -import FormLabel from '../FormLabel'; -import FormHelperText from '../FormHelperText'; -import JoyInput from '../Input'; -import { styled, useThemeProps } from '../styles'; -import useSlot from '../utils/useSlot'; -import { TextFieldOwnerState, TextFieldTypeMap } from './TextFieldProps'; -import textFieldClasses, { getTextFieldUtilityClass } from './textFieldClasses'; - -const useUtilityClasses = (ownerState: TextFieldOwnerState) => { - const { error, disabled, variant, size, color, fullWidth } = ownerState; - const slots = { - root: [ - 'root', - error && 'error', - disabled && 'disabled', - fullWidth && 'fullWidth', - variant && `variant${capitalize(variant)}`, - size && `size${capitalize(size)}`, - color && `color${capitalize(color)}`, - ], - }; - - return composeClasses(slots, getTextFieldUtilityClass, {}); -}; - -const TextFieldRoot = styled('div', { - name: 'JoyTextField', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})<{ ownerState: TextFieldOwnerState }>(({ theme, ownerState }) => ({ - '--FormLabel-margin': '0 0 0.25rem 0', - '--FormHelperText-margin': '0.25rem 0 0 0', - '--FormLabel-asterisk-color': theme.vars.palette.danger[500], - '--FormHelperText-color': theme.vars.palette[ownerState.color!]?.[500], - ...(ownerState.size === 'sm' && { - '--FormHelperText-fontSize': theme.vars.fontSize.xs, - '--FormLabel-fontSize': theme.vars.fontSize.xs, - }), - [`&.${textFieldClasses.error}`]: { - '--FormHelperText-color': theme.vars.palette.danger[500], - }, - [`&.${textFieldClasses.disabled}`]: { - '--FormLabel-color': theme.vars.palette[ownerState.color || 'neutral']?.plainDisabledColor, - '--FormHelperText-color': theme.vars.palette[ownerState.color || 'neutral']?.plainDisabledColor, - }, - display: 'flex', - flexDirection: 'column', - ...(ownerState.fullWidth && { - width: '100%', - }), -})); - -const TextField = React.forwardRef(function TextField(inProps, ref) { - const props = useThemeProps({ - props: inProps, - name: 'JoyTextField', - }); - - const { - children, - className, - component, - slots = {}, - slotProps = {}, - label, - helperText, - id: idOverride, - autoComplete, - autoFocus, - placeholder, - defaultValue, - value, - name, - onBlur, - onChange, - onFocus, - color, - disabled = false, - error = false, - required = false, - size = 'md', - variant = 'outlined', - fullWidth = false, - type = 'text', - startDecorator, - endDecorator, - ...other - } = props; - - const id = useId(idOverride); - const helperTextId = helperText && id ? `${id}-helper-text` : undefined; - const formLabelId = label && id ? `${id}-label` : undefined; - - const ownerState = { - label, - helperText, - startDecorator, - endDecorator, - disabled, - error, - required, - size, - variant, - fullWidth, - type, - ...props, - }; - - const classes = useUtilityClasses(ownerState); - - const [SlotRoot, rootProps] = useSlot('root', { - ref, - className: clsx(classes.root, className), - elementType: TextFieldRoot, - // @ts-ignore internal logic - externalForwardedProps: { ...other, component, slots, slotProps }, - ownerState, - }); - - const Input = slots.input || JoyInput; - - return ( - // @ts-ignore neglect 'context' color - - {label && ( - - {label} - - )} - - - {helperText && ( - - {helperText} - - )} - - ); -}) as OverridableComponent; - -TextField.propTypes /* remove-proptypes */ = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - autoComplete: PropTypes.string, - /** - * @ignore - */ - autoFocus: PropTypes.bool, - /** - * @ignore - */ - children: PropTypes.node, - /** - * @ignore - */ - className: PropTypes.string, - /** - * The color of the component. It supports those theme colors that make sense for this component. - * @default 'neutral' - */ - color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']), - PropTypes.string, - ]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, - /** - * @ignore - */ - defaultValue: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string), - PropTypes.number, - PropTypes.string, - ]), - /** - * @ignore - */ - disabled: PropTypes.bool, - /** - * Trailing adornment for this input. - */ - endDecorator: PropTypes.node, - /** - * If `true`, the `input` will indicate an error. - * The prop defaults to the value (`false`) inherited from the parent FormControl component. - */ - error: PropTypes.bool, - /** - * If `true`, the button will take up the full width of its container. - * @default false - */ - fullWidth: PropTypes.bool, - /** - * The helper text content. - */ - helperText: PropTypes.node, - /** - * The id of the `input` element. - * Use this prop to make `label` and `helperText` accessible for screen readers. - */ - id: PropTypes.string, - /** - * The label content. - */ - label: PropTypes.node, - /** - * Name attribute of the `input` element. - */ - name: PropTypes.string, - /** - * @ignore - */ - onBlur: PropTypes.func, - /** - * @ignore - */ - onChange: PropTypes.func, - /** - * @ignore - */ - onFocus: PropTypes.func, - /** - * The short hint displayed in the `input` before the user enters a value. - */ - placeholder: PropTypes.string, - /** - * @ignore - */ - required: PropTypes.bool, - /** - * The size of the component. - * @default 'md' - */ - size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['sm', 'md', 'lg']), - PropTypes.string, - ]), - /** - * @ignore - */ - slotProps: PropTypes.shape({ - helperText: PropTypes.object, - input: PropTypes.object, - label: PropTypes.object, - root: PropTypes.object, - }), - /** - * @ignore - */ - slots: PropTypes.shape({ - helperText: PropTypes.elementType, - input: PropTypes.elementType, - label: PropTypes.elementType, - root: PropTypes.elementType, - }), - /** - * Leading adornment for this input. - */ - startDecorator: PropTypes.node, - /** - * @ignore - */ - type: PropTypes /* @typescript-to-proptypes-ignore */.oneOf([ - 'button', - 'checkbox', - 'color', - 'date', - 'datetime-local', - 'email', - 'file', - 'hidden', - 'image', - 'month', - 'number', - 'password', - 'radio', - 'range', - 'reset', - 'search', - 'submit', - 'tel', - 'text', - 'time', - 'url', - 'week', - ]), - /** - * @ignore - */ - value: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string), - PropTypes.number, - PropTypes.string, - ]), - /** - * The variant to use. - * @default 'outlined' - */ - variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']), - PropTypes.string, - ]), -} as any; - -export default TextField; diff --git a/packages/mui-joy/src/TextField/TextFieldProps.ts b/packages/mui-joy/src/TextField/TextFieldProps.ts deleted file mode 100644 index bded6834bac229..00000000000000 --- a/packages/mui-joy/src/TextField/TextFieldProps.ts +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; -import { OverrideProps } from '@mui/types'; -import { FormHelperTextProps } from '../FormHelperText/FormHelperTextProps'; -import { FormLabelProps } from '../FormLabel/FormLabelProps'; -import { InputProps } from '../Input/InputProps'; - -export type TextFieldSlot = 'root'; - -type InputRootKeys = - | 'autoComplete' - | 'autoFocus' - | 'disabled' - | 'error' - | 'required' - | 'fullWidth' - | 'placeholder' - | 'defaultValue' - | 'value' - | 'onChange' - | 'onFocus' - | 'onBlur' - | 'type' - | 'variant' - | 'color' - | 'size' - | 'startDecorator' - | 'endDecorator' - | 'sx'; - -export interface TextFieldTypeMap

{ - props: P & - Pick & { - slots?: { - root?: React.ElementType; - label?: React.ElementType; - input?: React.ElementType; - helperText?: React.ElementType; - }; - slotProps?: { - root?: React.ComponentPropsWithRef<'div'>; - label?: FormLabelProps; - input?: Omit; - helperText?: FormHelperTextProps; - }; - /** - * The id of the `input` element. - * Use this prop to make `label` and `helperText` accessible for screen readers. - */ - id?: string; - /** - * The label content. - */ - label?: React.ReactNode; - /** - * Name attribute of the `input` element. - */ - name?: string; - /** - * The short hint displayed in the `input` before the user enters a value. - */ - placeholder?: string; - /** - * The helper text content. - */ - helperText?: React.ReactNode; - }; - defaultComponent: D; -} - -export type TextFieldProps< - D extends React.ElementType = TextFieldTypeMap['defaultComponent'], - P = { - component?: React.ElementType; - }, -> = OverrideProps, D>; - -export interface TextFieldOwnerState extends TextFieldProps {} diff --git a/packages/mui-joy/src/TextField/index.ts b/packages/mui-joy/src/TextField/index.ts deleted file mode 100644 index d03daa37fe8c95..00000000000000 --- a/packages/mui-joy/src/TextField/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default } from './TextField'; -export { default as textFieldClasses } from './textFieldClasses'; -export * from './textFieldClasses'; -export * from './TextFieldProps'; diff --git a/packages/mui-joy/src/TextField/textFieldClasses.ts b/packages/mui-joy/src/TextField/textFieldClasses.ts deleted file mode 100644 index 018c4fe5aaca91..00000000000000 --- a/packages/mui-joy/src/TextField/textFieldClasses.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { generateUtilityClass, generateUtilityClasses } from '../className'; - -export interface TextFieldClasses { - /** Styles applied to the root element. */ - root: string; - /** Styles applied to the root element if `disabled={true}`. */ - disabled: string; - /** State class applied to the root element if `error={true}`. */ - error: string; - /** Styles applied to the root element if the component is focused. */ - focused: string; - /** Styles applied to the root element if `color="primary"`. */ - colorPrimary: string; - /** Styles applied to the root element if `color="neutral"`. */ - colorNeutral: string; - /** Styles applied to the root element if `color="danger"`. */ - colorDanger: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; - /** Styles applied to the root element if `size="sm"`. */ - sizeSm: string; - /** Styles applied to the root element if `size="md"`. */ - sizeMd: string; - /** Styles applied to the root element if `size="lg"`. */ - sizeLg: string; - /** Styles applied to the root element if `variant="plain"`. */ - variantPlain: string; - /** Styles applied to the root element if `variant="outlined"`. */ - variantOutlined: string; - /** Styles applied to the root element if `variant="soft"`. */ - variantSoft: string; - /** Styles applied to the root element if `fullWidth={true}`. */ - fullWidth: string; -} - -export type TextFieldClassKey = keyof TextFieldClasses; - -export function getTextFieldUtilityClass(slot: string): string { - return generateUtilityClass('JoyTextField', slot); -} - -const textFieldClasses: TextFieldClasses = generateUtilityClasses('JoyTextField', [ - 'root', - 'disabled', - 'error', - 'focused', - 'colorPrimary', - 'colorNeutral', - 'colorDanger', - 'colorInfo', - 'colorSuccess', - 'colorWarning', - 'sizeSm', - 'sizeMd', - 'sizeLg', - 'variantPlain', - 'variantOutlined', - 'variantSoft', - 'fullWidth', -]); - -export default textFieldClasses; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 752ed94fb0cc0a..978a5462ef58a4 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -171,9 +171,6 @@ export * from './Tabs'; export { default as Textarea } from './Textarea'; export * from './Textarea'; -export { default as TextField } from './TextField'; -export * from './TextField'; - export { default as Tooltip } from './Tooltip'; export * from './Tooltip'; diff --git a/packages/mui-joy/src/styles/components.d.ts b/packages/mui-joy/src/styles/components.d.ts index 82da1cf230c957..3d121b14590eff 100644 --- a/packages/mui-joy/src/styles/components.d.ts +++ b/packages/mui-joy/src/styles/components.d.ts @@ -148,7 +148,6 @@ import { TabProps, TabOwnerState, TabSlot } from '../Tab/TabProps'; import { TabListProps, TabListOwnerState, TabListSlot } from '../TabList/TabListProps'; import { TabPanelProps, TabPanelOwnerState, TabPanelSlot } from '../TabPanel/TabPanelProps'; import { TabsProps, TabsOwnerState, TabsSlot } from '../Tabs/TabsProps'; -import { TextFieldProps, TextFieldOwnerState, TextFieldSlot } from '../TextField/TextFieldProps'; import { TooltipProps, TooltipOwnerState, TooltipSlot } from '../Tooltip/TooltipProps'; import { TypographyProps, @@ -398,10 +397,6 @@ export interface Components { defaultProps?: Partial; styleOverrides?: OverridesStyleRules; }; - JoyTextField?: { - defaultProps?: Partial; - styleOverrides?: OverridesStyleRules; - }; JoyTooltip?: { defaultProps?: Partial; styleOverrides?: OverridesStyleRules; From fd897385966fe273d279db92bedd88febe836d9a Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 16:04:31 +0000 Subject: [PATCH 02/24] Remove path to joy text field demo --- docs/pages/joy-ui/react-text-field.js | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 docs/pages/joy-ui/react-text-field.js diff --git a/docs/pages/joy-ui/react-text-field.js b/docs/pages/joy-ui/react-text-field.js deleted file mode 100644 index 165116fb127c28..00000000000000 --- a/docs/pages/joy-ui/react-text-field.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/text-field/text-field.md?@mui/markdown'; - -export default function Page() { - return ; -} From 59cbbfd4071db967016a8f0dbd98b20ee5c936e6 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 16:44:00 +0000 Subject: [PATCH 03/24] [docs][AspectRatio] Replace TextField with FormControl, FormLabel and Input --- .../components/aspect-ratio/FlexRowRatio.js | 25 +++++++++++-------- .../components/aspect-ratio/FlexRowRatio.tsx | 25 +++++++++++-------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js index add2fe74812b95..2baded5c0b110e 100644 --- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js +++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js @@ -1,9 +1,11 @@ import * as React from 'react'; import AspectRatio from '@mui/joy/AspectRatio'; import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; export default function FlexRowRatio() { const [flexBasis, setFlexBasis] = React.useState(200); @@ -38,16 +40,17 @@ export default function FlexRowRatio() {
- setFlexBasis(event.target.valueAsNumber)} - sx={{ mx: 'auto', width: '100%' }} - /> + + flexBasis + setFlexBasis(event.target.valueAsNumber)} + /> + ); } diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx index add2fe74812b95..2baded5c0b110e 100644 --- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx +++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import AspectRatio from '@mui/joy/AspectRatio'; import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; export default function FlexRowRatio() { const [flexBasis, setFlexBasis] = React.useState(200); @@ -38,16 +40,17 @@ export default function FlexRowRatio() {
- setFlexBasis(event.target.valueAsNumber)} - sx={{ mx: 'auto', width: '100%' }} - /> + + flexBasis + setFlexBasis(event.target.valueAsNumber)} + /> + ); } From b96027e17d7f453965f0d38cd35719071c5ce811 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 16:46:06 +0000 Subject: [PATCH 04/24] [docs][Autocomplete] Replace TextField with FormControl, FormLabel and Input --- .../FreeSoloCreateOptionDialog.js | 54 ++++++++++--------- .../FreeSoloCreateOptionDialog.tsx | 54 ++++++++++--------- 2 files changed, 56 insertions(+), 52 deletions(-) diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js index af6a55b36c1d88..ccc540e804c1f1 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel'; import Modal from '@mui/joy/Modal'; import ModalDialog from '@mui/joy/ModalDialog'; import Button from '@mui/joy/Button'; -import TextField from '@mui/joy/TextField'; +import Input from '@mui/joy/Input'; import Typography from '@mui/joy/Typography'; import Stack from '@mui/joy/Stack'; @@ -120,31 +120,33 @@ export default function FreeSoloCreateOptionDialog() { Did you miss any film in our list? Please, add it! - - setDialogValue({ - ...dialogValue, - title: event.target.value, - }) - } - label="Title" - type="text" - /> - - setDialogValue({ - ...dialogValue, - year: event.target.value, - }) - } - label="year" - type="number" - /> + + Title + + setDialogValue({ + ...dialogValue, + title: event.target.value, + }) + } + /> + + + year + + setDialogValue({ + ...dialogValue, + year: event.target.value, + }) + } + /> + From ffc535c76ee845ce7235837371321cc17d318264 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 16:55:27 +0000 Subject: [PATCH 08/24] [docs][tutorial][LoginFinal] Replace TextField with FormControl, FormLabel and Input --- .../getting-started/tutorial/LoginFinal.js | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/docs/data/joy/getting-started/tutorial/LoginFinal.js b/docs/data/joy/getting-started/tutorial/LoginFinal.js index ebb448485e35c4..3a656d0da6f631 100644 --- a/docs/data/joy/getting-started/tutorial/LoginFinal.js +++ b/docs/data/joy/getting-started/tutorial/LoginFinal.js @@ -2,7 +2,9 @@ import * as React from 'react'; import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import Sheet from '@mui/joy/Sheet'; import Typography from '@mui/joy/Typography'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; import Button from '@mui/joy/Button'; import Link from '@mui/joy/Link'; @@ -57,20 +59,25 @@ export default function App() { Sign in to continue. - - + + Email + + + + Password + + + Sign up} From e2ee4b4fa7d60ab71c963da5528ca16de1feec45 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 13 Dec 2022 16:56:30 +0000 Subject: [PATCH 09/24] Replace TextField with FormControl, FormLabel and Input in more demos --- .../automatic-adjustment/InputVariables.js | 35 ++++--- docs/src/modules/components/JoyUsageDemo.tsx | 91 ++++++++++--------- .../modules/components/JoyVariablesDemo.tsx | 4 +- docs/src/modules/sandbox/Dependencies.test.js | 43 +++++---- 4 files changed, 91 insertions(+), 82 deletions(-) diff --git a/docs/data/joy/main-features/automatic-adjustment/InputVariables.js b/docs/data/joy/main-features/automatic-adjustment/InputVariables.js index b8f0c5b5d74245..419758d1bbb8e6 100644 --- a/docs/data/joy/main-features/automatic-adjustment/InputVariables.js +++ b/docs/data/joy/main-features/automatic-adjustment/InputVariables.js @@ -3,7 +3,8 @@ import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; import ListDivider from '@mui/joy/ListDivider'; import Input from '@mui/joy/Input'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; export default function InputIntegration() { const [radius, setRadius] = React.useState(16); @@ -25,20 +26,24 @@ export default function InputIntegration() { /> - setRadius(event.target.valueAsNumber)} - /> - setChildHeight(event.target.valueAsNumber)} - /> + + --Input-radius + setRadius(event.target.valueAsNumber)} + /> + + + --Input-childHeight + setChildHeight(event.target.valueAsNumber)} + /> + ); diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index a113b23928a67b..1316dcbaa75537 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -7,7 +7,7 @@ import Chip from '@mui/joy/Chip'; import FormControl from '@mui/joy/FormControl'; import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel'; import IconButton from '@mui/joy/IconButton'; -import { inputClasses } from '@mui/joy/Input'; +import Input, { inputClasses } from '@mui/joy/Input'; import ListItemDecorator, { listItemDecoratorClasses } from '@mui/joy/ListItemDecorator'; import Option, { optionClasses } from '@mui/joy/Option'; import Radio, { radioClasses } from '@mui/joy/Radio'; @@ -15,7 +15,6 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Select from '@mui/joy/Select'; import Sheet from '@mui/joy/Sheet'; import Switch from '@mui/joy/Switch'; -import TextField from '@mui/joy/TextField'; import Typography from '@mui/joy/Typography'; import BrandingProvider from 'docs/src/BrandingProvider'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; @@ -544,53 +543,55 @@ export default function JoyUsageDemo({ } if (knob === 'input') { return ( - - setProps((latestProps) => ({ - ...latestProps, - [propName]: event.target.value, - })) - } - sx={{ - textTransform: 'capitalize', - [`& .${inputClasses.root}`]: { - bgcolor: 'background.body', - }, - }} - /> + + {propName} + + setProps((latestProps) => ({ + ...latestProps, + [propName]: event.target.value, + })) + } + sx={{ + textTransform: 'capitalize', + [`& .${inputClasses.root}`]: { + bgcolor: 'background.body', + }, + }} + /> + ); } if (knob === 'number') { return ( - - setProps((latestProps) => ({ - ...latestProps, - [propName]: Number.isNaN(event.target.valueAsNumber) - ? undefined - : event.target.valueAsNumber, - })) - } - sx={{ - textTransform: 'capitalize', - [`& .${inputClasses.root}`]: { - bgcolor: 'background.body', - }, - }} - /> + + {propName} + + setProps((latestProps) => ({ + ...latestProps, + [propName]: Number.isNaN(event.target.valueAsNumber) + ? undefined + : event.target.valueAsNumber, + })) + } + sx={{ + textTransform: 'capitalize', + [`& .${inputClasses.root}`]: { + bgcolor: 'background.body', + }, + }} + /> + ); } if (knob === 'placement') { diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx index 91dd3e73e5afb3..f1d37cf6b31463 100644 --- a/docs/src/modules/components/JoyVariablesDemo.tsx +++ b/docs/src/modules/components/JoyVariablesDemo.tsx @@ -4,11 +4,11 @@ import Link from '@mui/joy/Link'; import List from '@mui/joy/List'; import ListDivider from '@mui/joy/ListDivider'; import IconButton from '@mui/joy/IconButton'; +import Typography from '@mui/joy/Typography'; +import Sheet from '@mui/joy/Sheet'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; import FormHelperText from '@mui/joy/FormHelperText'; -import Typography from '@mui/joy/Typography'; -import Sheet from '@mui/joy/Sheet'; import BrandingProvider from 'docs/src/BrandingProvider'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import Input, { inputClasses } from '@mui/joy/Input'; diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js index 73af38f4e1797d..d2b9d6ef53d88f 100644 --- a/docs/src/modules/sandbox/Dependencies.test.js +++ b/docs/src/modules/sandbox/Dependencies.test.js @@ -338,7 +338,8 @@ import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import type { Theme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Typography from '@mui/joy/Typography'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import Input from '@mui/joy/Input'; import IconButton from '@mui/joy/IconButton'; // Icons import @@ -435,25 +436,27 @@ export default function EmailExample() { Email - } - endDecorator={ - - - / - - - } - sx={{ - flexBasis: '500px', - display: { - xs: 'none', - sm: 'flex', - }, - }} - /> + + } + endDecorator={ + + + / + + + } + sx={{ + flexBasis: '500px', + display: { + xs: 'none', + sm: 'flex', + }, + }} + /> + Date: Tue, 13 Dec 2022 16:56:53 +0000 Subject: [PATCH 10/24] prettier --- .../joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx index 7e0768769db238..0c7439a1936bdc 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -120,7 +120,7 @@ export default function FreeSoloCreateOptionDialog() { Did you miss any film in our list? Please, add it! - + Title Date: Tue, 13 Dec 2022 17:49:52 +0000 Subject: [PATCH 11/24] Fix Dependencies.test.js --- docs/src/modules/sandbox/Dependencies.test.js | 41 +++++++++---------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/docs/src/modules/sandbox/Dependencies.test.js b/docs/src/modules/sandbox/Dependencies.test.js index d2b9d6ef53d88f..66324a067d4424 100644 --- a/docs/src/modules/sandbox/Dependencies.test.js +++ b/docs/src/modules/sandbox/Dependencies.test.js @@ -338,7 +338,6 @@ import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import type { Theme } from '@mui/joy/styles'; import Box from '@mui/joy/Box'; import Typography from '@mui/joy/Typography'; -import FormControl from '@mui/joy/FormControl'; import Input from '@mui/joy/Input'; import IconButton from '@mui/joy/IconButton'; @@ -436,27 +435,25 @@ export default function EmailExample() { Email - - } - endDecorator={ - - - / - - - } - sx={{ - flexBasis: '500px', - display: { - xs: 'none', - sm: 'flex', - }, - }} - /> - + } + endDecorator={ + + + / + + + } + sx={{ + flexBasis: '500px', + display: { + xs: 'none', + sm: 'flex', + }, + }} + /> Date: Tue, 13 Dec 2022 22:53:36 +0000 Subject: [PATCH 12/24] Remove broken links --- docs/data/joy/getting-started/tutorial/tutorial.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/data/joy/getting-started/tutorial/tutorial.md b/docs/data/joy/getting-started/tutorial/tutorial.md index 131b60893a9117..1cf167cb0a5181 100644 --- a/docs/data/joy/getting-started/tutorial/tutorial.md +++ b/docs/data/joy/getting-started/tutorial/tutorial.md @@ -243,9 +243,6 @@ Here's a recap of the components used: - [Typography](/joy-ui/react-typography/) - [Button](/joy-ui/react-button/) - [Link](/joy-ui/react-link/) -- [Form Control](/joy-ui/react-form-control/) -- [Form Label](/joy-ui/react-form-label/) -- [Input](/joy-ui/react-input/) Here are some of the major features introduced: From 28f75f3bb7f1af91fa9c4574b61715268c20d6f3 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 4 Jan 2023 16:02:28 -0500 Subject: [PATCH 13/24] add codemod --- .../src/v5.0.0/joy-text-field-to-input.js | 28 ++++++++++++++++++ .../v5.0.0/joy-text-field-to-input.test.js | 29 +++++++++++++++++++ .../joy-text-field-to-input.test/actual.js | 8 +++++ .../joy-text-field-to-input.test/expected.js | 8 +++++ 4 files changed, 73 insertions(+) create mode 100644 packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js create mode 100644 packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test.js create mode 100644 packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js create mode 100644 packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js new file mode 100644 index 00000000000000..7d6b7e83ff5225 --- /dev/null +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -0,0 +1,28 @@ +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + root.find(j.ImportDeclaration).forEach(({ node }) => { + const sourceVal = node.source.value; + if (sourceVal.startsWith('@mui/joy')) { + if (sourceVal === '@mui/joy/TextField') { + node.source.value = '@mui/joy/Input'; + } else { + node.specifiers.forEach((elementNode) => { + if (elementNode.imported?.name === 'TextField') { + elementNode.imported.name = 'Input'; + } + }); + } + } + }); + + const transformed = root.findJSXElements(); + + return transformed.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test.js new file mode 100644 index 00000000000000..ab59c68ccc8d24 --- /dev/null +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test.js @@ -0,0 +1,29 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from './joy-text-field-to-input'; +import readFile from '../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('v5.0.0', () => { + describe('joy-text-field-to-input', () => { + it('transform Joy TextField into Joy Input', () => { + const actual = transform( + { + source: read('./joy-text-field-to-input.test/actual.js'), + path: require.resolve('./joy-text-field-to-input.test/actual.js'), + }, + { jscodeshift }, + {}, + ); + + const expected = read('./joy-text-field-to-input.test/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js new file mode 100644 index 00000000000000..463fac34de445f --- /dev/null +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js @@ -0,0 +1,8 @@ +// the codemod should transform only Joy TextField +import { TextField as JoyTextField } from "@mui/joy"; +import JoyTextField2 from "@mui/joy/TextField"; + +

+ + +
; diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js new file mode 100644 index 00000000000000..30609b6e3b4324 --- /dev/null +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -0,0 +1,8 @@ +// the codemod should transform only Joy TextField +import { Input as JoyTextField } from "@mui/joy"; +import JoyTextField2 from "@mui/joy/Input"; + +
+ + +
; From 184fa6b04dc09de53f6a503c834e338f00044102 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 5 Jan 2023 16:34:21 -0500 Subject: [PATCH 14/24] improve codemod --- .../src/v5.0.0/joy-text-field-to-input.js | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 7d6b7e83ff5225..397ae26cd21496 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -7,20 +7,38 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - root.find(j.ImportDeclaration).forEach(({ node }) => { - const sourceVal = node.source.value; - if (sourceVal.startsWith('@mui/joy')) { + root + .find(j.ImportDeclaration) + .filter(({ node }) => { + const sourceVal = node.source.value; if (sourceVal === '@mui/joy/TextField') { node.source.value = '@mui/joy/Input'; - } else { - node.specifiers.forEach((elementNode) => { - if (elementNode.imported?.name === 'TextField') { - elementNode.imported.name = 'Input'; + } + + // Process only Joy UI components + return sourceVal.startsWith('@mui/joy'); + }) + .forEach((path) => { + path.node.specifiers.forEach((elementNode) => { + if (elementNode.imported?.name === 'TextField') { + elementNode.imported.name = 'Input'; + } + + let newElementName; + root.findJSXElements(elementNode.local.name).forEach((elementPath) => { + if (elementPath.node.type !== 'JSXElement') { + return; } + newElementName = elementPath.node.openingElement.name.name.replaceAll( + 'TextField', + 'Input', + ); + elementPath.node.openingElement.name.name = newElementName; }); - } - } - }); + + elementNode.local.name = newElementName; + }); + }); const transformed = root.findJSXElements(); From 8ca049bfc53265635b8685baabd8f93561e63cc1 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Thu, 5 Jan 2023 16:34:25 -0500 Subject: [PATCH 15/24] improve codemod tests --- .../v5.0.0/joy-text-field-to-input.test/actual.js | 6 ++++-- .../v5.0.0/joy-text-field-to-input.test/expected.js | 12 +++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js index 463fac34de445f..f0dc941f6bde5d 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js @@ -1,8 +1,10 @@ -// the codemod should transform only Joy TextField import { TextField as JoyTextField } from "@mui/joy"; import JoyTextField2 from "@mui/joy/TextField"; +// the codemod should transform only Joy TextField +import TextField from "@mui/material/TextField"
-
; + +; \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js index 30609b6e3b4324..2d8b27d2706785 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -1,8 +1,10 @@ +import { Input as JoyInput } from "@mui/joy"; +import JoyInput2 from "@mui/joy/Input"; // the codemod should transform only Joy TextField -import { Input as JoyTextField } from "@mui/joy"; -import JoyTextField2 from "@mui/joy/Input"; +import TextField from "@mui/material/TextField"
- - -
; + + + +; \ No newline at end of file From edb03ac1da66109d8f9f25d33f689ac5439c3052 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 11:00:27 -0500 Subject: [PATCH 16/24] improve codemod to turn TextField into FormControl / FormLabel / FormHelperText / Input --- .../src/v5.0.0/joy-text-field-to-input.js | 109 +++++++++++++++--- 1 file changed, 92 insertions(+), 17 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 397ae26cd21496..15827fac56c017 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -15,28 +15,103 @@ export default function transformer(file, api, options) { node.source.value = '@mui/joy/Input'; } - // Process only Joy UI components - return sourceVal.startsWith('@mui/joy'); + return [ + '@mui/joy', // Process only Joy UI components + '@mui/joy/TextField', // Filter default imports of components other than TextField + ].includes(sourceVal); }) .forEach((path) => { path.node.specifiers.forEach((elementNode) => { - if (elementNode.imported?.name === 'TextField') { - elementNode.imported.name = 'Input'; - } + if ( + (elementNode.type === 'ImportSpecifier' && elementNode.imported?.name === 'TextField') || + elementNode.type === 'ImportDefaultSpecifier' + ) { + if (elementNode.imported?.name === 'TextField') { + elementNode.imported.name = 'Input'; + } + + let newElementName; + root.findJSXElements(elementNode.local.name).forEach((elementPath) => { + if (elementPath.node.type !== 'JSXElement') { + return; + } + newElementName = elementPath.node.openingElement.name.name.replaceAll( + 'TextField', + 'Input', + ); + elementPath.node.openingElement.name.name = newElementName; + + const formControlAttributeNodes = []; + const inputAttributeNodes = []; + let formLabelValue; + let formHelperTextValue; + + elementPath.node.openingElement.attributes.forEach((attributeNode) => { + if (attributeNode.type !== 'JSXAttribute') { + return; + } + const attributeName = attributeNode.name.name; + switch (attributeName) { + case 'size': + formControlAttributeNodes.push(attributeNode); + break; + + case 'label': + formLabelValue = attributeNode.value.value; + break; + + case 'helperText': + formHelperTextValue = attributeNode.value.value; + break; - let newElementName; - root.findJSXElements(elementNode.local.name).forEach((elementPath) => { - if (elementPath.node.type !== 'JSXElement') { - return; + default: + } + if (!['size', 'label', 'helperText'].includes(attributeName)) { + inputAttributeNodes.push(attributeNode); + } + }); + + elementPath.node.openingElement.attributes = inputAttributeNodes; + + if (formControlAttributeNodes.length > 0 || formLabelValue || formHelperTextValue) { + const formControlIdentifier = j.jsxIdentifier('FormControl'); + const childrenOfFormControl = []; + + if (formLabelValue) { + const formLabelIdentifier = j.jsxIdentifier('FormLabel'); + const formLabelElement = j.jsxElement( + j.jsxOpeningElement(formLabelIdentifier), + j.jsxClosingElement(formLabelIdentifier), + [j.jsxText(formLabelValue)], + ); + childrenOfFormControl.push(formLabelElement, j.jsxText('\n')); + } + + childrenOfFormControl.push(elementPath.node, j.jsxText('\n')); + + if (formHelperTextValue) { + const formHelperTextIdentifier = j.jsxIdentifier('FormHelperText'); + const formHelperTextElement = j.jsxElement( + j.jsxOpeningElement(formHelperTextIdentifier), + j.jsxClosingElement(formHelperTextIdentifier), + [j.jsxText(formHelperTextValue)], + ); + childrenOfFormControl.push(formHelperTextElement); + } + + elementPath.replace( + j.jsxElement( + j.jsxOpeningElement(formControlIdentifier, formControlAttributeNodes), + j.jsxClosingElement(formControlIdentifier), + [j.jsxText('\n'), ...childrenOfFormControl, j.jsxText('\n')], + ), + ); + } + }); + if (newElementName) { + elementNode.local.name = newElementName; } - newElementName = elementPath.node.openingElement.name.name.replaceAll( - 'TextField', - 'Input', - ); - elementPath.node.openingElement.name.name = newElementName; - }); - - elementNode.local.name = newElementName; + } }); }); From e1eb3c6bfe5828c5dd21b1b8c63e2370913d725a Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 11:00:31 -0500 Subject: [PATCH 17/24] improve codemod tests --- .../src/v5.0.0/joy-text-field-to-input.test/actual.js | 2 +- .../src/v5.0.0/joy-text-field-to-input.test/expected.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js index f0dc941f6bde5d..a8d8e502dbfcd9 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js @@ -4,7 +4,7 @@ import JoyTextField2 from "@mui/joy/TextField"; import TextField from "@mui/material/TextField"
- +
; \ No newline at end of file diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js index 2d8b27d2706785..be445215bf1adf 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -4,7 +4,11 @@ import JoyInput2 from "@mui/joy/Input"; import TextField from "@mui/material/TextField"
- + + Label + + Help! +
; \ No newline at end of file From e69c01490823c818213e3c9df77da1502f43d673 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 23:03:01 -0500 Subject: [PATCH 18/24] improve codemod further --- .../src/v5.0.0/joy-text-field-to-input.js | 70 ++++++++++++++++++- 1 file changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 15827fac56c017..518d4cd28bbf8b 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -42,6 +42,8 @@ export default function transformer(file, api, options) { elementPath.node.openingElement.name.name = newElementName; const formControlAttributeNodes = []; + const formLabelAttributeNodes = []; + const formHelperTextAttributeNodes = []; const inputAttributeNodes = []; let formLabelValue; let formHelperTextValue; @@ -53,9 +55,44 @@ export default function transformer(file, api, options) { const attributeName = attributeNode.name.name; switch (attributeName) { case 'size': + case 'variant': + case 'color': formControlAttributeNodes.push(attributeNode); break; + case 'slotProps': + if (attributeNode.value.expression?.type === 'ObjectExpression') { + attributeNode.value.expression.properties.forEach((propNode) => { + if (propNode.value.type !== 'ObjectExpression') { + return; + } + propNode.value.properties.forEach((prop) => { + const key = prop.key.value; + const value = prop.value.value; + const newAttributeNode = j.jsxAttribute( + j.jsxIdentifier(key), + j.jsxExpressionContainer(j.booleanLiteral(value)), + ); + switch (propNode.key.name) { + case 'root': + formControlAttributeNodes.push(newAttributeNode); + break; + case 'label': + formLabelAttributeNodes.push(newAttributeNode); + break; + case 'input': + inputAttributeNodes.push(newAttributeNode); + break; + case 'helperText': + formHelperTextAttributeNodes.push(newAttributeNode); + break; + default: + } + }); + }); + } + break; + case 'label': formLabelValue = attributeNode.value.value; break; @@ -64,9 +101,36 @@ export default function transformer(file, api, options) { formHelperTextValue = attributeNode.value.value; break; + case 'id': + formLabelAttributeNodes.push( + j.jsxAttribute( + j.jsxIdentifier('id'), + j.literal(`${attributeNode.value.value}-label`), + ), + j.jsxAttribute( + j.jsxIdentifier('htmlFor'), + j.literal(attributeNode.value.value), + ), + ); + formHelperTextAttributeNodes.push( + j.jsxAttribute( + j.jsxIdentifier('id'), + j.literal(`${attributeNode.value.value}-helper-text`), + ), + ); + break; + + case 'required': + formLabelAttributeNodes.push(attributeNode); + break; + default: } - if (!['size', 'label', 'helperText'].includes(attributeName)) { + if ( + !['size', 'variant', 'color', 'slotProps', 'label', 'helperText'].includes( + attributeName, + ) + ) { inputAttributeNodes.push(attributeNode); } }); @@ -80,7 +144,7 @@ export default function transformer(file, api, options) { if (formLabelValue) { const formLabelIdentifier = j.jsxIdentifier('FormLabel'); const formLabelElement = j.jsxElement( - j.jsxOpeningElement(formLabelIdentifier), + j.jsxOpeningElement(formLabelIdentifier, formLabelAttributeNodes), j.jsxClosingElement(formLabelIdentifier), [j.jsxText(formLabelValue)], ); @@ -92,7 +156,7 @@ export default function transformer(file, api, options) { if (formHelperTextValue) { const formHelperTextIdentifier = j.jsxIdentifier('FormHelperText'); const formHelperTextElement = j.jsxElement( - j.jsxOpeningElement(formHelperTextIdentifier), + j.jsxOpeningElement(formHelperTextIdentifier, formHelperTextAttributeNodes), j.jsxClosingElement(formHelperTextIdentifier), [j.jsxText(formHelperTextValue)], ); From 2270de5338f93b3b431b9899f3bf7c2bc5bae555 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 23:03:08 -0500 Subject: [PATCH 19/24] improve codemod tests further --- .../joy-text-field-to-input.test/actual.js | 26 +++++++++++++++++-- .../joy-text-field-to-input.test/expected.js | 21 +++++++++++---- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js index a8d8e502dbfcd9..10ba025f24e99a 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js @@ -4,7 +4,29 @@ import JoyTextField2 from "@mui/joy/TextField"; import TextField from "@mui/material/TextField"
- + -
; \ No newline at end of file +; diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js index be445215bf1adf..a359663081de87 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -4,11 +4,22 @@ import JoyInput2 from "@mui/joy/Input"; import TextField from "@mui/material/TextField"
- - Label - - Help! + + Label + + Help! -
; \ No newline at end of file +; From 0d0def5114c3353dfc19c7f03ddb777c8ae66da8 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 23:21:19 -0500 Subject: [PATCH 20/24] fix --- .../src/v5.0.0/joy-text-field-to-input.js | 23 +++++++++---------- .../joy-text-field-to-input.test/expected.js | 9 ++++---- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 518d4cd28bbf8b..17e875c295a7ba 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -55,8 +55,8 @@ export default function transformer(file, api, options) { const attributeName = attributeNode.name.name; switch (attributeName) { case 'size': - case 'variant': case 'color': + case 'required': formControlAttributeNodes.push(attributeNode); break; @@ -102,15 +102,12 @@ export default function transformer(file, api, options) { break; case 'id': + formControlAttributeNodes.push(attributeNode); formLabelAttributeNodes.push( j.jsxAttribute( j.jsxIdentifier('id'), j.literal(`${attributeNode.value.value}-label`), ), - j.jsxAttribute( - j.jsxIdentifier('htmlFor'), - j.literal(attributeNode.value.value), - ), ); formHelperTextAttributeNodes.push( j.jsxAttribute( @@ -120,16 +117,18 @@ export default function transformer(file, api, options) { ); break; - case 'required': - formLabelAttributeNodes.push(attributeNode); - break; - default: } if ( - !['size', 'variant', 'color', 'slotProps', 'label', 'helperText'].includes( - attributeName, - ) + ![ + 'size', + 'color', + 'slotProps', + 'label', + 'helperText', + 'id', + 'required', + ].includes(attributeName) ) { inputAttributeNodes.push(attributeNode); } diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js index a359663081de87..034a0b83580767 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -4,20 +4,19 @@ import JoyInput2 from "@mui/joy/Input"; import TextField from "@mui/material/TextField"
- - Label + + Label + defaultValue="DefaultValue" + variant="outlined" /> Help! From 58ecff1d030483dc17f8eb265443c2eb2ee6c748 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 6 Jan 2023 23:40:28 -0500 Subject: [PATCH 21/24] improve further --- .../src/v5.0.0/joy-text-field-to-input.js | 35 ++++++++++++++++--- .../joy-text-field-to-input.test/actual.js | 6 ++++ .../joy-text-field-to-input.test/expected.js | 17 +++++++-- 3 files changed, 51 insertions(+), 7 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 17e875c295a7ba..401a4f242cc3d2 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -68,10 +68,10 @@ export default function transformer(file, api, options) { } propNode.value.properties.forEach((prop) => { const key = prop.key.value; - const value = prop.value.value; + // const value = prop.value.value; const newAttributeNode = j.jsxAttribute( j.jsxIdentifier(key), - j.jsxExpressionContainer(j.booleanLiteral(value)), + j.jsxExpressionContainer(prop.value), ); switch (propNode.key.name) { case 'root': @@ -93,6 +93,32 @@ export default function transformer(file, api, options) { } break; + case 'slots': + if (attributeNode.value.expression?.type === 'ObjectExpression') { + attributeNode.value.expression.properties.forEach((propNode) => { + const newAttributeNode = j.jsxAttribute( + j.jsxIdentifier('component'), + j.jsxExpressionContainer(propNode.value), + ); + switch (propNode.key.name) { + case 'root': + formControlAttributeNodes.push(newAttributeNode); + break; + case 'label': + formLabelAttributeNodes.push(newAttributeNode); + break; + case 'input': + inputAttributeNodes.push(newAttributeNode); + break; + case 'helperText': + formHelperTextAttributeNodes.push(newAttributeNode); + break; + default: + } + }); + } + break; + case 'label': formLabelValue = attributeNode.value.value; break; @@ -124,6 +150,7 @@ export default function transformer(file, api, options) { 'size', 'color', 'slotProps', + 'slots', 'label', 'helperText', 'id', @@ -145,7 +172,7 @@ export default function transformer(file, api, options) { const formLabelElement = j.jsxElement( j.jsxOpeningElement(formLabelIdentifier, formLabelAttributeNodes), j.jsxClosingElement(formLabelIdentifier), - [j.jsxText(formLabelValue)], + [j.jsxText('\n'), j.jsxText(formLabelValue), j.jsxText('\n')], ); childrenOfFormControl.push(formLabelElement, j.jsxText('\n')); } @@ -157,7 +184,7 @@ export default function transformer(file, api, options) { const formHelperTextElement = j.jsxElement( j.jsxOpeningElement(formHelperTextIdentifier, formHelperTextAttributeNodes), j.jsxClosingElement(formHelperTextIdentifier), - [j.jsxText(formHelperTextValue)], + [j.jsxText('\n'), j.jsxText(formHelperTextValue), j.jsxText('\n')], ); childrenOfFormControl.push(formHelperTextElement); } diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js index 10ba025f24e99a..de9f675f85629a 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/actual.js @@ -11,6 +11,12 @@ import TextField from "@mui/material/TextField" input: { ['aria-hidden']: false }, helperText: { ['aria-hidden']: false }, }} + slots={{ + root: 'span', + label: 'span', + input: 'span', + helperText: 'span', + }} id="Id" label="Label" placeholder="Placeholder" diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js index 034a0b83580767..dcbb41e1cab31e 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.test/expected.js @@ -4,10 +4,19 @@ import JoyInput2 from "@mui/joy/Input"; import TextField from "@mui/material/TextField"
- - Label + + + Label + - Help! + + Help! + From 22a17735d4727eaf92b907baa0d199abc2d2a089 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sat, 7 Jan 2023 00:02:18 -0500 Subject: [PATCH 22/24] fix test failure --- packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js index 401a4f242cc3d2..3e12c1819608a8 100644 --- a/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js +++ b/packages/mui-codemod/src/v5.0.0/joy-text-field-to-input.js @@ -35,8 +35,8 @@ export default function transformer(file, api, options) { if (elementPath.node.type !== 'JSXElement') { return; } - newElementName = elementPath.node.openingElement.name.name.replaceAll( - 'TextField', + newElementName = elementPath.node.openingElement.name.name.replace( + /TextField/gm, 'Input', ); elementPath.node.openingElement.name.name = newElementName; From 3d92c207c550b2932e891395bd97840a061b5d40 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Jan 2023 09:15:11 +0700 Subject: [PATCH 23/24] add codemod to README --- packages/mui-codemod/README.md | 58 ++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 47e8f6815d6d14..dab7cfd96fb5e7 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -62,6 +62,64 @@ npx @mui/codemod --jscodeshift="--printOptions='{\"quote\":\" ### v5.0.0 +#### `joy-text-field-to-input` + +Replace `` with composition of `Input` + +This change only affects Joy UI components. + +```diff +-import TextField from '@mui/joy/TextField'; ++import FormControl from '@mui/joy/FormControl'; ++import FormLabel from '@mui/joy/FormLabel'; ++import FormHelperText from '@mui/joy/FormHelperText'; ++import Input from '@mui/joy/Input'; + +- ++ ++ ++ Label ++ ++ ++ ++ Help! ++ ++ +``` + +```sh +npx @mui/codemod v5.0.0/joy-text-field-to-input +``` + #### `joy-rename-components-to-slots` Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively. From 67cd5cfa7831bc7e80678980bc2915fbcd2b0685 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 10 Jan 2023 09:26:46 +0700 Subject: [PATCH 24/24] add migration to text-field --- .../joy/components/text-field/text-field.md | 79 +++++++++++++++++++ docs/pages/joy-ui/react-text-field.js | 7 ++ 2 files changed, 86 insertions(+) create mode 100644 docs/data/joy/components/text-field/text-field.md create mode 100644 docs/pages/joy-ui/react-text-field.js diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md new file mode 100644 index 00000000000000..c3b2a2ac6c6ad8 --- /dev/null +++ b/docs/data/joy/components/text-field/text-field.md @@ -0,0 +1,79 @@ +--- +product: joy-ui +title: React Text Field component +githubLabel: 'component: text field' +--- + +# Text Field + +

Text fields let users enter and edit text.

+ +:::warning +**TextField** component has been removed in [`@mui/joy@5.0.0-alpha.63`](https://github.com/mui/material-ui/releases/tag/v5.11.5). We recommend using [`Input`](/joy-ui/react-input/), `FormControl` and `FormLabel` instead. + +To learn more why it has been removed, visit the [RFC](https://github.com/mui/material-ui/issues/34176). +::: + +## Migration + +### Codemod + +Run this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-text-field-to-input) in your project's terminal: + +```sh +npx @mui/codemod v5.0.0/joy-text-field-to-input +``` + +It will go through all files under `` and replace `` with the `` composition. + +### Manual + +Replace the `TextField` with composition: + +```diff +-import TextField from '@mui/joy/TextField'; ++import FormControl from '@mui/joy/FormControl'; ++import FormLabel from '@mui/joy/FormLabel'; ++import FormHelperText from '@mui/joy/FormHelperText'; ++import Input from '@mui/joy/Input'; + +- ++ ++ ++ Label ++ ++ ++ ++ Help! ++ ++ +``` diff --git a/docs/pages/joy-ui/react-text-field.js b/docs/pages/joy-ui/react-text-field.js new file mode 100644 index 00000000000000..165116fb127c28 --- /dev/null +++ b/docs/pages/joy-ui/react-text-field.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/joy/components/text-field/text-field.md?@mui/markdown'; + +export default function Page() { + return ; +}