chore(components/help-inline): split help-inline styles

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>

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,

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

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

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