From ff652865b41a68475d4e3707bcb1f4e4fafb6ff6 Mon Sep 17 00:00:00 2001
From: Paul Crowder <paul.crowder@blackbaud.com>
Date: Wed, 10 Jul 2024 14:40:35 -0400
Subject: [PATCH] chore(components/help-inline): split help-inline styles

---
 .../help-inline/help-inline.component.html    |  2 +-
 .../help-inline/help-inline.component.scss    | 56 -------------------
 .../help-inline/help-inline.component.ts      |  5 +-
 .../help-inline.default.component.scss        | 25 +++++++++
 .../help-inline.modern.component.scss         | 49 ++++++++++++++++
 .../src/lib/styles/_public-api/_mixins.scss   | 27 ++++-----
 6 files changed, 90 insertions(+), 74 deletions(-)
 delete mode 100644 libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss
 create mode 100644 libs/components/help-inline/src/lib/modules/help-inline/help-inline.default.component.scss
 create mode 100644 libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss

diff --git a/apps/playground/src/app/components/help-inline/help-inline.component.html b/apps/playground/src/app/components/help-inline/help-inline.component.html
index 19172e39d8..f69c8de6e4 100644
--- a/apps/playground/src/app/components/help-inline/help-inline.component.html
+++ b/apps/playground/src/app/components/help-inline/help-inline.component.html
@@ -3,7 +3,7 @@ <h2>
     Giving
     <sky-help-inline
       ariaControls="popover"
-      popoverContent="This is a popover"
+      popoverContent="This is a popoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopoverpopover"
       popoverTitle="Did you knowccc?"
     >
     </sky-help-inline>
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss
deleted file mode 100644
index f88ac2be3a..0000000000
--- a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
-@use 'libs/components/theme/src/lib/styles/variables' as *;
-@use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
-  as modernMixins;
-
-.sky-help-inline {
-  color: $sky-background-color-primary-dark;
-  font-size: $sky-font-size-base;
-  background-color: transparent;
-  border: none;
-  display: inline-block;
-
-  &:hover {
-    color: darken($sky-background-color-primary-dark, 10%);
-    transition: color $sky-transition-time-short;
-    cursor: pointer;
-  }
-
-  &-hidden {
-    display: none;
-  }
-}
-
-::ng-deep .sky-help-inline-popover-text {
-  overflow-wrap: break-word;
-  margin: 0;
-}
-
-@include mixins.sky-theme-modern {
-  sky-icon-stack {
-    display: inline-flex;
-  }
-
-  .sky-help-inline {
-    // The button mixin sets the border radius to 6px but we only want 3px on help inline buttons.
-    border-radius: 3px;
-
-    ::ng-deep .fa-stack-2x {
-      font-size: 16px;
-    }
-
-    ::ng-deep .fa-stack-1x {
-      font-size: 10px;
-    }
-
-    // The 0px and 5px padding is because we want 1px top/bottom and 6px left/right but the mixin
-    // adds a pixel to account for standard button drop shadows that do not exist on this button.
-    @include modernMixins.sky-theme-modern-button-variant(
-      $sky-theme-modern-background-color-primary-dark,
-      transparent,
-      transparent,
-      $sky-theme-modern-background-color-primary-dark,
-      0px 5px
-    );
-  }
-}
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts
index 9a71b5b7ce..8d190f54b3 100644
--- a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts
+++ b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts
@@ -25,7 +25,10 @@ import { SkyHelpInlineAriaHaspopupPipe } from './help-inline-aria-haspopup.pipe'
   selector: 'sky-help-inline',
   standalone: true,
   templateUrl: './help-inline.component.html',
