LPS-114082 Replace layout classes with new clay components in segment…

…s-experiment-web
liferay · Jun 25, 2020 · 9b16898 · 9b16898
1 parent 915c417
commit 9b16898
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/modules/dxp/apps/segments/segments-experiment-web/package.json b/modules/dxp/apps/segments/segments-experiment-web/package.json
@@ -5,6 +5,7 @@
 		"@clayui/drop-down": "3.4.4",
 		"@clayui/form": "3.8.0",
 		"@clayui/icon": "3.0.5",
+		"@clayui/layout": "3.1.0",
 		"@clayui/link": "3.2.0",
 		"@clayui/modal": "3.5.1",
 		"@clayui/tabs": "3.2.1",

diff --git a/...src/main/resources/META-INF/resources/js/components/ClickGoalPicker/ClickGoalPicker.es.js b/...src/main/resources/META-INF/resources/js/components/ClickGoalPicker/ClickGoalPicker.es.js
@@ -11,6 +11,7 @@
 
 import ClayButton from '@clayui/button';
 import ClayIcon from '@clayui/icon';
+import ClayLayout from '@clayui/layout';
 import ClayLink from '@clayui/link';
 import classNames from 'classnames';
 import {useEventListener} from 'frontend-js-react-web';
@@ -124,12 +125,16 @@ function ClickGoalPicker({allowEdit = true, onSelectClickGoalTarget, target}) {
 				</h4>
 
 				{state.selectedTarget && (
-					<dl className="autofit-row">
-						<dt className="autofit-col">
+					<ClayLayout.ContentRow containerElement="dl">
+						<ClayLayout.ContentCol containerElement="dt">
 							{Liferay.Language.get('element')}:
-						</dt>
+						</ClayLayout.ContentCol>
 
-						<dd className="autofit-col autofit-col-expand mb-0 ml-2 text-truncate-inline">
+						<ClayLayout.ContentCol
+							className="mb-0 ml-2 text-truncate-inline"
+							containerElement="dd"
+							expand
+						>
 							<ClayLink
 								className="text-truncate"
 								href={state.selectedTarget}
@@ -138,8 +143,8 @@ function ClickGoalPicker({allowEdit = true, onSelectClickGoalTarget, target}) {
 							>
 								{state.selectedTarget}
 							</ClayLink>
-						</dd>
-					</dl>
+						</ClayLayout.ContentCol>
+					</ClayLayout.ContentRow>
 				)}
 
 				{!state.selectedTarget && (