Feature tabs rebase from develop

.codecov.yml

@@ -0,0 +1,4 @@
+ignore:
+  - "catalog"
+  - "components/*/examples"
+  - "components/*/tests/*"

.travis.yml

@@ -4,19 +4,24 @@ sudo: false
 # Only fire off builds for specific branches.
 branches:
   only:
-    - testtravis
+    - develop
+    - stable
+    - /^feature-.*$/
 env:
   global:
   - LC_CTYPE=en_US.UTF-8
   - LANG=en_US.UTF-8
   matrix:
-    - DESTINATION="OS=9.3,name=iPhone 6s" SDK=iphonesimulator9.3
+    - DESTINATION="platform=iOS Simulator,name=iPhone 7,OS=10.2" SDK="iphonesimulator10.2"
 before_install:
   - gem install xcpretty --no-rdoc --no-ri --no-document --quiet
 script:
   - set -o pipefail
   - xcodebuild -version
   - xcodebuild -showsdks
+  - pod --version
   - scripts/release/manage_pods.py install
   - scripts/build_all
   - scripts/test_all
+after_success:
+  - bash <(curl -s https://codecov.io/bash)

MaterialComponents.podspec

@@ -244,6 +244,18 @@ Pod::Spec.new do |s|
     ss.dependency "MaterialComponents/private/Overlay"
   end
 
+  s.subspec "Tabs" do |ss|
+    ss.ios.deployment_target = '7.0'
+    ss.public_header_files = "components/#{ss.base_name}/src/*.h"
+    ss.source_files = "components/#{ss.base_name}/src/*.{h,m}", "components/#{ss.base_name}/src/private/*.{h,m}"
+    ss.resources = ["components/#{ss.base_name}/src/Material#{ss.base_name}.bundle"]
+
+    ss.dependency "MaterialComponents/AnimationTiming"
+    ss.dependency "MaterialComponents/Ink"
+    ss.dependency "MaterialComponents/Typography"
+    ss.dependency "MaterialComponents/private/RTL"
+  end
+
   s.subspec "Typography" do |ss|
     ss.ios.deployment_target = '7.0'
     ss.public_header_files = "components/#{ss.base_name}/src/*.h"

README.md

@@ -1,5 +1,10 @@
 # Material Components for iOS
 
+<img align="right" src="mdc_hero.png" width="300px">
+
+[![Build Status](https://travis-ci.org/material-components/material-components-ios.svg?branch=develop)](https://travis-ci.org/material-components/material-components-ios)
+[![Code coverage](https://img.shields.io/codecov/c/github/material-components/material-components-ios/develop.svg)](https://codecov.io/gh/material-components/material-components-ios/branch/develop)
+
 Material Components for iOS (MDC-iOS) helps developers execute [Material Design](https://www.material.io). Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional iOS apps. Learn more about how Material Design supports design and usability best practices across platforms in the  [Material Design Platform Adaptation guidelines](https://material.io/guidelines/platforms/platform-adaptation.html).
 
 Material Components for iOS are written in Objective-C and support Swift and Interface Builder.

catalog/MDCCatalog.xcodeproj/project.pbxproj

@@ -379,18 +379,18 @@
 				TargetAttributes = {
 					0B50E1981D91B0BD00DED250 = {
 						CreatedOnToolsVersion = 7.3.1;
+						ProvisioningStyle = Automatic;
 						TestTargetID = 664524B21C6BA62A001ADBF8;
 					};
 					64307B371DF74FEF004AE4AC = {
 						CreatedOnToolsVersion = 8.2;
-						DevelopmentTeam = EQHXZ8M8AV;
 						LastSwiftMigration = 0810;
 						ProvisioningStyle = Automatic;
 					};
 					664524B21C6BA62A001ADBF8 = {
 						CreatedOnToolsVersion = 7.3;
-						DevelopmentTeam = EQHXZ8M8AV;
 						LastSwiftMigration = 0810;
+						ProvisioningStyle = Automatic;
 					};
 				};
 			};
@@ -715,6 +715,8 @@
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				CLANG_ANALYZER_NONNULL = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCInteractionTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -730,6 +732,8 @@
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				CLANG_ANALYZER_NONNULL = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCInteractionTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.3;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -748,7 +752,8 @@
 				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
 				CLANG_WARN_INFINITE_RECURSION = YES;
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEVELOPMENT_TEAM = EQHXZ8M8AV;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCActionExtension/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.google.mdc-catalog.MDCActionExtension";
@@ -767,7 +772,8 @@
 				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
 				CLANG_WARN_INFINITE_RECURSION = YES;
 				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEVELOPMENT_TEAM = EQHXZ8M8AV;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCActionExtension/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.google.mdc-catalog.MDCActionExtension";
@@ -867,7 +873,8 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
 				CLANG_ENABLE_MODULES = YES;
-				DEVELOPMENT_TEAM = EQHXZ8M8AV;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCCatalog/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = com.google.MDCCatalog;
@@ -885,7 +892,8 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
 				CLANG_ENABLE_MODULES = YES;
-				DEVELOPMENT_TEAM = EQHXZ8M8AV;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = MDCCatalog/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = com.google.MDCCatalog;

catalog/MDCCatalog.xcodeproj/xcshareddata/xcschemes/MDCCatalog.xcscheme

@@ -26,7 +26,8 @@
       buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      codeCoverageEnabled = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">

catalog/Podfile.lock

@@ -25,6 +25,7 @@ PODS:
     - MaterialComponents/ShadowLayer (= 19.0.4)
     - MaterialComponents/Slider (= 19.0.4)
     - MaterialComponents/Snackbar (= 19.0.4)
+    - MaterialComponents/Tabs (= 19.0.4)
     - MaterialComponents/Typography (= 19.0.4)
   - MaterialComponents/ActivityIndicator (19.0.4):
     - MaterialComponents/private/Application
@@ -148,6 +149,11 @@ PODS:
     - MaterialComponents/private/KeyboardWatcher
     - MaterialComponents/private/Overlay
     - MaterialComponents/Typography
+  - MaterialComponents/Tabs (19.0.4):
+    - MaterialComponents/AnimationTiming
+    - MaterialComponents/Ink
+    - MaterialComponents/private/RTL
+    - MaterialComponents/Typography
   - MaterialComponents/Typography (19.0.4)
   - MaterialComponentsCatalog (19.0.4):
     - MaterialComponents

components/ActivityIndicator/README.md

@@ -1,7 +1,7 @@
 # Activity Indicator
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Activity Indicator](docs/assets/activity_indicator.png)](docs/assets/activity_indicator.mp4)
+<a alt="Activity Indicator"><img src="docs/assets/activity_indicator.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/activity_indicator.mp4" autoplay loop></video></div>{% endif %}-->
 
 Activity indicators are visual indications of an app loading content. The Activity Indicator is a circular indicator that either rotates clockwise or fills to completion clockwise when displaying progress.

components/AppBar/README.md

@@ -1,7 +1,7 @@
 # App Bar
 
 <!--{% if site.link_to_site == "true" %}-->
-[![App Bar](docs/assets/app_bar.png)](docs/assets/app_bar.mp4)
+<a alt="App Bar"><img src="docs/assets/app_bar.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/app_bar.mp4" autoplay loop></video></div>{% endif %}-->
 
 The App Bar is a flexible navigation bar designed to provide a typical Material Design

components/AppBar/src/MDCAppBar.m

@@ -151,7 +151,7 @@ - (MDCHeaderStackView *)headerStackView {
   // Underlying issue is you need view loaded before accessing. Below change will accomplish that
   // by calling for view.bounds initializing the stack view
   if (!_headerStackView) {
-    _headerStackView = [[MDCHeaderStackView alloc] initWithFrame:self.view.bounds];
+    _headerStackView = [[MDCHeaderStackView alloc] initWithFrame:CGRectZero];
   }
   return _headerStackView;
 }

components/ButtonBar/README.md

@@ -1,7 +1,7 @@
 # Button Bar
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Button Bar](docs/assets/button_bar.png)](docs/assets/button_bar.mp4)
+<a alt="Button Bar"><img src="docs/assets/button_bar.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/button_bar.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Button Bar is a view that represents a list of UIBarButtonItems as horizontally aligned buttons.

components/Buttons/README.md

@@ -1,7 +1,7 @@
 # Buttons
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Buttons](docs/assets/buttons.png)](docs/assets/buttons.mp4)
+<a alt="Buttons"><img src="docs/assets/buttons.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/buttons.mp4" autoplay loop></video></div>{% endif %}-->
 
 Buttons is a collection of Material Design buttons, including a flat button, a raised button and a

