From 25e844a58d6a4c6b56aae19c8120e8db37796c2d Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Tue, 2 Jan 2024 12:31:11 -0700 Subject: [PATCH] fix(opacitycheckerboard): only apply inline-size properties to storybook for opacitycheckerboard --- .../stories/opacitycheckerboard.stories.js | 13 +++++++++++-- components/opacitycheckerboard/stories/template.js | 4 +--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index 08b6043e779..4946244a155 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -22,7 +22,7 @@ export default { }, args: { rootClass: "spectrum-OpacityCheckerboard", - backgroundPosition: "top left" + backgroundPosition: "left top" }, parameters: { actions: { @@ -39,11 +39,20 @@ export default { ], }; export const Default = Template.bind({}); -Default.args = {}; +Default.args = { + customStyles: { + "inline-size": "100%", + "block-size": "100%" + } +}; export const CheckerboardPosition = Template.bind({}); CheckerboardPosition.args = { backgroundPosition: 'center center', + customStyles: { + "inline-size": "100%", + "block-size": "100%" + } }; CheckerboardPosition.parameters = { docs: { diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index 6daa8d63f47..dec44a36707 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -7,7 +7,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-OpacityCheckerboard", - backgroundPosition = "top left", + backgroundPosition, customClasses = [], customStyles = {}, id, @@ -22,8 +22,6 @@ export const Template = ({ })} style=${ifDefined(styleMap({ "--mod-opacity-checkerboard-position": backgroundPosition, - "inline-size": "100%", - "block-size": "100%", ...customStyles, }))} role=${ifDefined(role)}