Skip to content

Commit

Permalink
[Buttons] Implement a color themer for an MDCFlatButton (#3308)
Browse files Browse the repository at this point in the history 
Addition of a unit test, and updated example to use the new themer.

Pivotal: https://www.pivotaltracker.com/story/show/156640819
  • Loading branch information
@yarneo
yarneo committed Apr 11, 2018
1 parent 9cd14c5 commit 482bd56
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 30 deletions.
7 changes: 4 additions & 3 deletions components/Buttons/examples/ButtonsTypicalUse.m
View file
Expand Up @@ -35,7 +35,7 @@ - (MDCButton *)buildCustomStrokedButton {
[button setBorderWidth:1.0 forState:UIControlStateNormal];
[button setBorderColor:[UIColor colorWithWhite:0.1f alpha:1] forState:UIControlStateNormal];

id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init];
MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] init];
[MDCButtonColorThemer applySemanticColorScheme:colorScheme toButton:button];
MDCTypographyScheme *typographyScheme = [[MDCTypographyScheme alloc] init];
[MDCButtonTypographyThemer applyTypographyScheme:typographyScheme toButton:button];
Expand All @@ -45,6 +45,7 @@ - (MDCButton *)buildCustomStrokedButton {
- (void)viewDidLoad {
[super viewDidLoad];

MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] init];
MDCTypographyScheme *typographyScheme = [[MDCTypographyScheme alloc] init];

