[Slider] Split the documentation into separate articles and run the r…

…eadme generator. (#3626)

components/Slider/.vars

@@ -5,3 +5,4 @@ root_path=/catalog/sliders
 icon_id=slider
 color_themer_api=MDCSliderColorThemer
 themer_parameter_name=slider
+short_description=The Slider component provides a Material Design control for selecting a value from a continuous range or discrete set of values.

components/Slider/README.md

@@ -1,5 +1,5 @@
 <!--docs:
-title: "Sliders"
+title: "Slider"
 layout: detail
 section: components
 excerpt: "The Slider component provides a Material Design control for selecting a value from a continuous range or discrete set of values."
@@ -8,6 +8,8 @@ path: /catalog/sliders/
 api_doc_root: true
 -->
 
+<!-- This file was auto-generated using ./scripts/generate_readme Slider -->
+
 # Slider
 
 <div class="article__asset article__asset--screenshot">
@@ -17,52 +19,49 @@ api_doc_root: true
 The `MDCSlider` object is a Material Design control used to select a value from a continuous range
 or discrete set of values.
 
-## Design & API Documentation
+## Design & API documentation
 
 <ul class="icon-list">
   <li class="icon-list-item icon-list-item--spec"><a href="https://material.io/go/design-sliders">Material Design guidelines: Sliders</a></li>
   <li class="icon-list-item icon-list-item--link"><a href="https://material.io/components/ios/catalog/sliders/api-docs/Classes/MDCSlider.html">API: MDCSlider</a></li>
 </ul>
 
-## Extensions
+## Table of contents
 
-<ul class="icon-list">
-  <li class="icon-list-item icon-list-item--link"><a href="docs/color-theming.md">Color Theming</a></li>
-</ul>
+- [Installation](#installation)
+  - [Installation with CocoaPods](#installation-with-cocoapods)
+  - [Importing](#importing)
+- [Usage](#usage)
+  - [Typical use](#typical-use)
+  - [Stateful APIs](#stateful-apis)
+  - [Differences from UISlider](#differences-from-uislider)
+- [Extensions](#extensions)
+  - [Color Theming](#color-theming)
 
 - - -
 
 ## Installation
 
+<!-- Extracted from docs/../../../docs/component-installation.md -->
+
 ### Installation with CocoaPods
 
-To add this component to your Xcode project using CocoaPods, add the following to your `Podfile`:
+Add the following to your `Podfile`:
 
 ```bash
 pod 'MaterialComponents/Slider'
 ```
 <!--{: .code-renderer.code-renderer--install }-->
 
-To add this component along with its themer and other related extensions, please add the following instead:
-```bash
-pod 'MaterialComponents/Slider+Extensions'
-```
-
 Then, run the following command:
 
 ```bash
 pod install
 ```
 
-
-- - -
-
-
-## Usage
-
 ### Importing
 
-Before using Slider, you'll need to import it:
+To import the component:
 
 <!--<div class="material-code-render" markdown="1">-->
 #### Swift
@@ -77,7 +76,12 @@ import MaterialComponents.MaterialSlider
 ```
 <!--</div>-->
 
-### Standard usage
+
+## Usage
+
+<!-- Extracted from docs/typical-use.md -->
+
+### Typical use
 
 MDCSlider can be be used like a standard `UIControl`.
 
@@ -117,7 +121,9 @@ func didChangeSliderValue(senderSlider:MDCSlider) {
 ```
 <!--</div>-->
 
-### Stateful API
+<!-- Extracted from docs/stateful-apis.md -->
+
+### Stateful APIs
 
 `MDCSlider` exposes stateful APIs to customize the colors for different control states. In order to use this API you must enable `statefulAPIEnabled` on your `MDCSlider` instances.
 
@@ -143,7 +149,9 @@ func didChangeSliderValue(senderSlider:MDCSlider) {
 ```
 <!--</div>-->
 
-### The differences between the UISlider class and the MDCSlider class:
+<!-- Extracted from docs/differences-from-uislider.md -->
+
+### Differences from UISlider
 
 Does not have api to:
 
@@ -160,3 +168,47 @@ Same features:
 New features:
 
 - making the slider a snap to discrete values via property numberOfDiscreteValues
+
+
+## Extensions
+
+<!-- Extracted from docs/color-theming.md -->
+
+### Color Theming
+
+You can theme a slider with your app's color scheme using the ColorThemer extension.
+
+You must first add the Color Themer extension to your project:
+
+```bash
+pod 'MaterialComponents/Slider+Extensions/ColorThemer'
+```
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+```swift
+// Step 1: Import the ColorThemer extension
+import MaterialComponents.MaterialSlider_ColorThemer
+
+// Step 2: Create or get a color scheme
+let colorScheme = MDCSemanticColorScheme()
+
+// Step 3: Apply the color scheme to your component
+MDCSliderColorThemer.applySemanticColorScheme(colorScheme, to: component)
+```
+
+#### Objective-C
+
+```objc
+// Step 1: Import the ColorThemer extension
+#import "MaterialSlider+ColorThemer.h"
+
+// Step 2: Create or get a color scheme
+id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init];
+
+// Step 3: Apply the color scheme to your component
+[MDCSliderColorThemer applySemanticColorScheme:colorScheme
+     toslider:component];
+```
+<!--</div>-->
+

components/Slider/docs/README.md

@@ -0,0 +1,31 @@
+# Slider
+
+<div class="article__asset article__asset--screenshot">
+  <img src="docs/assets/slider.png" alt="Slider" width="375">
+</div>
+
+The `MDCSlider` object is a Material Design control used to select a value from a continuous range
+or discrete set of values.
+
+## Design & API documentation
+
+* [Material Design guidelines: Sliders](https://material.io/go/design-sliders)
+* [API: MDCSlider](https://material.io/components/ios/catalog/sliders/api-docs/Classes/MDCSlider.html)
+
+<!-- toc -->
+
+- - -
+
+## Installation
+
+- [Typical installation](../../../docs/component-installation.md)
+
+## Usage
+
+- [Typical use](typical-use.md)
+- [Stateful APIs](stateful-apis.md)
+- [Differences from UISlider](differences-from-uislider.md)
+
+## Extensions
+
+- [Color Theming](color-theming.md)

components/Slider/docs/color-theming.md

@@ -1,13 +1,4 @@
-<!--docs:
-title: "Color Theming"
-layout: detail
-section: components
-excerpt: "How to theme Slider using the Material Design color system."
-iconId: slider
-path: /catalog/sliders/color-theming/
--->
-
-# Slider Color Theming
+### Color Theming
 
 You can theme a slider with your app's color scheme using the ColorThemer extension.
 
@@ -17,8 +8,6 @@ You must first add the Color Themer extension to your project:
 pod 'MaterialComponents/Slider+Extensions/ColorThemer'
 ```
 
-## Example code
-
 <!--<div class="material-code-render" markdown="1">-->
 #### Swift
 ```swift

components/Slider/docs/differences-from-uislider.md

@@ -0,0 +1,17 @@
+### Differences from UISlider
+
+Does not have api to:
+
+- set right and left icons
+- set the thumb image
+- set the right and left track images (for a custom track)
+- set the right (background track) color
+
+Same features:
+
+- set color for thumb via @c thumbColor
+- set color of track via @c trackColor
+
+New features:
+
+- making the slider a snap to discrete values via property numberOfDiscreteValues

components/Slider/docs/stateful-apis.md

@@ -0,0 +1,25 @@
+### Stateful APIs
+
+`MDCSlider` exposes stateful APIs to customize the colors for different control states. In order to use this API you must enable `statefulAPIEnabled` on your `MDCSlider` instances.
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+
+```swift
+ let slider = MDCSlider()
+ slider.isStatefulAPIEnabled = true
+
+ // Setting a thumb color for selected state.
+ slider.setThumbColor(.red, for: .selected)
+```
+
+#### Objective C
+
+```objc
+ MDCSlider *slider = [[MDCSlider alloc] init];
+ slider.statefulAPIEnabled = YES;
+
+ // Setting a thumb color for selected state.
+ [slider setThumbColor:[UIColor redColor] forState:UIControlStateSelected];
+```
+<!--</div>-->

components/Slider/docs/typical-use.md

@@ -0,0 +1,39 @@
+### Typical use
+
+MDCSlider can be be used like a standard `UIControl`.
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+
+```swift
+override func viewDidLoad() {
+  super.viewDidLoad()
+
+  let slider = MDCSlider(frame: CGRect(x: 50, y: 50, width: 100, height: 27))
+  slider.addTarget(self,
+                   action: #selector(didChangeSliderValue(senderSlider:)),
+                   for: .valueChanged)
+  view.addSubview(slider)
+}
+
+func didChangeSliderValue(senderSlider:MDCSlider) {
+  print("Did change slider value to: %@", senderSlider.value)
+}
+```
+
+#### Objective C
+
+```objc
+- (void)viewDidLoad {
+  MDCSlider *slider = [[MDCSlider alloc] initWithFrame:CGRectMake(50, 50, 100, 27)];
+  [slider addTarget:self
+                action:@selector(didChangeSliderValue:)
+      forControlEvents:UIControlEventValueChanged];
+  [self.view addSubview:slider];
+}
+
+- (void)didChangeSliderValue:(MDCSlider *)slider {
+  NSLog(@"did change %@ value: %f", NSStringFromClass([slider class]), slider.value);
+}
+```
+<!--</div>-->