Merge pull request #549 from pat270/clay-547

(#547) sheet-subtitle can contain an "add button" right aligned
liferay · Feb 13, 2018 · 6b37ed5 · 6b37ed5
2 parents f5957a1 + 00325e3
commit 6b37ed5
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 1 deletion.
diff --git a/packages/clay/src/content/sheet.html b/packages/clay/src/content/sheet.html
@@ -18,6 +18,41 @@ <h2 class="sheet-title">Sheet Title</h2>
 			</div>
 			<div class="sheet-section">
 				<h3 class="sheet-subtitle">Sheet Subtitle</h3>
+				<h3 class="autofit-row sheet-subtitle">
+					<span class="autofit-col autofit-col-expand">
+						<span class="heading-text">Sheet Subtitle 2</span>
+					</span>
+				</h3>
+				<h3 class="autofit-row sheet-subtitle">
+					<span class="autofit-col autofit-col-expand">
+						<span class="heading-text">Sheet Subtitle 3 with Button and ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span>
+					</span>
+					<span class="autofit-col">
+						<span class="heading-end">
+							<button class="btn btn-secondary btn-sm">Add</button>
+						</span>
+					</span>
+				</h3>
+				<h3 class="autofit-row autofit-float sheet-subtitle">
+					<span class="autofit-col">
+						<span class="heading-start">
+							<a class="component-action" href="#1">
+								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-link">
+									<use xlink:href="{{rootPath}}/images/icons/icons.svg#link" />
+								</svg>
+							</a>
+						</span>
+					</span>
+					<span class="autofit-col autofit-col-expand">
+						<span class="heading-text">Sheet Subtitle 4 with Autofit Float</span>
+					</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>
+						</span>
+					</span>
+				</h3>
 				<h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
 				<div class="sheet-text">Sheet Subtitle and Sheet Tertiary Title are contained inside a sheet-section.</div>
 			</div>

diff --git a/packages/clay/src/scss/components/_sheets.scss b/packages/clay/src/scss/components/_sheets.scss
@@ -106,6 +106,14 @@
 		margin-bottom: $sheet-subtitle-margin-bottom-mobile;
 	}
 
+	&.autofit-row {
+		padding-bottom: 0;
+
+		.autofit-col {
+			margin-bottom: $sheet-subtitle-padding-y;
+		}
+	}
+
 	&.collapse-icon {
 		padding-left: $sheet-subtitle-collapse-icon-padding-left;
 		padding-right: $sheet-subtitle-collapse-icon-padding-right;
@@ -118,6 +126,11 @@
 		right: $sheet-subtitle-collapse-icon-right;
 		top: $sheet-subtitle-collapse-icon-top;
 	}
+
+	.heading-text {
+		margin-bottom: $sheet-subtitle-heading-text-margin-bottom;
+		margin-top: $sheet-subtitle-heading-text-margin-top;
+	}
 }
 
 a.sheet-subtitle {

diff --git a/packages/clay/src/scss/components/_tbar.scss b/packages/clay/src/scss/components/_tbar.scss
@@ -10,6 +10,8 @@
 .tbar-nav {
 	@extend %autofit-row;
 
+	margin-bottom: 0;
+
 	> .tbar-item {
 		justify-content: center;
 	}

diff --git a/packages/clay/src/scss/components/_utilities.scss b/packages/clay/src/scss/components/_utilities.scss
@@ -36,7 +36,6 @@
 
 	@include list-unstyled;
 
-	margin-bottom: 0;
 	width: 100%;
 }
 
@@ -113,6 +112,21 @@
 	@extend %autofit-float-sm-down;
 }
 
+// Headings (h1-6)
+
+.heading-start {
+	margin-right: $heading-spacer-x;
+}
+
+.heading-end {
+	margin-left: $heading-spacer-x;
+}
+
+.heading-text {
+	margin-bottom: $heading-text-margin-bottom;
+	margin-top: $heading-text-margin-top;
+}
+
 // Inline Scroller
 
 .inline-scroller {

diff --git a/packages/clay/src/scss/variables/_sheets.scss b/packages/clay/src/scss/variables/_sheets.scss
@@ -66,6 +66,9 @@ $sheet-subtitle-text-transform: uppercase !default;
 $sheet-subtitle-font-size-mobile: null !default;
 $sheet-subtitle-margin-bottom-mobile: null !default;
 
+$sheet-subtitle-heading-text-margin-bottom: 0 !default;
+$sheet-subtitle-heading-text-margin-top: null !default;
+
 // Sheet Subtitle as Panel Header
 
 $sheet-subtitle-link-color: $sheet-subtitle-color !default;

diff --git a/packages/clay/src/scss/variables/_utilities.scss b/packages/clay/src/scss/variables/_utilities.scss
@@ -5,6 +5,13 @@ $inline-scroller-max-height: 125px !default;
 
 $autofit-col-expand-min-width: 3.125rem !default; // 50px
 
+// Heading
+
+$heading-spacer-x: 1rem; // 16px
+
+$heading-text-margin-bottom: auto;
+$heading-text-margin-top: auto;
+
 // Inline Item
 
 $inline-item-lexicon-icon-margin-top: -0.21429em !default;