Switch ClubMembers example to Bootstrap 5

Author: tkrotoff

examples/ClubMembers/App.tsx

@@ -131,8 +131,8 @@ const Hobbies = observer<React.FunctionComponent<HobbiesProps>>(
       const hobbyName = `member${memberIndex}.hobby${index}`;
 
       return (
-        <li key={index} className="form-group">
-          <div className="form-inline">
+        <li key={index} className="mb-3">
+          <div className="d-flex align-items-center">
             <Input
               name={hobbyName}
               id={hobbyName}
@@ -142,16 +142,15 @@ const Hobbies = observer<React.FunctionComponent<HobbiesProps>>(
               required
               minLength={3}
               className="form-control"
-              style={{ width: 'auto' }}
             />
+            &nbsp;
             <button
               type="button"
               title="Remove Hobby"
               onClick={() => removeHobby(index)}
-              className="close"
-            >
-              &times;
-            </button>
+              className="btn-close"
+              aria-label="Close"
+            />
           </div>
           <FieldFeedbacks for={hobbyName}>
             <FieldFeedback when="*" />
@@ -164,7 +163,7 @@ const Hobbies = observer<React.FunctionComponent<HobbiesProps>>(
 
     return (
       <>
-        <div className="form-group">
+        <div className="mb-3">
           <button
             type="button"
             name={checkNbHobbiesName}
@@ -179,7 +178,7 @@ const Hobbies = observer<React.FunctionComponent<HobbiesProps>>(
             </FieldFeedback>
           </FieldFeedbacks>
         </div>
-        <ul className="list-none">
+        <ul className="list-style-none">
           {member.hobbies.map((hobby, index) => renderHobby(hobby, index))}
         </ul>
       </>
@@ -224,17 +223,17 @@ const Members = observer<React.FunctionComponent<MembersProps>>(({ club, validat
       <li key={index}>
         <h4>
           Member #{index + 1}
+          &nbsp;
           <button
             type="button"
             title="Remove Member"
             onClick={() => removeMember(index)}
-            className="close"
-          >
-            &times;
-          </button>
+            className="btn-close fs-6"
+            aria-label="Close"
+          />
         </h4>
 
-        <div className="form-group">
+        <div className="mb-3">
           <Input
             name={memberFirstNameName}
             placeholder="First Name"
@@ -249,7 +248,7 @@ const Members = observer<React.FunctionComponent<MembersProps>>(({ club, validat
           </FieldFeedbacks>
         </div>
 
-        <div className="form-group">
+        <div className="mb-3">
           <Input
             name={memberLastNameName}
             placeholder="Last Name"
@@ -271,7 +270,7 @@ const Members = observer<React.FunctionComponent<MembersProps>>(({ club, validat
 
   return (
     <>
-      <div className="form-group">
+      <div className="mb-3">
         <button
           type="button"
           name="checkNbMembers"
@@ -286,7 +285,7 @@ const Members = observer<React.FunctionComponent<MembersProps>>(({ club, validat
           </FieldFeedback>
         </FieldFeedbacks>
       </div>
-      <ul className="list-none">
+      <ul className="list-style-none">
         {club.members.map((member, index) => renderMember(member, index))}
       </ul>
     </>
@@ -341,7 +340,7 @@ class Form extends React.Component<FormProps> {
         onSubmit={this.handleSubmit}
         noValidate
       >
-        <div className="form-group">
+        <div className="mb-3">
           <Input
             name="clubName"
             placeholder="Club Name"

examples/ClubMembers/index.html

@@ -8,7 +8,7 @@
 
     <link
       rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.css"
     />
   </head>
 

examples/ClubMembers/style.css

@@ -1,33 +1,27 @@
-/* https://github.com/twbs/bootstrap/blob/v4.1.2/scss/_close.scss */
-button.close {
-  float: initial;
-  padding-left: 0.5rem;
-}
-
-ul.list-none {
+.list-style-none {
   list-style-type: none;
 }
 
 /*
- * https://github.com/twbs/bootstrap/blob/v4.1.2/scss/mixins/_forms.scss#L30
+ * https://github.com/twbs/bootstrap/blob/v5.0.1/scss/mixins/_forms.scss#L26
  */
 [data-feedback].error {
   margin-top: 0.25rem; /* $form-feedback-margin-top => $form-text-margin-top => .25rem */
-  font-size: 80%; /* $form-feedback-font-size => $small-font-size => 80% */
+  font-size: 0.875em; /* $form-feedback-font-size => $form-text-font-size => $small-font-size => .875em */
   color: #dc3545; /* $form-feedback-invalid-color => $danger => $red => #dc3545 */
 }
 [data-feedback].warning {
   margin-top: 0.25rem;
-  font-size: 80%;
+  font-size: 0.875em;
   color: #ffc107; /* $warning => $yellow => #ffc107 */
 }
 [data-feedback].info {
   margin-top: 0.25rem;
-  font-size: 80%;
-  color: #17a2b8; /* $info => $cyan => #17a2b8 */
+  font-size: 0.875em;
+  color: #0dcaf0; /* $info => $cyan => #0dcaf0 */
 }
 [data-feedback].when-valid {
   margin-top: 0.25rem;
-  font-size: 80%;
-  color: #28a745; /* $form-feedback-valid-color => $success => $green => #28a745 */
+  font-size: 0.875em;
+  color: #198754; /* $form-feedback-valid-color => $success => $green => #198754 */
 }