Merge pull request #978 from liferay/develop

v2.1.7
liferay · Jun 8, 2018 · f91f880 · f91f880
2 parents ffa0f75 + 053b022
commit f91f880
Show file tree

Hide file tree

Showing 51 changed files with 502 additions and 261 deletions.
diff --git a/packages/clay-button/src/ClayButton.js b/packages/clay-button/src/ClayButton.js
@@ -148,6 +148,15 @@ ClayButton.STATE = {
 		'primary'
 	),
 
+	/**
+	 * The title attribute of the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?(string|undefined)}
+	 */
+	title: Config.string(),
+
 	/**
 	 * The type attribute value of the element.
 	 * @default button

diff --git a/packages/clay-button/src/ClayButton.soy b/packages/clay-button/src/ClayButton.soy
@@ -17,6 +17,7 @@
 	{@param? size: string}
 	{@param? spritemap: string}
 	{@param? style: string}
+	{@param? title: string}
 	{@param? type: string}
 	{@param? value: string}
 
@@ -65,6 +66,10 @@
 			name="{$name}"
 		{/if}
 
+		{if $title}
+			title="{$title}"
+		{/if}
+
 		{if $value}
 			value="{$value}"
 		{/if}

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
@@ -17,7 +17,7 @@ exports[`ClayFileCard should render a ClayFileCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
@@ -41,7 +41,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
@@ -10,7 +10,7 @@ exports[`ClayImageCard should render a ClayImageCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
@@ -16,7 +16,7 @@ exports[`ClayUserCard should render a ClayUserCard with actionItems 1`] = `
       </div>
       <div class="autofit-col">
         <div class="dropdown dropdown-action">
-          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" type="button">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn component-action btn-unstyled" title="actions" type="button">
             <svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false">
               <title>ellipsis-v</title>
               <use xlink:href="icons.svg#ellipsis-v"></use>

diff --git a/packages/clay-css/src/images/icons/environment-connected.svg b/packages/clay-css/src/images/icons/environment-connected.svg
diff --git a/packages/clay-css/src/images/icons/environment-disconnected.svg b/packages/clay-css/src/images/icons/environment-disconnected.svg
diff --git a/packages/clay-css/src/images/icons/environment.svg b/packages/clay-css/src/images/icons/environment.svg
diff --git a/packages/clay-css/src/images/icons/list-ol.svg b/packages/clay-css/src/images/icons/list-ol.svg
diff --git a/packages/clay-css/src/images/icons/oauth.svg b/packages/clay-css/src/images/icons/oauth.svg
diff --git a/packages/clay-css/src/images/icons/open-id.svg b/packages/clay-css/src/images/icons/open-id.svg
diff --git a/packages/clay-css/src/images/icons/third-party.svg b/packages/clay-css/src/images/icons/third-party.svg
diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -4,6 +4,7 @@ $table-hover-bg: lighten($component-active-bg, 44.90) !default;
 $table-border-color: lighten(saturate(adjust-hue($secondary, 3), 6.13), 46.08) !default;
 $table-font-size: 0.875rem !default;
 
+$table-head-bg: #FFF !default;
 $table-head-border-bottom-width: 1px !default;
 $table-head-color: $secondary !default;
 $table-head-font-weight: $font-weight-semi-bold !default;
@@ -61,6 +62,8 @@ $table-list-active-bg: $table-list-hover-bg !default;
 $table-list-border-color: lighten(saturate(adjust-hue($secondary, 3), 6.13), 46.08) !default;
 $table-list-color: $body-color !default;
 
+$table-list-head-bg: #FFF !default;
+
 $table-list-link-color: $secondary !default;
 
 $table-list-divider-padding-x: 0.75rem !default; // 12px

diff --git a/packages/clay-css/src/scss/components/_cards.scss b/packages/clay-css/src/scss/components/_cards.scss
@@ -448,6 +448,10 @@
 	@include clay-card-type-asset-variant($file-card);
 }
 
+.user-card {
+	@include clay-card-type-asset-variant($user-card);
+}
+
 // Card Type Directory
 
 .card-type-directory {

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -28,6 +28,8 @@ th {
 	thead {
 		td,
 		th {
+			// Webkit rendering issue with responsive-tables
+			background-color: $table-head-bg;
 			border-bottom-width: $table-head-border-bottom-width;
 			border-top-width: $table-head-border-top-width;
 		}
@@ -68,6 +70,15 @@ th {
 		}
 	}
 
+	tbody,
+	tfoot {
+		td,
+		th {
+			// Webkit rendering issue with responsive-tables
+			background-color: $table-bg;
+		}
+	}
+
 	.autofit-col {
 		justify-content: center;
 		padding-left: $table-cell-padding;
@@ -131,6 +142,39 @@ th {
 	}
 }
 
+// Table Striped
+
+.table-striped {
+	tbody tr:nth-of-type(odd) {
+		td,
+		th {
+			background-color: $table-accent-bg;
+		}
+	}
+}
+
+// Table Hover
+
+.table-hover {
+	tbody tr {
+		@include hover {
+			td,
+			th {
+				background-color: $table-hover-bg;
+			}
+		}
+	}
+}
+
+// Table Active
+
+.table .table-active {
+	> td,
+	> th {
+		background-color: $table-active-bg;
+	}
+}
+
 // Table Title
 
 .table-title {
@@ -156,8 +200,6 @@ th {
 // Table List Skin
 
 .table-list {
-	background-color: $table-list-bg;
-
 	@include border-radius($table-list-border-radius);
 
 	color: $table-list-color;
@@ -243,6 +285,7 @@ th {
 	thead {
 		td,
 		th {
+			// Webkit rendering issue with responsive-tables
 			background-color: $table-list-head-bg;
 			border-width: 0;
 			font-size: $table-list-head-font-size;
@@ -260,6 +303,8 @@ th {
 	tfoot {
 		td,
 		th {
+			// Webkit rendering issue with responsive-tables
+			background-color: $table-list-bg;
 			border-width: 0;
 			vertical-align: middle;
 		}
@@ -291,14 +336,20 @@ th {
 
 .table-list.table-striped {
 	tbody tr:nth-of-type(odd) {
-		background-color: $table-list-accent-bg;
+		td,
+		th {
+			background-color: $table-list-accent-bg;
+		}
 	}
 }
 
 .table-list.table-hover {
 	tbody tr {
 		@include hover {
-			background-color: $table-list-hover-bg;
+			td,
+			th {
+				background-color: $table-list-hover-bg;
+			}
 		}
 	}
 }