-  styleUrls: ['./help-inline.component.scss'],
+  styleUrls: [
+    './help-inline.default.component.scss',
+    './help-inline.modern.component.scss',
+  ],
   imports: [
     CommonModule,
     SkyHelpInlineAriaControlsPipe,
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.default.component.scss b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.default.component.scss
new file mode 100644
index 0000000000..53c95314f4
--- /dev/null
+++ b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.default.component.scss
@@ -0,0 +1,25 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
+@use 'libs/components/theme/src/lib/styles/variables' as *;
+
+@include mixins.sky-component('default', '.sky-help-inline') {
+  color: $sky-background-color-primary-dark;
+  font-size: $sky-font-size-base;
+  background-color: transparent;
+  border: none;
+  display: inline-block;
+
+  &:hover {
+    color: darken($sky-background-color-primary-dark, 10%);
+    transition: color $sky-transition-time-short;
+    cursor: pointer;
+  }
+}
+
+@include mixins.sky-component('default', '.sky-help-inline-hidden') {
+  display: none;
+}
+
+@include mixins.sky-component('default', '.sky-help-inline-popover-text') {
+  overflow-wrap: break-word;
+  margin: 0;
+}
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss
new file mode 100644
index 0000000000..613f4b3804
--- /dev/null
+++ b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.modern.component.scss
@@ -0,0 +1,49 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
+@use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
+  as modernMixins;
+
+@include mixins.sky-component('modern', '.sky-help-inline') {
+  font-size: $sky-font-size-base;
+  display: inline-block;
+  border-radius: 3px;
+
+  // The 0px and 5px padding is because we want 1px top/bottom and 6px left/right but the mixin
+  // adds a pixel to account for standard button drop shadows that do not exist on this button.
+  @include modernMixins.sky-theme-modern-button-variant(
+    $sky-theme-modern-background-color-primary-dark,
+    transparent,
+    transparent,
+    $sky-theme-modern-background-color-primary-dark,
+    0px 5px
+  );
+
+  &:hover {
+    color: darken($sky-background-color-primary-dark, 10%);
+    transition: color $sky-transition-time-short;
+    cursor: pointer;
+  }
+
+  ::ng-deep {
+    .fa-stack-2x {
+      font-size: 16px;
+    }
+
+    .fa-stack-1x {
+      font-size: 10px;
+    }
+  }
+}
+
+@include mixins.sky-component('modern', '.sky-help-inline-hidden') {
+  display: none;
+}
+
+@include mixins.sky-component('modern', '.sky-help-inline-popover-text') {
+  overflow-wrap: break-word;
+  margin: 0;
+}
+
+@include mixins.sky-component('modern', 'sky-icon-stack') {
+  display: inline-flex;
+}
diff --git a/libs/components/theme/src/lib/styles/_public-api/_mixins.scss b/libs/components/theme/src/lib/styles/_public-api/_mixins.scss
index 1835acffb1..958ce5edca 100644
--- a/libs/components/theme/src/lib/styles/_public-api/_mixins.scss
+++ b/libs/components/theme/src/lib/styles/_public-api/_mixins.scss
@@ -102,49 +102,44 @@
 
 @mixin sky-component($theme, $selector, $encapsulate: true, $breakpoint: '') {
   @if $breakpoint == '' {
-    @include sky-component-theme($theme, $selector, $encapsulate) {
+    @include sky-component-theme($theme, $selector) {
       @content;
     }
   } @else if $breakpoint == 'xs' {
     @include sky-host-responsive-container-xs-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
+      @include sky-component-theme($theme, $selector) {
         @content;
       }
     }
   } @else if $breakpoint == 'sm' {
     @include sky-host-responsive-container-sm-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
+      @include sky-component-theme($theme, $selector) {
         @content;
       }
     }
   } @else if $breakpoint == 'md' {
     @include sky-host-responsive-container-md-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
+      @include sky-component-theme($theme, $selector) {
         @content;
       }
     }
   } @else if $breakpoint == 'lg' {
     @include sky-host-responsive-container-lg-min($encapsulate) {
-      @include sky-component-theme($theme, $selector, $encapsulate) {
+      @include sky-component-theme($theme, $selector) {
         @content;
       }
     }
   }
 }
-@mixin sky-component-theme($theme, $selector, $encapsulate: true) {
-  @if $theme == 'default' {
-    #{$selector}:not(.sky-theme-modern *) {
+
+@mixin sky-component-theme($theme, $selector) {
+  @if $theme == 'modern' {
+    :is(.sky-theme-modern #{$selector}) {
       @content;
     }
   } @else {
-    @if $encapsulate {
-      :host-context(.sky-theme-modern) #{$selector} {
-        @content;
-      }
-    } @else {
-      .sky-theme-modern #{$selector} {
-        @content;
-      }
+    #{$selector}:not(.sky-theme-modern *) {
+      @content;
     }
   }
 }