Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Missing ability to set text direction on html element (dir=ltr/rtl) of preview frame #236

Closed
4 tasks done
HerrZatacke opened this issue Aug 11, 2022 · 4 comments
Closed
4 tasks done

Missing ability to set text direction on html element (dir=ltr/rtl) of preview frame #236

HerrZatacke opened this issue Aug 11, 2022 · 4 comments
Labels
enhancement New feature or request

Comments

@HerrZatacke
Copy link

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
@HerrZatacke HerrZatacke added the enhancement: to triage New feature of request pending review by team member label Aug 11, 2022
@HerrZatacke
Copy link
Author

HerrZatacke commented Aug 12, 2022 •
edited
Loading

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.

@Akryum Akryum added enhancement New feature or request and removed enhancement: to triage New feature of request pending review by team member labels Aug 12, 2022
@Akryum
Copy link
Member

Akryum commented Aug 12, 2022

We could have a button in the toolbar to toggle text direction, like Ladle:
image

@HerrZatacke
Copy link
Author

This would be fantasic!

@Akryum Akryum closed this as completed in d7fe643 Oct 9, 2022
@troyere
Copy link

troyere commented Nov 3, 2023 •
edited
Loading

Please give a feature flag when adding that sort of thing in the config file : not everyone needs or wants this, far from it !

Thanks in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@troyere @Akryum @HerrZatacke