self.view.backgroundColor = [UIColor colorWithWhite:0.9f alpha:1];
Expand Down Expand Up @@ -79,8 +80,8 @@ - (void)viewDidLoad {

MDCFlatButton *flatButton = [[MDCFlatButton alloc] init];
[flatButton setTitle:@"Button" forState:UIControlStateNormal];
[flatButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[MDCButtonTypographyThemer applyTypographyScheme:typographyScheme toButton:flatButton];
[MDCButtonColorThemer applySemanticColorScheme:colorScheme toFlatButton:flatButton];
[flatButton sizeToFit];
[flatButton addTarget:self
action:@selector(didTap:)
Expand All @@ -91,8 +92,8 @@ - (void)viewDidLoad {

MDCFlatButton *disabledFlatButton = [[MDCFlatButton alloc] init];
[disabledFlatButton setTitle:@"Button" forState:UIControlStateNormal];
[disabledFlatButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[MDCButtonTypographyThemer applyTypographyScheme:typographyScheme toButton:disabledFlatButton];
[MDCButtonColorThemer applySemanticColorScheme:colorScheme toFlatButton:disabledFlatButton];
[disabledFlatButton sizeToFit];
[disabledFlatButton addTarget:self
action:@selector(didTap:)
Expand Down
19 changes: 14 additions & 5 deletions components/Buttons/src/ColorThemer/MDCButtonColorThemer.h
View file
Expand Up @@ -23,21 +23,30 @@
@interface MDCButtonColorThemer : NSObject

/**
Applies a color scheme to theme to a MDCButton.
Applies a color scheme to theme to an MDCButton.
@param colorScheme The color scheme to apply to MDCButton.
@param colorScheme The color scheme to apply to @c button.
*/
+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toButton:(nonnull MDCButton *)button;

/**
Applies a color scheme to theme a MDCButton. Use a UIAppearance proxy to apply a color scheme to
Applies a color scheme to theme to an MDCFlatButton.
@param colorScheme The color scheme to apply to @c flatButton.
@param flatButton An MDCFlatButton instance to apply a color scheme.
*/
+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toFlatButton:(nonnull MDCFlatButton *)flatButton;

/**
Applies a color scheme to theme an MDCButton. Use a UIAppearance proxy to apply a color scheme to
all instances of MDCButton.
This method will soon be deprecated. Consider using applySemanticColorScheme:colorScheme.
@param colorScheme The color scheme to apply to MDCButton.
@param button A MDCButton instance to apply a color scheme.
@param colorScheme The color scheme to apply to @c button.
@param button An MDCButton instance to apply a color scheme.
*/
+ (void)applyColorScheme:(nonnull id<MDCColorScheme>)colorScheme
toButton:(nonnull MDCButton *)button;
Expand Down
25 changes: 21 additions & 4 deletions components/Buttons/src/ColorThemer/MDCButtonColorThemer.m
View file
Expand Up @@ -20,19 +20,36 @@ @implementation MDCButtonColorThemer

+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toButton:(nonnull MDCButton *)button {
[self resetUIControlStatesForButtonTheming:button];
[button setBackgroundColor:colorScheme.primaryColor forState:UIControlStateNormal];
[button setBackgroundColor:colorScheme.primaryColor forState:UIControlStateHighlighted];
[button setBackgroundColor:colorScheme.primaryColor forState:UIControlStateSelected];
[button setBackgroundColor:[colorScheme.onSurfaceColor colorWithAlphaComponent:0.12f]
forState:UIControlStateDisabled];
[button setTitleColor:colorScheme.onPrimaryColor forState:UIControlStateNormal];
[button setTitleColor:colorScheme.onPrimaryColor forState:UIControlStateHighlighted];
[button setTitleColor:colorScheme.onPrimaryColor forState:UIControlStateSelected];
[button setTitleColor:[colorScheme.onSurfaceColor colorWithAlphaComponent:0.26f]
forState:UIControlStateDisabled];
button.disabledAlpha = 1.f;
}

+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toFlatButton:(nonnull MDCFlatButton *)flatButton {
[self resetUIControlStatesForButtonTheming:flatButton];
[flatButton setBackgroundColor:UIColor.clearColor forState:UIControlStateNormal];
[flatButton setBackgroundColor:UIColor.clearColor forState:UIControlStateDisabled];
[flatButton setTitleColor:colorScheme.primaryColor forState:UIControlStateNormal];
[flatButton setTitleColor:[colorScheme.onSurfaceColor colorWithAlphaComponent:0.26f]
forState:UIControlStateDisabled];
flatButton.disabledAlpha = 1.f;
}

+ (void)resetUIControlStatesForButtonTheming:(nonnull MDCButton *)button {
NSUInteger maximumStateValue = UIControlStateNormal | UIControlStateSelected |
UIControlStateHighlighted | UIControlStateDisabled;
for (NSUInteger state = 0; state <= maximumStateValue; ++state) {
[button setBackgroundColor:nil forState:state];
[button setTitleColor:nil forState:state];
}
}

+ (void)applyColorScheme:(id<MDCColorScheme>)colorScheme
toButton:(MDCButton *)button {
[button setBackgroundColor:colorScheme.primaryColor forState:UIControlStateNormal];
Expand Down
82 changes: 64 additions & 18 deletions components/Buttons/tests/unit/ButtonsColorThemerTests.m
View file
Expand Up @@ -34,32 +34,78 @@ - (void)testMDCButtonColorThemer {
colorScheme.onPrimaryColor = UIColor.greenColor;
colorScheme.onSurfaceColor = UIColor.blueColor;
[button setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
[button setTitleColor:UIColor.greenColor forState:UIControlStateHighlighted];
[button setTitleColor:UIColor.blueColor forState:UIControlStateSelected];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateHighlighted];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateSelected];
[button setTitleColor:UIColor.grayColor forState:UIControlStateDisabled];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateNormal];
[button setBackgroundColor:UIColor.redColor forState:UIControlStateHighlighted];
[button setBackgroundColor:UIColor.blueColor forState:UIControlStateSelected];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateHighlighted];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateSelected];
[button setBackgroundColor:UIColor.darkGrayColor forState:UIControlStateDisabled];

// Where
[MDCButtonColorThemer applySemanticColorScheme:colorScheme toButton:button];

// Then
XCTAssertEqual([button titleColorForState:UIControlStateNormal], colorScheme.onPrimaryColor);
XCTAssertEqual([button titleColorForState:UIControlStateHighlighted], colorScheme.onPrimaryColor);
XCTAssertEqual([button titleColorForState:UIControlStateSelected], colorScheme.onPrimaryColor);
XCTAssert(
CGColorEqualToColor([button titleColorForState:UIControlStateDisabled].CGColor,
[colorScheme.onSurfaceColor colorWithAlphaComponent:0.26f].CGColor));
XCTAssertEqual([button backgroundColorForState:UIControlStateNormal], colorScheme.primaryColor);
XCTAssertEqual([button backgroundColorForState:UIControlStateHighlighted],
colorScheme.primaryColor);
XCTAssertEqual([button backgroundColorForState:UIControlStateSelected], colorScheme.primaryColor);
XCTAssert(
CGColorEqualToColor([button backgroundColorForState:UIControlStateDisabled].CGColor,
[colorScheme.onSurfaceColor colorWithAlphaComponent:0.12f].CGColor));
XCTAssertEqual(button.disabledAlpha, 1.f);
NSUInteger maximumStateValue = UIControlStateNormal | UIControlStateSelected |
UIControlStateHighlighted | UIControlStateDisabled;
for (NSUInteger state = 0; state <= maximumStateValue; ++state) {
if (state != UIControlStateDisabled) {
if ([button titleColorForState:state] != nil) {
XCTAssertEqual([button titleColorForState:state], colorScheme.onPrimaryColor);
}
if ([button backgroundColorForState:state] != nil) {
XCTAssertEqual([button backgroundColorForState:state], colorScheme.primaryColor);
}
} else {
XCTAssert(
CGColorEqualToColor([button titleColorForState:state].CGColor,
[colorScheme.onSurfaceColor colorWithAlphaComponent:0.26f].CGColor));
XCTAssert(
CGColorEqualToColor([button backgroundColorForState:state].CGColor,
[colorScheme.onSurfaceColor colorWithAlphaComponent:0.12f].CGColor));
}
}
XCTAssertEqualWithAccuracy(button.disabledAlpha, 1.f, 0.001f);
}

- (void)testMDCFlatButtonColorThemer {
// Given
MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] init];
MDCFlatButton *button = [[MDCFlatButton alloc] init];
[button setTitle:@"Hello World" forState:UIControlStateNormal];
colorScheme.primaryColor = UIColor.redColor;
colorScheme.onSurfaceColor = UIColor.blueColor;
[button setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateHighlighted];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateSelected];
[button setTitleColor:UIColor.grayColor forState:UIControlStateDisabled];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateNormal];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateHighlighted];
[button setBackgroundColor:UIColor.purpleColor forState:UIControlStateSelected];
[button setBackgroundColor:UIColor.darkGrayColor forState:UIControlStateDisabled];

// Where
[MDCButtonColorThemer applySemanticColorScheme:colorScheme toFlatButton:button];

// Then
NSUInteger maximumStateValue = UIControlStateNormal | UIControlStateSelected |
UIControlStateHighlighted | UIControlStateDisabled;
for (NSUInteger state = 0; state <= maximumStateValue; ++state) {
if (state != UIControlStateDisabled) {
if ([button titleColorForState:state] != nil) {
XCTAssertEqual([button titleColorForState:state], colorScheme.primaryColor);
}
if ([button backgroundColorForState:state] != nil) {
XCTAssertEqual([button backgroundColorForState:state], UIColor.clearColor);
}
} else {
XCTAssert(
CGColorEqualToColor([button titleColorForState:state].CGColor,
[colorScheme.onSurfaceColor colorWithAlphaComponent:0.26f].CGColor));
XCTAssertEqual([button backgroundColorForState:state], UIColor.clearColor);
}
}
XCTAssertEqualWithAccuracy(button.disabledAlpha, 1.f, 0.001f);
}

@end

0 comments on commit 482bd56

Please sign in to comment.