Skip to content

Commit

Permalink
Site: (#551) Form Hierarchy add examples using fieldset
Browse files Browse the repository at this point in the history 
Site: Form Hierarchy add example of `.table`
  • Loading branch information
@pat270
pat270 committed Feb 14, 2018
1 parent 856fb37 commit fe2e2cd
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 3 deletions.
6 changes: 3 additions & 3 deletions packages/clay/src/content/sheet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h3 class="autofit-row sheet-subtitle">
</span>
<span class="autofit-col">
<span class="heading-end">
<button class="btn btn-secondary btn-sm">Add</button>
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</span>
</span>
</h3>
Expand All @@ -48,8 +48,8 @@ <h3 class="autofit-row autofit-float sheet-subtitle">
</span>
<span class="autofit-col autofit-col-end">
<span class="heading-end">
<button class="btn btn-secondary btn-sm">Add</button>
<button class="btn btn-secondary btn-sm">Remove</button>
<button class="btn btn-secondary btn-sm" type="button">Add</button>
<button class="btn btn-secondary btn-sm" type="button">Remove</button>
</span>
</span>
</h3>
Expand Down
120 changes: 120 additions & 0 deletions packages/clay/src/content/test_form_hierarchy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,126 @@ <h4 class="sheet-tertiary-title">Second Level Section</h4>
</div>
</div>
</div>
<div class="sheet-section">
<h3 class="autofit-row sheet-subtitle">
<span class="autofit-col autofit-col-expand">
<span class="heading-text">Configuration Entries</span>
</span>
<span class="autofit-col">
<span class="heading-end">
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</span>
</span>
</h3>
<div class="table-responsive">
<table class="table table-autofit table-nowrap">
<thead>
<tr>
<th class="table-cell-expand">Form Navigator Id</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<span class="text-truncate-inline">
<a class="text-truncate" href="#1">Form Navigator Entry 1</a>
</span>
</div>
</td>
<td>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="dropdownAction1" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<a href="#1">Form Navigator Entry 2</a>
</div>
</td>
<td>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction2" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="dropdownAction2" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="table-cell-expand">
<div class="table-title">
<a href="#1">Form Navigator Entry 3</a>
</div>
</td>
<td>
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction3" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="dropdownAction3" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Remove</a></li>
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Move</a></li>
<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sheet-section">
<fieldset>
<div class="sheet-section">
<h3 class="sheet-subtitle">Fieldset Nested in Sheet Section</h3>
<div class="form-group-autofit">
<div class="form-group-item">
<label for="inputLabel9">
Input Label 9
</label>
<input class="form-control" id="inputLabel9" type="text">
</div>
</div>
</div>
</fieldset>
</div>
<fieldset>
<div class="sheet-section">
<h3 class="sheet-subtitle">Sheet Section Nested in Fieldset</h3>
<div class="form-group-autofit">
<div class="form-group-item">
<label for="inputLabel10">
Input Label 10
</label>
<input class="form-control" id="inputLabel10" type="text">
</div>
</div>
</div>
</fieldset>
<div class="sheet-footer">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn btn-secondary" type="button">Cancel</button>
Expand Down

0 comments on commit fe2e2cd

Please sign in to comment.