From 354bf5c43d816485d602bef68e336911105f3829 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 28 Jul 2021 16:50:33 -0400
Subject: [PATCH] fix(styles): remove hardcoded prefixes (#9321)

* fix(styles): remove hardcoded prefixes

* fix(ListBox): fix listbox selector

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/data-table/_data-table-core.scss       | 3 ++-
 .../components/src/components/list-box/_list-box.scss     | 2 +-
 .../src/components/number-input/_number-input.scss        | 4 +++-
 .../progress-indicator/_progress-indicator.scss           | 4 +++-
 .../components/src/components/ui-shell/_side-nav.scss     | 2 +-
 .../styles/scss/components/data-table/_data-table.scss    | 3 ++-
 packages/styles/scss/components/list-box/_list-box.scss   | 2 +-
 .../scss/components/number-input/_number-input.scss       | 4 +++-
 .../progress-indicator/_progress-indicator.scss           | 4 +++-
 .../styles/scss/components/ui-shell/header/_header.scss   | 8 ++++----
 .../scss/components/ui-shell/side-nav/_side-nav.scss      | 2 +-
 11 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index b88c6507a9b6..600480642cbf 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -968,7 +968,8 @@
   // -------------------
   // with boolean column
   // -------------------
-  .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+  .#{$prefix}--data-table
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin: 0;
   }
 
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 64f58ceb9e7b..87d089e135fb 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -277,7 +277,7 @@ $list-box-menu-width: rem(300px);
     max-width: rem(480px);
   }
 
-  .#{$prefix}--dropdown--inline .bx--list-box__menu {
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
     min-width: rem(288px);
     max-width: rem(480px);
   }
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
index cff9526be301..a6799ec2c67e 100644
--- a/packages/components/src/components/number-input/_number-input.scss
+++ b/packages/components/src/components/number-input/_number-input.scss
@@ -421,7 +421,9 @@
   }
 
   //No label positioning adjustment
-  .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
+  .#{$prefix}--number--nolabel
+    .#{$prefix}--label
+    + .#{$prefix}--form__helper-text {
     margin-top: 0;
   }
 
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index 0dbf13cab671..45984be0a9bc 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -293,7 +293,9 @@
     white-space: initial;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
+  .#{$prefix}--progress--vertical
+    .#{$prefix}--progress-step
+    .#{$prefix}--tooltip {
     margin-top: 0.5rem;
   }
 
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index 22dee6e95ffa..5a35ebd382fa 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -110,7 +110,7 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index 0820f9d42010..51788c49af54 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -969,7 +969,8 @@
   // -------------------
   // with boolean column
   // -------------------
-  .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+  .#{$prefix}--data-table
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin: 0;
   }
 
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index 7708c724fb59..797fa331cdec 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -284,7 +284,7 @@ $list-box-menu-width: rem(300px);
     max-width: rem(480px);
   }
 
-  .#{$prefix}--dropdown--inline .bx--list-box__menu {
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
     min-width: rem(288px);
     max-width: rem(480px);
   }
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index f2e709458ecf..ebef6a8d2736 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -437,7 +437,9 @@
   }
 
   //No label positioning adjustment
-  .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
+  .#{$prefix}--number--nolabel
+    .#{$prefix}--label
+    + .#{$prefix}--form__helper-text {
     margin-top: 0;
   }
 
diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
index 146a2f2cd48b..0c406b22f91e 100644
--- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
+++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
@@ -305,7 +305,9 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     white-space: initial;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
+  .#{$prefix}--progress--vertical
+    .#{$prefix}--progress-step
+    .#{$prefix}--tooltip {
     margin-top: 0.5rem;
   }
 
diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss
index ab75e8b3007d..3809b2602699 100644
--- a/packages/styles/scss/components/ui-shell/header/_header.scss
+++ b/packages/styles/scss/components/ui-shell/header/_header.scss
@@ -83,16 +83,16 @@
     justify-content: center;
   }
 
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action
     svg {
     fill: $icon-secondary;
   }
 
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:hover
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:hover
     svg,
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:active
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:active
     svg,
-  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action--active
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action--active
     svg {
     fill: $icon-primary;
   }
diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
index cb3e46ebbea5..1d2ddbf6a0ba 100644
--- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
+++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
@@ -68,7 +68,7 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }