Skip to content

Commit

Permalink
[ActionSheet] Update docs to include themers (#5209)
Browse files Browse the repository at this point in the history
### Context
The docs for ActionSheet haven't been updated since the initial PR.
### The problem
There was no section for theming, color or typography theming.
### The fix
Add sections for both color and typography theming to the README.
  • Loading branch information
codeman7 committed Sep 24, 2018
1 parent b52096c commit 255f6e9
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 0 deletions.
87 changes: 87 additions & 0 deletions components/ActionSheet/README.md
Expand Up @@ -37,6 +37,8 @@ the screen and displays actions a user can take.
- [Typical use](#typical-use)
- [MDCActionSheetController vs. UIAlertControllerStyleActionSheet](#mdcactionsheetcontroller-vs.-uialertcontrollerstyleactionsheet)
- [Extensions](#extensions)
- [Color Theming](#color-theming)
- [Typography Theming](#typography-theming)
- [Accessibility](#accessibility)
- [Set `-isScrimAccessibilityElement`](#set-`-isscrimaccessibilityelement`)
- [Set `-scrimAccessibilityLabel`](#set-`-scrimaccessibilitylabel`)
Expand Down Expand Up @@ -163,6 +165,91 @@ Material UIAlertController please see the `MDCAlertController` class.

## Extensions

<!-- Extracted from docs/color-theming.md -->

### Color Theming

You can theme an Action Sheet with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

```bash
pod `MaterialComponentsAlpha/ActionSheet+ColorThemer`
```

<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the ColorThemer extension
import MaterialComponentsAlpha.MaterialActionSheet_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
let actionSheet = MDCActionSheetController()
MDCActionSheetColorThemer.applySemanticColorScheme(colorScheme, to: actionSheet)
```

#### Objective-C

```objc
// Step 1: Import the ColorThemer extension
#import "MaterialActionSheet+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSematnicColorScheme alloc] init];

// Step 3: Apply the color scheme to your component
MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init];
[MDCActionSheetColorThemer applySemanticColorScheme:self.colorScheme
toActionSheetController:actionSheet];
```
<!--</div>-->

<!-- Extracted from docs/typography-theming.md -->

### Typography Theming

You can theme an Action Sheet with your app's typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

```bash
pod `MaterialComponentsAlpha/ActionSheet+TypographyThemer`
```

<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the ColorThemer extension
import MaterialComponentsAlpha.MaterialActionSheet_TypographyThemer

// Step 2: Create or get a color scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the color scheme to your component
let actionSheet = MDCActionSheetController()
MDCActionSheetTypographyThemer.applyTypographyScheme(typographyScheme, to: actionSheet)
```

#### Objective-C

```objc
// Step 1: Import the ColorThemer extension
#import "MaterialActionSheet+TypographyThemer.h"

// Step 2: Create or get a color scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];

// Step 3: Apply the color scheme to your component
MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init];
[MDCActionSheetTypographyThemer applyTypographyScheme:self.typographyScheme
toActionSheetController:actionSheet];
```
<!--</div>-->


<!-- Extracted from docs/accessibility.md -->

## Accessibility
Expand Down
3 changes: 3 additions & 0 deletions components/ActionSheet/docs/README.md
Expand Up @@ -55,4 +55,7 @@ Material UIAlertController please see the `MDCAlertController` class.

## Extensions

- [Color Theming](color-theming.md)
- [Typography Theming](typography-theming.md)

- [Accessibility](accessibility.md)
39 changes: 39 additions & 0 deletions components/ActionSheet/docs/color-theming.md
@@ -0,0 +1,39 @@
### Color Theming

You can theme an Action Sheet with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

```bash
pod `MaterialComponentsAlpha/ActionSheet+ColorThemer`
```

<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the ColorThemer extension
import MaterialComponentsAlpha.MaterialActionSheet_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
let actionSheet = MDCActionSheetController()
MDCActionSheetColorThemer.applySemanticColorScheme(colorScheme, to: actionSheet)
```

#### Objective-C

```objc
// Step 1: Import the ColorThemer extension
#import "MaterialActionSheet+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSematnicColorScheme alloc] init];

// Step 3: Apply the color scheme to your component
MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init];
[MDCActionSheetColorThemer applySemanticColorScheme:self.colorScheme
toActionSheetController:actionSheet];
```
<!--</div>-->
39 changes: 39 additions & 0 deletions components/ActionSheet/docs/typography-theming.md
@@ -0,0 +1,39 @@
### Typography Theming

You can theme an Action Sheet with your app's typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

```bash
pod `MaterialComponentsAlpha/ActionSheet+TypographyThemer`
```

<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the ColorThemer extension
import MaterialComponentsAlpha.MaterialActionSheet_TypographyThemer

// Step 2: Create or get a color scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the color scheme to your component
let actionSheet = MDCActionSheetController()
MDCActionSheetTypographyThemer.applyTypographyScheme(typographyScheme, to: actionSheet)
```

#### Objective-C

```objc
// Step 1: Import the ColorThemer extension
#import "MaterialActionSheet+TypographyThemer.h"

// Step 2: Create or get a color scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];

// Step 3: Apply the color scheme to your component
MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init];
[MDCActionSheetTypographyThemer applyTypographyScheme:self.typographyScheme
toActionSheetController:actionSheet];
```
<!--</div>-->

0 comments on commit 255f6e9

Please sign in to comment.