components/CollectionCells/README.md

@@ -1,6 +1,6 @@
 # Collection Cells
 
-![Collections](docs/assets/collections_screenshot.png)
+<a alt="Collection Cells"><img src="docs/assets/collection_cells.png" width="320px"></a>
 <!--{: .ios-screenshot .right }-->
 
 Collection view cell classes that adhere to Material Design layout and styling.

components/Collections/README.md

@@ -1,7 +1,7 @@
 # Collections
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Collections](docs/assets/collections.png)](docs/assets/collections.mp4)
+<a alt="Collections"><img src="docs/assets/collections.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/collections.mp4" autoplay loop></video></div>{% endif %}-->
 
 Collection view classes that adhere to Material Design layout and styling.

components/FeatureHighlight/README.md

@@ -1,7 +1,7 @@
 # Feature Highlight
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Feature Highlight](docs/assets/feature_highlight.png)](docs/assets/feature_highlight.mp4)
+<a alt="Feature Highlight"><img src="docs/assets/feature_highlight.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/feature_highlight.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Feature Highlight component is a way to visually highlight a part of the screen in order to introduce users to new features and functionality.

components/FlexibleHeader/README.md

@@ -1,7 +1,7 @@
 # Flexible Header
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Flexible Header](docs/assets/flexible_header.png)](docs/assets/flexible_header.mp4)
+<a alt="Flexible Header"><img src="docs/assets/flexible_header.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/flexible_header.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Flexible Header is a container view whose height and vertical offset react to

