refactor(input): differentiating expected type for min and max (#4144)

mfranzke · web-flow · commit fb47759b4379 · 2025-05-05T07:03:28.000Z
* refactor(input): differentiating expected type for min and max * refactor: resilience * refactor: updated snapshots * refactor: extracted this method * refactor(input): added min and max properties (#4145)
diff --git a/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -96,7 +96,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/chromium/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -96,7 +96,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/firefox/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -95,7 +95,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/mobile-chrome/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -96,7 +96,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/mobile-safari/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -96,7 +96,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml b/__snapshots__/input/showcase/webkit/should-have-same-aria-snapshot/DBInput-should-have-same-aria-snapshot.yaml
@@ -96,7 +96,7 @@
   - text: Label
   - textbox "Label"
   - status
-  - link "Example - Types arrow_up_right\" / \""
+  - link "Example - Types with min and max arrow_up_right\" / \""
   - text: Label
   - textbox "Label"
   - status
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -18,7 +18,8 @@ import {
 	hasVoiceOver,
 	isArrayOfStrings,
 	stringPropVisible,
-	uuid
+	uuid,
+	getInputValue
 } from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
@@ -221,8 +222,8 @@ export default function DBInput(props: DBInputProps) {
 				value={props.value ?? state._value}
 				maxLength={getNumber(props.maxLength, props.maxlength)}
 				minLength={getNumber(props.minLength, props.minlength)}
-				max={getNumber(props.max)}
-				min={getNumber(props.min)}
+				max={getInputValue(props.max, props.type)}
+				min={getInputValue(props.min, props.type)}
 				readOnly={
 					getBoolean(props.readOnly, 'readOnly') ||
 					getBoolean(props.readonly, 'readonly')
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
@@ -183,6 +183,25 @@ export const getNumber = (
 	return Number(originNumber ?? alternativeNumber);
 };
 
+/**
+ * Retrieves the input value based on the provided value and input type.
+ *
+ * If the input type is "number" or "range", the value is processed as a number.
+ * Otherwise, the value is returned as-is.
+ *
+ * @param value - The input value, which can be a number, string, or undefined.
+ * @param inputType - The type of the input, such as "number", "range", or other string types.
+ * @returns The processed input value as a string, number, or undefined.
+ */
+export const getInputValue = (
+	value?: number | string,
+	inputType?: string
+): string | number | undefined => {
+	return inputType && ['number', 'range'].includes(inputType)
+		? getNumber(value)
+		: value;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getHideProp = (show?: boolean | string): any => {
 	if (show === undefined || show === null) {
diff --git a/showcases/angular-showcase/src/app/components/input/input.component.html b/showcases/angular-showcase/src/app/components/input/input.component.html
@@ -12,6 +12,8 @@
 	>
 		<db-input
 			[maxLength]="exampleProps?.maxLength"
+			[max]="exampleProps?.max"
+			[min]="exampleProps?.min"
 			[variant]="exampleProps?.variant"
 			[label]="exampleProps?.label"
 			[message]="exampleProps?.message"
diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx
@@ -41,7 +41,9 @@ const getInput = ({
 	validMessage,
 	validation,
 	invalidMessage,
-	maxLength
+	maxLength,
+	max,
+	min
 }: DBInputProps & { dataList: boolean }) => {
 	return (
 		<DBInput
@@ -58,6 +60,8 @@ const getInput = ({
 			readOnly={readOnly}
 			iconAfter={iconAfter}
 			maxLength={maxLength}
+			max={max}
+			min={min}
 			icon={icon}
 			showMessage={showMessage}
 			invalidMessage={invalidMessage}
diff --git a/showcases/shared/input.json b/showcases/shared/input.json
@@ -251,7 +251,7 @@
 		]
 	},
 	{
-		"name": "Example - Types",
+		"name": "Example - Types with min and max",
 		"codeFileName": "ExampleTypes",
 		"examples": [
 			{
@@ -299,35 +299,45 @@
 				"name": "Date",
 				"props": {
 					"label": "Label",
-					"type": "date"
+					"type": "date",
+					"min": "2023-01-01",
+					"max": "2030-12-31"
 				}
 			},
 			{
 				"name": "Datetime Local",
 				"props": {
 					"label": "Label",
-					"type": "datetime-local"
+					"type": "datetime-local",
+					"min": "2023-01-01T00:00",
+					"max": "2030-12-31T23:59"
 				}
 			},
 			{
 				"name": "Month",
 				"props": {
 					"label": "Label",
-					"type": "month"
+					"type": "month",
+					"min": "2023-01",
+					"max": "2030-12"
 				}
 			},
 			{
 				"name": "Time",
 				"props": {
 					"label": "Label",
-					"type": "time"
+					"type": "time",
+					"min": "00:00",
+					"max": "23:59"
 				}
 			},
 			{
 				"name": "Week",
 				"props": {
 					"label": "Label",
-					"type": "week"
+					"type": "week",
+					"min": "2023-W01",
+					"max": "2030-W52"
 				}
 			}
 		]
diff --git a/showcases/vue-showcase/src/components/input/Input.vue b/showcases/vue-showcase/src/components/input/Input.vue
@@ -29,6 +29,8 @@ const getDataList = (
 		>
 			<DBInput
 				:maxLength="exampleProps?.maxLength"
+				:max="exampleProps?.max"
+				:min="exampleProps?.min"
 				:variant="exampleProps?.variant"
 				:show-label="exampleProps?.showLabel"
 				:label="exampleProps?.label"
