Skip to content

Commit

Permalink
Site: (liferay#688) Forms added markup pattern for Autocomplete Text …
Browse files Browse the repository at this point in the history 
…Field and Search Field
  • Loading branch information
@pat270
pat270 committed Mar 2, 2018
1 parent 4fb6dd3 commit 3d5509e
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 88 deletions.
202 changes: 114 additions & 88 deletions packages/clay/src/content/dropdowns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,39 +394,47 @@ <h3>Dropdown wide / full</h3>
<div aria-labelledby="" class="dropdown-wide dropdown-wide-container">
<div class="dropdown-menu">
<div class="row">
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-subheader">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-subheader">By Product</li>
<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>

<ul class="col-sm-4 list-unstyled">
<li class="dropdown-subheader">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
<li class="dropdown-subheader">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>

<ul class="col-sm-4 list-unstyled">
<li class="dropdown-subheader">By Audience</li>
<li><a class="dropdown-item" href="#1">For Home Users</a></li>
<li><a class="dropdown-item" href="#1">For Small Business</a></li>
<li><a class="dropdown-item" href="#1">For IT Professionals</a></li>
<li><a class="dropdown-item" href="#1">For Developers</a></li>
</ul>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-subheader">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-subheader">By Product</li>
<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-subheader">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-subheader">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-subheader">By Audience</li>
<li><a class="dropdown-item" href="#1">For Home Users</a></li>
<li><a class="dropdown-item" href="#1">For Small Business</a></li>
<li><a class="dropdown-item" href="#1">For IT Professionals</a></li>
<li><a class="dropdown-item" href="#1">For Developers</a></li>
</ul>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -774,30 +782,38 @@ <h3>Dropdown Examples</h3>
</a>
<div aria-labelledby="navbarDropdownMenuLink2" class="dropdown-menu">
<div class="row">
<ul class="col-sm-6 list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Support Home</a></li>
<li><a class="dropdown-item" href="#1">Ask the Experts</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-header">By Product</li>
<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>
<ul class="col-sm-6 list-unstyled">
<li class="dropdown-header">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
<li class="dropdown-header">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>
<div class="col-sm-6">
<ul class="list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Support Home</a></li>
<li><a class="dropdown-item" href="#1">Ask the Experts</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">By Product</li>
<li><a class="active dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled">
<li class="dropdown-header">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>
</div>
</div>
</div>
</li>
Expand All @@ -810,37 +826,47 @@ <h3>Dropdown Examples</h3>
</a>
<ul aria-labelledby="navbarDropdownMenuLink3" class="dropdown-menu">
<div class="row">
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
<li class="dropdown-header">By Product</li>
<li><a class="dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-header">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
<li class="dropdown-header">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li class="dropdown-header">By Audience</li>
<li><a class="active dropdown-item" href="#1">For Home Users</a></li>
<li><a class="dropdown-item" href="#1">For Small Business</a></li>
<li><a class="dropdown-item" href="#1">For IT Professionals</a></li>
<li><a class="dropdown-item" href="#1">For Developers</a></li>
</ul>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-header">By Resource</li>
<li><a class="dropdown-item" href="#1">Support Home</a></li>
<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled Link</a></li>
<li><a class="dropdown-item" href="#1">Chat or Call</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">By Product</li>
<li><a class="dropdown-item" href="#1">Developing for the Platform</a></li>
<li><a class="dropdown-item" href="#1">Mastering Fundamentals</a></li>
<li><a class="dropdown-item" href="#1">Styling with Themes</a></li>
<li><a class="dropdown-item" href="#1">Managing Content</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-header">Popular Picks</li>
<li><a class="dropdown-item" href="#1">Error Messages</a></li>
<li><a class="dropdown-item" href="#1">Updates: Service Packs & Fixes</a></li>
<li><a class="dropdown-item" href="#1">Install, Upgrade, & Activate</a></li>
<li><a class="dropdown-item" href="#1">Regular Drivers</a></li>
<li><a class="dropdown-item" href="#1">Hardware Drivers</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Security</li>
<li><a class="dropdown-item" href="#1">Security Home</a></li>
<li><a class="dropdown-item" href="#1">Security Essentials</a></li>
<li><a class="dropdown-item" href="#1">Protecting Your Data</a></li>
<li><a class="dropdown-item" href="#1">Securing Your Browser</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled">
<li class="dropdown-header">By Audience</li>
<li><a class="active dropdown-item" href="#1">For Home Users</a></li>
<li><a class="dropdown-item" href="#1">For Small Business</a></li>
<li><a class="dropdown-item" href="#1">For IT Professionals</a></li>
<li><a class="dropdown-item" href="#1">For Developers</a></li>
</ul>
</div>
</div>
</ul>
</li>
Expand Down
70 changes: 70 additions & 0 deletions packages/clay/src/content/form_elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,76 @@ <h3>Read Only States</h3>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Autocomplete Text Field</h3>

<div class="alert alert-warning">This requires external javascript to populate and show / hide the <code>dropdown-menu</code>.</div>

<div class="sheet" style="height:255px;">
<div class="dropdown-full form-group">
<input class="form-control" type="text" value="Rob">
<ul class="dropdown-menu show">
<li>
<a class="dropdown-item" href="#1">Rob<strong>ert Downey Jr.</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">Rob<strong>ert Plant</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">Rob<strong>ert Baratheon</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">Rob<strong>ert De Niro</strong></a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Search Field</h3>

<div class="alert alert-warning">This requires external javascript to display the clear text button, clear the search input, to populate, and show / hide the <code>dropdown-menu</code>.</div>

<div class="sheet" style="height:255px;">
<div class="input-group">
<div class="dropdown-full input-group-item">
<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text" value="ele">
<span class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="submit">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
</svg>
</button>
<button class="btn btn-unstyled" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
</svg>
</button>
</span>
<ul class="dropdown-menu show">
<li>
<a class="dropdown-item" href="#1">ele<strong>ctric toothbrush</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">ele<strong>ctric kettle</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">ele<strong>ctric razor</strong></a>
</li>
<li>
<a class="dropdown-item" href="#1">ele<strong>ctrodes for tents</strong></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Form Element Sizes</h3>
Expand Down

0 comments on commit 3d5509e

Please sign in to comment.