Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

feat: pass RTL flag to rules function #109

Merged
merged 4 commits into from
Jul 20, 2018
Merged

Conversation

kuzhelov
Copy link
Collaborator

@kuzhelov kuzhelov commented Jul 18, 2018

This change is necessary for the sake of component styles being able to adapt to current presence of RTL mode.

As an example, suppose that we have a Chat Message component with the following layout

image

Relevant thing for us is the fact that 'timestamp' region has left padding, to ensure it won't overlap content of the 'author' area. However, in the RTL mode we would like this padding being applied on the right side of the component, not still on the left one:

image

But, unfortunately, at the moment we are unable to detect whether RTL is enabled from the 'rules' function. What would solve the problem is that if we would pass isRtl flag to rules functions, such that the following will be possible:

export default rules = () => {
  root: ({ isRtl }) => {
      padding: isRtl ? .. : ...
  }
}

Copy link
Member

@levithomason levithomason left a comment

Choose a reason for hiding this comment

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

Consider comments and merge.

@@ -94,7 +94,7 @@ class Provider extends Component<any, any> {

// ensure we don't assign `undefined` values to the theme context
// they will override values down stream
const theme: any = {}
const theme: any = { isRtl: !!this.props.rtl }
Copy link
Member

Choose a reason for hiding this comment

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

Please destructure rtl at the top of the function with the other props.

I propose we don't rename props as they pass from the Provider to the theme. It adds unnecessary thinking to follow renames.

@levithomason
Copy link
Member

Yep, this is required. Please see comment and then merge.

@kuzhelov kuzhelov requested a review from dvdzkwsk as a code owner July 20, 2018 12:00
@kuzhelov
Copy link
Collaborator Author

comments are addressed

@codecov
Copy link

codecov bot commented Jul 20, 2018

Codecov Report

Merging #109 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #109   +/-   ##
=======================================
  Coverage   69.94%   69.94%           
=======================================
  Files          74       74           
  Lines        1198     1198           
  Branches      227      227           
=======================================
  Hits          838      838           
  Misses        355      355           
  Partials        5        5
Impacted Files Coverage Δ
src/components/Provider/Provider.tsx 52.38% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 93c12cc...35daf63. Read the comment docs.

@kuzhelov kuzhelov changed the title [RFC] Pass RTL flag to rules function feat: pass RTL flag to rules function Jul 20, 2018
@kuzhelov kuzhelov merged commit a1f7383 into master Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants