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

feat: Add logical border block color properties #35999

Conversation

gabrieldonadel
Copy link
Collaborator

Summary

This PR implements logical border block color properties as requested on #34425. This implementation includes the addition of the following style properties

  • borderBlockColor, equivalent to borderTopColor and borderBottomColor.
  • borderBlockEndColor, equivalent to borderBottomColor.
  • borderBlockStartColor, equivalent to borderTopColor.

Changelog

[GENERAL] [ADDED] - Add logical border block color properties

Test Plan

  1. Open the RNTester app and navigate to the View page
  2. Test the new style properties through the Logical Border Color section
Android iOS
Screen.Recording.2023-01-30.at.01.01.44.mov
Screen.Recording.2023-01-30.at.02.12.26.mov

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 30, 2023
@analysis-bot
Copy link

analysis-bot commented Jan 30, 2023

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 8,463,812 +264
android hermes armeabi-v7a 7,785,331 +1,368
android hermes x86 8,937,786 +1,164
android hermes x86_64 8,796,110 +1,449
android jsc arm64-v8a 9,649,403 +444
android jsc armeabi-v7a 8,384,789 +1,563
android jsc x86 9,712,279 +1,356
android jsc x86_64 10,189,428 +1,651

Base commit: 83743e1
Branch: main

Comment on lines +104 to +106
@property (nonatomic, assign) CGFloat borderBlockWidth;
@property (nonatomic, assign) CGFloat borderBlockEndWidth;
@property (nonatomic, assign) CGFloat borderBlockStartWidth;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'll put up a follow-up PR implementing this but this is necessary here due to RCT_VIEW_BORDER_PROPERTY which creates set functions for both border##SIDE##Color and border##SIDE##Width

@facebook-github-bot
Copy link
Contributor

@jacdebug has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot
Copy link
Contributor

@jacdebug has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Jan 31, 2023
@facebook-github-bot
Copy link
Contributor

@jacdebug merged this pull request in 597a1ff.

@gabrieldonadel gabrieldonadel deleted the feat/add-logical-border-color branch February 3, 2023 02:09
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This PR implements logical border block color properties as requested on facebook#34425. This implementation includes the addition of the following style properties

- `borderBlockColor`, equivalent to `borderTopColor` and `borderBottomColor`.
- `borderBlockEndColor`, equivalent to `borderBottomColor`.
- `borderBlockStartColor`, equivalent to `borderTopColor`.

## Changelog

[GENERAL] [ADDED] - Add logical border block color properties

Pull Request resolved: facebook#35999

Test Plan:
1. Open the RNTester app and navigate to the `View` page
2. Test the new style properties through the `Logical Border Color` section

<table>
<tr>
    <td>Android</td>
    <td>iOS</td>
</tr>
  <tr>
    <td><video src="https://user-images.githubusercontent.com/11707729/215384882-5b96518e-ad70-4157-a7f3-130f488cc41c.mov"  alt="1" width="360px"   />
    </td>
<td>
<video src="https://user-images.githubusercontent.com/11707729/215392728-cfc6a097-26c1-4ffe-ab0e-f0a5a71a902d.mov"2" width="360px"  />
</td>
   </tr>
</table>

Reviewed By: cipolleschi

Differential Revision: D42849911

Pulled By: jacdebug

fbshipit-source-id: 822cff5264689c42031d496105537032b5cd31ef
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants