Skip to content

Commit c918d74

Browse files
Suyog241005Suyog241005
committed
Updated antd HelpField to consistently use Markdown for help text & restored text-danger logic in Bootstrap FieldHelpTemplate & updated core test to expect div.help-block instead of p.help-block
1 parent 6251cd5 commit c918d74

File tree

7 files changed

+95
-60
lines changed

7 files changed

+95
-60
lines changed

‎packages/antd/src/templates/HelpField/index.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions } from '@rjsf/utils';
1+
import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
22
import Markdown from 'markdown-to-jsx';
33

44
/** The `FieldHelpTemplate` component renders any help desired for a field
@@ -10,29 +10,14 @@ export default function FieldHelpTemplate<
1010
S extends StrictRJSFSchema = RJSFSchema,
1111
F extends FormContextType = any,
1212
>(props: FieldHelpProps<T, S, F>) {
13-
const { fieldPathId, help, uiSchema = {}, registry } = props;
13+
const { fieldPathId, help } = props;
1414
if (!help) {
1515
return null;
1616
}
1717
const id = helpId(fieldPathId);
18-
const uiOptions = getUiOptions<T, S, F>(uiSchema, registry?.globalUiOptions);
19-
if (typeof help === 'string' && uiOptions.enableMarkdownInHelp) {
20-
return (
21-
<div id={id} className='help-block'>
22-
<Markdown options={{ disableParsingRawHTML: true }}>{help}</Markdown>
23-
</div>
24-
);
25-
}
26-
if (typeof help === 'string') {
27-
return (
28-
<p id={id} className='help-block'>
29-
{help}
30-
</p>
31-
);
32-
}
3318
return (
3419
<div id={id} className='help-block'>
35-
{help}
20+
<Markdown options={{ disableParsingRawHTML: true }}>{help as string}</Markdown>
3621
</div>
3722
);
3823
}

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

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6282,12 +6282,12 @@ exports[`single fields checkboxes widget with custom options and labels 1`] = `
62826282
<div
62836283
class=""
62846284
>
6285-
<p
6285+
<div
62866286
class="help-block"
62876287
id="root__help"
62886288
>
62896289
Select all that apply
6290-
</p>
6290+
</div>
62916291
</div>
62926292
</div>
62936293
<div
@@ -7575,12 +7575,12 @@ exports[`single fields help and error display 1`] = `
75757575
<div
75767576
class="ant-form-item-explain-error"
75777577
>
7578-
<p
7578+
<div
75797579
class="help-block"
75807580
id="root__help"
75817581
>
75827582
help me!
7583-
</p>
7583+
</div>
75847584
</div>
75857585
</div>
75867586
</div>
@@ -19012,12 +19012,23 @@ exports[`single fields string field field with markdown help and description 1`]
1901219012
<div
1901319013
class=""
1901419014
>
19015-
<p
19015+
<div
1901619016
class="help-block"
1901719017
id="root__help"
1901819018
>
19019-
This is **help** text with [a link](https://example.com)
19020-
</p>
19019+
<span>
19020+
This is
19021+
<strong>
19022+
help
19023+
</strong>
19024+
text with
19025+
<a
19026+
href="https://example.com"
19027+
>
19028+
a link
19029+
</a>
19030+
</span>
19031+
</div>
1902119032
</div>
1902219033
</div>
1902319034
<div
@@ -19113,12 +19124,23 @@ exports[`single fields string field field with markdown help text 1`] = `
1911319124
<div
1911419125
class=""
1911519126
>
19116-
<p
19127+
<div
1911719128
class="help-block"
1911819129
id="root__help"
1911919130
>
19120-
This is **markdown** help text with [a link](https://example.com)
19121-
</p>
19131+
<span>
19132+
This is
19133+
<strong>
19134+
markdown
19135+
</strong>
19136+
help text with
19137+
<a
19138+
href="https://example.com"
19139+
>
19140+
a link
19141+
</a>
19142+
</span>
19143+
</div>
1912219144
</div>
1912319145
</div>
1912419146
<div
@@ -19214,12 +19236,12 @@ exports[`single fields string field field with markdown help text without enabli
1921419236
<div
1921519237
class=""
1921619238
>
19217-
<p
19239+
<div
1921819240
class="help-block"
1921919241
id="root__help"
1922019242
>
1922119243
This is **markdown** help text with [a link](https://example.com)
19222-
</p>
19244+
</div>
1922319245
</div>
1922419246
</div>
1922519247
<div
@@ -19613,12 +19635,18 @@ exports[`single fields string field required field with markdown help 1`] = `
1961319635
<div
1961419636
class=""
1961519637
>
19616-
<p
19638+
<div
1961719639
class="help-block"
1961819640
id="root__help"
1961919641
>
19620-
This field is **required**. Please provide a value.
19621-
</p>
19642+
<span>
19643+
This field is
19644+
<strong>
19645+
required
19646+
</strong>
19647+
. Please provide a value.
19648+
</span>
19649+
</div>
1962219650
</div>
1962319651
</div>
1962419652
<div

‎packages/core/src/components/templates/FieldHelpTemplate.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,10 @@ export default function FieldHelpTemplate<
1414
if (!help) {
1515
return null;
1616
}
17-
if (typeof help === 'string') {
18-
return (
19-
<p id={helpId(fieldPathId)} className='help-block'>
20-
{help}
21-
</p>
22-
);
23-
}
17+
2418
return (
2519
<div id={helpId(fieldPathId)} className='help-block'>
26-
<RichHelp help={help} registry={registry} uiSchema={uiSchema} />
20+
<RichHelp help={help as string} registry={registry} uiSchema={uiSchema} />
2721
</div>
2822
);
2923
}

‎packages/core/test/__snapshots__/FormSnap.test.tsx.snap‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2111,12 +2111,12 @@ exports[`single fields checkboxes widget with custom options and labels 1`] = `
21112111
</span>
21122112
</label>
21132113
</div>
2114-
<p
2114+
<div
21152115
class="help-block"
21162116
id="root__help"
21172117
>
21182118
Select all that apply
2119-
</p>
2119+
</div>
21202120
</div>
21212121
<div>
21222122
<button
@@ -2610,12 +2610,12 @@ exports[`single fields help and error display 1`] = `
26102610
</li>
26112611
</ul>
26122612
</div>
2613-
<p
2613+
<div
26142614
class="help-block"
26152615
id="root__help"
26162616
>
26172617
help me!
2618-
</p>
2618+
</div>
26192619
</div>
26202620
<div>
26212621
<button
@@ -6212,12 +6212,23 @@ exports[`single fields string field field with markdown help and description 1`]
62126212
type="text"
62136213
value=""
62146214
/>
6215-
<p
6215+
<div
62166216
class="help-block"
62176217
id="root__help"
62186218
>
6219-
This is **help** text with [a link](https://example.com)
6220-
</p>
6219+
<span>
6220+
This is
6221+
<strong>
6222+
help
6223+
</strong>
6224+
text with
6225+
<a
6226+
href="https://example.com"
6227+
>
6228+
a link
6229+
</a>
6230+
</span>
6231+
</div>
62216232
</div>
62226233
<div>
62236234
<button
@@ -6261,12 +6272,23 @@ exports[`single fields string field field with markdown help text 1`] = `
62616272
type="text"
62626273
value=""
62636274
/>
6264-
<p
6275+
<div
62656276
class="help-block"
62666277
id="root__help"
62676278
>
6268-
This is **markdown** help text with [a link](https://example.com)
6269-
</p>
6279+
<span>
6280+
This is
6281+
<strong>
6282+
markdown
6283+
</strong>
6284+
help text with
6285+
<a
6286+
href="https://example.com"
6287+
>
6288+
a link
6289+
</a>
6290+
</span>
6291+
</div>
62706292
</div>
62716293
<div>
62726294
<button
@@ -6310,12 +6332,12 @@ exports[`single fields string field field with markdown help text without enabli
63106332
type="text"
63116333
value=""
63126334
/>
6313-
<p
6335+
<div
63146336
class="help-block"
63156337
id="root__help"
63166338
>
63176339
This is **markdown** help text with [a link](https://example.com)
6318-
</p>
6340+
</div>
63196341
</div>
63206342
<div>
63216343
<button
@@ -6485,12 +6507,18 @@ exports[`single fields string field required field with markdown help 1`] = `
64856507
type="text"
64866508
value="[object Object]"
64876509
/>
6488-
<p
6510+
<div
64896511
class="help-block"
64906512
id="root__help"
64916513
>
6492-
This field is **required**. Please provide a value.
6493-
</p>
6514+
<span>
6515+
This field is
6516+
<strong>
6517+
required
6518+
</strong>
6519+
. Please provide a value.
6520+
</span>
6521+
</div>
64946522
</div>
64956523
<div>
64966524
<button

‎packages/core/test/uiSchema.test.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,7 @@ describe('uiSchema', () => {
522522

523523
const { node } = createFormComponent({ schema, uiSchema });
524524

525-
expect(node.querySelector('p.help-block').textContent).eql('plop');
525+
expect(node.querySelector('div.help-block').textContent).eql('plop');
526526
});
527527
});
528528

‎packages/react-bootstrap/src/FieldHelpTemplate/FieldHelpTemplate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ export default function FieldHelpTemplate<
1111
S extends StrictRJSFSchema = RJSFSchema,
1212
F extends FormContextType = any,
1313
>(props: FieldHelpProps<T, S, F>) {
14-
const { fieldPathId, help, uiSchema, registry } = props;
14+
const { fieldPathId, help, uiSchema, registry, hasErrors } = props;
1515
if (!help) {
1616
return null;
1717
}
1818
return (
19-
<Form.Text id={helpId(fieldPathId)} className='text-muted'>
19+
<Form.Text id={helpId(fieldPathId)} className={hasErrors ? 'text-danger' : 'text-muted'}>
2020
<RichHelp help={help} registry={registry} uiSchema={uiSchema} />
2121
</Form.Text>
2222
);

‎packages/react-bootstrap/test/__snapshots__/Form.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3678,7 +3678,7 @@ exports[`single fields help and error display 1`] = `
36783678
</li>
36793679
</ul>
36803680
<small
3681-
class="text-muted form-text"
3681+
class="text-danger form-text"
36823682
id="root__help"
36833683
>
36843684
help me!

0 commit comments

Comments
 (0)