New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@rmwc/textfield
Advanced tools
@rmwc/textfield - npm Package Compare versions
Comparing version 14.0.4 to 14.0.5
| { | ||
| "name": "@rmwc/textfield", | ||
| "version": "14.0.4", | ||
| "version": "14.0.5", | ||
| "description": "RMWC TextField component", | ||
@@ -41,3 +41,2 @@ "main": "./index.js", | ||
| "peerDependencies": { | ||
| "@material/textfield": "^14.0.0", | ||
| "react": ">=16.8.x", | ||
@@ -47,10 +46,11 @@ "react-dom": ">=16.8.x" | ||
| "dependencies": { | ||
| "@rmwc/base": "14.0.4", | ||
| "@rmwc/floating-label": "14.0.4", | ||
| "@rmwc/icon": "14.0.4", | ||
| "@rmwc/line-ripple": "14.0.4", | ||
| "@rmwc/notched-outline": "14.0.4", | ||
| "@rmwc/ripple": "14.0.4", | ||
| "@rmwc/types": "14.0.4" | ||
| "@material/textfield": "^14.0.0", | ||
| "@rmwc/base": "14.0.5", | ||
| "@rmwc/floating-label": "14.0.5", | ||
| "@rmwc/icon": "14.0.5", | ||
| "@rmwc/line-ripple": "14.0.5", | ||
| "@rmwc/notched-outline": "14.0.5", | ||
| "@rmwc/ripple": "14.0.5", | ||
| "@rmwc/types": "14.0.5" | ||
| } | ||
| } |
223
README.md
| # Text Fields | ||
| > Text fields allow users to input, edit, and select text. | ||
| Text fields allow users to input, edit, and select text. | ||
@@ -8,10 +8,10 @@ - Module **@rmwc/textfield** | ||
| - Using CSS Loader | ||
| - import **'@rmwc/textfield/styles';** | ||
| - import '@rmwc/textfield/styles'; | ||
| - Or include stylesheets | ||
| - **'@material/textfield/dist/mdc.textfield.css'**; | ||
| - **'@material/floating-label/dist/mdc.floating-label.css'**; | ||
| - **'@material/notched-outline/dist/mdc.notched-outline.css'**; | ||
| - **'@material/line-ripple/dist/mdc.line-ripple.css'**; | ||
| - **'@material/ripple/dist/mdc.ripple.css'**; | ||
| - **'@rmwc/icon/icon.css'**; | ||
| - **'@material/textfield/dist/mdc.textfield.css'** | ||
| - **'@material/floating-label/dist/mdc.floating-label.css'** | ||
| - **'@material/notched-outline/dist/mdc.notched-outline.css'** | ||
| - **'@material/line-ripple/dist/mdc.line-ripple.css'** | ||
| - **'@material/ripple/dist/mdc.ripple.css'** | ||
| - **'@rmwc/icon/icon.css'** | ||
| - MDC Docs: [https://material.io/develop/web/components/input-controls/text-field/](https://material.io/develop/web/components/input-controls/text-field/) | ||
@@ -21,69 +21,32 @@ | ||
| Standard | ||
| ```js | ||
| <TextField label\="standard..." /> | ||
| ```jsx | ||
| <TextField label="standard..." /> | ||
| ``` | ||
| Outlined | ||
| ```js | ||
| <TextField outlined label\="outlined..." /> | ||
| ```jsx | ||
| <TextField outlined label="outlined..." /> | ||
| ``` | ||
| No Label | ||
| ```js | ||
| <TextField placeholder\="No label" /> | ||
| ```jsx | ||
| <TextField placeholder="No label" /> | ||
| ``` | ||
| Icons | ||
| ```js | ||
| <\> | ||
| {/\* Leading and trailing icons can be used.\*/} | ||
| <TextField icon\="search" trailingIcon\="close" label\="icon..." /> | ||
| {/\* If you need full control over the icon, you can pass the icon as options with your own props. Dont forget the TabIndex to make it clickable\*/} | ||
| ```jsx | ||
| <> | ||
| {/* Leading and trailing icons can be used.*/} | ||
| <TextField icon="search" trailingIcon="close" label="icon..." /> | ||
| {/* If you need full control over the icon, you can pass the icon as options with your own props. Dont forget the TabIndex to make it clickable*/} | ||
| <TextField | ||
| label\="trailingIcon..." | ||
| trailingIcon\={{ | ||
| label="trailingIcon..." | ||
| trailingIcon={{ | ||
| icon: 'close', | ||
| tabIndex: 0, | ||
| onClick: () \=> console.log('Clear') | ||
| onClick: () => console.log('Clear') | ||
| }} | ||
| /> | ||
| </\> | ||
| </> | ||
| ``` | ||
| Fullwidth | ||
| ```js | ||
| <TextField fullwidth label\="fullwidth..." /> | ||
| ```jsx | ||
| <TextField fullwidth label="fullwidth..." /> | ||
| ``` | ||
@@ -95,35 +58,18 @@ | ||
| ```js | ||
| <div\> | ||
| ```jsx | ||
| <div> | ||
| <TextField | ||
| textarea | ||
| label\="textarea..." | ||
| rows\={8} | ||
| maxLength\={20} | ||
| label="textarea..." | ||
| rows={8} | ||
| maxLength={20} | ||
| characterCount | ||
| resizeable | ||
| helpText\={{ | ||
| helpText={{ | ||
| persistent: true, | ||
| validationMsg: true, | ||
| children: 'The field is required' | ||
| }} | ||
| /> | ||
| </div\> | ||
| </div> | ||
| ``` | ||
@@ -133,46 +79,21 @@ | ||
| Disabled | ||
| ```js | ||
| <TextField disabled label\="Disabled..." /> | ||
| ```jsx | ||
| <TextField disabled label="Disabled..." /> | ||
| ``` | ||
| Required | ||
| ```js | ||
| <TextField required label\="Required..." value\="" /> | ||
| ```jsx | ||
| <TextField required label="Required..." value="" /> | ||
| ``` | ||
| Invalid | ||
| ```js | ||
| ```jsx | ||
| <TextField | ||
| invalid | ||
| label\="Invalid..." | ||
| value\="#@!$" | ||
| onChange\={() \=> {}} | ||
| label="Invalid..." | ||
| value="#@!$" | ||
| onChange={() => {}} | ||
| /> | ||
| ``` | ||
| Validation Pattern | ||
| ```js | ||
| <TextField label\="Validate Pattern" pattern\="\[A-Za-z\]{3}" /> | ||
| ```jsx | ||
| <TextField label="Validate Pattern" pattern="[A-Za-z]{3}" /> | ||
| ``` | ||
@@ -184,27 +105,45 @@ | ||
| ```js | ||
| ```jsx | ||
| <> | ||
| <TextField label="text" type="text" /> | ||
| <TextField label="color" type="color" style={{ width: '6rem' }} /> | ||
| <TextField label="date" type="date" /> | ||
| <TextField label="datetime-local" type="datetime-local" /> | ||
| <TextField label="month" type="month" /> | ||
| <TextField label="range" type="range" /> | ||
| <TextField label="time" type="time" /> | ||
| <TextField label="week" type="week" /> | ||
| </> | ||
| ``` | ||
| <\> | ||
| ## TextField | ||
| A TextField component for accepting text input from a user. | ||
| <TextField label\="text" type\="text" /> | ||
| ### Props | ||
| <TextField label\="color" type\="color" style\={{ width: '6rem' }} /> | ||
| | Name | Type | Description | | ||
| |------|------|-------------| | ||
| | `align` | `"start" \| "end"` | How to align the text inside the TextField. Defaults to 'start'. | | ||
| | `characterCount` | `boolean` | Shows the character count, must be used in conjunction with maxLength. | | ||
| | `disabled` | `boolean` | Makes the Textfield disabled. | | ||
| | `floatLabel` | `boolean` | The label floats automatically based on value, but you can use this prop for manual control. | | ||
| | `foundationRef` | `Ref<null \| MDCTextFieldFoundation<>>` | Advanced: A reference to the MDCFoundation. | | ||
| | `fullwidth` | `boolean` | Makes the TextField fullwidth. | | ||
| | `helpText` | `ReactNode \| TextFieldHelperTextProps` | Adds help text to the field | | ||
| | `icon` | `IconPropT` | Add a leading icon. | | ||
| | `inputRef` | `Ref<null \| HTMLInputElement<> \| HTMLTextAreaElement<>>` | A reference to the native input or textarea. | | ||
| | `invalid` | `boolean` | Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used. | | ||
| | `label` | `ReactNode` | A label for the input. | | ||
| | `outlined` | `boolean` | Outline the TextField. | | ||
| | `prefix` | `string` | Add prefix. | | ||
| | `required` | `boolean` | Makes the Textfield required. | | ||
| | `resizeable` | `boolean` | Make textarea resizeable | | ||
| | `ripple` | `RipplePropT` | Adds a ripple effect to the component | | ||
| | `rootProps` | `Object` | By default, props spread to the input. These props are for the component's root container. | | ||
| | `suffix` | `string` | Add suffix. | | ||
| | `textarea` | `boolean` | Makes a multiline TextField. | | ||
| | `trailingIcon` | `IconPropT` | Add a trailing icon. | | ||
| | `type` | `string` | The type of input field to render, search, number, etc | | ||
| | `value` | `string \| number` | Sets the value for controlled TextFields. | | ||
| <TextField label\="date" type\="date" /> | ||
| <TextField label\="datetime-local" type\="datetime-local" /> | ||
| <TextField label\="month" type\="month" /> | ||
| <TextField label\="range" type\="range" /> | ||
| <TextField label\="time" type\="time" /> | ||
| <TextField label\="week" type\="week" /> | ||
| </\> | ||
| ``` | ||
| ## TextField |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by6.05%
28567
Worsened metrics
- Number of lines in readme file
- decreased by-29.61%
145
Dependency changes
+ Added@material/textfield@^14.0.0
+ Added@rmwc/base@14.0.5(transitive)
+ Added@rmwc/floating-label@14.0.5(transitive)
+ Added@rmwc/icon@14.0.5(transitive)
+ Added@rmwc/line-ripple@14.0.5(transitive)
+ Added@rmwc/notched-outline@14.0.5(transitive)
+ Added@rmwc/provider@14.0.5(transitive)
+ Added@rmwc/ripple@14.0.5(transitive)
+ Added@rmwc/types@14.0.5(transitive)
- Removed@rmwc/base@14.0.4(transitive)
- Removed@rmwc/floating-label@14.0.4(transitive)
- Removed@rmwc/icon@14.0.4(transitive)
- Removed@rmwc/line-ripple@14.0.4(transitive)
- Removed@rmwc/notched-outline@14.0.4(transitive)
- Removed@rmwc/provider@14.0.4(transitive)
- Removed@rmwc/ripple@14.0.4(transitive)
- Removed@rmwc/types@14.0.4(transitive)
Updated@rmwc/base@14.0.5
Updated@rmwc/floating-label@14.0.5
Updated@rmwc/icon@14.0.5
Updated@rmwc/line-ripple@14.0.5
Updated@rmwc/notched-outline@14.0.5
Updated@rmwc/ripple@14.0.5
Updated@rmwc/types@14.0.5