feat(components/help-inline): tokenize help inline styles (#2841)

blackbaud · Oct 17, 2024 · 12c8c9c · 12c8c9c
1 parent 3636a85
commit 12c8c9c
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 28 deletions.
diff --git a/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts b/apps/e2e/help-inline-storybook-e2e/src/e2e/help-inline.component.cy.ts
@@ -22,5 +22,5 @@ describe('indicators-storybook', () => {
  );
  });
  });
- });
+ }, true);
 });
diff --git a/apps/e2e/help-inline-storybook/project.json b/apps/e2e/help-inline-storybook/project.json
@@ -18,7 +18,8 @@
  "styles": [
  "apps/e2e/help-inline-storybook/src/styles.scss",
  "libs/components/theme/src/lib/styles/sky.scss",
- "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+ "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+ "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
  ],
  "scripts": []
  },
@@ -79,7 +80,8 @@
  "compodoc": false,
  "styles": [
  "libs/components/theme/src/lib/styles/sky.scss",
- "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+ "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+ "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
  ]
  },
  "configurations": {
@@ -99,7 +101,8 @@
  "compodoc": false,
  "styles": [
  "libs/components/theme/src/lib/styles/sky.scss",
- "libs/components/theme/src/lib/styles/themes/modern/styles.scss"
+ "libs/components/theme/src/lib/styles/themes/modern/styles.scss",
+ "node_modules/@blackbaud/skyux-design-tokens/scss/blackbaud.css"
  ]
  },
  "configurations": {

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
@@ -1,28 +1,48 @@
 @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/compat-tokens-mixins' as compatMixins;
 @use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
  as modernMixins;
 
+@include compatMixins.sky-modern-overrides('.sky-help-inline') {
+ --sky-override-help-inline-color-hover: #{darken(
+ $sky-background-color-primary-dark,
+ 10%
+ )};
+ --sky-override-help-inline-padding-sides: var(--modern-size-6);
+ --sky-override-help-inline-border-radius: var(--modern-size-3);
+ --sky-override-help-inline-font-size: #{$sky-font-size-base};
+}
+
+@include compatMixins.sky-modern-v2('.sky-help-inline') {
+ line-height: 1;
+}
+
 @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
+ border: none;
+ outline: none;
+ padding: var(--sky-space-inset-pillarbox-1_4-top-xs)
+ var(
+ --sky-override-help-inline-padding-sides,
+ var(--sky-space-inset-pillarbox-1_4-right-xs)
+ )
+ var(--sky-space-inset-pillarbox-1_4-bottom-xs)
+ var(
+ --sky-override-help-inline-padding-sides,
+ var(--sky-space-inset-pillarbox-1_4-left-xs)
+ );
+ border-radius: var(
+ --sky-override-help-inline-border-radius,
+ var(--sky-border-radius-s)
  );
-
- &:hover {
- color: darken($sky-background-color-primary-dark, 10%);
- transition: color $sky-transition-time-short;
- cursor: pointer;
- }
+ color: var(--sky-color-icon-action);
+ background-color: var(--sky-color-background-action-tertiary-base);
+ // The font size here is to size the icon stack to the correct size.
+ // This implementation is likely to change in tokenization pass 2.
+ font-size: var(--sky-override-help-inline-font-size, 12.8px);
+ display: inline-block;
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base)
+ var(--sky-color-border-action-tertiary-base);
 
  ::ng-deep {
  .fa-stack-2x {
@@ -33,6 +53,56 @@
  font-size: 10px;
  }
  }
+
+ &:hover {
+ background-color: var(--sky-color-background-action-tertiary-hover);
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
+ var(--sky-color-border-action-tertiary-hover);
+ color: var(
+ --sky-override-help-inline-color-hover,
+ var(--sky-color-icon-action)
+ );
+ transition: color $sky-transition-time-short;
+ cursor: pointer;
+ }
+
+ &:active,
+ &.sky-btn-active {
+ background-color: var(--sky-color-background-action-tertiary-active);
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
+ var(--sky-color-border-action-tertiary-active);
+ }
+
+ &:focus-visible:not(:active) {
+ background-color: var(--sky-color-background-action-tertiary-focus);
+ box-shadow:
+ inset 0 0 0 var(--sky-border-width-action-focus)
+ var(--sky-color-border-action-tertiary-focus),
+ var(--sky-elevation-focus);
+ }
+
+ &.sky-btn-disabled,
+ &[disabled] {
+ &,
+ &:hover,
+ &:focus-visible,
+ &.sky-btn-focus,
+ &:active,
+ &.sky-btn-active {
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
+ var(--sky-color-border-action-tertiary-disabled);
+ background-color: var(--sky-color-background-action-tertiary-disabled);
+
+ &:focus-visible,
+ &.sky-btn-focus {
+ box-shadow: var(
+ --sky-override-button-icon-disabled-box-shadow,
+ inset 0 0 0 var(--sky-border-width-action-disabled)
+ var(--sky-color-border-action-tertiary-disabled)
+ );
+ }
+ }
+ }
 }
 
 @include mixins.sky-component('modern', '.sky-help-inline-hidden') {

diff --git a/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss b/libs/components/theme/src/lib/styles/themes/modern/_compat-tokens-mixins.scss
@@ -27,10 +27,15 @@
  }
 }
 
-// We don't anticipate needing to encapsulate v2 only styles
-@mixin sky-modern-v2($selector: '') {
- .sky-theme-modern.sky-theme-brand-blackbaud #{$selector} {
- @content;
+@mixin sky-modern-v2($selector: '', $encapsulate: true) {
+ @if $encapsulate {
+ :host-context(.sky-theme-modern.sky-theme-brand-blackbaud) #{$selector} {
+ @content;
+ }
+ } @else {
+ .sky-theme-modern.sky-theme-brand-blackbaud #{$selector} {
+ @content;
+ }
  }
 }
 

diff --git a/libs/components/theme/src/lib/styles/themes/modern/_theme.scss b/libs/components/theme/src/lib/styles/themes/modern/_theme.scss
@@ -120,7 +120,7 @@
  }
 }
 
-@include compatMixins.sky-modern-v2() {
+@include compatMixins.sky-modern-v2($encapsulate: false) {
  h1,
  .sky-font-heading-1 {
  line-height: var(--sky-font-line_height-heading-1);

diff --git a/libs/components/theme/src/lib/styles/themes/modern/_type.scss b/libs/components/theme/src/lib/styles/themes/modern/_type.scss
@@ -100,7 +100,7 @@
  }
 }
 
-@include compatMixins.sky-modern-v2() {
+@include compatMixins.sky-modern-v2($encapsulate: false) {
  .sky-font-body-default {
  line-height: var(--sky-font-line_height-body-m);
  }