Replies: 1 comment
-
|
I hit the same problem... and the addons that are out there that I tried are broken or require much older versions of storybook. I tried to add a decorator in my SolutionThanks to finding your question above I learned you can add If you add a <script>
(function() {
document.documentElement.setAttribute('dir', 'ltr');
})();
</script>Based on your question, that might be all the information you need right there! Dynamic ValuesI wanted to be able to change locales To the default preview export / config obect I defined I wired it up to a In the Storybook itself doesn't seem to be very RTL friendly so the preview pane looks funny in RTL but the important part for me was developing and testing my project's components and this does the trick. FYIWhen reading further in the docs there does seem to be a way to edit the document itself but it is extremely overkill for this use-case so I went with the Solution explained above. Its what builders have to do: |
Beta Was this translation helpful? Give feedback.
-
Summary
Storybook provides the
preview-head.htmlandpreview-body.htmltemplates to customise those tags in the rendered previews, but I would like to be able to override the<html>tag with data attributes for a React application. Almost like if there was apreview-root.htmltemplate.I haven't been able to find a way to configure any attributes on root html tag that happen consistently before the preview is rendered. I've noticed that
langattribute is set on it, maybe inherited from the Storybook manager. There doesn't seem to be any mention in the docs of how to work with the document root for setting lang or other attributes.There are plugins like
storybook-addon-root-attributebut it seems to add the attributes after the preview has rendered, and then queries the element and sets attrs.(my question only relates to the
<html>tag in the preview iframe, not the html root of Storybook manager, the wrapper application)Additional information
Storybook v8
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions