-
Notifications
You must be signed in to change notification settings - Fork 3.6k
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.Check>
and <Form.Check.Label>
should add form-check
and form-label
class automatically.
#5938
Comments
I was about to open a similar issue. react-bootstrap/src/FormCheck.tsx Line 173 in 47df950
Sometimes it makes sense to not provide a |
So the issue here is that in the custom rendering scenario, the container is missing the |
As a simple example: <Form.Check /> Will produce: <div class="">
<input type="checkbox" class="form-check-input">
</div> Which doesn't include the On the other hand, simply adding a <Form.Check label="test label" /> Will produce: <div class="form-check">
<input type="checkbox" class="form-check-input">
<label title="" class="form-check-label">test label</label>
</div> I think that the class Reproducible also on 2.0.0-beta-4: https://codesandbox.io/s/zen-silence-7uxg1?file=/src/App.js |
(Re-reading it, I might have misunderstood the original issue. I can create a separate one if you'd like.) |
@giovannipiller checkboxes without labels don't need the wrapping element with |
@kyletsang thanks! |
Currently, when using a `Form.Check.Label` component to customize `Form.Check` rendering, there will be no space between the checkbox and the label. This is because `Form.Check` is currently relying on the presence of a `label` prop to apply the `form-check` class name to the wrapping `<div>`, because checkboxes without labels [don't need the wrapping element to have the `form-check` class name][1]. This commit adds a utility to check whether an element has a child of a certain type. It then uses that utility to check if a `Form.Check` element has a `Form.Check.Label` child and takes that into account when determining whether the checkbox has a label. Adding a special property (currently called `typeName`, but that can certainly change) to components for this utility is necessary because React minifies the `displayName` property in production. [1]: react-bootstrap#5938 (comment)
v2 is now stable but in this official example spacing is not correct, It needs form-check class |
Currently, when using a `Form.Check.Label` component to customize `Form.Check` rendering, there will be no space between the checkbox and the label. This is because `Form.Check` is currently relying on the presence of a `label` prop to apply the `form-check` class name to the wrapping `<div>`, because checkboxes without labels [don't need the wrapping element to have the `form-check` class name][1]. This commit adds a utility to check whether an element has a child of a certain type. It then uses that utility to check if a `Form.Check` element has a `Form.Check.Label` child and takes that into account when determining whether the checkbox has a label. Adding a special property (currently called `typeName`, but that can certainly change) to components for this utility is necessary because React minifies the `displayName` property in production. [1]: react-bootstrap#5938 (comment)
@aksdevac I'm trying to get this fixed in #5983. 🤞🏼 |
* Fix `Form.Check.Label` spacing Currently, when using a `Form.Check.Label` component to customize `Form.Check` rendering, there will be no space between the checkbox and the label. This is because `Form.Check` is currently relying on the presence of a `label` prop to apply the `form-check` class name to the wrapping `<div>`, because checkboxes without labels [don't need the wrapping element to have the `form-check` class name][1]. This commit adds a utility to check whether an element has a child of a certain type. It then uses that utility to check if a `Form.Check` element has a `Form.Check.Label` child and takes that into account when determining whether the checkbox has a label. Adding a special property (currently called `typeName`, but that can certainly change) to components for this utility is necessary because React minifies the `displayName` property in production. [1]: #5938 (comment) * Add error handling to `includesType` * Support mixing auto and custom child components Currently, `Form.Check` doesn't allow users to use a custom `Form.Check.Input` with a label generated by the `label` prop (and requires that a custom `Form.Check.Input` be used if a custom `Form.Check.Label` is also used) because the presence of _any_ children in `Form.Check` prevents automatic inputs and labels (and feedback) from generating. This approach allows mixing and matching by extracting any custom input, label, and feedback components from `Form.Check`'s `children` prop, then separately for each, using the custom component if provided or an automatic component otherwise. * Simply check `child.type` The `type` property of React elements have reference equality with matching imported component variables (`JSXElementConstructor` objects, to be precise)! For some reason I was not expecting that, but it makes sense to me now, since these constructor objects are being imported from a singular source, so there's no reason React would create multiple instances of them. So `child.type === type` all we need to check in `getChildOfType`; the `typeName` prop I added earlier is not at all needed. * Add scripts for testing production build of docs Just as a convenience. I can revert this commit if these scripts aren't desired. * Just check immediate children for `FormCheckLabel` * Use correct variable * Revert empty `.husky/pre-commit` change No idea how that got into 0754b49. * Revert "Add scripts for testing production build of docs" This reverts commit 5343b0a.
<Form.Check>
and<Form.Check.Label>
should addform-check
andform-label
class automatically.https://react-bootstrap-v5.netlify.app/components/forms/#forms-check-api
The text was updated successfully, but these errors were encountered: