-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2453 from boltdesignsystem/feature/ds-737-two-col…
…umn-form-layout DS-737 multi-column form layout and grid spacing fix
- Loading branch information
Showing
14 changed files
with
782 additions
and
100 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
409 changes: 409 additions & 0 deletions
409
...e/src/pages/pattern-lab/_patterns/40-components/form/-55a-form-demo-multiple-columns.twig
Large diffs are not rendered by default.
Oops, something went wrong.
325 changes: 325 additions & 0 deletions
325
...src/pages/pattern-lab/_patterns/40-components/form/55-form-use-case-multiple-columns.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,325 @@ | ||
| {% set description %} | ||
| Use the grid to create multi-column form layouts. | ||
| {% endset %} | ||
|
|
||
| {% set demo %} | ||
| {% set icon_external_link %} | ||
| {% include '@bolt-elements-icon/icon.twig' with { | ||
| name: 'external-link', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-text-link/text-link.twig' with { | ||
| content: 'View full page demo', | ||
| icon_after: icon_external_link, | ||
| attributes: { | ||
| href: link['components-form-demo-multiple-columns'], | ||
| target: '_blank', | ||
| rel: 'noopener' | ||
| } | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set twig_markup %}{% verbatim %} | ||
| {% set form_children %} | ||
| {% set category_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Category', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'category', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set select %} | ||
| {% include '@bolt-components-form/form-select.twig' with { | ||
| options: [ | ||
| { | ||
| type: 'option', | ||
| value: '', | ||
| label: '- Select a category -', | ||
| }, | ||
| { | ||
| type: 'option', | ||
| value: 'option-a', | ||
| label: 'Option A' | ||
| }, | ||
| { | ||
| type: 'option', | ||
| value: 'option-b', | ||
| label: 'Option B' | ||
| } | ||
| ], | ||
| attributes: { | ||
| id: 'category', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: select, | ||
| } only %} | ||
| {% endset %} | ||
| {% set first_name_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'First name', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'first-name', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set input %} | ||
| {% include '@bolt-components-form/form-input.twig' with { | ||
| attributes: { | ||
| placeholder: 'Enter first name', | ||
| type: 'text', | ||
| id: 'first-name', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: input, | ||
| } only %} | ||
| {% endset %} | ||
| {% set last_name_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Last name', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'last-name', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set input %} | ||
| {% include '@bolt-components-form/form-input.twig' with { | ||
| attributes: { | ||
| placeholder: 'Enter last name', | ||
| type: 'text', | ||
| id: 'last-name', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: input, | ||
| } only %} | ||
| {% endset %} | ||
| {% set work_email_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Work email', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'work-email', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set input %} | ||
| {% include '@bolt-components-form/form-input.twig' with { | ||
| attributes: { | ||
| placeholder: 'Enter work email', | ||
| type: 'email', | ||
| id: 'work-email', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: input, | ||
| } only %} | ||
| {% endset %} | ||
| {% set phone_number_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Phone number', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'phone-number', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set input %} | ||
| {% include '@bolt-components-form/form-input.twig' with { | ||
| attributes: { | ||
| placeholder: 'Enter phone number', | ||
| type: 'tel', | ||
| id: 'phone-number', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: input, | ||
| } only %} | ||
| {% endset %} | ||
| {% set country_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Country', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'country', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set select %} | ||
| {% include '@bolt-components-form/form-select.twig' with { | ||
| options: [ | ||
| { | ||
| type: 'option', | ||
| value: '', | ||
| label: '- Select a country -', | ||
| }, | ||
| { | ||
| type: 'option', | ||
| value: 'option-a', | ||
| label: 'Option A' | ||
| }, | ||
| { | ||
| type: 'option', | ||
| value: 'option-b', | ||
| label: 'Option B' | ||
| } | ||
| ], | ||
| attributes: { | ||
| id: 'country', | ||
| required: true, | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: select, | ||
| } only %} | ||
| {% endset %} | ||
| {% set message_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Message', | ||
| displayType: 'floating', | ||
| attributes: { | ||
| for: 'message', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set textarea %} | ||
| {% include '@bolt-components-form/form-textarea.twig' with { | ||
| attributes: { | ||
| placeholder: 'Enter a message', | ||
| rows: 5, | ||
| required: true, | ||
| id: 'message', | ||
| } | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: textarea, | ||
| } only %} | ||
| {% endset %} | ||
| {% set agreement_input %} | ||
| {% set label %} | ||
| {% include '@bolt-components-form/form-label.twig' with { | ||
| title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', | ||
| displayType: 'inline-checkbox', | ||
| attributes: { | ||
| for: 'agreement', | ||
| name: 'agreement', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% set input %} | ||
| {% include '@bolt-components-form/form-input.twig' with { | ||
| attributes: { | ||
| type: 'checkbox', | ||
| id: 'agreement', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-form/form-element.twig' with { | ||
| label: label, | ||
| children: input, | ||
| } only %} | ||
| {% endset %} | ||
| {% set submit_button %} | ||
| {% include '@bolt-elements-button/button.twig' with { | ||
| content: 'Send', | ||
| display: 'block', | ||
| attributes: { | ||
| type: 'submit' | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
|
|
||
| {% include '@bolt-components-grid/grid.twig' with { | ||
| items: [ | ||
| { | ||
| column_start: '1', | ||
| column_span: '12', | ||
| content: category_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12 6@small', | ||
| content: first_name_input, | ||
| }, | ||
| { | ||
| column_start: '1 7@small', | ||
| column_span: '12 6@small', | ||
| content: last_name_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12 6@small', | ||
| content: work_email_input, | ||
| }, | ||
| { | ||
| column_start: '1 7@small', | ||
| column_span: '12 6@small', | ||
| content: phone_number_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12', | ||
| content: country_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12', | ||
| content: message_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12', | ||
| content: agreement_input, | ||
| }, | ||
| { | ||
| column_start: '1', | ||
| column_span: '12', | ||
| content: submit_button, | ||
| }, | ||
| ] | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-components-form/form.twig' with { | ||
| children: form_children, | ||
| } only %} | ||
| {% endverbatim %}{% endset %} | ||
|
|
||
| {% include '@utils/pattern-doc-page.twig' with { | ||
| title: 'Use Case: Multiple Columns', | ||
| description: description, | ||
| demo: demo, | ||
| twig_markup: twig_markup, | ||
| } only %} |
3 changes: 3 additions & 0 deletions
3
...ages/pattern-lab/_patterns/40-components/form/55a-form-demo-multiple-columns.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| --- | ||
| title: "Demo: Multi-column Form" | ||
| --- |
3 changes: 1 addition & 2 deletions
3
docs-site/src/pages/pattern-lab/_patterns/40-components/grid/15-grid-gutter-variations.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 1 addition & 2 deletions
3
...ite/src/pages/pattern-lab/_patterns/40-components/grid/20-grid-row-gutter-variations.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.