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.

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

RTL: Flip some dashicons that have directionality #3912

Closed
wants to merge 2 commits into from

Conversation

yoavf
Copy link
Contributor

@yoavf yoavf commented Dec 11, 2017

Description

How Has This Been Tested?

Manual testing in LTR and RTL mode

Screenshots (jpeg or gifs if applicable):

Before:
before-list
before-blocks

After
after-list
after-blocks

Types of changes

CSS that will affect the RTL version, and will flip the icons.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows has proper inline documentation.

`editor-outdent`, `editor-indent`, `list-view`, and `editor-ul` can and should be flipped in RTL
`editor-ol` needs an RTL version: WordPress/dashicons#250
@@ -133,3 +133,14 @@
.components-panel .circle-picker {
padding-bottom: 20px;
}

body.rtl .gutenberg .dashicon {
Copy link
Member

Choose a reason for hiding this comment

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

/**
* Internal dependencies
*/
import './style.scss';
Copy link
Member

Choose a reason for hiding this comment

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

This file is generated, so this import would be overwritten next time the Dashicons is updated. It seems like the RTL flipping could be valuable to have in the base Dashicons repository, but in keeping it generic we'd not want to assume the presence of an .rtl body class. Would it be reasonable to detect RTL from JavaScript inside the component class and apply an inline style?

https://github.com/WordPress/dashicons/blob/master/sources/react/index-header.jsx
https://github.com/WordPress/dashicons/blob/master/sources/react/index-footer.jsx

@@ -0,0 +1,10 @@
body.rtl .gutenberg .dashicon {
&.dashicons-editor-outdent,
Copy link
Member

Choose a reason for hiding this comment

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

Mixed whitespace, tabs and spaces.

@gziolo gziolo added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Jan 27, 2018
@gziolo
Copy link
Member

gziolo commented Jan 27, 2018

@yoavf do you plan to finish this PR or should someone else take it over?

@azaozz
Copy link
Contributor

azaozz commented Jun 25, 2018

May be just me but... screenshot looks odd with the numbered list icon in LTR and the bulleted one in RTL. Can we use "proper" RTL icons there? Then we only will need to swap the icons in the CSS, not "flip" them.

@aduth
Copy link
Member

aduth commented Sep 13, 2018

Closing as stale without response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants