Skip to content

Commit

Permalink
chore(form): add complex form demo (#4865)
Browse files Browse the repository at this point in the history
  • Loading branch information
@srambach
srambach authored May 27, 2022
1 parent ce19e75 commit 0900f10
Show file tree
Hide file tree
Showing 3 changed files with 406 additions and 199 deletions.
222 changes: 23 additions & 199 deletions src/patternfly/components/Form/examples/Form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,117 +249,26 @@ cssPrefix: pf-c-form
{{/form-group}}
{{/form}}
```
### Field groups
### Field group (non-expandable)
```hbs
{{#> form form--id="form-expandable-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-help--aria-label="More information for label 1 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-help--aria-label="More information for label 2 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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--IsExpandable="true" form-field-group--IsExpanded="true"}}
{{#> form form--id="form-field-group"}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group')}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text}}Field group 1{{/form-field-group-title-text}}
{{#> form-field-group-title-text}}Field group Title{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Field group 1 description text.
Field group 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
Action
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{#> form-field-group-body}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group2') form-field-group--IsExpandable="true" form-field-group--IsExpanded="true"}}
{{#> 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"')}}Nested field group 1{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Nested 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-help--aria-label="More information for label 1 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-help--aria-label="More information for label 2 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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}}
{{#> reset form-field-group--IsExpanded=reset}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group3') form-field-group--IsExpandable="true"}}
{{#> 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"')}}Nested 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 form-field-group--id=(concat form--id '-field-group4') form-field-group--IsExpandable="true"}}
{{#> 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"')}}Nested field group 3{{/form-field-group-title-text}}
{{/form-field-group-title}}
{{#> form-field-group-header-description}}
Nested field group 3 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}}
{{/reset}}
{{#> 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}}
Expand All @@ -380,34 +289,38 @@ cssPrefix: pf-c-form
{{/form-group}}
{{/form-field-group-body}}
{{/form-field-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group5') form-field-group--IsExpandable="true"}}
{{/form}}
```

### Expandable and nested field groups
```hbs
{{#> form form--id="form-expandable-field-groups"}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group-1') form-field-group--IsExpandable="true"}}
{{#> 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-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.
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
Action
{{/button}}
{{/form-field-group-header-actions}}
{{/form-field-group-header}}
{{/form-field-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group6') form-field-group--IsExpandable="true" form-field-group--IsExpanded="true"}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group-2') form-field-group--IsExpandable="true" form-field-group--IsExpanded="true"}}
{{#> 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-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.
Field group 2 description text
{{/form-field-group-header-description}}
{{/form-field-group-header-main}}
{{/form-field-group-header}}
Expand All @@ -430,44 +343,12 @@ cssPrefix: pf-c-form
{{#> 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-group7') form-field-group--IsExpandable=reset}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text}}Nested field group 1 (non-expandable){{/form-field-group-title-text}}
{{/form-field-group-title}}
{{/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-help--aria-label="More information for label 1 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-help--aria-label="More information for label 2 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-group8') form-field-group--IsExpandable=reset}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group-3') form-field-group--IsExpandable=reset}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text}}Nested field group 2 (non-expandable){{/form-field-group-title-text}}
{{#> form-field-group-title-text}}Nested 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}}
Expand All @@ -493,64 +374,7 @@ cssPrefix: pf-c-form
{{/form-field-group}}
{{/form-field-group-body}}
{{/form-field-group}}
{{#> form-field-group form-field-group--id=(concat form--id '-field-group9')}}
{{#> form-field-group-header}}
{{#> form-field-group-header-main}}
{{#> form-field-group-title}}
{{#> form-field-group-title-text}}Field group 4 (non-expandable){{/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-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-help--aria-label="More information for label 1 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-help--aria-label="More information for label 2 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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-group form-group--id="-label3"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 3{{/form-label}}
{{> form-group-label-help form-group-label-help--aria-label="More information for label 3 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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="-label4"}}
{{#> form-group-label}}
{{#> form-label form-label--attribute=(concat 'for="' form--id form-group--id '"') required="true"}}Label 4{{/form-label}}
{{> form-group-label-help form-group-label-help--aria-label="More information for label 4 field" form-group-label-help--aria-describedby=(concat form--id form-group--id)}}
{{/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}}
```

Expand Down
1 change: 1 addition & 0 deletions src/patternfly/components/LabelGroup/label-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
--pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);

display: inline-flex;
align-items: center;

&.pf-m-category {
padding-top: var(--pf-c-label-group--m-category--PaddingTop);
Expand Down
Loading

0 comments on commit 0900f10

Please sign in to comment.