chore(styles): remove v10 deprecated styles for v11 (#11045)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 27, 2022 · 779f223 · 779f223
1 parent 008a7df
commit 779f223
Show file tree

Hide file tree

Showing 15 changed files with 43 additions and 157 deletions.
diff --git a/docs/migration/v11.md b/docs/migration/v11.md
@@ -583,7 +583,7 @@ exports have changed or removed.
 
 | v10                             | v11                                     |
 | :------------------------------ | :-------------------------------------- |
-| `$base-font-size`               | TODO                                    |
+| `$base-font-size`               | Moved to `scss/utilities/_convert.scss` |
 | `@function rem`                 | Moved to `scss/utilities/_convert.scss` |
 | `@function em`                  | Moved to `scss/utilities/_convert.scss` |
 | `@mixin type-style`             | No changes                              |
@@ -1795,33 +1795,33 @@ were importing `@carbon/type/scss/styles` in v10 you would now only import
 
 **Sass API**
 
-| Filename                              | v10                                  | v11                                  |
-| ------------------------------------- | ------------------------------------ | ------------------------------------ |
-| `scss/index.scss`                     |                                      | Removed, use `@carbon/type` directly |
-| `scss/type.scss`                      |                                      | Removed, use `@carbon/type` directly |
-| `scss/_classes.scss`                  | `@mixin carbon--type-classes`        | Renamed to `@mixin type-classes`     |
-| `scss/font-face/_mono.scss`           | `@mixin carbon--font-face-mono`      | TODO                                 |
-| `scss/font-face/_sans-condensed.scss` | `@mixin carbon--font-face-condensed` | TODO                                 |
-| `scss/font-face/_sans.scss`           | `@mixin carbon--font-face-sans`      | TODO                                 |
-| `scss/font-face/_serif.scss`          | `@mixin carbon--font-face-serif`     | TODO                                 |
-| `scss/font-face/_settings.scss`       | `$carbon--font-display`              | TODO                                 |
-| `scss/_font-family.scss`              | `$carbon--font-families`             | Renamed to `$font-families`          |
-|                                       | `@function carbon--font-family`      | Renamed to `@function font-family`   |
-|                                       | `@mixin carbon--font-family`         | Renamed to `@mixin font-family`      |
-|                                       | `$carbon--font-weights`              | Renamed to `$font-weights`           |
-|                                       | `@function carbon--font-weight`      | Renamed to `@function font-weight`   |
-|                                       | `@mixin carbon--font-weight`         | Renamed to `@mixin font-weight`      |
-| `scss/_prefix.scss`                   |                                      | No Changes                           |
-| `scss/_reset.scss`                    | `@mixin carbon--default-type`        | Renamed to `@mixin default-type`     |
-|                                       | `@mixin carbon--type-reset`          | Renamed to `@mixin type-reset`       |
-| `scss/_scale.scss`                    | `@function carbon--get-type-size`    | Removed, use `type-scale` instead    |
-|                                       | `$carbon--type-scale`                | Renamed to `$type-scale`             |
-|                                       | `@function carbon--type-scale`       | Renamed to `@function type-scale`    |
-|                                       | `@mixin carbon--type-scale`          | Renamed to `@mixin type-scale`       |
-|                                       | `@mixin carbon--font-size`           | Renamed to `@mixin font-size`        |
-| `scss/_styles.scss`                   | `@mixin carbon--type-style`          | Renamed to `@mixin type-style`       |
-| `scss/_styles.scss`                   | `$caption-01`                        | Removed                              |
-|                                       | `$caption-02`                        | Removed                              |
+| Filename                              | v10                                  | v11                                                                           |
+| ------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| `scss/index.scss`                     |                                      | Removed, use `@carbon/type` directly                                          |
+| `scss/type.scss`                      |                                      | Removed, use `@carbon/type` directly                                          |
+| `scss/_classes.scss`                  | `@mixin carbon--type-classes`        | Renamed to `@mixin type-classes`                                              |
+| `scss/font-face/_mono.scss`           | `@mixin carbon--font-face-mono`      | TODO                                                                          |
+| `scss/font-face/_sans-condensed.scss` | `@mixin carbon--font-face-condensed` | TODO                                                                          |
+| `scss/font-face/_sans.scss`           | `@mixin carbon--font-face-sans`      | TODO                                                                          |
+| `scss/font-face/_serif.scss`          | `@mixin carbon--font-face-serif`     | TODO                                                                          |
+| `scss/font-face/_settings.scss`       | `$carbon--font-display`              | TODO                                                                          |
+| `scss/_font-family.scss`              | `$carbon--font-families`             | Renamed to `$font-families`                                                   |
+|                                       | `@function carbon--font-family`      | Renamed to `@function font-family`                                            |
+|                                       | `@mixin carbon--font-family`         | Renamed to `@mixin font-family`                                               |
+|                                       | `$carbon--font-weights`              | Renamed to `$font-weights`                                                    |
+|                                       | `@function carbon--font-weight`      | Renamed to `@function font-weight`                                            |
+|                                       | `@mixin carbon--font-weight`         | Renamed to `@mixin font-weight`                                               |
+| `scss/_prefix.scss`                   |                                      | No Changes                                                                    |
+| `scss/_reset.scss`                    | `@mixin carbon--default-type`        | Renamed to `@mixin default-type`                                              |
+|                                       | `@mixin carbon--type-reset`          | Renamed to `@mixin reset`, no longer accepts `$base-font-size` as a parameter |
+| `scss/_scale.scss`                    | `@function carbon--get-type-size`    | Removed, use `type-scale` instead                                             |
+|                                       | `$carbon--type-scale`                | Renamed to `$type-scale`                                                      |
+|                                       | `@function carbon--type-scale`       | Renamed to `@function type-scale`                                             |
+|                                       | `@mixin carbon--type-scale`          | Renamed to `@mixin type-scale`                                                |
+|                                       | `@mixin carbon--font-size`           | Renamed to `@mixin font-size`                                                 |
+| `scss/_styles.scss`                   | `@mixin carbon--type-style`          | Renamed to `@mixin type-style`                                                |
+| `scss/_styles.scss`                   | `$caption-01`                        | Removed                                                                       |
+|                                       | `$caption-02`                        | Removed                                                                       |
 
 ## Type tokens
 

diff --git a/packages/grid/scss/_mixins.import.scss b/packages/grid/scss/_mixins.import.scss
@@ -212,17 +212,6 @@
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--no-gutter--left,
-  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--no-gutter--right,
-  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
-    padding-right: 0;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -242,15 +231,6 @@
   .#{$prefix}--hang--end {
     padding-right: $gutter * 0.5;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: $gutter * 0.5;
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: $gutter * 0.5;
-  }
 }
 
 // -----------------------------------------------------------------------------

diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/scss/_mixins.scss
@@ -200,17 +200,6 @@
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--no-gutter--left,
-  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--no-gutter--right,
-  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
-    padding-right: 0;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -230,15 +219,6 @@
   .#{$prefix}--hang--end {
     padding-right: ($gutter / 2);
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: ($gutter / 2);
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: ($gutter / 2);
-  }
 }
 
 // -----------------------------------------------------------------------------

diff --git a/packages/grid/scss/modules/_flex-grid.scss b/packages/grid/scss/modules/_flex-grid.scss
@@ -201,17 +201,6 @@
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--no-gutter--left,
-  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--no-gutter--right,
-  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
-    padding-right: 0;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -231,15 +220,6 @@
   .#{$prefix}--hang--end {
     padding-right: $gutter * 0.5;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: $gutter * 0.5;
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: $gutter * 0.5;
-  }
 }
 
 // -----------------------------------------------------------------------------

diff --git a/packages/grid/scss/modules/_mixins.scss b/packages/grid/scss/modules/_mixins.scss
@@ -195,17 +195,6 @@
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--no-gutter--left,
-  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--no-gutter--right,
-  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
-    padding-right: 0;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -225,15 +214,6 @@
   .#{$prefix}--hang--end {
     padding-right: ($gutter * 0.5);
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: ($gutter * 0.5);
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: ($gutter * 0.5);
-  }
 }
 
 // -----------------------------------------------------------------------------

