Merge pull request #446 from kelvininc/dc/input-disabled

fix(text-field)!: rename props existing in native input to avoid conflict with lp
kelvininc · May 10, 2024 · 51ed823 · 51ed823
2 parents 60732f8 + 49bce1c
commit 51ed823
Show file tree

Hide file tree

Showing 41 changed files with 271 additions and 217 deletions.
diff --git a/...ui-components/src/components/SchemaForm/Templates/BaseInputTemplate/BaseInputTemplate.tsx b/...ui-components/src/components/SchemaForm/Templates/BaseInputTemplate/BaseInputTemplate.tsx
@@ -43,8 +43,8 @@ const BaseInputTemplate = <T, S extends StrictRJSFSchema = RJSFSchema, F extends
 				id={id}
 				size={optionComponentSize ?? componentSize}
 				examples={examples}
-				disabled={disabled || readonly}
-				readonly={readonly}
+				inputDisabled={disabled || readonly}
+				inputReadonly={readonly}
 				maxLength={schema.maxLength ?? maxLength}
 				minLength={schema.minLength ?? minLength}
 				min={min}

diff --git a/...src/components/SchemaForm/Templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/...src/components/SchemaForm/Templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -30,8 +30,8 @@ const WrapIfAdditionalTemplate = <T, S extends StrictRJSFSchema = RJSFSchema, F
 				<KvTextField
 					id={`${id}-key`}
 					label={keyLabel}
-					disabled={disabled || readonly}
-					required={required}
+					inputDisabled={disabled || readonly}
+					inputRequired={required}
 					type={EInputFieldType.Text}
 					value={label}
 					onTextFieldBlur={!readonly ? handleBlur : undefined}

diff --git a/packages/react-ui-components/src/stories/Components/Dropdown.stories.tsx b/packages/react-ui-components/src/stories/Components/Dropdown.stories.tsx
@@ -50,7 +50,7 @@ Default.args = {
 	inputConfig: {
 		label: 'Options',
 		icon: EIconName.Layer,
-		required: true,
+		inputRequired: true,
 		placeholder: 'Select an option',
 		helpText: 'You can select several options',
 		size: EComponentSize.Large
@@ -63,7 +63,7 @@ Disabled.args = {
 	inputConfig: {
 		label: 'Options',
 		icon: EIconName.Layer,
-		required: true,
+		inputRequired: true,
 		placeholder: 'Select an option',
 		helpText: 'You can select several options',
 		size: EComponentSize.Large

diff --git a/packages/react-ui-components/src/stories/Components/Search.stories.tsx b/packages/react-ui-components/src/stories/Components/Search.stories.tsx
@@ -8,7 +8,7 @@ export default {
 	title: 'Inputs/Search',
 	component: 'kv-search',
 	argTypes: {
-		disabled: { control: { type: 'boolean' } },
+		inputDisabled: { control: { type: 'boolean' } },
 		size: {
 			control: 'radio',
 			options: Object.values(EComponentSize)
@@ -40,7 +40,7 @@ const SearchTemplate: ComponentStory<typeof KvSearch> = args => {
 export const Default = SearchTemplate.bind({});
 Default.args = {
 	value: '',
-	disabled: false,
+	inputDisabled: false,
 	placeholder: 'Placeholder Here',
 	size: EComponentSize.Large
 };
@@ -50,7 +50,7 @@ Disabled.args = {
 	...Default.args,
 	value: '',
 	placeholder: 'Search disabled',
-	disabled: true,
+	inputDisabled: true,
 	size: EComponentSize.Large
 };
 

diff --git a/packages/react-ui-components/src/stories/Components/TextField.stories.tsx b/packages/react-ui-components/src/stories/Components/TextField.stories.tsx
@@ -8,8 +8,8 @@ export default {
 	title: 'Inputs/Text Field',
 	component: 'kv-text-field',
 	argTypes: {
-		disabled: { control: { type: 'boolean' } },
-		required: { control: { type: 'boolean' } },
+		inputDisabled: { control: { type: 'boolean' } },
+		inputRequired: { control: { type: 'boolean' } },
 		loading: { control: { type: 'boolean' } },
 		helpText: { control: { type: 'array' } },
 		value: { control: { type: 'text' } },
@@ -45,8 +45,8 @@ const TextFieldLeftSlotTemplate: ComponentStory<typeof KvTextField> = args => (
 export const Default = TextFieldTemplate.bind({});
 Default.args = {
 	label: 'Default Text Field',
-	disabled: false,
-	required: false,
+	inputDisabled: false,
+	inputRequired: false,
 	loading: false,
 	placeholder: 'text here',
 	state: EValidationState.None,
@@ -56,8 +56,8 @@ Default.args = {
 export const WithTextInputMask = TextFieldTemplate.bind({});
 WithTextInputMask.args = {
 	label: 'Text Field with text input mask',
-	disabled: false,
-	required: false,
+	inputDisabled: false,
+	inputRequired: false,
 	loading: false,
 	value: 'Possible Text Here',
 	inputMaskRegex: '[a-zA-Z s]+',
@@ -71,8 +71,8 @@ WithTextInputMask.args = {
 export const WithNumericInputMask = TextFieldTemplate.bind({});
 WithNumericInputMask.args = {
 	label: 'Text Field with numeric input mask',
-	disabled: false,
-	required: false,
+	inputDisabled: false,
+	inputRequired: false,
 	loading: false,
 	value: 0,
 	min: -100,
@@ -95,7 +95,7 @@ Disabled.args = {
 	...Default.args,
 	label: 'Disabled Text Field',
 	value: 'text value',
-	disabled: true,
+	inputDisabled: true,
 	state: EValidationState.None,
 	size: EComponentSize.Large
 };
@@ -104,7 +104,7 @@ export const Required = TextFieldTemplate.bind({});
 Required.args = {
 	...Default.args,
 	label: 'Required Text Field',
-	required: true,
+	inputRequired: true,
 	state: EValidationState.None,
 	size: EComponentSize.Large
 };
@@ -113,7 +113,7 @@ export const MaxMinLength = TextFieldTemplate.bind({});
 MaxMinLength.args = {
 	...Default.args,
 	label: 'Required Text Field',
-	required: true,
+	inputRequired: true,
 	minLength: 5,
 	maxLength: 10
 };
@@ -123,7 +123,7 @@ MaxMinValue.args = {
 	...Default.args,
 	type: EInputFieldType.Number,
 	label: 'Required Text Field',
-	required: true,
+	inputRequired: true,
 	min: 0,
 	max: 10
 };
@@ -133,7 +133,7 @@ Step.args = {
 	...Default.args,
 	type: EInputFieldType.Number,
 	label: 'Required Text Field',
-	required: true,
+	inputRequired: true,
 	step: 0.1
 };
 
@@ -185,8 +185,8 @@ SlimIcon.args = {
 export const WithLeftSlot = TextFieldLeftSlotTemplate.bind({});
 WithLeftSlot.args = {
 	label: 'Left Slot Text Field',
-	disabled: false,
-	required: false,
+	inputDisabled: false,
+	inputRequired: false,
 	loading: false,
 	placeholder: 'text here',
 	state: EValidationState.None,
@@ -196,8 +196,8 @@ WithLeftSlot.args = {
 export const DateTimeInputMask = TextFieldTemplate.bind({});
 DateTimeInputMask.args = {
 	label: 'Date time input mask',
-	disabled: false,
-	required: false,
+	inputDisabled: false,
+	inputRequired: false,
 	loading: false,
 	useInputMask: true,
 	type: EInputFieldType.DateTime,