Merge pull request #5863 from pat270/LPD-34319

fix(@clayui/form): LPD-34319 adds disabled to Dual Listbox
liferay · Aug 21, 2024 · 71c1453 · 71c1453
2 parents 12a89bb + bd67e2a
commit 71c1453
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 8 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_forms.scss b/packages/clay-css/src/scss/atlas/variables/_forms.scss
@@ -448,6 +448,13 @@ $input-select-size: map-deep-merge(
 				),
 			),
 		),
+		disabled: (
+			option: (
+				hover: (
+					background-image: none,
+				),
+			),
+		),
 		option: (
 			padding: 0.4375rem 0.5rem,
 			hover: (

diff --git a/packages/clay-css/src/scss/cadmin/components/_forms.scss b/packages/clay-css/src/scss/cadmin/components/_forms.scss
@@ -131,10 +131,13 @@ fieldset[disabled] label {
 
 // This adds disabled styles to div.form-control inside a disabled fielset.
 
-fieldset[disabled] .form-control {
-	$disabled: setter(map-get($cadmin-input, disabled), ());
+fieldset[disabled] {
+	select.form-control[multiple],
+	.form-control {
+		$disabled: setter(map-get($cadmin-input, disabled), ());
 
-	@include clay-css($disabled);
+		@include clay-css($disabled);
+	}
 }
 
 // Readonly controls as plain text

diff --git a/packages/clay-css/src/scss/cadmin/variables/_forms.scss b/packages/clay-css/src/scss/cadmin/variables/_forms.scss
@@ -1326,6 +1326,13 @@ $cadmin-input-select-size: map-deep-merge(
 				),
 			),
 		),
+		disabled: (
+			option: (
+				hover: (
+					background-image: none,
+				),
+			),
+		),
 		option: (
 			padding: 7px 8px,
 			checked: (

diff --git a/packages/clay-css/src/scss/components/_forms.scss b/packages/clay-css/src/scss/components/_forms.scss
@@ -110,8 +110,11 @@ fieldset[disabled] label {
 
 // This adds disabled styles to div.form-control inside a disabled fielset.
 
-fieldset[disabled] .form-control {
-	@include clay-css(map-get($input, disabled));
+fieldset[disabled] {
+	select.form-control[multiple],
+	.form-control {
+		@include clay-css(map-get($input, disabled));
+	}
 }
 
 // Readonly controls as plain text

diff --git a/packages/clay-form/src/DualListBox.tsx b/packages/clay-form/src/DualListBox.tsx
@@ -60,6 +60,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 		transferRTL: string;
 	};
 
+	/**
+	 * Disables the component.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Disables the button responsible for moving items from right to left box.
 	 */
@@ -107,6 +112,7 @@ const ClayDualListBox = ({
 		transferRTL: 'Transfer Item Right to Left',
 	},
 	className,
+	disabled,
 	disableLTR,
 	disableRTL,
 	items = [[], []],
@@ -142,6 +148,7 @@ const ClayDualListBox = ({
 			<div className="clay-dual-listbox">
 				<ClaySelectBox
 					className="clay-dual-listbox-item clay-dual-listbox-item-expand listbox-left"
+					disabled={disabled}
 					id={left.id}
 					items={leftItems!}
 					label={left.label}
@@ -159,7 +166,9 @@ const ClayDualListBox = ({
 						aria-label={ariaLabels.transferLTR}
 						className="transfer-button-ltr"
 						data-testid="ltr"
-						disabled={leftSelected.length === 0 || disableLTR}
+						disabled={
+							leftSelected.length === 0 || disableLTR || disabled
+						}
 						displayType="secondary"
 						onClick={() => {
 							const [arrayLeft, arrayRight] = swapArrayItems(
@@ -178,7 +187,9 @@ const ClayDualListBox = ({
 						aria-label={ariaLabels.transferRTL}
 						className="transfer-button-rtl"
 						data-testid="rtl"
-						disabled={rightSelected.length === 0 || disableRTL}
+						disabled={
+							rightSelected.length === 0 || disableRTL || disabled
+						}
 						displayType="secondary"
 						onClick={() => {
 							const [arrayRight, arrayLeft] = swapArrayItems(
@@ -196,6 +207,7 @@ const ClayDualListBox = ({
 
 				<ClaySelectBox
 					className="clay-dual-listbox-item clay-dual-listbox-item-expand listbox-right"
+					disabled={disabled}
 					id={right.id}
 					items={rightItems!}
 					label={right.label}

diff --git a/packages/clay-form/src/SelectBox.tsx b/packages/clay-form/src/SelectBox.tsx
@@ -69,6 +69,11 @@ interface IProps extends React.HTMLAttributes<HTMLSelectElement> {
 	 */
 	buttonAlignment?: 'center' | 'end';
 
+	/**
+	 * Disables the component.
+	 */
+	disabled?: boolean;
+
 	/**
 	 * Items to be displayed in the Select Box.
 	 */
@@ -137,6 +142,7 @@ const ClaySelectBox = ({
 	},
 	buttonAlignment = 'end',
 	className,
+	disabled,
 	id,
 	items,
 	label,
@@ -165,7 +171,12 @@ const ClaySelectBox = ({
 	return (
 		<div className={classNames(className, 'form-group')}>
 			{label && (
-				<label className="reorder-label" htmlFor={id}>
+				<label
+					className={classNames('reorder-label', {
+						disabled,
+					})}
+					htmlFor={id}
+				>
 					{label}
 				</label>
 			)}
@@ -178,6 +189,7 @@ const ClaySelectBox = ({
 				<select
 					{...otherProps}
 					className="form-control form-control-inset"
+					disabled={disabled}
 					id={id}
 					multiple={multiple}
 					onChange={(event) => {

diff --git a/packages/clay-form/stories/DualListBox.stories.tsx b/packages/clay-form/stories/DualListBox.stories.tsx
@@ -74,6 +74,7 @@ export const Default = (args: any) => {
 				args.disableRTL ||
 				firstSelectBoxItems.length >= args.leftMaxItems
 			}
+			disabled={args.disabled}
 			items={items}
 			left={{
 				id: 'leftSelectBox',
@@ -96,6 +97,7 @@ export const Default = (args: any) => {
 Default.args = {
 	disableLTR: false,
 	disableRTL: false,
+	disabled: false,
 	leftMaxItems: 5,
 	rightMaxItems: 3,
 };