chore: integrate new stylelint config and fix issues

ISSUES CLOSED: #1526
GetTerminus · Jun 21, 2019 · f9d7a5e · f9d7a5e
1 parent 43025e2
commit f9d7a5e
Show file tree

Hide file tree

Showing 57 changed files with 4,711 additions and 2,985 deletions.
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/demo/app/components/button/button.module.ts b/demo/app/components/button/button.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { TsButtonModule } from '@terminus/ui/button';
 import { TsCardModule } from '@terminus/ui/card';
@@ -13,6 +14,7 @@ import { ButtonComponent } from './button.component';
   imports: [
     ButtonRoutingModule,
     CommonModule,
+    FlexLayoutModule,
     FormsModule,
     TsButtonModule,
     TsCardModule,

diff --git a/demo/app/components/spacing/spacing-styles.component.html b/demo/app/components/spacing/spacing-styles.component.html
@@ -16,7 +16,7 @@
 </div>
 
 <div class="box box--default--0">
-  padding: spacing()
+  padding: spacing(default)
 </div>
 
 <div class="box box--large--0">

diff --git a/package.json b/package.json
@@ -56,8 +56,8 @@
     "lint:eslint": "npx eslint \"terminus-ui/**/*.{js,ts}\" --ignore-pattern \"terminus-ui/**/*.d.ts\" --config .eslintrc.js",
     "lint:eslint:fix": "npx eslint \"terminus-ui/**/*.{js,ts}\" --ignore-pattern \"terminus-ui/**/*.d.ts\" --config .eslintrc.js --fix",
     "lint:eslint:ci": "npx eslint \"terminus-ui/**/*.{js,ts}\" --ignore-pattern \"terminus-ui/**/*.d.ts\" --config .eslintrc.ci.js",
-    "lint:scss": "npx stylelint 'terminus-ui/**/*.scss'",
-    "lint:scss:fix": "npx stylelint 'terminus-ui/**/*.scss' --fix",
+    "lint:scss": "npx stylelint 'terminus-ui/**/!(*.spec).scss'",
+    "lint:scss:fix": "npx stylelint 'terminus-ui/**/!(*.spec).scss' --fix",
     "lint": "yarn run lint:tslint:fix && yarn run lint:eslint:fix && yarn run lint:scss:fix",
     "lint:ci": "yarn run lint:tslint:ci && yarn run lint:eslint:ci && yarn run lint:scss",
     "codecov:upload": "npx codecov -f coverage/*.json",
@@ -98,7 +98,7 @@
       "yarn run lint:eslint:fix",
       "git add"
     ],
