diff --git a/packages/core/stories/dialog/dialog.qa.stories.tsx b/packages/core/stories/dialog/dialog.qa.stories.tsx index 3bf4829969..ff7bed4ee2 100644 --- a/packages/core/stories/dialog/dialog.qa.stories.tsx +++ b/packages/core/stories/dialog/dialog.qa.stories.tsx @@ -13,7 +13,12 @@ import { VALIDATION_NAMED_STATUS, } from "@salt-ds/core"; import type { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, type QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + type QAContainerNoStyleInjectionProps, + type QAContainerProps, +} from "docs/components"; import "./dialog.stories.css"; import { Fragment } from "react"; @@ -64,7 +69,7 @@ const DialogTemplate: StoryFn< ); }; -export const StatusVariants: StoryFn = () => { +export const StatusVariants: StoryFn = () => { const DensityValues = ["high", "medium", "low", "touch"] as const; return ( @@ -111,7 +116,7 @@ StatusVariants.parameters = { }, }; -export const ContentVariants: StoryFn = () => { +export const ContentVariants: StoryFn = () => { const DensityValues = ["high", "medium", "low", "touch"] as const; const longContent = ( @@ -247,3 +252,47 @@ DialogHeaders.parameters = { }, }, }; + +export const NoStyleInjectionDialogHeaders: StoryFn< + QAContainerNoStyleInjectionProps +> = (props) => ( + + + + + + +); +NoStyleInjectionDialogHeaders.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx index bd4dfc483d..11b979a086 100644 --- a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx +++ b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx @@ -4,8 +4,11 @@ import { FileDropZoneTrigger, } from "@salt-ds/core"; import type { Meta, StoryFn } from "@storybook/react"; -import { QAContainer } from "docs/components"; - +import { + QAContainer, + QAContainerNoStyleInjection, + type QAContainerNoStyleInjectionProps, +} from "docs/components"; export default { title: "Core/File Drop Zone/File Drop Zone QA", component: FileDropZone, @@ -47,3 +50,29 @@ AllExamplesGrid.parameters = { }, }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props, +) => { + return ( + + console.log("files accepted")}> + + Drop files here or + + + console.log("files accepted")} + > + + Drop files here or + + + + ); +}; + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/overlay/overlay.qa.stories.tsx b/packages/core/stories/overlay/overlay.qa.stories.tsx index 87066b133a..4de17ba463 100644 --- a/packages/core/stories/overlay/overlay.qa.stories.tsx +++ b/packages/core/stories/overlay/overlay.qa.stories.tsx @@ -7,7 +7,12 @@ import { OverlayTrigger, } from "@salt-ds/core"; import type { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, type QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + type QAContainerNoStyleInjectionProps, + type QAContainerProps, +} from "docs/components"; import "./overlay.stories.css"; @@ -42,6 +47,48 @@ export const Default: StoryFn = (props) => { }; Default.parameters = { + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, +}; + +export const NoStyleInjectionGrid: StoryFn = ( + props, +) => ( + + + + + + + +

Title

+
Content of Overlay
+
+
+
+
+); + +NoStyleInjectionGrid.parameters = { chromatic: { disableSnapshot: false }, }; @@ -72,5 +119,50 @@ export const CloseButton: StoryFn = (props) => { }; CloseButton.parameters = { + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, +}; + +export const NoStyleInjectionCloseButton: StoryFn< + QAContainerNoStyleInjectionProps +> = (props) => { + return ( + + + + + + + + +

Title

+
Content of Overlay
+
+
+
+
+ ); +}; + +NoStyleInjectionCloseButton.parameters = { chromatic: { disableSnapshot: false }, };