Skip to content

Adding RTL support for DetailsList drag-drop to reorder columns#7267

Merged
KevinTCoughlin merged 3 commits into
microsoft:masterfrom
arkogupta:arkgupta/dragDropRTLFix
Dec 3, 2018
Merged

Adding RTL support for DetailsList drag-drop to reorder columns#7267
KevinTCoughlin merged 3 commits into
microsoft:masterfrom
arkogupta:arkgupta/dragDropRTLFix

Conversation

@arkogupta

@arkogupta arkogupta commented Nov 30, 2018

Copy link
Copy Markdown
Contributor

Pull request checklist

Description of changes

This change adds support for dragging and dropping columns to reorder them, in RTL languages.

Microsoft Reviewers: Open in CodeFlow

@natalieethell

Copy link
Copy Markdown
Contributor

Hey @arkogupta I just tested out your changes locally and I'm not seeing the right behavior for the DetailsList Drag & Drop example in RTL.

detailslistdragdroprtlnotworking

It looks like the columns are still either jumping to the far left or the far right.

@KevinTCoughlin

KevinTCoughlin commented Nov 30, 2018

Copy link
Copy Markdown
Member

Hmmm... unsure why @natalieethell ran into the above 🤔. In my local testing this seems to work well. Here is a test pass in Edge:

dl_drag_and_drop_rtl

Both the column positions and drop anchor markers seem correct. Will sync with @natalieethell offline to see what the culprit is.

@KevinTCoughlin KevinTCoughlin left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change LGTM in my testing (both LTR/RTL) :shipit:

Will sync with @natalieethell to confirm it also works for her, please wait for that to merge.

@natalieethell

Copy link
Copy Markdown
Contributor

Update: got it working! Just synced up with @KevinTCoughlin offline and it works for me when I click the "Render in RTL" option on the gear icon in the top right corner of the demo page. Looks good.

(Before, I was just changing the <html dir="ltr"> tag at the top of the page to <html dir="rtl">. That didn't seem to re-load everything correctly.)

I'll approve this, but could we resolve the comment above before merging? Thanks!

@KevinTCoughlin
KevinTCoughlin merged commit 1121afe into microsoft:master Dec 3, 2018
@msft-github-bot

Copy link
Copy Markdown
Contributor

🎉office-ui-fabric-react@v6.110.1 has been released which incorporates this pull request.:tada:

Handy Links:

Markionium added a commit to Markionium/office-ui-fabric-react that referenced this pull request Dec 7, 2018
* master: (55 commits)
  Applying package updates.
  default spellCheck=false in BasePicker (microsoft#7301)
  Separating border:none from .cell and removing from .root to avoid style override in DetailsColumn (microsoft#7211)
  Dropdown component honors ariaLabel prop (microsoft#7292)
  Add extensions for PowerShell, HEIC, 3gp, mak to FileTypeIconMap (microsoft#7299)
  Fix microsoft#7258 - Documentation is missing for button (microsoft#7302)
  Applying package updates.
  Add customizer scope to TeachingBubbleContent (microsoft#7294)
  Applying package updates.
  DevExp: Part 2 of 2 - the codebase no longer uses const enums, enabling consumers to be able to use isolatedModules (microsoft#7119)
  Add card dgl functionality (microsoft#7287)
  Only support LTS versions of Node 8 and 10 (microsoft#7290)
  add shift into delete action (microsoft#7274)
  Update CODEOWNERS
  Adding RTL support for DetailsList drag-drop to reorder columns (microsoft#7267)
  Applying package updates.
  Improve TeachingBubble usage docs (microsoft#7266)
  Lifting the resolution of default and user provided style variables to Utilities. (microsoft#7261)
  Re-adding animation for drag-n-drop to reorder columns (microsoft#7213)
  Update DetailsList Drag & Drop Example Snapshot (microsoft#7272)
  ...
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 30, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Column drag-drop not working in RTL

4 participants