-    "terminus-ui/**/*.scss": [
+    "terminus-ui/**/!(*.spec).scss": [
       "yarn run lint:scss",
       "git add"
     ]
@@ -202,6 +202,7 @@
     "@semantic-release/npm": "^5.1.4",
     "@semantic-release/release-notes-generator": "^7.1.4",
     "@terminus/eslint-config-frontend": "^1.0.3",
+    "@terminus/stylelint-config-frontend": "^1.0.1",
     "@terminus/tslint-config-frontend": "^1.0.3",
     "@types/jest": "^23.3.13",
     "@types/node": "^10.12.19",
@@ -261,7 +262,7 @@
     "scssfmt": "^1.0.6",
     "semantic-release": "^15.13.3",
     "source-map-explorer": "^1.6.0",
-    "stylelint": "^9.10.1",
+    "stylelint": "^10.0.1",
     "stylelint-order": "^2.0.0",
     "systemjs": "^0.21.4",
     "tsickle": "^0.34.0",

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -0,0 +1 @@
+module.exports = {extends: '@terminus/stylelint-config-frontend'}
diff --git a/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-panel.component.scss b/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-panel.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 @import './../../../scss/helpers/menu';
 @import './../../../scss/helpers/shadows';
 @import './../../../scss/helpers/a11y';

diff --git a/terminus-ui/autocomplete/src/autocomplete.component.scss b/terminus-ui/autocomplete/src/autocomplete.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 @import './../../scss/helpers/animation';
 @import './../../scss/helpers/color';
 @import './../../scss/helpers/layout';

diff --git a/terminus-ui/button/src/button.component.scss b/terminus-ui/button/src/button.component.scss
@@ -9,13 +9,12 @@
 // This makes the bottom padding space look better than the default 36px
 $button-line-height: 35px;
 $rotation: 360deg;
-// NOTE: All transition durations are based off of the content transition. We should only need to
-// adjust this value.
+// NOTE: All transition durations are based off of the content transition. We should only need to adjust this value.
 $content-transition-duration: 500ms;
-$icon-transition-duration-collapse: $content-transition-duration - 100ms; // 400
-$icon-transition-duration-expand: $icon-transition-duration-collapse - 100ms; // 300
-$label-transition-duration: $icon-transition-duration-expand - 100ms; // 200
-$color-transition-duration: $label-transition-duration - 100ms; // 100
+$icon-transition-duration-collapse: $content-transition-duration - 100ms;
+$icon-transition-duration-expand: $icon-transition-duration-collapse - 100ms;
+$label-transition-duration: $icon-transition-duration-expand - 100ms;
+$color-transition-duration: $label-transition-duration - 100ms;
 
 $color-transition: color $color-transition-duration $g-easing;
 // FIXME: This exact transition is needed in the link styles (when inside a menu, links emulate
@@ -25,8 +24,10 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 
 // Styles applied when the button is collapsed
 @mixin collapsed {
-  padding-left: 6px;
-  padding-right: 6px;
+  $collapsed-padding: 6px;
+
+  padding-left: $collapsed-padding;
+  padding-right: $collapsed-padding;
 
   .c-icon {
     margin-left: 0;
@@ -70,6 +71,13 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
     // stylelint-enable declaration-no-important
     will-change: background, color, contents;
   }
+
+  // Target instances nested inside the TsSearchComponent
+  .ts-search & {
+    // Offset to account for space under input for error messages
+    position: relative;
+    top: -#{spacing(small)};
+  }
 }
 
 
@@ -92,15 +100,20 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
   // Class added when progress indicator is shown
   &.c-button--progress {
     .mat-button-wrapper {
-      padding-right: 36px;
+      $custom-progress-padding: 36px;
+
+      padding-right: $custom-progress-padding;
     }
   }
 
   // Adjust icon vertical layout
   .c-icon {
-    margin-right: .2em;
+    $horizontal-alignment-fix: .2em;
+    $vertical-alignment-fix: -.15em;
+
+    margin-right: $horizontal-alignment-fix;
     // Fix small vertical aligment issue between icon & text
-    margin-top: -.15em;
+    margin-top: $vertical-alignment-fix;
     transition: transform $icon-transition-duration-expand $g-easing;
     vertical-align: middle;
     will-change: transform;
@@ -163,7 +176,9 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 
         // Fix left alignment when the icon is the first item
         .c-icon {
-          margin-left: -.15em;
+          $first-icon-adjustment: -.15em;
+
+          margin-left: $first-icon-adjustment;
         }
 
         .c-button__content {
@@ -201,14 +216,8 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
       }
     }
   }
-}
-
-
 
-
-//
-// Target button instances nested inside a TsMenuComponent
-.c-button {
+  // Target button instances nested inside a TsMenuComponent
   .mat-menu-panel & {
     // needed for specificity
     &.c-button {
@@ -228,13 +237,3 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
     }
   }
 }
-
-
-// Target instances nested inside the TsSearchComponent
-.ts-button {
-  .ts-search & {
-    // Offset to account for space under input for error messages
-    position: relative;
-    top: -#{spacing(small)};
-  }
-}
diff --git a/terminus-ui/card/src/card.component.scss b/terminus-ui/card/src/card.component.scss
@@ -126,7 +126,6 @@
 // Class added when padding needed on the right for icon or utility menu
 .c-card--right-spacing {
   .c-card__inner {
-    $padding: spacing(large) + spacing(large, 4);
     padding-right: spacing(large, 4);
   }
 }
@@ -158,12 +157,14 @@
   }
 }
 
-// Hack for managing overlay when a table is nested in a card
+// HACK: Manage overlay when a table is nested in a card
 .c-card__inner {
-  .ts-table ~ .ts-loading-overlay {
-    .c-loading-overlay {
-      left: -(spacing(large));
-      right: -(spacing(large));
+  .ts-table {
+    ~ .ts-loading-overlay {
+      .c-loading-overlay {
+        left: -(spacing(large));
+        right: -(spacing(large));
+      }
     }
   }
 }
diff --git a/terminus-ui/checkbox/src/checkbox.component.scss b/terminus-ui/checkbox/src/checkbox.component.scss
@@ -36,7 +36,7 @@ $ts-select-item-height: 3em !default;
     // Match the material button line-height and spacing
     .c-checkbox {
       line-height: 3em;
-      padding: 0 spacing();
+      padding: 0 spacing(default);
     }
 
     // Support text truncation
@@ -64,7 +64,7 @@ $ts-select-item-height: 3em !default;
     // Match the material button line-height and spacing
     .c-checkbox {
       line-height: 2em;
-      padding: 0 spacing();
+      padding: 0 spacing(default);
     }
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = {extends: '@terminus/stylelint-config-frontend'}