From bbde2ec1fac09abfefda6484c89c50e7b7cac093 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Wed, 29 Jan 2020 11:37:46 -0800
Subject: [PATCH] feat(clay-css): Label adds `.c-inner` pattern for `.label`,
 `.label-lg`, and `.label-item`

feat(clay-css): Mixins `label-size` add `.c-inner` pattern

issue #2763
---
 .../clay-css/src/scss/components/_labels.scss | 22 +++++++++++++++++++
 .../clay-css/src/scss/mixins/_labels.scss     | 13 +++++++++++
 2 files changed, 35 insertions(+)

diff --git a/packages/clay-css/src/scss/components/_labels.scss b/packages/clay-css/src/scss/components/_labels.scss
index 125f7c3f58..e3200e4ff8 100644
--- a/packages/clay-css/src/scss/components/_labels.scss
+++ b/packages/clay-css/src/scss/components/_labels.scss
@@ -37,6 +37,20 @@
 		}
 	}
 
+	@if ($enable-c-inner) {
+		> .c-inner {
+			display: inline-flex;
+			margin-bottom: math-sign($label-padding-y);
+			margin-left: math-sign($label-padding-x);
+			margin-right: math-sign($label-padding-x);
+			margin-top: math-sign($label-padding-y);
+			padding-bottom: $label-padding-y;
+			padding-left: $label-padding-x;
+			padding-right: $label-padding-x;
+			padding-top: $label-padding-y;
+		}
+	}
+
 	// Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
 	// pattern instead
 	.inline-item {
@@ -126,6 +140,14 @@ button.label {
 		display: inline-flex;
 	}
 
+	@if ($enable-c-inner) {
+		.c-inner {
+			.lexicon-icon {
+				display: block;
+			}
+		}
+	}
+
 	.close {
 		@include clay-close($label-close);
 	}
diff --git a/packages/clay-css/src/scss/mixins/_labels.scss b/packages/clay-css/src/scss/mixins/_labels.scss
index f0048231be..0776375ee8 100644
--- a/packages/clay-css/src/scss/mixins/_labels.scss
+++ b/packages/clay-css/src/scss/mixins/_labels.scss
@@ -115,6 +115,19 @@
 	.sticker-overlay {
 		border-radius: $sticker-border-radius;
 	}
+
+	@if ($enable-c-inner) {
+		> .c-inner {
+			margin-bottom: math-sign($padding-y);
+			margin-left: math-sign($padding-x);
+			margin-right: math-sign($padding-x);
+			margin-top: math-sign($padding-y);
+			padding-bottom: $padding-y;
+			padding-left: $padding-x;
+			padding-right: $padding-x;
+			padding-top: $padding-y;
+		}
+	}
 }
 
 /// A mixin for creating `.label` color variants.