search

wfp / designsystem

World Food Programme User Interface Kit. Developer kit for implementing WFP web style guideline.
http://www.wfp.org/UIGuide
Apache License 2.0
224 stars 103 forks source link

Toggle component does not support right-to-left (RTL) directionality #591

Open rstencel opened 1 year ago

rstencel commented 1 year ago

Detailed description

Describe in detail the issue you're having.

When setting document directionality to right-to-left to support e.g. Arabic language then Toggle is displayed incorrectly.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Toggle

What did you expect to happen? What happened instead? What would you like to see changed?

When document's directionality is set to right-to-left then layout of a toggled Toggle is broken.

For left-to-right directionality:

image

For right-to-left directionality:

image

What browser are you working in?

Chrome 117.0.5938.149

What version of the WFP UI (Carbon Design System) are you using?

1.22.4

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Partner Connect

Steps to reproduce the issue

  1. Open https://uikit.wfp.org/docs/index.html?path=/docs/components-ui-elements-toggle--regular
  2. Toggle any demo Toggle
  3. Open dev tools -> terminal
  4. Type document.dir = 'rtl' and click Enter