@agility/plenum-ui 2.0.3 → 2.0.4

package/dist/types/stories/organisms/FormInputWithAddons/FormInputWithAddons.d.ts

@@ -1,6 +1,7 @@
 import { IDynamicIconProps } from "@/stories/atoms/icons";
 import React from "react";
 import { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField";
+import { INestedInputButtonProps } from "@/stories/molecules/inputs/NestedInputButton";
 export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
     leadIcon?: IDynamicIconProps;
     leadLabel?: string;
@@ -16,6 +17,7 @@ export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"
     leadIconClassNames?: string;
     customIconClass?: string;
     type: AcceptedInputTypes;
+    addonBTN?: INestedInputButtonProps;
 }
 declare const FormInputWithAddons: React.FC<IFormInputWithAddonsProps>;
 export default FormInputWithAddons;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -27,7 +27,7 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 		onClickHandler && onClickHandler()
 	}
 	const buttonStyle = cn(
-		"relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
 		{
 			"rounded-r text-gray-500 -ml-px": align === "right"
 		},
@@ -55,7 +55,7 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	)
 	return (
 		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
-			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400" }} />}
+			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400 h-5 w-5" }} />}
 			{ctaLabel && <span>{ctaLabel}</span>}
 		</button>
 	)

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx

@@ -27,3 +27,22 @@ export const DefaultFormInputWithAddons: Story = {
 		trailIcon: { icon: "IconSearch" }
 	}
 }
+export const FormInputWithAddonBTN: Story = {
+	args: {
+		id: "appSearch",
+		name: "appSearch",
+		addonOffset: 60,
+		labelClass: "text-gray-900",
+		addonBTN: {
+			icon: {
+				icon: "IconPencil",
+				className: "h-5 w-5 text-gray-400"
+			},
+			ctaLabel: "Edit",
+			align: "right",
+			onClickHandler: () => {
+				alert("Button Clicked")
+			}
+		}
+	}
+}

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -2,6 +2,7 @@ import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
 import React, { useLayoutEffect, useRef, useState } from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps, AcceptedInputTypes } from "@/stories/molecules/inputs/InputField"
+import NestedInputButton, { INestedInputButtonProps } from "@/stories/molecules/inputs/NestedInputButton"
 
 export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"> {
 	leadIcon?: IDynamicIconProps
@@ -18,6 +19,7 @@ export interface IFormInputWithAddonsProps extends Omit<IInputFieldProps, "type"
 	leadIconClassNames?: string
 	customIconClass?: string
 	type: AcceptedInputTypes
+	addonBTN?: INestedInputButtonProps
 }
 
 const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
@@ -43,6 +45,7 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 	leadIconClassNames,
 	customIconClass,
 	type,
+	addonBTN,
 	...rest
 }) => {
 	// #region logic to determine the width of the lead and or trailing labels in order to offset the input padding by the appropriate amount.
@@ -137,6 +140,11 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 						{trailLabel && trailLabel}
 					</label>
 				)}
+				{addonBTN && (
+					<div className="absolute top-0 bottom-0 right-0 flex items-center ">
+						<NestedInputButton {...addonBTN} />
+					</div>
+				)}
 			</div>
 		</div>
 	)