diff --git a/.changeset/three-geese-relax.md b/.changeset/three-geese-relax.md new file mode 100644 index 00000000000..de375e3e100 --- /dev/null +++ b/.changeset/three-geese-relax.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/popover": patch +--- + +fix(popover): correct left/right tips for RTL + +Includes exposing Start and End tip placement variants in Storybook, and increased VRT coverage for Chromatic. diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 0f21879a506..26ff3739bb8 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -147,7 +147,7 @@ const ChromaticTipPlacementVariants = (args) => html` if (option.startsWith("start") || option.startsWith("end")) return "Changes side with text direction (like a logical property)"; if (option.startsWith("left") || option.startsWith("right")) - return "Text direction does not effect the position"; + return "Text direction does not affect the position"; return null; }; @@ -166,11 +166,12 @@ const ChromaticTipPlacementVariants = (args) => html` content: [`${optionDescription()}`], })} `)} - +
${SourcelessTemplate({ ...args, position: option, + isOpen: true, })}
@@ -190,7 +191,7 @@ export const WithTip = (args) => html` `; WithTip.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - await userEvent.click(canvas.getByRole("button")); + window.isChromatic() ? null : await userEvent.click(canvas.getByRole("button")); }; WithTip.args = { withTip: true,