Allow adding labels to ipl-small-toggle through its default slot

Author: inkfarer

CHANGELOG.md

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

docs/examples/SmallToggleExample.vue

@@ -1,12 +1,19 @@
 <template>
-    <div class="width-capped-content vertical-layout">
+    <div class="width-capped-content vertical-layout resizable">
         <div>Value: {{ value }}</div>
         <!-- #region example -->
         <ipl-small-toggle
             v-model="value"
             label="Small Toggle"
             :disabled="disabled"
         />
+        <ipl-small-toggle
+            v-model="value"
+            :disabled="disabled"
+        >
+            Label from slot<br>
+            <ipl-label>Extra line of text</ipl-label>
+        </ipl-small-toggle>
         <!-- #endregion example -->
     </div>
     <div class="horizontal-layout">
@@ -20,6 +27,7 @@
 <script setup lang="ts">
 import { IplSmallToggle, IplCheckbox } from '../../src';
 import { ref } from 'vue';
+import IplLabel from '../../src/components/iplLabel.vue';
 
 const value = ref(false);
 const disabled = ref(false);

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

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IplSmallToggle matches snapshot when toggle is disabled 1`] = `"<label class="ipl-small-toggle__wrapper disabled">Toggle! <input type="checkbox" role="switch" disabled=""></label>"`;
+exports[`IplSmallToggle matches snapshot when adding label from slots 1`] = `"<label class="ipl-small-toggle__wrapper"><span class="label">Toggle! (Label from slot)</span><input type="checkbox" role="switch"></label>"`;
 
-exports[`IplSmallToggle matches snapshot when toggle value is false 1`] = `"<label class="ipl-small-toggle__wrapper">Toggle! <input type="checkbox" role="switch"></label>"`;
+exports[`IplSmallToggle matches snapshot when toggle is disabled 1`] = `"<label class="ipl-small-toggle__wrapper disabled"><span class="label">Toggle!</span><input type="checkbox" role="switch" disabled=""></label>"`;
 
-exports[`IplSmallToggle matches snapshot when toggle value is true 1`] = `"<label class="ipl-small-toggle__wrapper">Toggle! <input type="checkbox" role="switch"></label>"`;
+exports[`IplSmallToggle matches snapshot when toggle value is false 1`] = `"<label class="ipl-small-toggle__wrapper"><span class="label">Toggle!</span><input type="checkbox" role="switch"></label>"`;
+
+exports[`IplSmallToggle matches snapshot when toggle value is true 1`] = `"<label class="ipl-small-toggle__wrapper"><span class="label">Toggle!</span><input type="checkbox" role="switch"></label>"`;

src/components/__tests__/iplSmallToggle.test.ts

@@ -2,6 +2,19 @@ import IplSmallToggle from '../iplSmallToggle.vue';
 import { mount } from '@vue/test-utils';
 
 describe('IplSmallToggle', () => {
+    it('matches snapshot when adding label from slots', () => {
+        const wrapper = mount(IplSmallToggle, {
+            props: {
+                modelValue: true
+            },
+            slots: {
+                default: () => 'Toggle! (Label from slot)'
+            }
+        });
+
+        expect(wrapper.html()).toMatchSnapshot();
+    });
+
     it('matches snapshot when toggle value is true', () => {
         const wrapper = mount(IplSmallToggle, {
             props: {

src/components/iplSmallToggle.vue

@@ -3,7 +3,11 @@
         class="ipl-small-toggle__wrapper"
         :class="{ disabled: disabled }"
     >
-        {{ label }}
+        <span class="label">
+            <slot>
+                {{ label }}
+            </slot>
+        </span>
         <input
             v-model="model"
             type="checkbox"
@@ -22,7 +26,7 @@ export default defineComponent({
     props: {
         label: {
             type: String,
-            required: true
+            default: ''
         },
         modelValue: {
             type: Boolean as PropType<boolean>,