Show help text alongside field if specified

[stevehalford]

Adds help text or a description alongside fields (write only)

Related: marmelab/admin-config#72

The directives template can be overridden to achieve this #791

[RichardBradley]

I think this is a great addition.

I was wondering about screen readers and whether the help text ought to be linked to the input, e.g. by a "label for". This page suggests using "aria-labelledby" instead: http://www.html5accessibility.com/tests/mulitple-labels.html

... actually this page has a better summary: https://www.w3.org/WAI/tutorials/forms/instructions/

[RichardBradley]

I'm using this on my ng-admin powered site, and it works great, thanks.

I've extended the code so that you can use HTML markup and/or Angular markup in the help text where necessary. Can I create a PR for a PR? Or should I create a separate PR that includes this code?

I have some fields which change their meaning based on the "type" of the row, and I wanted the help-text to vary. You can use it like:

  myEntity.editionView()
     .fields(
        nga.field('type', 'choice')
                    .choices([ .. ]),
        nga.field('searchQuery')
                    .label("Search Query")
                    .helpText(angular.element(
                        "<small ng-if=\"entry.values.type == 'live_search_feed'\" class='help-block'>" +
                        "  This is both the \"view all\" link and the " +
                        "search which will be used to fill the product list." +
                        "</small>" +
                        "<small ng-if=\"entry.values.type == 'curated_list'\" class='help-block'>" +
                        "This will be used for the \"view all\" link. (Optional)" +
                        "</small>" +
                        "<small class='help-block'>Remember to filter the search if you want only Foo" +
                        " or only Bar typed products (usually you do; it looks neater).</small>")),

My changes are at: RichardBradley@c9f404b
(you'll need to cherry-pick that commit; it's on a branch which contains other stuff).

[d1b1]

Any progress on this. Would love to have this feature.

[stevehalford]

Just cherry-picked your commit @RichardBradley

[jpetitcolas]

Use new admin-config release once your marmelab/admin-config#72 PR has been released.

[jpetitcolas]

Can you add some unit tests for your directive?

[jpetitcolas]

👍

Please rebase this PR to ensure tests are fine. :)

[RichardBradley]

(If you're making changes here, it would also be nice to update the docs to explain how to use the non-string case of helpText. Maybe add the example from my comment above starting "You can use it like:" to Field.md, if it still works after jpetitcolas's changes.)