Skip to content

Commit fe2d7e3

Browse files
JackDangerJackDanger
committed
ControlLabel -> FormLabel
react-bootstrap renamed ControlLabel recently
1 parent 5bbed88 commit fe2d7e3

16 files changed

+51
-51
lines changed

‎_chapters/add-the-create-note-page.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ First we are going to create the form for a note. It'll take some content and a
1818

1919
``` coffee
2020
import React, { useRef, useState } from "react";
21-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
21+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
2222
import LoaderButton from "../components/LoaderButton";
2323
import config from "../config";
2424
import "./NewNote.css";
@@ -61,7 +61,7 @@ export default function NewNote(props) {
6161
/>
6262
</FormGroup>
6363
<FormGroup controlId="file">
64-
<ControlLabel>Attachment</ControlLabel>
64+
<FormLabel>Attachment</FormLabel>
6565
<FormControl onChange={handleFileChange} type="file" />
6666
</FormGroup>
6767
<LoaderButton

‎_chapters/allow-users-to-change-passwords.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ Now let's create the form that allows our users to change their password.
137137
``` coffee
138138
import React, { Component } from "react";
139139
import { Auth } from "aws-amplify";
140-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
140+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
141141
import LoaderButton from "../components/LoaderButton";
142142
import "./ChangePassword.css";
143143

