feat(ui-form): adding support for labelHidden prop (#457)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Added a `labelHidden` property to TextInput and TextInputMask
components to toggle label visibility while ensuring accessibility.
- **Refactor**
- Removed unused code related to button and icon components in
TextInputMask.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/src/Form/TextInput.stories.tsx

@@ -20,6 +20,7 @@ export default {
 		inputClassName: "",
 		className: "",
 		mode: "system",
+		labelHidden: false,
 	},
 	argTypes: {
 		mode: {

packages/documentation/src/Form/TextInputMask.stories.tsx

@@ -21,6 +21,7 @@ export default {
 		error: false,
 		inputClassName: "",
 		className: "",
+		labelHidden: false,
 	},
 	argTypes: {
 		focusMode: {

packages/ui-form/src/components/TextInput/TextInput.tsx

@@ -23,6 +23,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 			noBorder = false,
 
 			labelId,
+			labelHidden = false,
 			type = "text",
 
 			helperText = "",
@@ -79,7 +80,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 						!raw && { style: { paddingRight: inputPaddingRight } })}
 					{...extraProps}
 				/>
-				{!raw && (
+				{!raw && !labelHidden && (
 					<label
 						aria-hidden={true}
 						htmlFor={inputId}

packages/ui-form/src/components/TextInput/TextInputMask.tsx

@@ -1,9 +1,7 @@
 import { useMergeRefs } from "@versini/ui-hooks";
-// import { IconHide, IconShow } from "@versini/ui-icons";
 import { LiveRegion } from "@versini/ui-private";
 import React, { useEffect, useRef, useState } from "react";
 
-// import { ButtonIcon } from "..";
 import { TextInput } from "./TextInput";
 import type { TextInputMaskProps } from "./TextInputTypes";
 
@@ -26,6 +24,7 @@ export const TextInputMask = React.forwardRef<
 			name,
 			disabled,
 			label,
+			labelHidden,
 			onMaskChange,
 
 			onChange,
@@ -164,6 +163,7 @@ export const TextInputMask = React.forwardRef<
 					ref={mergedInputRef}
 					name={name}
 					label={label}
+					labelHidden={labelHidden}
 					type={masked ? "password" : "text"}
 					disabled={disabled}
 					spacing={spacing}
@@ -178,16 +178,6 @@ export const TextInputMask = React.forwardRef<
 
 						disabled: disabled,
 					})}
-					// rightElement={
-					// 	<ButtonIcon
-					// 		label={buttonLabel}
-					// 		onClick={handleShowMaskButtonClick}
-					// 		onBlur={handleTextInputMaskBlur}
-					// 		disabled={disabled}
-					// 	>
-					// 		{masked ? <IconShow /> : <IconHide />}
-					// 	</ButtonIcon>
-					// }
 					{...otherProps}
 				/>
 

packages/ui-form/src/components/TextInput/TextInputTypes.d.ts

@@ -27,6 +27,10 @@ export type CommonTextInputProps = {
 	 * CSS class(es) to add to the actual textarea element.
 	 */
 	inputClassName?: string;
+	/**
+	 * Hides the label visually but retain accessible relationship with the TextInput.
+	 */
+	labelHidden?: boolean;
 	/**
 	 * Id to use for the TextInput label.
 	 */

packages/ui-form/src/components/TextInput/__tests__/TextInput.test.tsx

@@ -130,6 +130,20 @@ describe("TextInput modifiers", () => {
 		expect(input.className).toContain("border-transparent");
 	});
 
+	it("should render a text input with a hidden label", async () => {
+		render(
+			<TextInput
+				label="hello world"
+				name="toto"
+				labelHidden
+				data-testid="txtnpt-1"
+			/>,
+		);
+		const label = await screen.findAllByText("hello world");
+		screen.debug(label);
+		expect(label.length).toBe(1);
+	});
+
 	it("should render a raw text input with no styling", async () => {
 		render(<TextInput label="toto" name="toto" raw data-testid="txtnpt-1" />);
 		const input = await screen.findByTestId("txtnpt-1");

packages/ui-form/src/components/TextInput/__tests__/TextInputMask.test.tsx

@@ -102,6 +102,25 @@ describe("TextInputMask modifiers", () => {
 		expect(input.className).toContain("border-transparent");
 	});
 
+	it("should render a text input with a hidden label", async () => {
+		render(
+			<TextInputMask
+				label="hello world"
+				name="toto"
+				labelHidden
+				data-testid="txtnpt-1"
+				rightElement={
+					<ButtonIcon>
+						<IconHide />
+					</ButtonIcon>
+				}
+			/>,
+		);
+		const label = await screen.findAllByText("hello world");
+		screen.debug(label);
+		expect(label.length).toBe(1);
+	});
+
 	it("should render a raw text input with no styling", async () => {
 		render(
 			<TextInputMask