fix(text-input): align "readOnly" prop capitalization
MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5625,7 +5625,7 @@ Map {
"placeholder": Object {
"type": "string",
},
- "readonly": Object {
+ "readOnly": Object {
"type": "bool",
},
"size": Object {

MODIFY
packages/react/src/components/TextInput/TextInput-story.js
packages/react/src/components/TextInput/TextInput-story.js
@@ -81,7 +81,7 @@ const props = {
onChange: action('onChange'),
}),
TextInputProps: () => ({
- readonly: boolean('Readonly variant (readonly)', false),
+ readOnly: boolean('Readonly variant (readOnly)', false),
}),
PasswordInputProps: () => ({
tooltipPosition: select(

MODIFY
packages/react/src/components/TextInput/TextInput.js
packages/react/src/components/TextInput/TextInput.js
@@ -35,14 +35,14 @@ const TextInput = React.forwardRef(function TextInput(
light,
size,
inline,
- readonly,
+ readOnly,
...other
},
ref
) {
const normalizedProps = useNormalizedInputProps({
id,
- readonly,
+ readOnly,
disabled,
invalid,
invalidText,
@@ -74,14 +74,14 @@ const TextInput = React.forwardRef(function TextInput(
className: textInputClasses,
title: placeholder,
disabled: normalizedProps.disabled,
- readOnly: readonly,
+ readOnly,
...other,
};
const inputWrapperClasses = classNames(
`${prefix}--form-item`,
`${prefix}--text-input-wrapper`,
{
- [`${prefix}--text-input-wrapper--readonly`]: readonly,
+ [`${prefix}--text-input-wrapper--readonly`]: readOnly,
[`${prefix}--text-input-wrapper--light`]: light,
[`${prefix}--text-input-wrapper--inline`]: inline,
}
@@ -112,7 +112,7 @@ const TextInput = React.forwardRef(function TextInput(
[`${prefix}--text-input__invalid-icon`]:
normalizedProps.invalid || normalizedProps.warn,
[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn,
- [`${prefix}--text-input__readonly-icon`]: readonly,
+ [`${prefix}--text-input__readonly-icon`]: readOnly,
});
const label = labelText ? (
@@ -244,7 +244,7 @@ TextInput.propTypes = {
/**
* Whether the input should be read-only
*/
- readonly: PropTypes.bool,
+ readOnly: PropTypes.bool,
/**
* Specify the size of the Text Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.

MODIFY
packages/react/src/internal/useNormalizedInputProps.js
packages/react/src/internal/useNormalizedInputProps.js
@@ -18,7 +18,7 @@ const { prefix } = settings;
/**
* @typedef {object} InputProps
* @property {string} id - The input's id
- * @property {boolean} readonly - Whether the input should be readonly
+ * @property {boolean} readOnly - Whether the input should be readonly
* @property {boolean} disabled - Whether the input should be disabled
* @property {boolean} invalid - Whether the input should be marked as invalid
* @property {string} invalidText - The validation message displayed in case the input is considered invalid
@@ -52,7 +52,7 @@ const { prefix } = settings;
*/
export function useNormalizedInputProps({
id,
- readonly,
+ readOnly,
disabled,
invalid,
invalidText,
@@ -60,16 +60,16 @@ export function useNormalizedInputProps({
warnText,
}) {
const normalizedProps = {
- disabled: !readonly && disabled,
- invalid: !readonly && invalid,
+ disabled: !readOnly && disabled,
+ invalid: !readOnly && invalid,
invalidId: `${id}-error-msg`,
- warn: !readonly && !invalid && warn,
+ warn: !readOnly && !invalid && warn,
warnId: `${id}-warn-msg`,
validation: null,
icon: null,
};
- if (readonly) {
+ if (readOnly) {
normalizedProps.icon = EditOff16;
} else {
if (normalizedProps.invalid) {

fix(text-input): align "readOnly" prop capitalization (#8949)