@@ -192,7 +192,7 @@ export default class ChangePassword extends Component {
192192
<div className="ChangePassword">
193193
<form onSubmit={this.handleChangeClick}>
194194
<FormGroup bsSize="large" controlId="oldPassword">
195-
<ControlLabel>Old Password</ControlLabel>
195+
<FormLabel>Old Password</FormLabel>
196196
<FormControl
197197
type="password"
198198
onChange={this.handleChange}
@@ -201,15 +201,15 @@ export default class ChangePassword extends Component {
201201
</FormGroup>
202202
<hr />
203203
<FormGroup bsSize="large" controlId="password">
204-
<ControlLabel>New Password</ControlLabel>
204+
<FormLabel>New Password</FormLabel>
205205
<FormControl
206206
type="password"
207207
value={this.state.password}
208208
onChange={this.handleChange}
209209
/>
210210
</FormGroup>
211211
<FormGroup bsSize="large" controlId="confirmPassword">
212-
<ControlLabel>Confirm Password</ControlLabel>
212+
<FormLabel>Confirm Password</FormLabel>
213213
<FormControl
214214
type="password"
215215
onChange={this.handleChange}

‎_chapters/allow-users-to-change-their-email.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
HelpBlock,
2828
FormGroup,
2929
FormControl,
30-
ControlLabel
30+
FormLabel
3131
} from "react-bootstrap";
3232
import LoaderButton from "../components/LoaderButton";
3333
import "./ChangeEmail.css";
@@ -94,7 +94,7 @@ export default class ChangeEmail extends Component {
9494
return (
9595
<form onSubmit={this.handleUpdateClick}>
9696
<FormGroup bsSize="large" controlId="email">
97-
<ControlLabel>Email</ControlLabel>
97+
<FormLabel>Email</FormLabel>
9898
<FormControl
9999
autoFocus
100100
type="email"
@@ -119,7 +119,7 @@ export default class ChangeEmail extends Component {
119119
return (
120120
<form onSubmit={this.handleConfirmClick}>
121121
<FormGroup bsSize="large" controlId="code">
122-
<ControlLabel>Confirmation Code</ControlLabel>
122+
<FormLabel>Confirmation Code</FormLabel>
123123
<FormControl
124124
autoFocus
125125
type="tel"

‎_chapters/create-a-billing-form.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Next let's create our billing form component.
2323
{% raw %}
2424
``` coffee
2525
import React, { useState } from "react";
26-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
26+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
2727
import { CardElement, injectStripe } from "react-stripe-elements";
2828
import LoaderButton from "./LoaderButton";
2929
import { useFormFields } from "../libs/hooksLib";
@@ -62,7 +62,7 @@ function BillingForm({ isLoading, onSubmit, ...props }) {
6262
return (
6363
<form className="BillingForm" onSubmit={handleSubmitClick}>
6464
<FormGroup bsSize="large" controlId="storage">
65-
<ControlLabel>Storage</ControlLabel>
65+
<FormLabel>Storage</FormLabel>
6666
<FormControl
6767
min="0"
6868
type="number"
@@ -73,15 +73,15 @@ function BillingForm({ isLoading, onSubmit, ...props }) {
7373
</FormGroup>
7474
<hr />
7575
<FormGroup bsSize="large" controlId="name">
76-
<ControlLabel>Cardholder&apos;s name</ControlLabel>
76+
<FormLabel>Cardholder&apos;s name</FormLabel>
7777
<FormControl
7878
type="text"
7979
value={fields.name}
8080
onChange={handleFieldChange}
8181
placeholder="Name on the card"
8282
/>
8383
</FormGroup>
84-
<ControlLabel>Credit Card Info</ControlLabel>
84+
<FormLabel>Credit Card Info</FormLabel>
8585
<CardElement
8686
className="card-field"
8787
onChange={e => setIsCardComplete(e.complete)}

‎_chapters/create-a-custom-react-hook-to-handle-form-fields.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ And that's it! We can now use this in our Login component.
7070
``` coffee
7171
import React, { useState } from "react";
7272
import { Auth } from "aws-amplify";
73-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
73+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
7474
import LoaderButton from "../components/LoaderButton";
7575
import { useFormFields } from "../libs/hooksLib";
7676
import "./Login.css";
@@ -105,7 +105,7 @@ export default function Login(props) {
105105
<div className="Login">
106106
<form onSubmit={handleSubmit}>
107107
<FormGroup controlId="email" bsSize="large">
108-
<ControlLabel>Email</ControlLabel>
108+
<FormLabel>Email</FormLabel>
109109
<FormControl
110110
autoFocus
111111
type="email"
@@ -114,7 +114,7 @@ export default function Login(props) {
114114
/>
115115
</FormGroup>
116116
<FormGroup controlId="password" bsSize="large">
117-
<ControlLabel>Password</ControlLabel>
117+
<FormLabel>Password</FormLabel>
118118
<FormControl
119119
type="password"
120120
value={fields.password}

‎_chapters/create-a-login-page.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ So let's start by creating the basic form that'll take the user's email (as thei
1818

1919
``` coffee
2020
import React, { useState } from "react";
21-
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
21+
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
2222
import "./Login.css";
2323

2424
export default function Login(props) {
@@ -37,7 +37,7 @@ export default function Login(props) {
3737
<div className="Login">
3838
<form onSubmit={handleSubmit}>
3939
<FormGroup controlId="email" bsSize="large">
40-
<ControlLabel>Email</ControlLabel>
40+
<FormLabel>Email</FormLabel>
4141
<FormControl
4242
autoFocus
4343
type="email"
@@ -46,7 +46,7 @@ export default function Login(props) {
4646
/>
4747
</FormGroup>
4848
<FormGroup controlId="password" bsSize="large">
49-
<ControlLabel>Password</ControlLabel>
49+
<FormLabel>Password</FormLabel>
5050
<FormControl
5151
value={password}
5252
onChange={e => setPassword(e.target.value)}

‎_chapters/create-the-signup-form.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
HelpBlock,
2121
FormGroup,
2222
FormControl,
23-
ControlLabel
23+
FormLabel
2424
} from "react-bootstrap";
2525
import LoaderButton from "../components/LoaderButton";
2626
import { useFormFields } from "../libs/hooksLib";
@@ -68,7 +68,7 @@ export default function Signup(props) {
6868
return (
6969
<form onSubmit={handleConfirmationSubmit}>
7070
<FormGroup controlId="confirmationCode" bsSize="large">
71-
<ControlLabel>Confirmation Code</ControlLabel>
71+
<FormLabel>Confirmation Code</FormLabel>
7272
<FormControl
7373
autoFocus
7474
type="tel"
@@ -94,7 +94,7 @@ export default function Signup(props) {
9494
return (
9595
<form onSubmit={handleSubmit}>
9696
<FormGroup controlId="email" bsSize="large">
97-
<ControlLabel>Email</ControlLabel>
97+
<FormLabel>Email</FormLabel>
9898
<FormControl
9999
autoFocus
100100
type="email"
@@ -103,15 +103,15 @@ export default function Signup(props) {
103103
/>
104104
</FormGroup>
105105
<FormGroup controlId="password" bsSize="large">
106-
<ControlLabel>Password</ControlLabel>
106+
<FormLabel>Password</FormLabel>
107107
<FormControl
108108
type="password"
109109
value={fields.password}
110110
onChange={handleFieldChange}
111111
/>
112112
</FormGroup>
113113
<FormGroup controlId="confirmPassword" bsSize="large">
114-
<ControlLabel>Confirm Password</ControlLabel>
114+
<FormLabel>Confirm Password</FormLabel>
115115
<FormControl
116116
type="password"
117117
onChange={handleFieldChange}

‎_chapters/give-feedback-while-logging-in.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ Now we can use our new component in our `Login` container.
116116
<img class="code-marker" src="/assets/s.png" />Also, import the `LoaderButton` in the header. And remove the reference to the `Button` component.
117117

118118
``` javascript
119-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
119+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
120120
import LoaderButton from "../components/LoaderButton";
121121
```
122122

‎_chapters/handle-forgot-and-reset-password.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
FormGroup,
3030
Glyphicon,
3131
FormControl,
32-
ControlLabel
32+
FormLabel
3333
} from "react-bootstrap";
3434
import LoaderButton from "../components/LoaderButton";
3535
import "./ResetPassword.css";
@@ -104,7 +104,7 @@ export default class ResetPassword extends Component {
104104
return (
105105
<form onSubmit={this.handleSendCodeClick}>
106106
<FormGroup bsSize="large" controlId="email">
107-
<ControlLabel>Email</ControlLabel>
107+
<FormLabel>Email</FormLabel>
108108
<FormControl
109109
autoFocus
110110
type="email"
@@ -129,7 +129,7 @@ export default class ResetPassword extends Component {
129129
return (
130130
<form onSubmit={this.handleConfirmClick}>
131131
<FormGroup bsSize="large" controlId="code">
132-
<ControlLabel>Confirmation Code</ControlLabel>
132+
<FormLabel>Confirmation Code</FormLabel>
133133
<FormControl
134134
autoFocus
135135
type="tel"
@@ -143,15 +143,15 @@ export default class ResetPassword extends Component {
143143
</FormGroup>
144144
<hr />
145145
<FormGroup bsSize="large" controlId="password">
146-
<ControlLabel>New Password</ControlLabel>
146+
<FormLabel>New Password</FormLabel>
147147
<FormControl
148148
type="password"
149149
value={this.state.password}
150150
onChange={this.handleChange}
151151
/>
152152
</FormGroup>
153153
<FormGroup bsSize="large" controlId="confirmPassword">
154-
<ControlLabel>Confirm Password</ControlLabel>
154+
<FormLabel>Confirm Password</FormLabel>
155155
<FormControl
156156
type="password"
157157
onChange={this.handleChange}

‎_chapters/ko/add-the-create-note-page.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ comments_id: add-the-create-note-page/107
1919

2020
``` coffee
2121
import React, { Component } from "react";
22-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
22+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
2323
import LoaderButton from "../components/LoaderButton";
2424
import config from "../config";
2525
import "./NewNote.css";
@@ -73,7 +73,7 @@ export default class NewNote extends Component {
7373
/>
7474
</FormGroup>
7575
<FormGroup controlId="file">
76-
<ControlLabel>Attachment</ControlLabel>
76+
<FormLabel>Attachment</FormLabel>
7777
<FormControl onChange={this.handleFileChange} type="file" />
7878
</FormGroup>
7979
<LoaderButton

‎_chapters/ko/create-a-billing-form.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $ npm install --save react-stripe-elements
2424
{% raw %}
2525
``` coffee
2626
import React, { Component } from "react";
27-
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
27+
import { FormGroup, FormControl, FormLabel } from "react-bootstrap";
2828
import { CardElement, injectStripe } from "react-stripe-elements";
2929
import LoaderButton from "./LoaderButton";
3030
import "./BillingForm.css";
@@ -81,7 +81,7 @@ class BillingForm extends Component {
8181
return (
8282
<form className="BillingForm" onSubmit={this.handleSubmitClick}>
8383
<FormGroup bsSize="large" controlId="storage">
84-
<ControlLabel>Storage</ControlLabel>
84+
<FormLabel>Storage</FormLabel>
8585
<FormControl
8686
min="0"
8787
type="number"
@@ -92,15 +92,15 @@ class BillingForm extends Component {
9292
</FormGroup>
9393
<hr />
9494
<FormGroup bsSize="large" controlId="name">
95-
<ControlLabel>Cardholder&apos;s name</ControlLabel>
95+
<FormLabel>Cardholder&apos;s name</FormLabel>
9696
<FormControl
9797
type="text"
9898
value={this.state.name}
9999
onChange={this.handleFieldChange}
100100
placeholder="Name on the card"
101101
/>
102102
</FormGroup>
103-
<ControlLabel>Credit Card Info</ControlLabel>
103+
<FormLabel>Credit Card Info</FormLabel>
104104
<CardElement
105105
className="card-field"
106106
onChange={this.handleCardFieldChange}

‎_chapters/ko/create-a-login-page.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ comments_id: create-a-login-page/71
1818

1919
``` coffee
2020
import React, { Component } from "react";
21-
import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";
21+
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";
2222
import "./Login.css";
2323

2424
export default class Login extends Component {
@@ -50,7 +50,7 @@ export default class Login extends Component {
5050
<div className="Login">
5151
<form onSubmit={this.handleSubmit}>
5252
<FormGroup controlId="email" bsSize="large">
53-
<ControlLabel>Email</ControlLabel>
53+
<FormLabel>Email</FormLabel>
5454
<FormControl
5555
autoFocus
5656
type="email"
@@ -59,7 +59,7 @@ export default class Login extends Component {
5959
/>
6060
</FormGroup>
6161
<FormGroup controlId="password" bsSize="large">
62-
<ControlLabel>Password</ControlLabel>
62+
<FormLabel>Password</FormLabel>
6363
<FormControl
6464
value={this.state.password}
6565
onChange={this.handleChange}

‎_chapters/ko/create-the-signup-form.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
HelpBlock,
2222
FormGroup,
2323
FormControl,
24-
ControlLabel
24+
FormLabel
2525
} from "react-bootstrap";
2626
import LoaderButton from "../components/LoaderButton";
2727
import "./Signup.css";
@@ -78,7 +78,7 @@ export default class Signup extends Component {
7878
return (
7979
<form onSubmit={this.handleConfirmationSubmit}>
8080
<FormGroup controlId="confirmationCode" bsSize="large">
81-
<ControlLabel>Confirmation Code</ControlLabel>
81+
<FormLabel>Confirmation Code</FormLabel>
8282
<FormControl
8383
autoFocus
8484
type="tel"
@@ -104,7 +104,7 @@ export default class Signup extends Component {
104104
return (
105105
<form onSubmit={this.handleSubmit}>
106106
<FormGroup controlId="email" bsSize="large">
107-
<ControlLabel>Email</ControlLabel>
107+
<FormLabel>Email</FormLabel>
108108
<FormControl
109109
autoFocus
110110
type="email"
@@ -113,15 +113,15 @@ export default class Signup extends Component {
113113
/>
114114
</FormGroup>
115115
<FormGroup controlId="password" bsSize="large">
116-
<ControlLabel>Password</ControlLabel>
116+
<FormLabel>Password</FormLabel>
117117
<FormControl
118118
value={this.state.password}
119119
onChange={this.handleChange}
120120
type="password"
121121
/>
122122
</FormGroup>
123123
<FormGroup controlId="confirmPassword" bsSize="large">
124-
<ControlLabel>Confirm Password</ControlLabel>
124+
<FormLabel>Confirm Password</FormLabel>
125125
<FormControl
126126
value={this.state.confirmPassword}
127127
onChange={this.handleChange}

0 commit comments

Comments
 (0)