Merge pull request #689 from pat270/clay-688

#688 Autocomplete Text Field and Search Field markup
liferay · Mar 5, 2018 · d7492bc · d7492bc
2 parents 51a7fc5 + 3d5509e
commit d7492bc
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 90 deletions.
diff --git a/packages/clay/src/content/dropdowns.html b/packages/clay/src/content/dropdowns.html
@@ -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>
@@ -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>
@@ -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>

diff --git a/packages/clay/src/content/form_elements.html b/packages/clay/src/content/form_elements.html
@@ -318,6 +318,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>

diff --git a/packages/clay/src/scss/atlas/variables/_type.scss b/packages/clay/src/scss/atlas/variables/_type.scss
@@ -0,0 +1,3 @@
+$b-font-weight: $font-weight-semi-bold !default;
+
+$strong-font-weight: $font-weight-semi-bold !default;
diff --git a/packages/clay/src/scss/components/_dropdowns.scss b/packages/clay/src/scss/components/_dropdowns.scss
@@ -349,12 +349,10 @@
 
 %dropdown-full-wide-dropdown-menu {
 	max-width: none;
-	padding: 5px 0;
 	width: 100%;
 
 	@include media-breakpoint-up(md) {
 		max-height: none;
-		padding: 20px 0;
 		width: 100%;
 	}
 }

diff --git a/packages/clay/src/scss/components/_type.scss b/packages/clay/src/scss/components/_type.scss
@@ -58,6 +58,14 @@ h6,
 	}
 }
 
+b {
+	font-weight: $b-font-weight;
+}
+
+strong {
+	font-weight: $strong-font-weight;
+}
+
 // Reference Mark
 
 .reference-mark {

diff --git a/packages/clay/src/scss/variables/_type.scss b/packages/clay/src/scss/variables/_type.scss
@@ -1,2 +1,6 @@
+$b-font-weight: null !default;
+
+$strong-font-weight: null !default;
+
 $reference-mark-font-size: 0.75rem !default;
 $reference-mark-vertical-align: super !default;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		$b-font-weight: $font-weight-semi-bold !default;

		$strong-font-weight: $font-weight-semi-bold !default;