components/HeaderStackView/README.md

@@ -1,7 +1,7 @@
 # Header Stack View
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Header Stack View](docs/assets/header_stack_view.png)](docs/assets/header_stack_view.mp4)
+<a alt="Header Stack View"><img src="docs/assets/header_stack_view.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/header_stack_view.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Header Stack View component is a view that coordinates the layout of two vertically stacked

components/Ink/README.md

@@ -1,7 +1,7 @@
 # Ink
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Ink](docs/assets/ink.png)](docs/assets/ink.mp4)
+<a alt="Ink"><img src="docs/assets/ink.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/ink.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Ink component provides a radial action in the form of a visual ripple of ink expanding

components/NavigationBar/README.md

@@ -1,7 +1,7 @@
 # Navigation Bar
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Navigation Bar](docs/assets/navigation_bar.png)](docs/assets/navigation_bar.mp4)
+<a alt="Navigation Bar"><img src="docs/assets/navigation_bar.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/navigation_bar.mp4" autoplay loop></video></div>{% endif %}-->
 
 The Navigation Bar component is a view composed of a left and right Button Bar and either a title

components/NavigationBar/src/MDCNavigationBar.m

@@ -302,9 +302,7 @@ - (void)layoutSubviews {
   CGRect alignedFrame = [self mdc_frameAlignedVertically:titleFrame
                                             withinBounds:textFrame
                                                alignment:titleVerticalAlignment];
-  alignedFrame = [self mdc_frameAlignedHorizontally:alignedFrame alignment:self.titleAlignment];
-  _titleLabel.frame = MDCRectFlippedForRTL(alignedFrame, self.bounds.size.width,
-                                           self.mdc_effectiveUserInterfaceLayoutDirection);
+  _titleLabel.frame = [self mdc_frameAlignedHorizontally:alignedFrame alignment:self.titleAlignment];
   self.titleView.frame = textFrame;
 
   // Button and title label alignment

components/PageControl/README.md

@@ -1,7 +1,7 @@
 # Page Control
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Page Control](docs/assets/page_control.png)](docs/assets/page_control.mp4)
+<a alt="Page Control"><img src="docs/assets/page_control.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/page_control.mp4" autoplay loop></video></div>{% endif %}-->
 
 This control is designed to be a drop-in replacement for `UIPageControl`, with a user experience

components/ProgressView/README.md

@@ -1,7 +1,7 @@
 # Progress View
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Progress View](docs/assets/progress_view.png)](docs/assets/progress_view.mp4)
+<a alt="Progress View"><img src="docs/assets/progress_view.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/progress_view.mp4" autoplay loop></video></div>{% endif %}-->
 
 This control is designed to be a drop-in replacement for `UIProgressView`, with a user experience

components/README.md

@@ -124,6 +124,11 @@ Material Components for iOS are written in Objective-C and support Swift and Int
   ](Switch/)
   <!--{: .icon-switch }-->
 
+- [**Tabs**
+  A material tab bar for switching between grouped content.
+  ](Tabs/)
+  <!--{: .icon-tabs }-->
+
 - [**Typography**
   Text styles for Material fonts and opacities.
   ](Typography/)

components/ShadowLayer/README.md

@@ -1,7 +1,7 @@
 # Shadow Layer
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Shadow Layer](docs/assets/shadow_layer.png)](docs/assets/shadow_layer.mp4)
+<a alt="Shadow Layer"><img src="docs/assets/shadow_layer.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/shadow_layer.mp4" autoplay loop></video></div>{% endif %}-->
 
 Shadow Layer implements the Material Design specifications for elevation and shadows.

components/Slider/README.md

@@ -1,7 +1,7 @@
 # Slider
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Slider](docs/assets/slider.png)](docs/assets/slider.mp4)
+<a alt="Slider"><img src="docs/assets/slider.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/slider.mp4" autoplay loop></video></div>{% endif %}-->
 
 The `MDCSlider` object is a Material Design control used to select a value from a continuous range

components/Snackbar/README.md

@@ -1,7 +1,7 @@
 # Snackbar
 
 <!--{% if site.link_to_site == "true" %}-->
-[![Snackbar](docs/assets/snackbar.png)](docs/assets/snackbar.mp4)
+<a alt="Snackbar"><img src="docs/assets/snackbar.png" width="320px"></a>
 <!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/snackbar.mp4" autoplay loop></video></div>{% endif %}-->
 
 Snackbars provide brief feedback about an operation through a message at the bottom of the screen.