From 08ca5206df862e78d8f1bb611c2c071d5252f03f Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 30 Jan 2020 16:34:05 -0500
Subject: [PATCH] [SASS] Change output style comments to non-rendered comments
 in invisibles files (#2807)

---
 CHANGELOG.md                               |  1 +
 src/global_styling/mixins/_beta_badge.scss | 12 +++++------
 src/global_styling/mixins/_button.scss     | 13 ++++++------
 src/global_styling/mixins/_form.scss       | 23 ++++++++++------------
 src/global_styling/mixins/_panel.scss      |  5 -----
 src/global_styling/mixins/_typography.scss |  4 ++--
 src/global_styling/variables/_form.scss    |  4 ++--
 7 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c912d58a23d..3e346240b73 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `tableCaption` prop to `EuiBasicTable` and improved the default one ([#2782](https://github.com/elastic/eui/pull/2782))
+- Changed SASS comments to non-compiled comments in invisibles files ([#2807](https://github.com/elastic/eui/pull/2807))
 
 ## [`18.3.0`](https://github.com/elastic/eui/tree/v18.3.0)
 
diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss
index 355fb7359b1..538bbf24047 100644
--- a/src/global_styling/mixins/_beta_badge.scss
+++ b/src/global_styling/mixins/_beta_badge.scss
@@ -1,13 +1,11 @@
 
-/**
- * 1. Extend beta badges to at least 40% of the container's width
- * 2. Fix for IE to ensure badges are visible outside of a <button> tag
- */
+// 1. Extend beta badges to at least 40% of the container's width
+// 2. Fix for IE to ensure badges are visible outside of a <button> tag
 
 @mixin euiHasBetaBadge($selector, $spacing: $euiSize) {
   #{$selector}--hasBetaBadge {
     position: relative;
-    overflow: visible; /* 2 */
+    overflow: visible; // 2
 
     #{$selector}__betaBadgeWrapper {
       position: absolute;
@@ -15,12 +13,12 @@
       left: 50%;
       transform: translateX(-50%);
       z-index: 3; // get above abs positioned image
-      min-width: 40%; /* 1 */
+      min-width: 40%; // 1
       max-width: calc(100% - #{($spacing * 2)});
 
       .euiToolTipAnchor,
       #{$selector}__betaBadge {
-        width: 100%; /* 1 */
+        width: 100%; // 1
       }
 
       #{$selector}__betaBadge {
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index d1613bee342..41593f84177 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -33,10 +33,9 @@
   }
 }
 
-/**
- * 1. Apply margin to all but last item in the flex.
- * 2. Margin gets flipped because of the row-reverse.
- */
+// 1. Apply margin to all but last item in the flex.
+// 2. Margin gets flipped because of the row-reverse.
+
 @mixin euiButtonContent($isReverse: false) {
   height: 100%;
   width: 100%;
@@ -51,8 +50,8 @@
     flex-direction: row-reverse;
 
     > * + * {
-      margin-left: 0; /* 1 */
-      margin-right: $euiSizeS; /* 1 */
+      margin-left: 0; // 1, 2
+      margin-right: $euiSizeS; // 1, 2
     }
   } @else {
     display: flex;
@@ -60,7 +59,7 @@
     align-items: center;
 
     > * + * {
-      margin-left: $euiSizeS; /* 1 */
+      margin-left: $euiSizeS; // 1
     }
   }
 }
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index 56b0e87bab1..5f26419aa72 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -65,10 +65,6 @@
   );
 }
 
-/**
- * 3. Must supply both values to background-size or some browsers apply the single value to both directions
- */
-
 @mixin euiFormControlText {
   @include euiFont;
   font-size: $euiFontSizeS;
@@ -129,11 +125,13 @@
   }
 }
 
+// 1. Must supply both values to background-size or some browsers apply the single value to both directions
+
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
   // sass-lint:disable-block indentation
   background-color: $euiFormBackgroundColor;
   background-repeat: no-repeat;
-  background-size: 0% 100%; /* 3 */
+  background-size: 0% 100%; // 1
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -161,7 +159,7 @@
   // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
-  background-size: 100% 100%; /* 3 */
+  background-size: 100% 100%; // 1
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -198,9 +196,8 @@
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 }
 
-/**
- * 4. Override invalid state with focus state.
- */
+
+// 2. Override invalid state with focus state.
 
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
   @include euiFormControlSize($includeAlternates: $includeSizes);
@@ -212,11 +209,11 @@
   padding: $euiFormControlPadding;
 
   @if ($includeStates) {
-    &:invalid { /* 4 */
+    &:invalid { // 2
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 4 */
+    &:focus { // 2
       @include euiFormControlFocusStyle;
     }
 
@@ -248,11 +245,11 @@
   border-radius: $euiFormControlCompressedBorderRadius;
 
   @if ($includeStates) {
-    &:invalid { /* 4 */
+    &:invalid { // 2
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 4 */
+    &:focus { // 2
       @include euiFormControlFocusStyle($borderOnly: true);
     }
 
diff --git a/src/global_styling/mixins/_panel.scss b/src/global_styling/mixins/_panel.scss
index 0382d1dae15..9ba878ed4ab 100644
--- a/src/global_styling/mixins/_panel.scss
+++ b/src/global_styling/mixins/_panel.scss
@@ -1,8 +1,3 @@
-/**
- *  Mixin for use in:
- *  - EuiCard
- *  - EuiPageContent
-*/
 @mixin euiPanel($selector) {
   @if variable-exists(selector) == false {
     @error 'A $selector must be provided to @mixin euiPanel().';
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 18d86ffb6b6..d668df1e4f1 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -116,11 +116,11 @@
 
 @mixin euiTextTruncate {
   // sass-lint:disable-block no-important
-  max-width: 100%; /* 1 */
+  max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
-  word-wrap: normal !important; /* 2 */
+  word-wrap: normal !important; // 2
 }
 
 @mixin euiNumberFormat {
diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
index 8ca5570bfde..92fe4fb6358 100644
--- a/src/global_styling/variables/_form.scss
+++ b/src/global_styling/variables/_form.scss
@@ -39,8 +39,8 @@ $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackgroun
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
 
 // Control Layout
-$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default; /* 1 */
-$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default; /* 1 */
+$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
+$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
 $euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;
 
 // Range