Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form.Label - column="sm" or column="lg" generate an error with TypeScript in VSCode #5056

Closed
sylmarch opened this issue Mar 20, 2020 · 1 comment · Fixed by #5063
Closed

Comments

@sylmarch
Copy link

Describe the bug

Attributes column="sm" and column="lg" on <Form.Label> generates the following error in VSCode when using TypeScript:

TypeScript error in /home/sylmarch/workspace/my-project/src/components/MyComponent.tsx(55,53):
No overload matches this call.
Overload 1 of 2, '(props: Readonly<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "ref" | ... 255 more ... | "is"> & BsPrefixProps<...> & FormLabelWithColProps> | Readonly<...>): FormLabel', gave the following error.
Type 'string' is not assignable to type 'boolean | undefined'.
Overload 2 of 2, '(props: ReplaceProps<"label", (BsPrefixProps<"label"> & FormLabelWithColProps) | (BsPrefixProps<"label"> & FormLabelOwnProps)>, context?: any): FormLabel', gave the following error.
Type 'string' is not assignable to type 'boolean | undefined'. TS2769

53 |                                 <Form.Group>
54 |                                     <Form.Row>

55 | <Form.Label column="lg" lg={2}>
| ^
56 | Large Text
57 | </Form.Label>
58 |

To Reproduce

Copy the sample code from the documentation (https://react-bootstrap.netlify.com/components/forms/#horizontal-forms-label-sizing) :

<Form.Group>
  <Form.Row>
    <Form.Label column="lg" lg={2}>
      Large Text
    </Form.Label>
    <Col>
      <Form.Control size="lg" type="text" placeholder="Large text" />
    </Col>
  </Form.Row>
  <br />
  <Form.Row>
    <Form.Label column lg={2}>
      Normal Text
    </Form.Label>
    <Col>
      <Form.Control type="text" placeholder="Normal text" />
    </Col>
  </Form.Row>
  <br />
  <Form.Row>
    <Form.Label column="sm" lg={2}>
      Small Text
    </Form.Label>
    <Col>
      <Form.Control size="sm" type="text" placeholder="Small text" />
    </Col>
  </Form.Row>
</Form.Group>

Expected behavior

column value can also be a string (lg or sm).

Environment (please complete the following information)

  • React-Bootstrap Version : 1.0.0-beta.]17
  • VSCode Version: 1.42.0
  • TypeScript Version: 3.7.5
@taion
Copy link
Member

taion commented Mar 20, 2020

ah, we didn't update FormLabel.d.ts; care to send in a PR?

jquense pushed a commit that referenced this issue Mar 24, 2020
* #5056 fix types for FormLabel

Fixes #5056 and adds 'sm' and 'lg' as types for FormLabel column

* Update simple.test.tsx

Updated with test for types on Form.Label column

Co-authored-by: Tor Raswill <tor.raswill@dqc.se>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants