histoire
histoire copied to clipboard
histoire-dev
Missing ability to set text direction on html element (dir=ltr/rtl) of preview frame
Clear and concise description of the problem
Hi, I'm developing in a project which relies on rtlcss to get correct text/page flow in arabic. The stylesheets are transformed so that every property depending on right/left alignments have a selector like
For example:
.sel { margin-left: 16px; }
results in
[dir="ltr"] .sel { margin-left: 16px; }
[dir="rtl"] .sel { margin-right: 16px; }
This requires me to be able to set the dir attribute on the <html> element of the page the component is viewd in.
Suggested solution
The simplest solution could be to add a block htmlAttrs similar to nuxt to the histoire config.
This would allow to add other parameters linke lang, etc. as well.
Alternative
A premium solution ❤ would be to have a config option to enable "LTR/RTL" rendering which could allow the user to toggle text direction globally for all component previews.
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.
As a temp workaround in our project I'm wrapping the component so that I have a button to toggle the text direction rendered below the actual component.
So I had the idea to another more flexible solution: Adding a dir attribute to a Variant
This could maybe enable a toggle button in the control panel to switch the direction on a per-component-basis like so:
<script setup lang="ts">
import LTRComponent from './LTRComponent.vue';
</script>
<template>
<Story title="LTRComponent">
<Variant title="default" dir="rtl" :allow-toggle-dir="true" >
<LTRComponent />
</Variant>
</Story>
</template>
A quick Sidenote: I found that some of our components (using external libraries) need to have the dir attribute to be present during mount and will not behave correctly if the attribute is changed later. So I'm forcing a re-render of the component as well in my wrapper by unmounting and remounting it.
