@agility/plenum-ui 2.1.20-rc7 → 2.1.20

package/dist/types/stories/molecules/inputs/InputLabel/InputLabel.d.ts

@@ -10,6 +10,7 @@ export interface IInputLabelProps {
     isFocused?: boolean;
     label?: string;
     truncateLabel?: boolean;
+    fullWidthLabel?: boolean;
 }
 /** Comment */
 declare const InputLabel: FC<IInputLabelProps>;

package/dist/types/stories/molecules/inputs/checkbox/Checkbox.d.ts

@@ -24,6 +24,8 @@ export interface ICheckboxProps {
     className?: string;
     /** Truncate label */
     truncateLabel?: boolean;
+    /** Full width label */
+    fullWidthLabel?: boolean;
 }
 /** Comment */
 declare const Checkbox: FC<ICheckboxProps>;

package/package.json

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

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -15,6 +15,7 @@ export interface IInputLabelProps {
 	isFocused?: boolean;
 	label?: string;
 	truncateLabel?: boolean;
+	fullWidthLabel?: boolean;
 }
 
 /** Comment */
@@ -26,7 +27,8 @@ const InputLabel: FC<IInputLabelProps> = ({
 	isActive,
 	isError,
 	label,
-	truncateLabel = false
+	truncateLabel = false,
+	fullWidthLabel = false
 }: IInputLabelProps) => {
 	const labelStyles = cn(
 		"z-[2] ",
@@ -36,12 +38,16 @@ const InputLabel: FC<IInputLabelProps> = ({
 		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
 		{ "text-red-500 bg-white": !isPlaceholder && isError },
 		{ "text-gray-500/[.5]": isDisabled },
-		{ "inline-block  transition-all text-sm text-gray-700 mb-1": !isPlaceholder }
+		{ "inline-block  transition-all text-sm text-gray-700 mb-1": !isPlaceholder },
+		{ "block w-full": fullWidthLabel }
 	);
+
 	if (!label) return null;
 	return (
 		<label htmlFor={id} className={labelStyles}>
-			<div className={truncateLabel ? "break-all line-clamp-1" : ""}>{label}</div>
+			<div className={truncateLabel ? "break-all line-clamp-1" : ""} title={label}>
+				{label}
+			</div>
 			{isRequired && <span className="text-red-500"> *</span>}
 		</label>
 	);

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -28,6 +28,8 @@ export interface ICheckboxProps {
 	className?: string;
 	/** Truncate label */
 	truncateLabel?: boolean;
+	/** Full width label */
+	fullWidthLabel?: boolean;
 }
 
 /** Comment */
@@ -44,6 +46,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 	hasBorder,
 	className,
 	truncateLabel = false,
+	fullWidthLabel = false,
 	...props
 }: ICheckboxProps) => {
 	const uniqueID = useId();
@@ -85,9 +88,15 @@ const Checkbox: FC<ICheckboxProps> = ({
 					{...props}
 				/>
 			</div>
-			<div className="ml-3 text-sm flex items-center">
+			<div className="ml-3 text-sm flex items-center w-full">
 				<>
-					<InputLabel label={label} isRequired={isRequired} id={id} truncateLabel={truncateLabel} />
+					<InputLabel
+						label={label}
+						isRequired={isRequired}
+						id={id}
+						truncateLabel={truncateLabel}
+						fullWidthLabel={fullWidthLabel}
+					/>
 				</>
 
 				{message && (

package/stories/organisms/DropdownWithMultiSelect/DropdownWithMultiSelect.tsx

@@ -46,6 +46,7 @@ const DropdownWithMultiSelect = ({ label, options }: Props) => {
 								onChange={option.onClick}
 								className="!min-h-0"
 								truncateLabel
+								fullWidthLabel
 							/>
 						</div>
 					);