Skip to content

Commit cd3638f

Browse files
Suyog241005Suyog241005
authored
fixed hidden title for checkboxes (#4841)
* fixed hidden title for checkboxes * added-hide-label-condition * test: add comprehensive tests for CheckboxesWidget * test: add comprehensive tests for CheckboxesWidget
1 parent e7d2765 commit cd3638f

File tree

15 files changed

+9239
-3042
lines changed

15 files changed

+9239
-3042
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ should change the heading of the (upcoming) version to include a major version b
2424

2525
## @rjsf/chakra-ui
2626

27+
- Modified `CheckboxesWidget` to render the Title, fixing ([#4840](https://github.com/rjsf-team/react-jsonschema-form/issues/4840))
2728
- Updated `CheckboxWidget` to handle label and description rendering consistently, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
2829

2930
## @rjsf/core

‎packages/antd/test/__snapshots__/Form.test.tsx.snap‎

Lines changed: 365 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7067,6 +7067,371 @@ exports[`single fields checkboxes field 1`] = `
70677067
</form>
70687068
`;
70697069

7070+
exports[`single fields checkboxes widget with custom options and labels 1`] = `
7071+
<form
7072+
className="rjsf"
7073+
noValidate={false}
7074+
onSubmit={[Function]}
7075+
>
7076+
<div
7077+
className="rjsf-field rjsf-field-array"
7078+
>
7079+
<div
7080+
className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-with-help ant-form-item-horizontal"
7081+
>
7082+
<div
7083+
className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
7084+
style={
7085+
{
7086+
"rowGap": undefined,
7087+
}
7088+
}
7089+
>
7090+
<div
7091+
className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
7092+
style={{}}
7093+
>
7094+
<label
7095+
className=""
7096+
htmlFor="root"
7097+
title="Checkbox Group"
7098+
>
7099+
Checkbox Group
7100+
</label>
7101+
</div>
7102+
<div
7103+
className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
7104+
style={{}}
7105+
>
7106+
<div
7107+
className="ant-form-item-control-input"
7108+
>
7109+
<div
7110+
className="ant-form-item-control-input-content"
7111+
>
7112+
<div
7113+
aria-describedby="root__error root__description root__help"
7114+
className="ant-checkbox-group css-dev-only-do-not-override-ac2jek"
7115+
id="root"
7116+
name="root"
7117+
onBlur={[Function]}
7118+
onFocus={[Function]}
7119+
>
7120+
<span>
7121+
<label
7122+
className="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7123+
onClick={[Function]}
7124+
style={{}}
7125+
>
7126+
<span
7127+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek ant-checkbox-checked"
7128+
>
7129+
<input
7130+
autoFocus={false}
7131+
checked={true}
7132+
className="ant-checkbox-input"
7133+
disabled={false}
7134+
id="root-0"
7135+
name="root"
7136+
onChange={[Function]}
7137+
onClick={[Function]}
7138+
type="checkbox"
7139+
value="0"
7140+
/>
7141+
<span
7142+
className="ant-checkbox-inner"
7143+
/>
7144+
</span>
7145+
<span
7146+
className="ant-checkbox-label"
7147+
>
7148+
option1
7149+
</span>
7150+
</label>
7151+
</span>
7152+
<span>
7153+
<label
7154+
className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7155+
onClick={[Function]}
7156+
style={{}}
7157+
>
7158+
<span
7159+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek"
7160+
>
7161+
<input
7162+
autoFocus={false}
7163+
checked={false}
7164+
className="ant-checkbox-input"
7165+
disabled={false}
7166+
id="root-1"
7167+
name="root"
7168+
onChange={[Function]}
7169+
onClick={[Function]}
7170+
type="checkbox"
7171+
value="1"
7172+
/>
7173+
<span
7174+
className="ant-checkbox-inner"
7175+
/>
7176+
</span>
7177+
<span
7178+
className="ant-checkbox-label"
7179+
>
7180+
option2
7181+
</span>
7182+
</label>
7183+
</span>
7184+
<span>
7185+
<label
7186+
className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7187+
onClick={[Function]}
7188+
style={{}}
7189+
>
7190+
<span
7191+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek"
7192+
>
7193+
<input
7194+
autoFocus={false}
7195+
checked={false}
7196+
className="ant-checkbox-input"
7197+
disabled={false}
7198+
id="root-2"
7199+
name="root"
7200+
onChange={[Function]}
7201+
onClick={[Function]}
7202+
type="checkbox"
7203+
value="2"
7204+
/>
7205+
<span
7206+
className="ant-checkbox-inner"
7207+
/>
7208+
</span>
7209+
<span
7210+
className="ant-checkbox-label"
7211+
>
7212+
option3
7213+
</span>
7214+
</label>
7215+
</span>
7216+
</div>
7217+
</div>
7218+
</div>
7219+
<div
7220+
className="ant-form-item-additional"
7221+
style={{}}
7222+
>
7223+
<div
7224+
className="ant-form-item-extra"
7225+
>
7226+
<span
7227+
id="root__description"
7228+
>
7229+
A group of checkboxes
7230+
</span>
7231+
</div>
7232+
</div>
7233+
</div>
7234+
</div>
7235+
</div>
7236+
</div>
7237+
<button
7238+
className="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
7239+
disabled={false}
7240+
onClick={[Function]}
7241+
style={{}}
7242+
type="submit"
7243+
>
7244+
<span>
7245+
Submit
7246+
</span>
7247+
</button>
7248+
</form>
7249+
`;
7250+
7251+
exports[`single fields checkboxes widget with required field 1`] = `
7252+
<form
7253+
className="rjsf"
7254+
noValidate={false}
7255+
onSubmit={[Function]}
7256+
>
7257+
<div
7258+
className="rjsf-field rjsf-field-array"
7259+
>
7260+
<div
7261+
className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
7262+
>
7263+
<div
7264+
className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
7265+
style={
7266+
{
7267+
"rowGap": undefined,
7268+
}
7269+
}
7270+
>
7271+
<div
7272+
className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
7273+
style={{}}
7274+
>
7275+
<label
7276+
className=""
7277+
htmlFor="root"
7278+
title="Required Checkbox Group"
7279+
>
7280+
Required Checkbox Group
7281+
</label>
7282+
</div>
7283+
<div
7284+
className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
7285+
style={{}}
7286+
>
7287+
<div
7288+
className="ant-form-item-control-input"
7289+
>
7290+
<div
7291+
className="ant-form-item-control-input-content"
7292+
>
7293+
<div
7294+
aria-describedby="root__error root__description root__help"
7295+
className="ant-checkbox-group css-dev-only-do-not-override-ac2jek"
7296+
id="root"
7297+
name="root"
7298+
onBlur={[Function]}
7299+
onFocus={[Function]}
7300+
>
7301+
<span>
7302+
<label
7303+
className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7304+
onClick={[Function]}
7305+
style={{}}
7306+
>
7307+
<span
7308+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek"
7309+
>
7310+
<input
7311+
autoFocus={false}
7312+
checked={false}
7313+
className="ant-checkbox-input"
7314+
disabled={false}
7315+
id="root-0"
7316+
name="root"
7317+
onChange={[Function]}
7318+
onClick={[Function]}
7319+
type="checkbox"
7320+
value="0"
7321+
/>
7322+
<span
7323+
className="ant-checkbox-inner"
7324+
/>
7325+
</span>
7326+
<span
7327+
className="ant-checkbox-label"
7328+
>
7329+
red
7330+
</span>
7331+
</label>
7332+
<br />
7333+
</span>
7334+
<span>
7335+
<label
7336+
className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7337+
onClick={[Function]}
7338+
style={{}}
7339+
>
7340+
<span
7341+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek"
7342+
>
7343+
<input
7344+
autoFocus={false}
7345+
checked={false}
7346+
className="ant-checkbox-input"
7347+
disabled={false}
7348+
id="root-1"
7349+
name="root"
7350+
onChange={[Function]}
7351+
onClick={[Function]}
7352+
type="checkbox"
7353+
value="1"
7354+
/>
7355+
<span
7356+
className="ant-checkbox-inner"
7357+
/>
7358+
</span>
7359+
<span
7360+
className="ant-checkbox-label"
7361+
>
7362+
green
7363+
</span>
7364+
</label>
7365+
<br />
7366+
</span>
7367+
<span>
7368+
<label
7369+
className="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item css-dev-only-do-not-override-ac2jek"
7370+
onClick={[Function]}
7371+
style={{}}
7372+
>
7373+
<span
7374+
className="ant-checkbox ant-wave-target css-dev-only-do-not-override-ac2jek"
7375+
>
7376+
<input
7377+
autoFocus={false}
7378+
checked={false}
7379+
className="ant-checkbox-input"
7380+
disabled={false}
7381+
id="root-2"
7382+
name="root"
7383+
onChange={[Function]}
7384+
onClick={[Function]}
7385+
type="checkbox"
7386+
value="2"
7387+
/>
7388+
<span
7389+
className="ant-checkbox-inner"
7390+
/>
7391+
</span>
7392+
<span
7393+
className="ant-checkbox-label"
7394+
>
7395+
blue
7396+
</span>
7397+
</label>
7398+
<br />
7399+
</span>
7400+
</div>
7401+
</div>
7402+
</div>
7403+
<div
7404+
className="ant-form-item-additional"
7405+
style={{}}
7406+
>
7407+
<div
7408+
className="ant-form-item-extra"
7409+
>
7410+
<span
7411+
id="root__description"
7412+
>
7413+
At least one option must be selected
7414+
</span>
7415+
</div>
7416+
</div>
7417+
</div>
7418+
</div>
7419+
</div>
7420+
</div>
7421+
<button
7422+
className="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
7423+
disabled={false}
7424+
onClick={[Function]}
7425+
style={{}}
7426+
type="submit"
7427+
>
7428+
<span>
7429+
Submit
7430+
</span>
7431+
</button>
7432+
</form>
7433+
`;
7434+
70707435
exports[`single fields field with description 1`] = `
70717436
<form
70727437
className="rjsf"

0 commit comments

Comments
 (0)