feat: add responsive tests for Option Settings and Split Panel
- Implemented responsive testing scripts for Option Settings and ResponsiveSplitPanel components. - Added tests to verify layout behavior across various screen sizes (desktop, tablet, mobile). - Generated screenshots and reports for visual validation of responsive designs. Made-with: Cursor
This commit is contained in:
@@ -26,7 +26,7 @@ import {
|
||||
} from "@/components/ui/command";
|
||||
import { Check, Plus, X, Info, RotateCcw } from "lucide-react";
|
||||
import { icons as allLucideIcons } from "lucide-react";
|
||||
import DOMPurify from "isomorphic-dompurify";
|
||||
import { sanitizeSvg } from "@/lib/button-icon-map";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ComponentData } from "@/types/screen";
|
||||
import { ColorPickerWithTransparent } from "../../common/ColorPickerWithTransparent";
|
||||
@@ -370,9 +370,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
<span
|
||||
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgIcon.svg, {
|
||||
USE_PROFILES: { svg: true },
|
||||
}),
|
||||
__html: sanitizeSvg(svgIcon.svg),
|
||||
}}
|
||||
/>
|
||||
<span className="text-muted-foreground truncate text-[10px]">
|
||||
@@ -525,9 +523,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
<span
|
||||
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgInput, {
|
||||
USE_PROFILES: { svg: true },
|
||||
}),
|
||||
__html: sanitizeSvg(svgInput),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -547,9 +543,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
setSvgError("유효한 SVG 코드가 아닙니다.");
|
||||
return;
|
||||
}
|
||||
const sanitized = DOMPurify.sanitize(svgInput, {
|
||||
USE_PROFILES: { svg: true },
|
||||
});
|
||||
const sanitized = sanitizeSvg(svgInput);
|
||||
let finalName = svgName.trim();
|
||||
const existingNames = new Set(
|
||||
customSvgIcons.map((s) => s.name)
|
||||
@@ -686,9 +680,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
<span
|
||||
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgIcon.svg, {
|
||||
USE_PROFILES: { svg: true },
|
||||
}),
|
||||
__html: sanitizeSvg(svgIcon.svg),
|
||||
}}
|
||||
/>
|
||||
<span className="text-muted-foreground truncate text-[10px]">
|
||||
@@ -841,9 +833,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
<span
|
||||
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(svgInput, {
|
||||
USE_PROFILES: { svg: true },
|
||||
}),
|
||||
__html: sanitizeSvg(svgInput),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -863,9 +853,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
|
||||
setSvgError("유효한 SVG 코드가 아닙니다.");
|
||||
return;
|
||||
}
|
||||
const sanitized = DOMPurify.sanitize(svgInput, {
|
||||
USE_PROFILES: { svg: true },
|
||||
});
|
||||
const sanitized = sanitizeSvg(svgInput);
|
||||
let finalName = svgName.trim();
|
||||
const existingNames = new Set(
|
||||
customSvgIcons.map((s) => s.name)
|
||||
|
||||
Reference in New Issue
Block a user