iOS textTransform style support #18387

TomSwift · 2018-03-14T22:20:10Z

Motivation

Issue #2088.

The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized").

Test Plan

My test plan involves having added a test-case to the RNTester app within the <Text> component area. I then manually verified that the rendered content met my expectation.

Here is the markup that exercises my enhancement:

<View>
  <Text style={{ textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{ textTransform: 'lowercase'}}>
    This TEXT SHOULD be lowercased.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    This text should be CAPITALIZED.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    Mixed:{' '}
    <Text style={{ textTransform: 'uppercase'}}>
      uppercase{' '}
    </Text>
    <Text style={{ textTransform: 'lowercase'}}>
      LoWeRcAsE{' '}
    </Text>
    <Text style={{ textTransform: 'capitalize'}}>
      capitalize each word
    </Text>
  </Text>
</View>

And here is a screenshot of the result:

Related PRs

Website Documentation PR
facebook/react-native-website#254

Release Notes

[IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations

# Conflicts: # Libraries/StyleSheet/StyleSheetTypes.js # RNTester/js/TextExample.ios.js # React/React.xcodeproj/project.pbxproj

TomSwift · 2018-03-14T23:09:29Z

I see that 2 checks failed. I'm not clear what my responsibility is here, as they appear (to me!) to be failing for reasons unrelated to my changes. Someone please advise?!

chirag04 · 2018-03-14T23:11:05Z

neat!

elicwhite · 2018-03-16T23:13:59Z

Libraries/StyleSheet/StyleSheetTypes.js

@@ -203,6 +203,7 @@ export type TextStyle = $ReadOnly<{|
    | 'underline line-through',
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
  textDecorationColor?: ColorValue,
+  +textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',


You don't need the + since the whole object is wrapped with $ReadOnly.

shergin

Could you please also fix code style?
Thank you!

shergin · 2018-03-17T04:21:10Z

Libraries/Text/RCTTextAttributes.m

@@ -214,6 +217,22 @@ - (UIColor *)effectiveBackgroundColor
  return effectiveBackgroundColor ?: [UIColor clearColor];
 }

+- (NSString*) effectiveText: (NSString*) text


Please rename it to applyTextAttributesToText: and follow code style.

shergin · 2018-03-17T04:22:58Z

Libraries/Text/RCTTextAttributes.m

@@ -73,6 +73,9 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes
  _isHighlighted = textAttributes->_isHighlighted || _isHighlighted;  // *
  _tag = textAttributes->_tag ?: _tag;
  _layoutDirection = textAttributes->_layoutDirection != UIUserInterfaceLayoutDirectionLeftToRight ? textAttributes->_layoutDirection : _layoutDirection;
+
+  // Transform
+  _textTransform = textAttributes->_textTransform ?: _textTransform;


Transform can be considered as Special, so remove the comment.
Compare to additional special "undefined" value here.

shergin · 2018-03-17T04:23:14Z

Libraries/Text/RCTTextAttributes.m

+{
+  switch (_textTransform)
+  {
+    case RCTTextTransformNone:


Please add additional "undefined" value.

shergin · 2018-03-17T04:23:54Z

React/Views/RCTTextTransform.h

+#import <Foundation/Foundation.h>
+
+typedef NS_ENUM(NSInteger, RCTTextTransform) {
+  RCTTextTransformNone = 0,


Please add additional "undefined" value.

janicduplessis · 2018-03-18T02:28:50Z

Libraries/Text/RCTTextAttributes.h

+/**
+ * Text transformed per 'none', 'uppercase', 'lowercase', 'capitalize'
+ */
+- (NSString*) effectiveText: (NSString*) text;


Nit: Fix spaces here to match the project code style - (NSString *)effectiveText:(NSString *)text;

janicduplessis · 2018-03-18T02:30:00Z

@TomSwift Nice work! CI is failing on master so it doesn't look related to your PR.

janicduplessis · 2018-03-25T01:32:01Z

@shergin Why do we need an undefined value here? AFAIK the prop will default to RCTTextTransformNone when not specified because of the RCTConvert macro here https://github.com/facebook/react-native/pull/18387/files#diff-99f3601ec9fb0cc23570af725a27781eR324.

shergin · 2018-03-25T03:52:27Z

React/Base/RCTConvert.m

+  @"capitalize": @(RCTTextTransformCapitalize),
+  @"uppercase": @(RCTTextTransformUppercase),
+  @"lowercase": @(RCTTextTransformLowercase),
+}), RCTTextTransformNone, integerValue)


The default value here should be RCTTextTransformUndefined, not RCTTextTransformNone.

@janicduplessis Right?

Hmm not how this works, does [RCTTextAttributes applyTextAttributes] only receives changed attributes (and some undefined value for the ones that did not change)?

I think both options would work but I'm not sure if one makes more sense. Maybe check what we do for other enum text attributes.

It's easy to test.
<Text uppercase>a<Text>b</Text>c</Text> must produce "ABC", but with RCTTextTransformNone as a default value it will produce "AbC", I believe.

I added a test for this.

shergin · 2018-03-25T03:54:47Z

@janicduplessis Yeah, seems we have to specify undefined as a default value in the convert macro.

shergin · 2018-03-25T03:56:28Z

Overall it looks good to me!
@TomSwift Thank you!

shergin · 2018-03-25T03:57:50Z

Libraries/Text/RCTTextAttributes.m

@@ -73,6 +74,7 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes
  _isHighlighted = textAttributes->_isHighlighted || _isHighlighted;  // *
  _tag = textAttributes->_tag ?: _tag;
  _layoutDirection = textAttributes->_layoutDirection != UIUserInterfaceLayoutDirectionLeftToRight ? textAttributes->_layoutDirection : _layoutDirection;
+  _textTransform = textAttributes->_textTransform != RCTTextTransformUndefined ? textAttributes->_textTransform : _textTransform;


Yeah, this is why we have to have undefined value!

elicwhite · 2018-03-25T06:17:22Z

It seems like this would be great to get screenshot tests for

janicduplessis · 2018-03-25T06:34:44Z

@TheSavior Not sure if we still run those tests anywhere but there is one already for TextExample.js so we probably just need to update the screenshot and this would be tested already!

TomSwift · 2018-03-26T16:24:49Z

@shergin - is this good to go, then? It's still showing "Changes requested" but I'm not clear that there's anything else for me to address.

janicduplessis

Had another look, looks good just a few nits.

I'll let @shergin have another look too and ship it

janicduplessis · 2018-03-27T03:55:52Z

Libraries/Text/RCTTextAttributes.m

+  switch (_textTransform) {
+    case RCTTextTransformUndefined:
+    case RCTTextTransformNone:
+    default:


I don't think we need a default case since we cover all enum values.

janicduplessis · 2018-03-27T03:59:53Z

Libraries/Text/RCTTextAttributes.m

@@ -214,6 +216,22 @@ - (UIColor *)effectiveBackgroundColor
  return effectiveBackgroundColor ?: [UIColor clearColor];
 }

+- (NSString*)applyTextAttributesToText:(NSString*)text


Space between type and pointer (NSString *) for both

Sorry for style nits, need prettier for objc!

In the last round of feedback I was asked to fix the formatting to what it is now, which matches the formatting in the surrounding code (no spaces). My personal preference is spaces, but I think my additions should match the surrounding code.

There should be a space between NSString and *, the rest is fine

gotcha; fixed.

janicduplessis · 2018-03-27T04:00:14Z

Libraries/Text/RCTTextAttributes.h

+/**
+ * Text transformed per 'none', 'uppercase', 'lowercase', 'capitalize'
+ */
+- (NSString*)applyTextAttributesToText:(NSString*)text;


Same, spaces

Same; matches surrounding code.

janicduplessis · 2018-03-27T04:00:47Z

Libraries/Text/BaseText/RCTBaseTextViewManager.m

@@ -51,5 +51,7 @@ - (RCTShadowView *)shadowView
 RCT_REMAP_SHADOW_PROPERTY(textShadowColor, textAttributes.textShadowColor, UIColor)
 // Special
 RCT_REMAP_SHADOW_PROPERTY(isHighlighted, textAttributes.isHighlighted, BOOL)
+// Transform


Remove this comment, textTransform can be considered in the "Special" section

janicduplessis · 2018-03-27T04:01:37Z

Libraries/Text/RCTTextAttributes.m

@@ -263,7 +281,9 @@ - (BOOL)isEqual:(RCTTextAttributes *)textAttributes
    // Special
    RCTTextAttributesCompareOthers(_isHighlighted) &&
    RCTTextAttributesCompareObjects(_tag) &&
-    RCTTextAttributesCompareOthers(_layoutDirection);
+    RCTTextAttributesCompareOthers(_layoutDirection) &&
+    // Transform


Same, remove comment

TomSwift · 2018-04-04T16:22:54Z

@shergin Are you still looking to see changes applied here?

grabbou · 2018-04-10T09:31:51Z

I am wondering whether we should also provide Android support - otherwise, I am afraid this may end up in an error on Android.

janicduplessis · 2018-04-11T03:41:35Z

It should just be a no-op on Android for now, adding support for it in a follow up PR would be great.

janicduplessis · 2018-04-11T03:48:44Z

I think @shergin is very busy :) so I’ll just go ahead and ship it, looks good to me.

@facebook-github-bot shipit

facebook-github-bot

@janicduplessis is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

shergin · 2018-04-11T06:21:15Z

RNTester/js/TextExample.ios.js

+    render: function() {
+      return (
+        <View>
+          <Text style={{ textTransform: 'uppercase'}}>


We should add a test with <Text> with no textTransform style.

shergin · 2018-04-11T06:22:41Z

@janicduplessis Thanks!!1
@TomSwift See my follow up comments. I think we can improve it even more.

janicduplessis · 2018-04-14T17:43:56Z

@facebook-github-bot shipit

facebook-github-bot

@janicduplessis is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

Summary: Issue [facebook#2088](facebook#2088). The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). My test plan involves having added a test-case to the RNTester app within the `<Text>` component area. I then manually verified that the rendered content met my expectation. Here is the markup that exercises my enhancement: ``` <View> <Text style={{ textTransform: 'uppercase'}}> This text should be uppercased. </Text> <Text style={{ textTransform: 'lowercase'}}> This TEXT SHOULD be lowercased. </Text> <Text style={{ textTransform: 'capitalize'}}> This text should be CAPITALIZED. </Text> <Text style={{ textTransform: 'capitalize'}}> Mixed:{' '} <Text style={{ textTransform: 'uppercase'}}> uppercase{' '} </Text> <Text style={{ textTransform: 'lowercase'}}> LoWeRcAsE{' '} </Text> <Text style={{ textTransform: 'capitalize'}}> capitalize each word </Text> </Text> </View> ``` And here is a screenshot of the result: ![screen shot 2018-03-14 at 3 01 02 pm](https://user-images.githubusercontent.com/575821/37433772-7abe7fa0-279a-11e8-9ec9-fb3aa1952dad.png) [Website Documentation PR](facebook/react-native-website#254) facebook/react-native-website#254 [IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations Closes facebook#18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79

Summary: Issue #2088 (closed, but a bit pre-emptively imo, since Android support was skipped) Related (merged) iOS PR #18387 Related documentation PR facebook/react-native-website#500 The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). Pull Request resolved: #20572 Differential Revision: D9311716 Pulled By: hramos fbshipit-source-id: dfbb855117196958e7ae5e980700d31be07a448d

Summary: Issue [#2088](facebook/react-native#2088). The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). My test plan involves having added a test-case to the RNTester app within the `<Text>` component area. I then manually verified that the rendered content met my expectation. Here is the markup that exercises my enhancement: ``` <View> <Text style={{ textTransform: 'uppercase'}}> This text should be uppercased. </Text> <Text style={{ textTransform: 'lowercase'}}> This TEXT SHOULD be lowercased. </Text> <Text style={{ textTransform: 'capitalize'}}> This text should be CAPITALIZED. </Text> <Text style={{ textTransform: 'capitalize'}}> Mixed:{' '} <Text style={{ textTransform: 'uppercase'}}> uppercase{' '} </Text> <Text style={{ textTransform: 'lowercase'}}> LoWeRcAsE{' '} </Text> <Text style={{ textTransform: 'capitalize'}}> capitalize each word </Text> </Text> </View> ``` And here is a screenshot of the result: ![screen shot 2018-03-14 at 3 01 02 pm](https://user-images.githubusercontent.com/575821/37433772-7abe7fa0-279a-11e8-9ec9-fb3aa1952dad.png) [Website Documentation PR](facebook/react-native-website#254) facebook/react-native-website#254 [IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations Closes facebook/react-native#18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79

Summary: Issue #2088 (closed, but a bit pre-emptively imo, since Android support was skipped) Related (merged) iOS PR #18387 Related documentation PR facebook/react-native-website#500 The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). Pull Request resolved: #20572 Differential Revision: D9311716 Pulled By: hramos fbshipit-source-id: dfbb855117196958e7ae5e980700d31be07a448d

Summary: Issue facebook/react-native#2088 (closed, but a bit pre-emptively imo, since Android support was skipped) Related (merged) iOS PR facebook/react-native#18387 Related documentation PR facebook/react-native-website#500 The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). Pull Request resolved: facebook/react-native#20572 Differential Revision: D9311716 Pulled By: hramos fbshipit-source-id: dfbb855117196958e7ae5e980700d31be07a448d

iOS textTransform style support

d8e3891

# Conflicts: # Libraries/StyleSheet/StyleSheetTypes.js # RNTester/js/TextExample.ios.js # React/React.xcodeproj/project.pbxproj

TomSwift requested a review from shergin as a code owner March 14, 2018 22:20

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 Mar 14, 2018

This was referenced Mar 14, 2018

docs for textTransform style facebook/react-native-website#254

Merged

[TextView] [CSS] text-transform support? #2088

Closed

fix header comment-block text

8ee0bc6

react-native-bot added Platform: iOS iOS applications. Ran Commands One of our bots successfully processed a command. Feature Request 🌟 labels Mar 15, 2018

elicwhite reviewed Mar 16, 2018

View reviewed changes

shergin suggested changes Mar 17, 2018

View reviewed changes

janicduplessis reviewed Mar 18, 2018

View reviewed changes

PR feedback

d8dcb80

hramos added Type: Enhancement A new feature or enhancement of an existing feature. and removed 🌟Feature Request labels Mar 19, 2018

shergin reviewed Mar 25, 2018

View reviewed changes

janicduplessis suggested changes Mar 27, 2018

View reviewed changes

TomSwift added 2 commits March 27, 2018 09:20

PR feedback

67fc2c1

PR feedback

7d64606

janicduplessis approved these changes Mar 27, 2018

View reviewed changes

facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Apr 11, 2018

facebook-github-bot approved these changes Apr 11, 2018

View reviewed changes

shergin reviewed Apr 11, 2018

View reviewed changes

PR feedback, added test.

8d33e8f

facebook-github-bot approved these changes Apr 14, 2018

View reviewed changes

facebook-github-bot closed this in 8621d4b Apr 16, 2018

stephencookdev mentioned this pull request Aug 7, 2018

Android textTransform style support #20572

Closed

iOS textTransform style support #18387

iOS textTransform style support #18387

Conversation

TomSwift commented Mar 14, 2018 • edited Loading

Motivation

Test Plan

Related PRs

Release Notes

TomSwift commented Mar 14, 2018

chirag04 commented Mar 14, 2018

Choose a reason for hiding this comment

shergin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janicduplessis commented Mar 18, 2018

janicduplessis commented Mar 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shergin commented Mar 25, 2018

shergin commented Mar 25, 2018

Choose a reason for hiding this comment

elicwhite commented Mar 25, 2018

janicduplessis commented Mar 25, 2018

TomSwift commented Mar 26, 2018

janicduplessis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TomSwift commented Apr 4, 2018

grabbou commented Apr 10, 2018

janicduplessis commented Apr 11, 2018

janicduplessis commented Apr 11, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shergin commented Apr 11, 2018

janicduplessis commented Apr 14, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

TomSwift commented Mar 14, 2018 •

edited

Loading