Site: (liferay#481) Change info-circle-open icon in Quick Action Me…

…nu demos to `expand` because it's confusing
pat270 · Feb 9, 2018 · a748484 · a748484
1 parent 3d0249f
commit a748484
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 200 deletions.
diff --git a/packages/clay/src/content/grid.html b/packages/clay/src/content/grid.html
@@ -164,8 +164,8 @@ <h1 class="navbar-title navbar-text-truncate">Application</h1>
 									</svg>
 								</a>
 								<a class="quick-action-item" href="#1">
-									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+										<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 									</svg>
 								</a>
 							</div>
@@ -177,8 +177,7 @@ <h1 class="navbar-title navbar-text-truncate">Application</h1>
 								</a>
 								<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
 									<li><a class="dropdown-item" href="#1">Remove</a></li>
-									<li><a class="dropdown-item" href="#1">Edit</a></li>
-									<li><a class="dropdown-item" href="#1">Move</a></li>
+									<li><a class="dropdown-item" href="#1">Download</a></li>
 									<li><a class="dropdown-item" href="#1">Checkout</a></li>
 								</ul>
 							</div>

diff --git a/packages/clay/src/content/list_groups.html b/packages/clay/src/content/list_groups.html
@@ -56,8 +56,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -69,8 +69,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -113,8 +112,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -126,8 +125,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -169,8 +167,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -182,8 +180,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -236,8 +233,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -249,8 +246,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -293,8 +289,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -306,8 +302,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -388,8 +383,8 @@ <h4 class="list-group-title">
 							</svg>
 						</a>
 						<a class="quick-action-item" href="#1" role="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 							</svg>
 						</a>
 					</div>
@@ -401,8 +396,7 @@ <h4 class="list-group-title">
 						</a>
 						<ul aria-labelledby="" 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">Download</a></li>
 							<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 						</ul>
 					</div>
@@ -448,8 +442,8 @@ <h4 class="list-group-title">
 							</svg>
 						</a>
 						<a class="quick-action-item" href="#1" role="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 							</svg>
 						</a>
 					</div>
@@ -461,8 +455,7 @@ <h4 class="list-group-title">
 						</a>
 						<ul aria-labelledby="" 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">Download</a></li>
 							<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 						</ul>
 					</div>
@@ -573,8 +566,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -586,8 +579,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -633,8 +625,8 @@ <h4 class="list-group-title">
 					</svg>
 				</a>
 				<a class="quick-action-item" href="#1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 					</svg>
 				</a>
 			</div>
@@ -646,8 +638,7 @@ <h4 class="list-group-title">
 				</a>
 				<ul aria-labelledby="" 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">Download</a></li>
 					<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 				</ul>
 			</div>
@@ -658,68 +649,6 @@ <h4 class="list-group-title">
 	</div>
 </div>
 
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>List Group with Links and Buttons</h3>
-
-		<div class="list-group">
-			<a class="list-group-item list-group-item-action" href="#1">List Item 1</a>
-			<a class="list-group-item list-group-item-action" href="#1">List Item 2</a>
-			<button class="list-group-item list-group-item-action" type="button">List Item 3</button>
-			<a class="list-group-item list-group-item-action" href="#1">List Item 4</a>
-		</div>
-	</div>
-</div>
-
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>Contextual List Group</h3>
-
-<ul class="list-group">
-	<li class="list-group-item">List Item Normal</li>
-	<li class="list-group-item list-group-item-success">List Item Success</li>
-	<li class="list-group-item list-group-item-info">List Item Info</li>
-	<li class="list-group-item list-group-item-warning">List Item Warning</li>
-	<li class="list-group-item list-group-item-danger">List Item Danger</li>
-	<li class="list-group-item list-group-item-light">List Item Light</li>
-	<li class="list-group-item list-group-item-dark">List Item Dark</li>
-</ul>
-
-	</div>
-</div>
-
-<div class="clay-site-row-spacer row">
-	<div class="col-md-12">
-		<h3>Linked Contextual List Groups</h3>
-
-<div class="row">
-	<div class="col-sm-6">
-		<div class="list-group">
-			<a class="list-group-item list-group-item-action" href="#1">List Item Action Normal</a>
-			<a class="list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success</a>
-			<a class="list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info</a>
-			<a class="list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning</a>
-			<a class="list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger</a>
-			<a class="list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light</a>
-			<a class="list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark</a>
-		</div>
-	</div>
-	<div class="col-sm-6">
-		<div class="list-group">
-			<a class="active list-group-item list-group-item-action" href="#1">List Item Action Normal Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light Active</a>
-			<a class="active list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark Active</a>
-		</div>
-	</div>
-</div>
-
-	</div>
-</div>
-
 <div class="clay-site-row-spacer row">
 	<div class="col-md-12">
 		<h3>With Buttons</h3>
@@ -768,8 +697,8 @@ <h4 class="list-group-title">
 							</svg>
 						</button>
 						<button class="btn btn-unstyled quick-action-item" type="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 							</svg>
 						</button>
 					</div>
@@ -780,10 +709,9 @@ <h4 class="list-group-title">
 							</svg>
 						</button>
 						<ul aria-labelledby="" 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>
+							<li><button class="dropdown-item" type="button">Remove</button></li>
+							<li><button class="dropdown-item" type="button">Download</button></li>
+							<li><button class="dropdown-item" type="button">Checkout</button></li>
 						</ul>
 					</div>
 				</div>
@@ -826,8 +754,8 @@ <h4 class="list-group-title">
 							</svg>
 						</button>
 						<button class="btn btn-unstyled quick-action-item" type="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-expand">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#expand" />
 							</svg>
 						</button>
 					</div>
@@ -839,8 +767,7 @@ <h4 class="list-group-title">
 						</button>
 						<ul aria-labelledby="" 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">Download</a></li>
 							<li><a class="dropdown-item" href="#1" role="button">Checkout</a></li>
 						</ul>
 					</div>
@@ -850,6 +777,67 @@ <h4 class="list-group-title">
 	</div>
 </div>
 
+<div class="clay-site-row-spacer row">
+	<div class="col-md-12">
+		<h3>List Group with Links and Buttons</h3>
+
+		<div class="list-group">
+			<a class="list-group-item list-group-item-action" href="#1">List Item 1</a>
+			<a class="list-group-item list-group-item-action" href="#1">List Item 2</a>
+			<button class="list-group-item list-group-item-action" type="button">List Item 3</button>
+			<a class="list-group-item list-group-item-action" href="#1">List Item 4</a>
+		</div>
+	</div>
+</div>
+
+<div class="clay-site-row-spacer row">
+	<div class="col-md-12">
+		<h3>Contextual List Group</h3>
+
+<ul class="list-group">
+	<li class="list-group-item">List Item Normal</li>
+	<li class="list-group-item list-group-item-success">List Item Success</li>
+	<li class="list-group-item list-group-item-info">List Item Info</li>
+	<li class="list-group-item list-group-item-warning">List Item Warning</li>
+	<li class="list-group-item list-group-item-danger">List Item Danger</li>
+	<li class="list-group-item list-group-item-light">List Item Light</li>
+	<li class="list-group-item list-group-item-dark">List Item Dark</li>
+</ul>
+
+	</div>
+</div>
+
+<div class="clay-site-row-spacer row">
+	<div class="col-md-12">
+		<h3>Linked Contextual List Groups</h3>
+
+<div class="row">
+	<div class="col-sm-6">
+		<div class="list-group">
+			<a class="list-group-item list-group-item-action" href="#1">List Item Action Normal</a>
+			<a class="list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success</a>
+			<a class="list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info</a>
+			<a class="list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning</a>
+			<a class="list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger</a>
+			<a class="list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light</a>
+			<a class="list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark</a>
+		</div>
+	</div>
+	<div class="col-sm-6">
+		<div class="list-group">
+			<a class="active list-group-item list-group-item-action" href="#1">List Item Action Normal Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-success" href="#1">List Item Action Success Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-info" href="#1">List Item Action Info Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-warning" href="#1">List Item Action Warning Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-danger" href="#1">List Item Action Danger Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-light" href="#1">List Item Action Light Active</a>
+			<a class="active list-group-item list-group-item-action list-group-item-dark" href="#1">List Item Action Dark Active</a>
+		</div>
+	</div>
+</div>
+
+	</div>
+</div>
 
 <script>
 	$('.list-group .list-group-item input[type="checkbox"]').on(