improve button component API

Author: hriverahdez

packages/components/src/Button/BaseButton.vue

@@ -6,50 +6,17 @@ export type Variant = (typeof variants)[number];
 <script setup lang="ts" generic="UNUSED">
 import { type Component, computed } from "vue";
 
-import type { IconName } from "@knime/kds-styles/img/icons/def";
-
 import Icon from "../Icon/Icon.vue";
-import type { Size } from "../types";
-
-export type BaseButtonProps =
-  // button with label
-  | {
-      // common
-      variant?: Variant;
-      size?: Size;
-      destructive?: boolean;
-      disabled?: boolean;
-
-      // specific
-      label: string;
-      leadingIcon?: IconName | null;
-      trailingIcon?: IconName | null;
-
-      // not allowed
-      icon?: never;
-    }
-  // button only with icon
-  | {
-      // common
-      variant?: Variant;
-      size?: Size;
-      destructive?: boolean;
-      disabled?: boolean;
-
-      // specific
-      icon: IconName;
-
-      // not allowed
-      label?: never;
-      leadingIcon?: never;
-      trailingIcon?: never;
-    };
+
+import type { BaseButtonProps } from "./types";
 
 type BaseButtonPropsWithComponent = BaseButtonProps & {
   component?: string | Component;
 };
 
 const props = withDefaults(defineProps<BaseButtonPropsWithComponent>(), {
+  label: undefined,
+  leadingIcon: undefined,
   component: "button",
   size: "medium",
   variant: "filled",
@@ -91,20 +58,13 @@ function onClick(e: MouseEvent) {
     :disabled="props.disabled"
     @click="onClick($event)"
   >
-    <template v-if="props.label">
-      <Icon
-        v-if="props.leadingIcon"
-        :name="props.leadingIcon"
-        :size="iconSize"
-      />
-      <span class="label">{{ props.label }}</span>
-      <Icon
-        v-if="props.trailingIcon"
-        :name="props.trailingIcon"
-        :size="iconSize"
-      />
-    </template>
-    <Icon v-else-if="props.icon" :name="props.icon" :size="iconSize" />
+    <Icon v-if="props.leadingIcon" :name="props.leadingIcon" :size="iconSize" />
+    <span v-if="props.label" class="label">{{ props.label }}</span>
+    <Icon
+      v-if="props.trailingIcon && props.label"
+      :name="props.trailingIcon"
+      :size="iconSize"
+    />
   </Component>
 </template>
 

packages/components/src/Button/Button.stories.ts

@@ -43,10 +43,6 @@ const meta: Meta<typeof Button> = {
       control: { type: "select" },
       options: [undefined, ...iconNames],
     },
-    icon: {
-      control: { type: "select" },
-      options: [undefined, ...iconNames],
-    },
   },
   args: {
     onClick: fn(),
@@ -119,7 +115,7 @@ export const LeadingAndTrailingIcon: Story = {
 export const IconOnly: Story = {
   args: {
     variant: "outlined",
-    icon: "ai-general",
+    leadingIcon: "ai-general",
   },
 };
 
@@ -140,7 +136,7 @@ export const AllCombinations: Story = buildAllCombinationsStory({
       variant: variants,
       disabled: [false, true],
       destructive: [false, true],
-      icon: ["ai-general"],
+      leadingIcon: ["ai-general"],
     },
   ],
 });

packages/components/src/Button/Button.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="UNUSED">
-import BaseButton, { type BaseButtonProps } from "./BaseButton.vue";
+import BaseButton from "./BaseButton.vue";
+import type { BaseButtonProps } from "./types";
 
 export type ButtonProps = BaseButtonProps & {}; // intersection needed for Storybook to work
 const props = defineProps<ButtonProps>();

packages/components/src/Button/LinkButton.stories.ts

@@ -84,10 +84,6 @@ const meta: Meta<typeof LinkButton> = {
       control: { type: "select" },
       options: [undefined, ...iconNames],
     },
-    icon: {
-      control: { type: "select" },
-      options: [undefined, ...iconNames],
-    },
     to: {
       control: "text",
       description:

packages/components/src/Button/LinkButton.vue

@@ -3,7 +3,8 @@ import { computed } from "vue";
 
 import { resolveNuxtLinkComponent } from "../util/nuxtComponentResolver";
 
-import BaseButton, { type BaseButtonProps } from "./BaseButton.vue";
+import BaseButton from "./BaseButton.vue";
+import type { BaseButtonProps } from "./types";
 
 export type LinkButtonProps = BaseButtonProps & {
   // RouterLink props
@@ -38,6 +39,8 @@ export type LinkButtonProps = BaseButtonProps & {
 
 const props = withDefaults(defineProps<LinkButtonProps>(), {
   download: undefined,
+  rel: null,
+  target: null,
 });
 
 const component = computed(() => {

packages/components/src/Button/types.ts

@@ -0,0 +1,47 @@
+import type { IconName } from "src/Icon/Icon.vue";
+
+import type { Size } from "../types";
+
+import type { Variant } from "./BaseButton.vue";
+
+type BaseProps = {
+  variant?: Variant;
+  size?: Size;
+  destructive?: boolean;
+  disabled?: boolean;
+};
+
+type WithLabelOrLeadingIcon = BaseProps & {
+  label: string;
+  leadingIcon?: IconName;
+  trailingIcon?: IconName;
+};
+
+type EnsureLabelAndTrailingIcon = BaseProps & {
+  label?: never;
+  leadingIcon: IconName;
+  trailingIcon?: never;
+};
+
+export type BaseButtonProps =
+  | WithLabelOrLeadingIcon
+  | EnsureLabelAndTrailingIcon;
+
+declare function buttonPropTester(p: BaseButtonProps): void;
+
+// supports just label
+buttonPropTester({ label: "foo" });
+// supports just leading icon
+buttonPropTester({ leadingIcon: "ai-general" });
+// supports both leading icon and label
+buttonPropTester({ leadingIcon: "ai-general", label: "foo" });
+// supports label and trailing icon
+buttonPropTester({ label: "foo", trailingIcon: "ai-general" });
+// supports both leading supports all 3
+buttonPropTester({
+  leadingIcon: "ai-general",
+  label: "foo",
+  trailingIcon: "ai-general",
+});
+// @ts-expect-error - should not allow leading and trailing icons without label
+buttonPropTester({ leadingIcon: "ai-general", trailingIcon: "ai-general" });