Allow adding labels to ipl-button through its default slot

Author: inkfarer

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 3.1.0
+
+- Allow adding labels to ipl-button through its default slot
+  - For example, this can be used to make a button's label contain an icon and text simultaneously.
+- Allow disabling text capitalization on ipl-button
+
 # 3.0.1
 
 - Fix content within the header-extra slot of ipl-expanding-space sometimes being invisible

docs/examples/ButtonCustomContentExample.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="width-capped-content vertical-layout">
+        <!-- #region example -->
+        <ipl-button
+            :disabled="disabled"
+            :small="small"
+        >
+            <font-awesome-icon
+                icon="file"
+                class="icon"
+            />
+            Custom Content
+        </ipl-button>
+
+        <ipl-button
+            v-slot="{ state }"
+            requires-confirmation
+            :disabled="disabled"
+            :small="small"
+        >
+            <font-awesome-icon
+                icon="file"
+                class="icon"
+            />
+            {{ state === 'confirm' ? 'Confirm?' : 'Requires Confirmation' }}
+        </ipl-button>
+
+        <ipl-button
+            v-slot="{ state }"
+            async
+            :disabled="disabled"
+            :small="small"
+            @click="asyncSuccess"
+        >
+            <template v-if="state === 'idle'">
+                Async
+            </template>
+            <template v-else-if="state === 'loading'">
+                Working...
+            </template>
+            <template v-else-if="state === 'success'">
+                Done!
+            </template>
+            <template v-else-if="state === 'error'">
+                Error!
+            </template>
+        </ipl-button>
+        <!-- #endregion example -->
+    </div>
+    <div class="horizontal-layout">
+        <ipl-checkbox
+            v-model="disabled"
+            label="Disabled"
+        />
+        <ipl-checkbox
+            v-model="small"
+            label="Small"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import IplButton from '../../src/components/iplButton.vue';
+import IplCheckbox from '../../src/components/iplCheckbox.vue';
+import { ref } from 'vue';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faFile } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+library.add(faFile);
+
+const disabled = ref(false);
+const small = ref(false);
+
+async function asyncSuccess() {
+    return new Promise(resolve => {
+        setTimeout(resolve, 2500);
+    });
+}
+</script>

docs/examples/ButtonExample.vue

@@ -1,11 +1,17 @@
 <template>
-    <div class="width-capped-content">
+    <div class="width-capped-content vertical-layout">
         <!-- #region example -->
         <ipl-button
             label="Button"
             :disabled="disabled"
             :small="small"
         />
+        <ipl-button
+            label="Button"
+            :disabled="disabled"
+            :small="small"
+            class="no-text-transform"
+        />
         <!-- #endregion example -->
     </div>
     <div class="horizontal-layout">

docs/ipl-button.md

@@ -33,3 +33,7 @@ title: ipl-button
 ## Transparent
 
 ::: demo ButtonTransparentExample
+
+## Custom Content
+
+::: demo ButtonCustomContentExample

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@iplsplatoon/vue-components",
-    "version": "3.0.1",
+    "version": "3.1.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__/iplButton.test.ts

@@ -18,6 +18,16 @@ describe('iplButton', () => {
         expect(wrapper.find('span.label').text()).toEqual('Button');
     });
 
