feat: ✨ add optional prop defaultValue (#1560)

Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Sep 14, 2023 · 5d357b7 · 5d357b7
1 parent 611f792
commit 5d357b7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -112,9 +112,14 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					// It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
 					checkboxElement.indeterminate = props.indeterminate;
 				}
+
+				if (props.defaultChecked !== undefined) {
+					// only set by JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#instance_properties_that_apply_only_to_elements_of_type_checkbox_or_radio
+					checkboxElement.defaultChecked = props.defaultChecked;
+				}
 			}
 		}
-	}, [state.initialized, props.indeterminate, props.checked]);
+	}, [state.initialized, props.indeterminate, props.checked, props.defaultChecked]);
 
 	return (
 		<>

diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -177,6 +177,13 @@ export type FormCheckProps = {
 	 * Define the radio or checkbox elements checked state
 	 */
 	checked?: boolean;
+
+	/**
+	 * Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
+	 * Vue: according to our research this property should not be used. Please refer to v-model instead.
+	 * cf. https://react.carbondesignsystem.com/?path=/docs/components-checkbox--overview#component-api vs. https://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default
+	 */
+	defaultChecked?: boolean;
 };
 
 export type FormMessageProps = {

diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -1,3 +1,4 @@
+<!-- [html-validate-disable attr-case] -->
 <div class="form-container">
 	<div>
 		<db-input
@@ -60,7 +61,7 @@
 		<h6>Reactive Forms Example:</h6>
 		<form [formGroup]="form" (submit)="onFormSubmit()">
 			<fieldset>
-				<p>Input:</p>
+				<legend>Input:</legend>
 
 				<db-input
 					name="form"
@@ -137,6 +138,7 @@ <h6>Reactive Forms Example:</h6>
 					(change)="handleChange1($event)"
 				></db-checkbox>
 				<fieldset>
+					<legend>Checkboxes</legend>
 					<db-checkbox
 						[checked]="checked[0]"
 						(change)="handleChange2($event)"
@@ -150,6 +152,11 @@ <h6>Reactive Forms Example:</h6>
 						label="Checkbox"
 					></db-checkbox>
 				</fieldset>
+				<db-checkbox
+					name="checkbox4"
+					label="Checkbox with defaultValue"
+					[defaultChecked]="true"
+				></db-checkbox>
 				<p>Select:</p>
 				<db-select
 					name="select"

diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
@@ -138,6 +138,12 @@ const FormComponent = () => {
 								onChange={handleChange3}>
 								Checkbox
 							</DBCheckbox>
+							<DBCheckbox
+								name="checkbox-3"
+								value="Irgendwas"
+								defaultChecked={false}>
+								DefaultChecked
+							</DBCheckbox>
 						</fieldset>
 						<p>DBSelect:</p>
 						<DBSelect