chore(lint): fix style lint errors (#6370)

* chore(project): update ci-check to include stylelint * chore(lint): start style linting * chore(lint): lint through data-table core * chore(lint): fix style lint errors * chore(lint): clear rest of stylelint errors * chore(test): ignore react style errors * chore(lint): fix more linting errors * chore(lint): remove unused stylelint ignore * chore(lint): fix lint error Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jul 10, 2020 · ca941b1 · ca941b1
1 parent 0037736
commit ca941b1
Show file tree

Hide file tree

Showing 63 changed files with 440 additions and 387 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -14,6 +14,8 @@ packages/components/demo/**
 packages/components/tests/**
 packages/components/css/**
 packages/components/scss/**
+packages/components/src/components/date-picker/_flatpickr.scss
 
 # packages/react
 packages/react/storybook-static/**
+packages/react/src/components/**
diff --git a/packages/cli/src/commands/ci-check.js b/packages/cli/src/commands/ci-check.js
@@ -24,6 +24,7 @@ async function check(args, env) {
     'yarn format:diff',
     'yarn lint --quiet',
     'yarn lint:docs',
+    'yarn lint:styles',
     `yarn bundler check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`,
     `cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
     `cross-env BABEL_ENV=test yarn test:e2e --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,

diff --git a/packages/components/.stylelintignore b/packages/components/.stylelintignore
@@ -0,0 +1,7 @@
+# packages/components
+demo/**
+tests/**
+css/**
+scss/**
+src/components/date-picker/_flatpickr.scss
+
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -35,6 +35,7 @@
 
   .#{$prefix}--accordion__heading {
     @include button-reset;
+
     color: $text-01;
     display: flex;
     align-items: flex-start;
@@ -66,7 +67,7 @@
       outline: none;
     }
 
-    &:focus:before {
+    &:focus::before {
       @include focus-outline('outline-compat');
     }
   }
@@ -156,7 +157,7 @@
     }
 
     .#{$prefix}--accordion__arrow {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: rotate(-90deg);
       fill: $ui-05;
     }

diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -19,7 +19,9 @@
   .#{$prefix}--breadcrumb {
     @include reset;
     @include type-style('body-short-01');
+
     display: inline;
+
     @include carbon--breakpoint(md) {
       display: flex;
       flex-wrap: wrap;
@@ -71,6 +73,7 @@
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
+
     width: rem(100px);
     height: 1rem;
   }

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -24,7 +24,8 @@
   }
 
   .#{$prefix}--btn-set > .#{$prefix}--btn {
-    max-width: rem(196px); // 196px from design kit
+    // 196px from design kit
+    max-width: rem(196px);
     width: 100%;
   }
 
@@ -120,6 +121,7 @@
       currentColor,
       $active-ui
     );
+
     padding: $button-padding-ghost;
 
     .#{$prefix}--btn__icon {
@@ -276,6 +278,7 @@
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(150px);
   }
 }

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -49,6 +49,7 @@
   .#{$prefix}--checkbox-label {
     @include reset;
     @include type-style('body-short-01');
+
     line-height: 1.5rem;
     position: relative;
     display: flex;
@@ -59,7 +60,8 @@
   }
 
   .#{$prefix}--checkbox-label-text {
-    padding-left: rem(6px); // Add extra spacing when label is present
+    // Add extra spacing when label is present
+    padding-left: rem(6px);
   }
 
   // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
@@ -161,11 +163,6 @@
   // Disabled
   // ---------------------------------------------
 
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
-  }
-
   .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
   .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] {
     cursor: not-allowed;
@@ -191,9 +188,12 @@
 
   .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(100px);
     height: $spacing-05;
-    margin: auto 0 auto rem(6px); // Add extra spacing when label is present
+
+    // Add extra spacing when label is present
+    margin: auto 0 auto rem(6px);
   }
 }
 

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -55,12 +55,14 @@
 
     &::before {
       @include tooltip--caret;
+
       display: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
-      box-sizing: content-box;
       @include tooltip--content('icon');
+
+      box-sizing: content-box;
       clip: auto;
       margin: auto;
       overflow: visible;
@@ -95,6 +97,7 @@
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
+
     border: none;
     max-width: rem(760px);
     min-width: rem(320px);
@@ -117,8 +120,9 @@
   }
 
   .#{$prefix}--snippet--single pre {
-    white-space: nowrap;
     @include type-style('code-01');
+
+    white-space: nowrap;
     padding-right: $spacing-03;
   }
 
@@ -137,6 +141,7 @@
   // Multi Line Snippet
   .#{$prefix}--snippet--multi {
     @include bx--snippet;
+
     border: none;
     padding: $carbon--spacing-05;
     min-width: rem(320px);
@@ -200,6 +205,7 @@
 
   .#{$prefix}--snippet-button {
     @include reset;
+
     cursor: pointer;
     position: absolute;
     top: 0;
@@ -217,6 +223,7 @@
 
     &:focus {
       @include focus-outline('outline');
+
       outline-color: $focus;
     }
   }
@@ -238,7 +245,9 @@
 
   .#{$prefix}--btn--copy__feedback {
     @include type-style('body-short-01');
-    @include carbon--font-family('sans'); // Override one in code snippet
+    // Override one in code snippet
+    @include carbon--font-family('sans');
+
     z-index: z('overlay');
     font-weight: 400;
     left: inherit;
@@ -260,15 +269,16 @@
     position: absolute;
     top: 0;
     right: 0;
-    @include carbon--font-family(
-      'sans'
-    ); // Override inherited rule in code snippet
+
+    // Override inherited rule in code snippet
+    @include carbon--font-family('sans');
   }
 
   // Show more / less button
   button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
     @include type-style('body-short-01');
     @include carbon--font-family('sans');
+
     border: 0;
     display: inline-flex;
     align-items: center;
@@ -310,6 +320,7 @@
 
   .#{$prefix}--snippet-btn--expand:focus {
     @include focus-outline('outline');
+
     border-color: transparent;
   }
 
@@ -361,33 +372,32 @@
 
   .#{$prefix}--snippet.#{$prefix}--skeleton code {
     @include skeleton;
+
     width: 100%;
     height: 1rem;
     display: block;
   }
 
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    top: rem(
-      50.8px
-    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
+    // (The height of button) + (The height of the tooltip's triangle) + 4px
+    top: rem(50.8px);
     left: 50%;
     right: auto;
 
     &::before {
       top: 0;
     }
 
-    &:after {
+    &::after {
       top: rem(-4px);
     }
   }
 
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {
-    top: rem(
-      42.8px
-    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
+    // (The height of button) + (The height of the tooltip's triangle) + 4px
+    top: rem(42.8px);
   }
 
   .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
@@ -406,12 +416,9 @@
     height: rem(56px);
   }
 
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
   .#{$prefix}--snippet.#{$prefix}--skeleton span {
     @include skeleton;
+
     width: 100%;
     height: 1rem;
     display: block;
@@ -434,30 +441,6 @@
     .#{$prefix}--snippet-container {
     padding-bottom: 0;
   }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
 }
 
 @include exports('snippet') {

diff --git a/packages/components/src/components/code-snippet/_mixins.scss b/packages/components/src/components/code-snippet/_mixins.scss
@@ -12,6 +12,7 @@
 /// @group code-snippet
 @mixin bx--snippet {
   @include type-style('code-01');
+
   background: $snippet-background-color;
   border: 1px solid $snippet-border-color;
   position: relative;

diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss
@@ -30,13 +30,10 @@
     top: 1.2rem;
     left: 50%;
 
-    &:focus {
-      border: 2px solid red;
-    }
-
-    &:before {
+    &::before {
       @include box-shadow;
       @include type-style('body-short-01');
+
       top: 1.1rem;
       padding: $spacing-02;
       color: $inverse-01;
@@ -49,7 +46,7 @@
       z-index: 2;
     }
 
-    &:after {
+    &::after {
       top: 0.85rem;
       width: 0.6rem;
       height: 0.6rem;
@@ -61,8 +58,8 @@
       z-index: 1;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
       display: block;
       background: $inverse-02;
@@ -76,6 +73,7 @@
   // TODO: deprecate above styles
   .#{$prefix}--copy-btn {
     @include reset;
+
     position: relative;
     display: flex;
     justify-content: center;
@@ -93,12 +91,14 @@
 
     &::before {
       @include tooltip--caret;
+
       display: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
-      box-sizing: content-box;
       @include tooltip--content('icon');
+
+      box-sizing: content-box;
       clip: auto;
       margin: auto;
       overflow: visible;
@@ -109,6 +109,7 @@
 
     &:focus {
       @include focus-outline('outline');
+
       outline-color: $focus;
     }