+    it('applies content from default slot', () => {
+        const wrapper = shallowMount(IplButton, {
+            slots: {
+                default: () => 'test default slot'
+            }
+        });
+
+        expect(wrapper.find('span.label').text()).toEqual('test default slot');
+    });
+
     it('applies given href to button if present', () => {
         const wrapper = shallowMount(IplButton, { props: { label: 'Button', href: 'https://google.com/' } });
 
@@ -30,10 +40,10 @@ describe('iplButton', () => {
         expect(wrapper.find('font-awesome-icon-stub.icon').attributes().icon).toEqual('cool-icon');
     });
 
-    it('does not create label element if icon is given', () => {
+    it('creates icon element if icon is provided', () => {
         const wrapper = shallowMount(IplButton, { props: { icon: 'cool-icon', label: 'something' } });
 
-        expect(wrapper.find('span.label').exists()).toEqual(false);
+        expect(wrapper.find('span.label').text()).toEqual('');
         expect(wrapper.find('font-awesome-icon-stub.icon').exists()).toEqual(true);
     });
 

src/components/iplButton.vue

@@ -19,18 +19,36 @@
         @click="handleClick"
         @contextmenu="$emit('rightClick', $event)"
     >
-        <span
-            v-if="!isIconButton"
-            class="label"
-        >
-            {{ labelInternal }}
+        <span class="label">
+            <slot :state="labelState">
+                <span
+                    v-if="!isIconButton"
+                    class="default-label"
+                >
+                    <template v-if="labelState === 'idle'">
+                        {{ label }}
+                    </template>
+                    <template v-else-if="labelState === 'confirm'">
+                        {{ shortConfirmationMessage ? 'Confirm?' : 'Are you sure?' }}
+                    </template>
+                    <template v-else-if="labelState === 'error'">
+                        Error!
+                    </template>
+                    <template v-else-if="labelState === 'loading'">
+                        Loading...
+                    </template>
+                    <template v-else-if="labelState === 'success'">
+                        {{ successMessage }}
+                    </template>
+                </span>
+                <font-awesome-icon
+                    v-else
+                    :icon="icon"
+                    class="icon"
+                    fixed-width
+                />
+            </slot>
         </span>
-        <font-awesome-icon
-            v-else
-            :icon="icon"
-            class="icon"
-            fixed-width
-        />
     </component>
 </template>
 
@@ -110,10 +128,6 @@ export default defineComponent({
     emits: [ 'click', 'rightClick' ],
 
     setup(props, { emit }) {
-        if (props.icon == null && isBlank(props.label)) {
-            console.warn('ipl-button requires an icon or label to be provided.');
-        }
-
         const instance = getCurrentInstance();
         let resetTimeout: number | null = null;
         let confirmationResetTimeout: number | null = null;
@@ -210,22 +224,13 @@ export default defineComponent({
             buttonState,
             isIconButton: computed(() => props.icon != null),
             disabledInternal,
-            labelInternal: computed(() => {
+            labelState: computed<'idle' | 'error' | 'success' | 'loading' | 'confirm'>(() => {
                 if (props.requiresConfirmation && isClicked.value) {
-                    return props.shortConfirmationMessage ? 'Confirm?' : 'Are you sure?';
-                }
-                if (!props.async && !props.disableOnSuccess) return props.label;
-
-                switch (buttonState.value) {
-                    case 'error':
-                        return 'Error!';
-                    case 'loading':
-                        return props.progressMessage;
-                    case 'success':
-                        return props.successMessage;
-                    default:
-                        return props.label;
+                    return 'confirm';
                 }
+                if (!props.async && !props.disableOnSuccess) return 'idle';
+
+                return buttonState.value;
             }),
             isBlank,
             hasLink
@@ -239,7 +244,6 @@ export default defineComponent({
 
 .ipl-button {
     text-decoration: none !important;
-    text-transform: uppercase;
     font-size: 1em;
     font-weight: 700;
     font-family: constants.$body-font;
@@ -274,21 +278,29 @@ export default defineComponent({
         width: 2.4em;
         min-width: 2.4em;
         padding: 0.4em;
+
+        :deep(.icon) {
+            height: 100%;
+            width: 100%;
+        }
     }
 
     &.small {
         font-size: 0.75em;
     }
 
-    .label, .icon {
+    .label, :deep(.icon) {
         z-index: 3;
         position: relative;
         user-select: none;
     }
 
-    .icon {
-        height: 100%;
-        width: 100%;
+    .default-label {
+        text-transform: uppercase;
+    }
+
+    &.no-text-transform .default-label {
+        text-transform: none;
     }
 
     &.disabled {