diff --git a/packages/layout/scss/_convert.import.scss b/packages/layout/scss/_convert.import.scss
@@ -35,8 +35,7 @@ $carbon--base-font-size: 16px !default;
 /// @group @carbon/layout
 @function carbon--rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {
@@ -53,8 +52,7 @@ $carbon--base-font-size: 16px !default;
 /// @group @carbon/layout
 @function carbon--em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {

diff --git a/packages/layout/scss/_convert.scss b/packages/layout/scss/_convert.scss
@@ -32,8 +32,7 @@ $carbon--base-font-size: 16px !default;
 /// @group @carbon/layout
 @function carbon--rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @return ($px / $carbon--base-font-size) * 1rem;
@@ -46,8 +45,7 @@ $carbon--base-font-size: 16px !default;
 /// @group @carbon/layout
 @function carbon--em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @return ($px / $carbon--base-font-size) * 1em;

diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss
@@ -21,8 +21,7 @@ $base-font-size: 16px !default;
 /// @group @carbon/layout
 @function rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {
@@ -39,8 +38,7 @@ $base-font-size: 16px !default;
 /// @group @carbon/layout
 @function em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {

diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
@@ -219,8 +219,6 @@
       color: $text-on-color;
     }
 
-    // TODO: deprecate single dash tertiary
-    &-tertiary,
     &--tertiary {
       @include button-theme(
         transparent,
@@ -259,8 +257,6 @@
       }
     }
 
-    // TODO: deprecate single dash ghost
-    &-ghost,
     &--ghost {
       @include button-theme(
         transparent,

diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss
@@ -26,8 +26,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--content-switcher--xl,
   .#{$prefix}--content-switcher--lg {
     height: rem(48px);
   }

diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -130,7 +130,6 @@
     transition: max-height $duration-fast-02 motion(entrance, productive);
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
     background-color: $field;
 

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -56,8 +56,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--text-input--xl,
   .#{$prefix}--text-input--lg {
     height: rem(48px);
   }
@@ -124,8 +122,6 @@
     @include tooltip--placement('icon', 'bottom', 'center');
   }
 
-  .#{$prefix}--text-input--password__visibility,
-  // TODO: remove selector above
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
     @include focus-outline('reset');
 
@@ -188,11 +184,8 @@
     padding-right: rem(64px);
   }
 
-  .#{$prefix}--text-input--invalid +
-    .#{$prefix}--text-input--password__visibility,
-  // TODO: remove selector above
-  .#{$prefix}--text-input--invalid +
-    .#{$prefix}--text-input--password__visibility__toggle {
+  .#{$prefix}--text-input--invalid
+    + .#{$prefix}--text-input--password__visibility__toggle {
     right: $spacing-05;
   }
 
@@ -201,11 +194,8 @@
   }
 
   .#{$prefix}--text-input:disabled
-    + .#{$prefix}--text-input--password__visibility
-    svg,
-  // TODO: remove selector above
-  .#{$prefix}--text-input:disabled
-    + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg {
+    + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
+    svg {
     cursor: not-allowed;
     fill: $icon-disabled;
 
@@ -246,8 +236,6 @@
 
     box-shadow: none;
 
-    .#{$prefix}--text-input--password__visibility,
-    // TODO: remove selector above
     .#{$prefix}--text-input--password__visibility__toggle {
       right: $spacing-08;
     }
@@ -355,8 +343,6 @@
     margin-top: rem(9px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--xl,
   .#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
     margin-top: rem(17px);
   }
@@ -396,10 +382,9 @@
   }
 
   // Windows HCM fix
-  .#{$prefix}--text-input--password__visibility,
-    // TODO: remove selector above
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg,
-    .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
+    svg,
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
     svg {
     @include high-contrast-mode('icon-fill');
   }

diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss
@@ -20,8 +20,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {
@@ -38,8 +37,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {