Skip to content

Commit

Permalink
feat(form): added field groups
Browse files Browse the repository at this point in the history
  • Loading branch information
mcoker committed Nov 10, 2020
1 parent 3eb85e5 commit e5ddd8d
Show file tree
Hide file tree
Showing 13 changed files with 464 additions and 0 deletions.
252 changes: 252 additions & 0 deletions src/patternfly/components/Form/examples/Form.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,258 @@ cssPrefix: pf-c-form
{{/form}}
```

### Field groups
```hbs
{{#> form form--id="form-field-groups"}}
{{#> form-group form-group--id="-label1"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 1{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-group form-group--id="-label2"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 2{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group1') form-field-group--IsExpanded="true"}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 1{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-link"}}
Delete all
{{/button}}
{{#> button button--modifier="pf-m-secondary"}}
Add parameter
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{#> form-field-group-body}}
{{#> form-field-group newcontext form-field-group--id=(concat form--id '-field-group2') form-field-group--IsExpanded="true" form-field-group--IsRepeatable="true"}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 1{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Remove"'}}
<i class="fas fa-trash"></i>
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{#> form-field-group-body}}
{{#> form-group form-group--id=(concat form-field-group--id "-label1")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 1{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-group form-group--id=(concat form-field-group--id "-label2")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 2{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{/form-field-group-body}}
{{/form-field-group}}
{{#> form-field-group newcontext form-field-group--id=(concat form--id '-field-group3') form-field-group--IsRepeatable="true"}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 2{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Remove"'}}
<i class="fas fa-trash"></i>
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-field-group newcontext form-field-group--id=(concat form--id '-field-group4') form-field-group--IsRepeatable="true"}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 3{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Remove"'}}
<i class="fas fa-trash"></i>
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-group form-group--id=(concat form-field-group--id "-label1")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 1{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-group form-group--id=(concat form-field-group--id "-label2")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 2{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{/form-field-group-body}}
{{/form-field-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group5')}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 2{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-link"}}
Delete all
{{/button}}
{{#> button button--modifier="pf-m-secondary"}}
Add parameter
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-field-group form-field-group--IsExpanded="true" form-field-group--id=(concat form--id '-field-group6')}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 3{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{/form-field-group-header}}
{{#> form-field-group-body}}
{{#> form-group form-group--id=(concat form-field-group--id "-label1")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 1{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-group form-group--id=(concat form-field-group--id "-label2")}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 2{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-field-group newcontext form-field-group--id=(concat form--id '-field-group3')}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 2{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{/form-field-group-header-main}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-field-group newcontext form-field-group--id=(concat form--id '-field-group4')}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 3{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{/form-field-group-header}}
{{/form-field-group}}
{{/form-field-group-body}}
{{/form-field-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group6')}}
{{> form-field-group-toggle}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text form-field-group-title-text--attribute=(concat 'id="' form-field-group--id '-title"')}}Field group 3{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{#> form-field-group-header-actions}}
{{#> button button--modifier="pf-m-link"}}
Delete all
{{/button}}
{{#> button button--modifier="pf-m-secondary"}}
Add parameter
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-group form-group--id="-label1"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 1{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{#> form-group form-group--id="-label2"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 2{{/form-label}}
{{> form-group-label-help}}
{{/form-group-label}}
{{#> form-group-control}}
{{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" id="' form--id form-group--id '" name="' form--id form-group--id '" required')}}{{/form-control}}
{{/form-group-control}}
{{/form-group}}
{{/form}}
```

## Documentation
### Accessibility
| Attribute | Applied to | Outcome |
Expand Down
9 changes: 9 additions & 0 deletions src/patternfly/components/Form/form-field-group-body.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div class="pf-c-form__field-group-body{{#if form-field-group-body--modifier}} {{form-field-group-body--modifier}}{{/if}}"
{{#unless form-field-group--IsExpanded}}
hidden
{{/unless}}
{{#if form-field-group-body--attribute}}
{{{form-field-group-body--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header-actions{{#if form-field-group-header-actions--modifier}} {{form-field-group-header-actions--modifier}}{{/if}}"
{{#if form-field-group-header-actions--attribute}}
{{{form-field-group-header-actions--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header-description{{#if form-field-group-header-description--modifier}} {{form-field-group-header-description--modifier}}{{/if}}"
{{#if form-field-group-header-description--attribute}}
{{{form-field-group-header-description--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header-main{{#if form-field-group-header-main--modifier}} {{form-field-group-header-main--modifier}}{{/if}}"
{{#if form-field-group-header-main--attribute}}
{{{form-field-group-header-main--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
6 changes: 6 additions & 0 deletions src/patternfly/components/Form/form-field-group-header.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header{{#if form-field-group-header--modifier}} {{form-field-group-header--modifier}}{{/if}}"
{{#if form-field-group-header--attribute}}
{{{form-field-group-header--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header-title-text{{#if form-field-group-title-text--modifier}} {{form-field-group-title-text--modifier}}{{/if}}"
{{#if form-field-group-title-text--attribute}}
{{{form-field-group-title-text--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
6 changes: 6 additions & 0 deletions src/patternfly/components/Form/form-field-group-title.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-header-title{{#if form-field-group-title--modifier}} {{form-field-group-title--modifier}}{{/if}}"
{{#if form-field-group-title--attribute}}
{{{form-field-group-title--attribute}}}
{{/if}}>
{{>@partial-block}}
</div>
14 changes: 14 additions & 0 deletions src/patternfly/components/Form/form-field-group-toggle-button.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="pf-c-form__field-group-toggle-button{{#if form-field-group-toggle-button--modifier}} {{form-field-group-toggle-button--modifier}}{{/if}}"
{{#if form-field-group-toggle-button--attribute}}
{{{form-field-group-toggle-button--attribute}}}
{{/if}}>
{{#if form-field-group--IsExpanded}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-expanded="true" aria-label="Details" id="' form-field-group--id '-toggle" aria-labelledby="' form-field-group--id '-title ' form-field-group--id '-toggle"')}}
{{> form-field-group-toggle-icon}}
{{/button}}
{{else}}
{{#> button button--modifier="pf-m-plain" button--attribute=(concat 'aria-expanded="false" aria-label="Details" id="' form-field-group--id '-toggle" aria-labelledby="' form-field-group--id '-title ' form-field-group--id '-toggle"')}}
{{> form-field-group-toggle-icon}}
{{/button}}
{{/if}}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<span class="pf-c-form__field-group-toggle-icon{{#if form-field-group-toggle-icon--modifier}} {{form-field-group-toggle-icon--modifier}}{{/if}}"
{{#if form-field-group-toggle-icon--attribute}}
{{{form-field-group-toggle-icon--attribute}}}
{{/if}}>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
6 changes: 6 additions & 0 deletions src/patternfly/components/Form/form-field-group-toggle.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group-toggle{{#if form-field-group-toggle--modifier}} {{form-field-group-toggle--modifier}}{{/if}}"
{{#if form-field-group-toggle--attribute}}
{{{form-field-group-toggle--attribute}}}
{{/if}}>
{{> form-field-group-toggle-button}}
</div>
6 changes: 6 additions & 0 deletions src/patternfly/components/Form/form-field-group.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-form__field-group{{#if form-field-group--IsExpanded}} pf-m-expanded{{/if}}{{#if form-field-group--IsRepeatable}} pf-m-repeatable{{/if}}{{#if form-field-group--modifier}} {{form-field-group--modifier}}{{/if}}"
{{#if form-field-group--attribute}}
{{{form-field-group--attribute}}}
{{/if}}>
{{> @partial-block}}
</div>
Loading

0 comments on commit e5ddd8d

Please sign in to comment.