Allow changing the background color of ipl-dialog-title

Author: inkfarer

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 3.2.0
+
+- Allow changing the background color of ipl-dialog-title
+
 # 3.1.0
 
 - Allow adding labels to ipl-button through its default slot

docs/examples/DialogTitleExample.vue

@@ -1,11 +1,21 @@
 <template>
     <event-log>
-        <div class="resizable alt-background">
+        <div class="resizable gray-background vertical-layout">
             <!-- #region example -->
             <ipl-dialog-title
                 title="Dialog Title"
                 :closing-disabled="disableClosing"
             />
+            <ipl-dialog-title
+                title="Dialog Title (Secondary Color)"
+                color="secondary"
+                :closing-disabled="disableClosing"
+            />
+            <ipl-dialog-title
+                title="Dialog Title (Blue)"
+                color="blue"
+                :closing-disabled="disableClosing"
+            />
             <!-- #endregion example -->
         </div>
         <template #extra>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iplsplatoon/vue-components",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "Vue components for internal Inkling Performance Labs utilities.",
     "homepage": "https://github.com/IPLSplatoon/vue-components",
     "repository": "https://github.com/IPLSplatoon/vue-components",

src/components/__tests__/__snapshots__/iplDialogTitle.test.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IplDialogTitle matches snapshot 1`] = `
-"<div class="ipl-dialog-title"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
+"<div class="ipl-dialog-title color-primary"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
   <ipl-button-stub icon="[object Object]" color="transparent" disabled="false" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" data-test="close-button" class="close-button"></ipl-button-stub>
 </div>"
 `;
 
 exports[`IplDialogTitle matches snapshot when closing is disabled 1`] = `
-"<div class="ipl-dialog-title"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
+"<div class="ipl-dialog-title color-primary"><span class="ipl-dialog-title__title-text">Cool Dialog</span>
   <ipl-button-stub icon="[object Object]" color="transparent" disabled="true" async="false" progressmessage="Working..." successmessage="Done!" requiresconfirmation="false" shortconfirmationmessage="false" small="true" disableonsuccess="false" inline="true" data-test="close-button" class="close-button"></ipl-button-stub>
 </div>"
 `;

src/components/iplDialogTitle.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="ipl-dialog-title">
+    <div
+        class="ipl-dialog-title"
+        :class="`color-${color}`"
+    >
         <span class="ipl-dialog-title__title-text">{{ title }}</span>
         <ipl-button
             data-test="close-button"
@@ -15,9 +18,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import IplButton from './iplButton.vue';
+import { isValidSpaceColor, SpaceColor } from '../helpers/spaceColorHelper';
 
 export default defineComponent({
     name: 'IplDialogTitle',
@@ -32,6 +36,13 @@ export default defineComponent({
         closingDisabled: {
             type: Boolean,
             default: false
+        },
+        color: {
+            type: String as PropType<SpaceColor>,
+            default: 'primary',
+            validator: (value: string): boolean => {
+                return isValidSpaceColor(value);
+            }
         }
     },
 
@@ -50,15 +61,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use 'src/styles/constants';
+@use 'src/styles/space';
 
 .ipl-dialog-title {
+    @include space.space-colors();
+
     display: flex;
     flex-direction: row;
     align-items: center;
-    background-color: var(--ipl-bg-primary);
     padding: 4px 8px;
     border-radius: constants.$border-radius-outer;
-    color: var(--ipl-body-text-color);
 
     .ipl-dialog-title__title-text {
         flex-grow: 1;