chore(lint): fix style lint errors

.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/**

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`,

packages/components/.stylelintignore

@@ -0,0 +1,7 @@
+# packages/components
+demo/**
+tests/**
+css/**
+scss/**
+src/components/date-picker/_flatpickr.scss
+

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;
  }

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;
  }

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);
  }
 }

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);
  }
 }
 

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') {

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;

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;
  }