InputBottonCore - added pill style prop

Author: srcdev

app/components/forms/input-button/InputButtonCore.vue

@@ -29,6 +29,7 @@ interface Props {
   type?: InputTypesButton;
   theme?: FormUiTheme;
   variant?: InputButtonVariant;
+  isPill?: boolean;
   buttonText?: string;
   isPending?: boolean;
   hasPendingEffect?: boolean;
@@ -40,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
   type: "button",
   theme: "default",
   variant: "primary",
+  isPill: false,
   buttonText: "",
   isPending: false,
   hasPendingEffect: false,
@@ -61,6 +63,7 @@ const buttonClasses = computed(() => [
   { "icon-only": hasIconOnlySlot.value },
   { "pending-effect": props.hasPendingEffect },
   { "is-pending": props.isPending },
+  { pill: props.isPill },
 ]);
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -128,6 +131,14 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
   }
 
+  &.primary,
+  &.secondary,
+  &.tertiary {
+    &.pill {
+      border-radius: 100vw;
+    }
+  }
+
   /*
   * Shared States
   **/

app/components/forms/input-button/stories/InputButtonCore.stories.ts

@@ -79,6 +79,13 @@ export default {
         category: "Styling",
       },
     },
+    isPill: {
+      control: "boolean",
+      description: "Whether button has pill shape",
+      table: {
+        category: "Styling",
+      },
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes",
@@ -251,38 +258,46 @@ const Template: StoryFn<InputButtonCoreStoryArgs> = (args) => ({
   `,
 });
 
-export const WithBothIcons = Template.bind({});
-WithBothIcons.args = {
-  buttonText: "Transfer",
+export const ButtonTextOnly = Template.bind({});
+ButtonTextOnly.args = {
+  buttonText: "Button Text Only",
+  inputVariant: "primary",
+  useLeftSlot: false,
+  useRightSlot: false,
+};
+
+export const WithBothEmojiIcons = Template.bind({});
+WithBothEmojiIcons.args = {
+  buttonText: "With Both Emoji Icons",
   inputVariant: "primary",
   useLeftSlot: true,
   useRightSlot: true,
   leftSlotContent: "💸",
   rightSlotContent: "✅",
 };
 
-export const WithBothIconComponents = Template.bind({});
-WithBothIconComponents.args = {
-  buttonText: "Navigate",
+export const WithBothNuxtIconComponents = Template.bind({});
+WithBothNuxtIconComponents.args = {
+  buttonText: "With Both Nuxt Icon Components",
   inputVariant: "primary",
   useLeftIcon: true,
   useRightIcon: true,
   leftIconName: "mdi:arrow-left",
   rightIconName: "mdi:arrow-right",
 };
 
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-  buttonText: "Icon Only Button",
+export const EmojiIconOnly = Template.bind({});
+EmojiIconOnly.args = {
+  buttonText: "Emoji Icon Only Button",
   inputVariant: "tertiary",
   useIconOnlySlot: true,
   iconOnlyContent: "⚡",
 };
 
-export const IconOnlyComponent = Template.bind({});
-IconOnlyComponent.args = {
-  buttonText: "Icon Only Button",
+export const NuxtIconOnlyComponent = Template.bind({});
+NuxtIconOnlyComponent.args = {
+  buttonText: "Nuxt Icon Only Button",
   inputVariant: "tertiary",
   useIconOnly: true,
-  iconOnlyName: "mdi:flash",
+  iconOnlyName: "mdi:chevron-right-circle-outline",
 };

app/components/forms/input-button/tests/InputButtonCore.spec.ts

@@ -77,6 +77,22 @@ describe("InputButtonCore", () => {
   });
 
   describe("Props Handling", () => {
+    it("applies pill class when isPill prop is true", async () => {
+      await createWrapper({ isPill: true });
+
+      const button = wrapper.find("button");
+      expect(button.classes()).toContain("pill");
+    });
+
+    it("does not apply pill class when isPill prop is false or omitted", async () => {
+      await createWrapper({ isPill: false });
+      const button = wrapper.find("button");
+      expect(button.classes()).not.toContain("pill");
+
+      await createWrapper();
+      const button2 = wrapper.find("button");
+      expect(button2.classes()).not.toContain("pill");
+    });
     it("handles type prop correctly", async () => {
       await createWrapper({ type: "submit" });