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

Allow label position config in CheckboxGroupInput #8260

Merged
merged 1 commit into from
Oct 20, 2022

Conversation

zhujinxuan
Copy link
Contributor

@zhujinxuan zhujinxuan commented Oct 12, 2022

Add labelPlacement props so that the CheckboxGroupInput can have labels on the top of checkboxes. It is useful when there is limited width for a checkbox group. For example, a weekday checkbox group squeezes in xs={4}.

I will continue on this PR for RadioGroupInput if you think this change is desirable. I find labelPlacement in RadioGroupInput looks weird. I will keep this PR only for CheckboxGroupInput.

@WiXSL
Copy link
Contributor

WiXSL commented Oct 14, 2022

It seems ok since we don't pass props to the FormControlLabel of the component.
Please, add labelPlacement in the table props of the component in the docs as well

@WiXSL
Copy link
Contributor

WiXSL commented Oct 19, 2022

Could you add screenshots of how it will look like?

@zhujinxuan
Copy link
Contributor Author

Screen Shot 2022-10-19 at 1 34 38 PM

It is an example based on example/simples/src/posts/PostEdit.tsx

                    <CheckboxGroupInput
                        source="notifications"
                        fullWidth
                        choices={[
                            { id: 12, name: 'Ray Hakt' },
                            { id: 31, name: 'Ann Gullar' },
                            { id: 42, name: 'Sean Phonee' },
                        ]}
                    />

                    <CheckboxGroupInput
                        label="Weekdays"
                        source="notifications"
                        choices={[
                            'Mon',
                            'Tue',
                            'Wed',
                            'Thu',
                            'Fri',
                            'Sat',
                            'Sun',
                        ].map(id => ({ id, name: id }))}
                        labelPlacement="top"
                    />

@WiXSL WiXSL added the RFR Ready For Review label Oct 19, 2022
Copy link
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@slax57 slax57 added this to the 4.4.4 milestone Oct 20, 2022
@slax57 slax57 merged commit 1eaacc3 into marmelab:master Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants