docs: use self-closing tags in inline React examples (#3736)

vaadin · Sep 27, 2024 · 70d23c1 · 70d23c1
1 parent bde0024
commit 70d23c1
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 95 deletions.
diff --git a/articles/hilla/guides/routing.adoc b/articles/hilla/guides/routing.adoc
@@ -140,12 +140,12 @@ export default function MainLayout() {
         <header className="flex flex-col gap-m">
           <h1 className="text-l m-0">My application</h1>
           <SideNav onNavigate={({path}) => path && navigate(path)} location={location}>
-            <SideNavItem path="/example"></SideNavItem>
+            <SideNavItem path="/example" />
           </SideNav>
         </header>
       </div>
 
-      <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
+      <DrawerToggle slot="navbar" aria-label="Menu toggle" />
 
       <Suspense fallback={<ProgressBar indeterminate={true} className="m-0" />}>
         <Outlet />

diff --git a/articles/hilla/lit/guides/forms/binder-load.adoc b/articles/hilla/lit/guides/forms/binder-load.adoc
@@ -128,7 +128,7 @@ export default function PersonView() {
 
   return (
     <section>
-      <TextField label="Full name" {...field(model.fullName)}></TextField>
+      <TextField label="Full name" {...field(model.fullName)} />
       <Button onClick={submit}>Save</Button>
     </section>
   );

diff --git a/articles/hilla/lit/guides/forms/binder-validation.adoc b/articles/hilla/lit/guides/forms/binder-validation.adoc
@@ -58,9 +58,9 @@ export default function EmployeeView() {
 
   return (
     <>
-      <TextField label="Username" {...field(model.username)}></TextField>
-      <TextField label="Title" {...field(model.title)}></TextField>
-      <EmailField label="Email" {...field(model.email)}></EmailField>
+      <TextField label="Username" {...field(model.username)} />
+      <TextField label="Title" {...field(model.title)} />
+      <EmailField label="Email" {...field(model.email)} />
     </>
   );
 
@@ -194,7 +194,7 @@ export default function ProfileView() {
 
   return (
     <>
-      <PasswordField label="Password" {...field(model.password)}></PasswordField>
+      <PasswordField label="Password" {...field(model.password)} />
       <Button onClick={submit}>Submit</Button>
     </>
   );
@@ -329,11 +329,11 @@ export default function ProfileView() {
   }, []);
 
   return (
-      <>
-        <PasswordField label="Password" {...field(model.password)}></PasswordField>
-        <PasswordField label="Repeat password" {...field(model.repeatPassword)}></PasswordField>
-      </>
-    );
+    <>
+      <PasswordField label="Password" {...field(model.password)} />
+      <PasswordField label="Repeat password" {...field(model.repeatPassword)} />
+    </>
+  );
 }
 ----
 endif::hilla-react[]
@@ -464,13 +464,13 @@ export default function ProfileView() {
   }, []);
 
   return (
-      <>
-        <TextField label="Name" {...field(model.name)}></TextField>
-        <TextField label="Username" {...field(model.username)}></TextField>
-        <IntegerField label="Age" {...field(model.age)}></IntegerField>
-        <EmailField label="Email" {...field(model.email)}></EmailField>
-      </>
-    );
+    <>
+      <TextField label="Name" {...field(model.name)} />
+      <TextField label="Username" {...field(model.username)} />
+      <IntegerField label="Age" {...field(model.age)} />
+      <EmailField label="Email" {...field(model.email)} />
+    </>
+  );
 }
 ----
 endif::hilla-react[]

diff --git a/articles/hilla/lit/guides/forms/binder.adoc b/articles/hilla/lit/guides/forms/binder.adoc
@@ -111,7 +111,7 @@ export default function PersonView() {
   const { model, field } = useForm(PersonModel);
 
   return (
-    <TextField label="Full name" {...field(model.fullName)}></TextField>
+    <TextField label="Full name" {...field(model.fullName)} />
   );
 
 }

diff --git a/articles/hilla/lit/guides/forms/binding-arrays.adoc b/articles/hilla/lit/guides/forms/binding-arrays.adoc
@@ -51,7 +51,7 @@ export default function GroupFormView() {
     <>
       {model.people.map(personBinder => (
         <div>
-          <TextField label="Full name" {...field(personBinder.model.fullName)}></TextField>
+          <TextField label="Full name" {...field(personBinder.model.fullName)} />
           <strong>Full name:</strong>
           {personBinder.value.fullName}
         </div>
@@ -162,7 +162,7 @@ export default function GroupFormView() {
     <>
       {model.people.map(personBinder => (
         <div>
-          <TextField label="Full name" {...field(personBinder.model.fullName)}></TextField>
+          <TextField label="Full name" {...field(personBinder.model.fullName)} />
           <Button onClick={() => personBinder.removeSelf()}>Delete</Button>
         </div>
       ))}

diff --git a/articles/hilla/lit/guides/forms/vaadin-components.adoc b/articles/hilla/lit/guides/forms/vaadin-components.adoc
@@ -133,26 +133,12 @@ const { model, field } = useForm(MyEntityModel);
 ...
 return (
   <>
-    <TextField label="string"
-        {...field(model.myTextField)}>
-    </TextField>
-    <PasswordField label="password"
-        {...field(model.myPasswordField)}>
-    </PasswordField>
-    <IntegerField label="integer"
-        {...field(model.myIntegerField)}
-        stepButtonsVisible>
-    </IntegerField>
-    <NumberField label="number"
-        {...field(model.myDoubleField)}
-        stepButtonsVisible>
-    </NumberField>
-    <EmailField label="email"
-        {...field(model.myEmailField)}>
-    </EmailField>
-    <TextArea label="textarea"
-        {...field(model.myTextField)}>
-    </TextArea>
+    <TextField label="string" {...field(model.myTextField)} />
+    <PasswordField label="password" {...field(model.myPasswordField)} />
+    <IntegerField label="integer" {...field(model.myIntegerField)} stepButtonsVisible />
+    <NumberField label="number" {...field(model.myDoubleField)} stepButtonsVisible />
+    <EmailField label="email" {...field(model.myEmailField)} />
+    <TextArea label="textarea" {...field(model.myTextField)} />
   </>
 );
 ----
@@ -222,12 +208,8 @@ const { model, field } = useForm(MyEntityModel);
 ...
 return (
   <>
-    <Checkbox label="checkbox"
-        {...field(model.myBooleanField)}>
-    </Checkbox>
-    <RadioButton label="radio-button"
-        {...field(model.myBooleanField)}>
-    </RadioButton>
+    <Checkbox label="checkbox" {...field(model.myBooleanField)} />
+    <RadioButton label="radio-button" {...field(model.myBooleanField)} />
   </>
 );
 ----
@@ -272,10 +254,11 @@ const { model, field } = useForm(MyEntityModel);
 const selectItems = [{label: "True", value: "true"}, {label: "False", value: "false"}];
 ...
 return (
-  <Select label="select"
-          {...field(model.myBooleanField)}
-          items={selectItems}>
-  </Select>
+  <Select
+    label="select"
+    {...field(model.myBooleanField)}
+    items={selectItems}
+  />
 );
 ----
 endif::hilla-react[]
@@ -381,24 +364,19 @@ useEffect(() => {
 ...
 return (
   <>
-    <ComboBox label="combo-box"
-        {...field(model.mySingleSelectionField)}
-        items={myOptions.value}>
-    </ComboBox>
-    <RadioGroup label="radio-group"
-                {...field(model.mySingleSelectionField)}>
+    <ComboBox
+      label="combo-box"
+      {...field(model.mySingleSelectionField)}
+      items={myOptions.value}
+    />
+    <RadioGroup label="radio-group" {...field(model.mySingleSelectionField)}>
       {myOptions.value.map(option => (
-         <RadioButton value={option}
-                      label={option}>
-         </RadioButton>
+        <RadioButton value={option} label={option} />
       ))}
     </RadioGroup>
-    <ListBox label="list-box"
-             {...field(model.mySingleSelectionField)}>
+    <ListBox label="list-box" {...field(model.mySingleSelectionField)}>
       {myOptions.value.map(option => (
-         <Item value={option}
-               label={option}>
-         </Item>
+        <Item value={option} label={option} />
       ))}
     </ListBox>
   </>
@@ -471,13 +449,10 @@ useEffect(() => {
 }, []);
 ...
 return (
-  <Select label="select"
-          {...field(model.mySelectField)}>
-     {myOptions.value.map(option => (
-        <Item value={option}
-              label={option}>
-        </Item>
-     ))}
+  <Select label="select" {...field(model.mySelectField)}>
+    {myOptions.value.map((option) => (
+      <Item value={option} label={option} />
+    ))}
   </Select>
 );
 ----
@@ -531,17 +506,12 @@ useEffect(() => {
 ...
 return (
   <>
-    <CheckboxGroup label="check-group"
-                   {...field(model.myListField)}>
-      {myOptions.value.map(option => (
-           <Checkbox value={option}
-                 label={option}>
-           </Checkbox>
-        ))}
+    <CheckboxGroup label="check-group" {...field(model.myListField)}>
+      {myOptions.value.map((option) => (
+        <Checkbox value={option} label={option} />
+      ))}
     </CheckboxGroup>
-    <MultiSelectComboBox label=""
-                         items={myOptions.value}>
-    </MultiSelectComboBox>
+    <MultiSelectComboBox label="multi-select" items={myOptions.value} />
   </>
 );
 ----
@@ -588,15 +558,9 @@ import {DateTimePicker} from "@vaadin/react-components/DateTimePicker.js";
 ...
 return (
   <>
-    <DatePicker label="date"
-                {...field(model.mySelectField)}>
-    </DatePicker>
-    <TimePicker label="time"
-                {...field(model.mySelectField)}>
-    </TimePicker>
-    <DateTimePicker label="date-time"
-                    {...field(model.mySelectField)}>
-    </DateTimePicker>
+    <DatePicker label="date" {...field(model.myDateField)} />
+    <TimePicker label="time" {...field(model.myTimeField)} />
+    <DateTimePicker label="date-time" {...field(model.myDateTimeField)} />
   </>
 );
 ----
@@ -644,8 +608,7 @@ import {TextField} from "@vaadin/react-components/TextField.js";
 ...
 return (
   <CustomField {...field(model.myTextField)}>
-    <TextField label="custom-field">
-    </TextField>
+    <TextField label="custom-field" />
   </CustomField>
 );
 ----

diff --git a/articles/hilla/lit/start/basics/index.adoc b/articles/hilla/lit/start/basics/index.adoc
@@ -733,7 +733,7 @@ export default function TodoView() {
         <TextField
           label="Task"
           {...field(model.task)}
-        ></TextField>
+        />
         <Button
           theme="primary"
           disabled={invalid}