Refactor modal and add snapshots tests

Refs: #5844
public-ui · Jan 9, 2025 · 173def8 · 173def8
1 parent 45f0b16
commit 173def8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/packages/components/src/components/modal/shadow.tsx b/packages/components/src/components/modal/shadow.tsx
@@ -57,7 +57,7 @@ export class KolModal implements ModalAPI {
 	public render(): JSX.Element {
 		return (
 			<dialog
-				class={clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' && true })}
+				class={clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' })}
 				ref={(el) => {
 					this.refDialog = el;
 				}}
@@ -67,10 +67,14 @@ export class KolModal implements ModalAPI {
 				aria-label={this.state._label}
 				onClose={this.handleNativeCloseEvent.bind(this)}
 			>
+				{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}
+				<div>
+					<slot />
+				</div>
 				{this.state._variant === 'card' && (
 					<KolButtonWcTag
 						class="kol-modal__close-button"
-						data-testid="card-close-button"
+						data-testid="modal-close-button"
 						_hideLabel
 						_icons={{
 							left: {
@@ -82,10 +86,6 @@ export class KolModal implements ModalAPI {
 						_tooltipAlign="left"
 					></KolButtonWcTag>
 				)}
-				{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}
-				<div>
-					<slot />
-				</div>
 			</dialog>
 		);
 	}
@@ -139,10 +139,12 @@ export class KolModal implements ModalAPI {
 			defaultValue: '100%',
 		});
 	}
+
 	@Watch('_variant')
 	public validateVariant(value?: ModalVariantPropType): void {
 		validateModalVariant(this, value);
 	}
+
 	public componentWillLoad(): void {
 		this.validateLabel(this._label);
 		this.validateOn(this._on);

diff --git a/packages/samples/react/src/components/modal/basic.tsx b/packages/samples/react/src/components/modal/basic.tsx
@@ -8,14 +8,18 @@ import { SampleDescription } from '../SampleDescription';
 export const ModalBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const modalState = searchParams.get('show-modal') as string;
+	const defaultVariant = searchParams.get('variant') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
 	const [variant, setVariant] = useState<'card' | 'blank'>('blank');
 	useEffect(() => {
 		if (modalState === 'true') {
 			modalElement.current?.openModal();
 		}
-	}, [modalState]);
+		if (defaultVariant === 'card') {
+			setVariant(defaultVariant);
+		}
+	}, [modalState, defaultVariant]);
 
 	return (
 		<>

diff --git a/packages/tools/visual-tests/tests/sample-app.routes.js b/packages/tools/visual-tests/tests/sample-app.routes.js
@@ -231,7 +231,12 @@ ROUTES.set('modal/basic?show-modal=true', {
 		height: 600,
 	},
 });
-
+ROUTES.set('modal/basic?show-modal=true&variant=card', {
+	viewportSize: {
+		width: 1920,
+		height: 600,
+	},
+});
 ROUTES.set('nav/aria-current', {
 	axe: {
 		skipFailures: false,