feat(components/colorpicker): tokenize colorpicker styles (#2924)

blackbaud · Dec 4, 2024 · 6722996 · 6722996
1 parent 453abd7
commit 6722996
Show file tree

Hide file tree

Showing 9 changed files with 566 additions and 286 deletions.
diff --git a/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts b/apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts
@@ -83,5 +83,5 @@ describe('colorpicker-storybook', () => {
         });
       });
     });
-  });
+  }, true);
 });
diff --git a/apps/e2e/colorpicker-storybook/project.json b/apps/e2e/colorpicker-storybook/project.json
@@ -18,7 +18,8 @@
         "styles": [
           "apps/e2e/colorpicker-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": []
       },
@@ -88,7 +89,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": {
@@ -108,7 +110,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/colorpicker/src/lib/modules/colorpicker/colorpicker.component.html b/libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.component.html
@@ -1,7 +1,7 @@
 <span class="sky-color-picker-label-wrapper">
   @if (labelText) {
     <label
-      class="sky-control-label sky-margin-inline-xs"
+      class="sky-control-label"
       [ngClass]="{
         'sky-screen-reader-only': labelHidden,
         'sky-control-label-required': requiredState?.isRequired()
@@ -10,12 +10,14 @@
       >{{ labelText }}</label
     >
     @if ((helpPopoverContent || helpKey) && !labelHidden) {
-      <sky-help-inline
-        [helpKey]="helpKey"
-        [labelText]="labelText"
-        [popoverTitle]="helpPopoverTitle"
-        [popoverContent]="helpPopoverContent"
-      />
+      <span class="sky-control-help-container">
+        <sky-help-inline
+          [helpKey]="helpKey"
+          [labelText]="labelText"
+          [popoverTitle]="helpPopoverTitle"
+          [popoverContent]="helpPopoverContent"
+        />
+      </span>
     }
   }
 </span>
@@ -59,9 +61,6 @@
       'sky-colorpicker-error':
         (ngControl?.touched || ngControl?.dirty) && ngControl?.errors
     }"
-    [skyThemeClass]="{
-      'sky-margin-inline-sm': 'modern'
-    }"
     [style.background-color]="backgroundColorForDisplay"
     (click)="onTriggerButtonClick()"
   >
@@ -287,14 +286,14 @@
               let i = $index
             ) {
               <button
+                class="sky-preset-color"
                 type="button"
                 [attr.aria-label]="
                   ('skyux_colorpicker_preset_color' | skyLibResources) +
                   ' ' +
                   color
                 "
                 [skyThemeClass]="{
-                  'sky-preset-color': 'default',
                   'sky-btn sky-btn-link': 'modern'
                 }"
                 [style.backgroundColor]="color"
@@ -305,18 +304,12 @@
         }
       </div>
 
-      <div
-        class="sky-colorpicker-footer"
-        [skyThemeClass]="{
-          'sky-padding-even-large': 'default'
-        }"
-      >
+      <div class="sky-colorpicker-footer">
         <section class="sky-colorpicker-column">
           <button
             class="sky-btn sky-btn-primary sky-btn-colorpicker-apply"
             type="button"
             [attr.aria-label]="'skyux_colorpicker_apply' | skyLibResources"
-            [skyThemeClass]="{ 'sky-margin-inline-sm': 'modern' }"
             (click)="onApplyColorClick()"
           >
             {{ 'skyux_colorpicker_apply' | skyLibResources }}
@@ -361,7 +354,13 @@
 
 <div #hintTextEl="skyId" skyId>
   @if (hintText) {
-    <div class="sky-font-deemphasized sky-colorpicker-hint-text">
+    <div
+      class="sky-colorpicker-hint-text"
+      [skyThemeClass]="{
+        'sky-font-deemphasized': 'default',
+        'sky-font-hint-text-s': 'modern'
+      }"
+    >
       {{ hintText }}
     </div>
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,5 +83,5 @@ describe('colorpicker-storybook', () => { @@
             });
           });
         });
-      });
+      }, true);
     });