LPS-174358 Replace ClayLabel with ClayButton for the FDS filter display

liferay-frontend · Mar 10, 2023 · 80aae13 · 80aae13
1 parent 186f6af
commit 80aae13
Showing 1 changed file with 46 additions and 37 deletions.
diff --git a/...a-set-web/src/main/resources/META-INF/resources/management_bar/components/FilterResume.js b/...a-set-web/src/main/resources/META-INF/resources/management_bar/components/FilterResume.js
@@ -12,9 +12,9 @@
  * details.
  */
 
+import ClayButton from '@clayui/button';
 import ClayDropDown from '@clayui/drop-down';
 import ClayIcon from '@clayui/icon';
-import ClayLabel from '@clayui/label';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {useContext, useState} from 'react';
@@ -28,34 +28,15 @@ function FilterResume(props) {
 
 	const [open, setOpen] = useState(false);
 
-	const label = (
-		<ClayLabel
+	const button = (
+		<ClayButton
 			className={classNames(
-				'filter-resume component-label tbar-label mr-2',
+				'filter-resume component-label tbar-label',
 				props.disabled && 'disabled',
 				open && 'active'
 			)}
-			closeButtonProps={{
-				className: 'filter-resume-close',
-				disabled: props.disabled,
-				onClick: () => {
-					viewsDispatch({
-						type: VIEWS_ACTION_TYPES.UPDATE_FILTERS,
-						value: filters.map((filter) => ({
-							...filter,
-							...(filter.id === props.id
-								? {
-										active: false,
-										odataFilterString: undefined,
-										selectedData: undefined,
-								  }
-								: {}),
-						})),
-					});
-				},
-				title: Liferay.Language.get('remove-filter'),
-			}}
-			role="button"
+			displayType="secondary"
+			size="sm"
 		>
 			<div className="filter-resume-content">
 				<ClayIcon
@@ -67,23 +48,51 @@ function FilterResume(props) {
 					{props.label}: {props.selectedItemsLabel}
 				</div>
 			</div>
-		</ClayLabel>
+		</ClayButton>
 	);
 
-	const dropDown = (
-		<ClayDropDown
-			active={open}
-			className="d-inline-flex"
-			onActiveChange={setOpen}
-			trigger={label}
-		>
-			<li className="dropdown-subheader">{props.label}</li>
+	const dropDownButtonGroup = (
+		<ClayButton.Group>
+			<ClayDropDown
+				active={open}
+				className="d-inline-flex"
+				onActiveChange={setOpen}
+				trigger={button}
+			>
+				<li className="dropdown-subheader">{props.label}</li>
 
-			<Filter {...props} />
-		</ClayDropDown>
+				<Filter {...props} />
+			</ClayDropDown>
+
+			<ClayButton
+				className="filter-resume-close"
+				disabled={props.disabled}
+				displayType="secondary"
+				monospaced
+				onClick={() =>
+					viewsDispatch({
+						type: VIEWS_ACTION_TYPES.UPDATE_FILTERS,
+						value: filters.map((filter) => ({
+							...filter,
+							...(filter.id === props.id
+								? {
+										active: false,
+										odataFilterString: undefined,
+										selectedData: undefined,
+								  }
+								: {}),
+						})),
+					})
+				}
+				size="sm"
+				title={Liferay.Language.get('remove-filter')}
+			>
+				<ClayIcon symbol="times-small" />
+			</ClayButton>
+		</ClayButton.Group>
 	);
 
-	return props.disabled ? label : dropDown;
+	return props.disabled ? button : dropDownButtonGroup;
 }
 
 FilterResume.propTypes = {